text: (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{Z9WT:function(t,n,e){"use strict";e.r(n);var a=e("DUip"),o=e("Valr"),b=e("QJY3"),i=e("TYT/"),c=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-tutorial"]],decls:156,vars:0,consts:[[1,"text-center"],["href","https://www.creative-tim.com/","target","_blank"],["href","https://www.creative-tim.com/license?ref=license-page-md-pro-angular","target","_blank"],[1,"tim-row"],["href","https://nodejs.org/en","target","_blank"],[1,"prettyprint"],["href","http://localhost:4200/","target","_blank"],[1,"text-left"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2",0),i.Gc(2,"License"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," When you purchase an item from "),i.Ub(6,"a",1),i.Gc(7,"Creative Tim"),i.Tb(),i.Gc(8,", you are actually purchasing a license to use that item. All our free items are under MIT license. All our premium items are covered by our Personal and Developer licenses. In order to understand the rights and restrictions that come with your purchase, please read the details from our "),i.Ub(9,"a",2),i.Gc(10,"Official License Page"),i.Tb(),i.Gc(11,". "),i.Tb(),i.Tb(),i.Ub(12,"div"),i.Ub(13,"h2",0),i.Gc(14,"Short Description"),i.Tb(),i.Pb(15,"legend"),i.Ub(16,"p"),i.Ub(17,"b"),i.Gc(18,"Material Dashboard PRO Angular"),i.Tb(),i.Gc(19," is a Premium Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. It is based on the popular Bootstrap framework and comes packed with multiple third-party plugins. All components are built to fit perfectly with each other, while aligning to the material concepts. "),i.Tb(),i.Tb(),i.Ub(20,"div",3),i.Ub(21,"h2",0),i.Gc(22,"Getting Started"),i.Tb(),i.Pb(23,"legend"),i.Ub(24,"p"),i.Gc(25," The "),i.Ub(26,"b"),i.Gc(27,"Material Dashboard Pro"),i.Tb(),i.Gc(28," is built on top of Bootstrap 4, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 4 was changed, so you don't have to worry about undesired effects in your work. "),i.Tb(),i.Pb(29,"br"),i.Ub(30,"ul"),i.Ub(31,"li"),i.Gc(32,"Install NodeJs from "),i.Ub(33,"a",4),i.Gc(34,"NodeJs Official Page"),i.Tb(),i.Tb(),i.Ub(35,"li"),i.Gc(36,"Open Terminal"),i.Tb(),i.Ub(37,"li"),i.Gc(38,"Go to your file project"),i.Tb(),i.Ub(39,"li"),i.Gc(40,"Run in terminal:"),i.Ub(41,"pre",5),i.Gc(42,"npm install -g @angular/cli"),i.Tb(),i.Tb(),i.Ub(43,"li"),i.Gc(44,"Then:"),i.Ub(45,"pre",5),i.Gc(46,"npm install"),i.Tb(),i.Tb(),i.Ub(47,"li"),i.Gc(48,"And: "),i.Ub(49,"pre",5),i.Gc(50,"ng serve"),i.Tb(),i.Tb(),i.Ub(51,"li"),i.Gc(52,"Navigate to: "),i.Ub(53,"a",6),i.Gc(54,"http://localhost:4200/"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(55,"div",3),i.Ub(56,"h2",7),i.Gc(57,"File Structure"),i.Tb(),i.Pb(58,"legend"),i.Ub(59,"p"),i.Gc(60," Once you have downloaded the archive and opened it, you will find the following structure: "),i.Tb(),i.Ub(61,"pre",5),i.Gc(62,"material-dashboard-pro-angular\n\u251c\u2500\u2500 CHANGELOG.md\n\u251c\u2500\u2500 ISSUE_TEMPLATE.md\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 angular.json\n\u251c\u2500\u2500 documentation\n\u2502\xa0\xa0 \u251c\u2500\u2500 css\n\u2502\xa0\xa0 \u2514\u2500\u2500 tutorial-components.html\n\u251c\u2500\u2500 e2e\n\u251c\u2500\u2500 karma.conf.js\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 protractor.conf.js\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 app\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 calendar\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 calendar.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 calendar.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 calendar.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 calendar.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 charts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 charts.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 charts.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 charts.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 charts.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 components\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 buttons\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 buttons.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 buttons.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 components.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 components.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 grid\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 grid.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 grid.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 icons\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 icons.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 icons.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 notifications\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 notifications.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 notifications.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 panels\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 panels.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 panels.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 sweetalert\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 sweetalert.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 sweetalert.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 typography\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 typography.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 typography.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 dashboard\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 dashboard.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 dashboard.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 dashboard.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 dashboard.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 forms\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 extendedforms\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 extendedforms.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 extendedforms.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 forms.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 forms.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 regularforms\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 regularforms.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 regularforms.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 validationforms\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 field-error-display\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 field-error-display.component.css\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 field-error-display.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 field-error-display.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 password-validator.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 validationforms.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 validationforms.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 wizard\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 wizard.component.css\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 wizard.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 wizard.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 layouts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 admin\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 admin-layout.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 admin-layout.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 auth\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 auth-layout.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 auth-layout.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 main.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 maps\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fullscreenmap\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fullscreenmap.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 fullscreenmap.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 googlemaps\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 googlemaps.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 googlemaps.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 maps.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 maps.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 vectormaps\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 vectormaps.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 vectormaps.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md-chart\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md-chart.component.css\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md-chart.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md-chart.component.spec.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 md-chart.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md-table\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 md-table.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 md-table.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 md.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 pages\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 lock\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 lock.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 lock.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 login\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 login.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 login.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 pages.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 pages.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 pricing\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 pricing.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 pricing.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 register\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 register.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 register.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 shared\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fixedplugin\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fixedplugin.component.css\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fixedplugin.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fixedplugin.component.spec.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 fixedplugin.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 fixedplugin.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 footer\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 footer.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 footer.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 footer.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 navbar\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 navbar.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 navbar.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 navbar.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 sidebar\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 sidebar.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 sidebar.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 sidebar.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 tables\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 datatable.net\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 datatable.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 datatable.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 extendedtable\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 extendedtable.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 extendedtable.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 regulartable\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 regulartable.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 regulartable.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 tables.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 tables.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 timeline\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 timeline.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 timeline.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 timeline.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 timeline.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 userpage\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 user.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 user.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 user.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 user.routing.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 widgets\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 widgets.component.html\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 widgets.component.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 widgets.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 widgets.routing.ts\n\u2502\xa0\xa0 \u251c\u2500\u2500 assets\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 img\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 scss\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 core\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 dashboard\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u251c\u2500\u2500 plugins\n\u2502\xa0\xa0 \u2502\xa0\xa0     \u2514\u2500\u2500 material-dashboard.scss\n\u2502\xa0\xa0 \u251c\u2500\u2500 environments\n\u2502\xa0\xa0 \u251c\u2500\u2500 favicon.ico\n\u2502\xa0\xa0 \u251c\u2500\u2500 index.html\n\u2502\xa0\xa0 \u251c\u2500\u2500 main.ts\n\u2502\xa0\xa0 \u251c\u2500\u2500 polyfills.ts\n\u2502\xa0\xa0 \u251c\u2500\u2500 styles.css\n\u2502\xa0\xa0 \u251c\u2500\u2500 test.ts\n\u2502\xa0\xa0 \u251c\u2500\u2500 tsconfig.app.json\n\u2502\xa0\xa0 \u251c\u2500\u2500 tsconfig.spec.json\n\u2502\xa0\xa0 \u2514\u2500\u2500 typings.d.ts\n\u251c\u2500\u2500 tsconfig.json\n\u251c\u2500\u2500 tslint.json\n\u251c\u2500\u2500 typings\n\u2514\u2500\u2500 typings.json"),i.Tb(),i.Tb(),i.Ub(63,"div",3),i.Ub(64,"h2",7),i.Gc(65,"Restyled Components"),i.Tb(),i.Pb(66,"legend"),i.Gc(67," Here is the list of Bootstrap 4 components that were restyled in "),i.Ub(68,"b"),i.Gc(69,"Material Dashboard Pro Angular"),i.Tb(),i.Gc(70,": "),i.Ub(71,"ul"),i.Ub(72,"li"),i.Gc(73," Buttons "),i.Tb(),i.Ub(74,"li"),i.Gc(75," Inputs"),i.Tb(),i.Ub(76,"li"),i.Gc(77," Textarea"),i.Tb(),i.Ub(78,"li"),i.Gc(79," Menu "),i.Tb(),i.Ub(80,"li"),i.Gc(81," Dropdown"),i.Tb(),i.Ub(82,"li"),i.Gc(83," Navigation Menu"),i.Tb(),i.Ub(84,"li"),i.Gc(85," Labels"),i.Tb(),i.Ub(86,"li"),i.Gc(87," Notifications"),i.Tb(),i.Ub(88,"li"),i.Gc(89," Typography"),i.Tb(),i.Ub(90,"li"),i.Gc(91," Tables"),i.Tb(),i.Ub(92,"li"),i.Gc(93," Collapse "),i.Tb(),i.Ub(94,"li"),i.Gc(95," Dropdown "),i.Tb(),i.Ub(96,"li"),i.Gc(97," Pagination "),i.Tb(),i.Ub(98,"li"),i.Gc(99," Progress Bars "),i.Tb(),i.Ub(100,"li"),i.Gc(101," Select "),i.Tb(),i.Ub(102,"li"),i.Gc(103," Tables "),i.Tb(),i.Ub(104,"li"),i.Gc(105," Textarea "),i.Tb(),i.Ub(106,"li"),i.Gc(107," Tooltips "),i.Tb(),i.Ub(108,"li"),i.Gc(109," Typography "),i.Tb(),i.Tb(),i.Tb(),i.Ub(110,"div",3),i.Ub(111,"h2",7),i.Gc(112,"New Components"),i.Tb(),i.Pb(113,"legend"),i.Ub(114,"p"),i.Gc(115," Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous. "),i.Tb(),i.Gc(116," Going through them, we added: "),i.Ub(117,"ul"),i.Ub(118,"li"),i.Gc(119," Checkboxes"),i.Tb(),i.Ub(120,"li"),i.Gc(121," Radio Buttons"),i.Tb(),i.Ub(122,"li"),i.Gc(123," Toggle Buttons "),i.Tb(),i.Ub(124,"li"),i.Gc(125," Card Stats"),i.Tb(),i.Ub(126,"li"),i.Gc(127," Tags "),i.Tb(),i.Ub(128,"li"),i.Gc(129," Card Charts"),i.Tb(),i.Ub(130,"li"),i.Gc(131," Card with tabs"),i.Tb(),i.Ub(132,"li"),i.Gc(133," Material Icons"),i.Tb(),i.Ub(134,"li"),i.Gc(135," Google Maps "),i.Tb(),i.Ub(136,"li"),i.Gc(137," jVector Maps "),i.Tb(),i.Ub(138,"li"),i.Gc(139," jQuery Validations "),i.Tb(),i.Ub(140,"li"),i.Gc(141," DataTables "),i.Tb(),i.Ub(142,"li"),i.Gc(143," DateTimePicker "),i.Tb(),i.Ub(144,"li"),i.Gc(145," Maps "),i.Tb(),i.Ub(146,"li"),i.Gc(147," Panels "),i.Tb(),i.Ub(148,"li"),i.Gc(149," Sliders "),i.Tb(),i.Ub(150,"li"),i.Gc(151," Sweet Alert "),i.Tb(),i.Ub(152,"li"),i.Gc(153," Switches "),i.Tb(),i.Ub(154,"li"),i.Gc(155," Wizard "),i.Tb(),i.Tb(),i.Tb())},styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}"]}),t}(),r=e("eHTH"),s=e("cSbt"),l=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-inputs"]],decls:27,vars:0,consts:[[1,"row"],[1,"col-sm-4"],[1,"form-group"],["type","text","value","","placeholder","Regular",1,"form-control"],[1,"example-full-width"],["matInput","","type","text","placeholder","With Floating Label"],[1,"example-full-width","has-success"],["matInput","","type","text","placeholder","Success input"],[1,"form-control-feedback"],[1,"material-icons"],[1,"example-full-width","has-danger"],["matInput","","type","text","placeholder","Error input"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Inputs "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," We restyled the Bootstrap inputs to give them a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups. "),i.Tb(),i.Ub(6,"div",0),i.Ub(7,"div",1),i.Ub(8,"div",2),i.Pb(9,"input",3),i.Tb(),i.Tb(),i.Ub(10,"div",1),i.Ub(11,"mat-form-field",4),i.Pb(12,"input",5),i.Tb(),i.Tb(),i.Ub(13,"div",1),i.Ub(14,"mat-form-field",6),i.Pb(15,"input",7),i.Ub(16,"span",8),i.Ub(17,"i",9),i.Gc(18,"done"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(19,"div",1),i.Ub(20,"mat-form-field",10),i.Pb(21,"input",11),i.Ub(22,"span",8),i.Ub(23,"i",9),i.Gc(24,"clear"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(25,"pre",12),i.Gc(26,'<div class="row">\n  <div class="col-sm-4">\n      <div class="form-group">\n          <input type="text" value="" placeholder="Regular" class="form-control" />\n      </div>\n  </div>\n  <div class="col-sm-4">\n    <mat-form-field class="example-full-width">\n      <input matInput type="text" placeholder="With Floating Label">\n    </mat-form-field>\n  </div>\n  <div class="col-sm-4">\n    <mat-form-field class="example-full-width has-success">\n      <input matInput type="text" placeholder="Success input">\n      <span class="form-control-feedback">\n        <i class="material-icons">done</i>\n      </span>\n    </mat-form-field>\n  </div>\n  <div class="col-sm-4">\n    <mat-form-field class="example-full-width has-danger">\n      <input matInput type="text" placeholder="Error input">\n      <span class="form-control-feedback">\n        <i class="material-icons">clear</i>\n      </span>\n    </mat-form-field>\n  </div>\n</div>\n'),i.Tb(),i.Tb())},directives:[r.b,s.b],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),d=e("zRhN"),p=function(){function t(){this.regularItems=["Pizza","Pasta","Parmesan"]}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-tags"]],decls:12,vars:1,consts:[["href","https://github.com/Gbuomprisco/ngx-chips"],["theme","filled-theme",3,"ngModel","ngModelChange"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Tags "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"For more informations, please check this"),i.Ub(6,"a",0),i.Gc(7," link"),i.Tb(),i.Gc(8,"."),i.Tb(),i.Ub(9,"tag-input",1),i.cc("ngModelChange",(function(t){return n.regularItems=t})),i.Tb(),i.Ub(10,"pre",2),i.Gc(11,"<tag-input [(ngModel)]='regularItems' theme='filled-theme'></tag-input>\n"),i.Tb(),i.Tb()),2&t&&(i.Cb(9),i.nc("ngModel",n.regularItems))},directives:[d.a,b.o,b.r],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),u=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-navigation"]],decls:272,vars:0,consts:[["id","navbar"],[1,"navbar","navbar-expand-lg","navbar-light","bg-primary"],[1,"container"],["href","#",1,"navbar-brand"],["type","button","data-toggle","collapse","data-target","#navbarNav","aria-controls","navbarNav","aria-expanded","false","aria-label","Toggle navigation",1,"navbar-toggler"],[1,"navbar-toggler-icon"],["id","navbarNav",1,"collapse","navbar-collapse"],[1,"navbar-nav"],[1,"nav-item","active"],["href","#",1,"nav-link"],[1,"sr-only"],[1,"nav-item"],["href","#",1,"nav-link","disabled"],[1,"prettyprint"],[1,"space-top"],["id","navbar-default"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-dark"],["type","button","data-toggle","collapse","data-target","#navbarColor01","aria-controls","navbarColor01","aria-expanded","false","aria-label","Toggle navigation",1,"navbar-toggler"],["id","navbarColor01",1,"collapse","navbar-collapse"],[1,"navbar-nav","mr-auto"],[1,"form-inline","ml-auto"],[1,"form-group","has-white","bmd-form-group"],["type","text","placeholder","Search",1,"form-control"],["type","submit",1,"btn","btn-white","btn-raised","btn-fab","btn-fab-mini","btn-round"],[1,"material-icons"],["id","navbar-info"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-info"],["id","navbar-success"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-success"],["id","navbar-warning"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-warning"],["id","navbar-danger"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-danger"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-rose"],[1,"navbar","navbar-expand-lg","navbar-dark","bg-primary"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Navbar "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"The classic Bootstrap Navbar was restyled:"),i.Tb(),i.Ub(6,"div",0),i.Ub(7,"nav",1),i.Ub(8,"div",2),i.Ub(9,"a",3),i.Gc(10,"Navbar"),i.Tb(),i.Ub(11,"button",4),i.Pb(12,"span",5),i.Tb(),i.Ub(13,"div",6),i.Ub(14,"ul",7),i.Ub(15,"li",8),i.Ub(16,"a",9),i.Gc(17,"Home "),i.Ub(18,"span",10),i.Gc(19,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(20,"li",11),i.Ub(21,"a",9),i.Gc(22,"Features"),i.Tb(),i.Tb(),i.Ub(23,"li",11),i.Ub(24,"a",9),i.Gc(25,"Pricing"),i.Tb(),i.Tb(),i.Ub(26,"li",11),i.Ub(27,"a",12),i.Gc(28,"Disabled"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(29,"pre",13),i.Gc(30,'<nav class="navbar navbar-expand-lg navbar-light bg-primary">\n  <div class="container">\n    <a class="navbar-brand" href="#">Navbar</a>\n    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">\n      <span class="navbar-toggler-icon"></span>\n    </button>\n    <div class="collapse navbar-collapse" id="navbarNav">\n      <ul class="navbar-nav">\n        <li class="nav-item active">\n          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>\n        </li>\n        <li class="nav-item">\n          <a class="nav-link" href="#">Features</a>\n        </li>\n        <li class="nav-item">\n          <a class="nav-link" href="#">Pricing</a>\n        </li>\n        <li class="nav-item">\n          <a class="nav-link disabled" href="#">Disabled</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</nav>\n'),i.Tb(),i.Ub(31,"p",14),i.Gc(32,"Besides the default navbar, we added 5 new colors: primary, blue, green, orange, red, rose, black. If you want to use one of them, you have to replace the "),i.Ub(33,"code"),i.Gc(34,".bg-default"),i.Tb(),i.Gc(35," or "),i.Ub(36,"code"),i.Gc(37,".bg-primary"),i.Tb(),i.Gc(38," with the class for the chosen colour "),i.Ub(39,"code"),i.Gc(40,".bg-info"),i.Tb(),i.Gc(41,", "),i.Ub(42,"code"),i.Gc(43,".bg-success"),i.Tb(),i.Gc(44,", "),i.Ub(45,"code"),i.Gc(46,".bg-dark"),i.Tb(),i.Gc(47,", "),i.Ub(48,"code"),i.Gc(49,".bg-rose"),i.Tb(),i.Gc(50,", "),i.Ub(51,"code"),i.Gc(52,".bg-warning"),i.Tb(),i.Gc(53," or "),i.Ub(54,"code"),i.Gc(55,".bg-danger"),i.Tb(),i.Gc(56,"."),i.Tb(),i.Ub(57,"div",15),i.Ub(58,"nav",16),i.Ub(59,"div",2),i.Ub(60,"a",3),i.Gc(61,"Navbar"),i.Tb(),i.Ub(62,"button",17),i.Pb(63,"span",5),i.Tb(),i.Ub(64,"div",18),i.Ub(65,"ul",19),i.Ub(66,"li",8),i.Ub(67,"a",9),i.Gc(68,"Home "),i.Ub(69,"span",10),i.Gc(70,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(71,"li",11),i.Ub(72,"a",9),i.Gc(73,"Features"),i.Tb(),i.Tb(),i.Ub(74,"li",11),i.Ub(75,"a",9),i.Gc(76,"Pricing"),i.Tb(),i.Tb(),i.Ub(77,"li",11),i.Ub(78,"a",9),i.Gc(79,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(80,"form",20),i.Ub(81,"div",21),i.Pb(82,"input",22),i.Tb(),i.Ub(83,"button",23),i.Ub(84,"i",24),i.Gc(85,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(86,"div",25),i.Ub(87,"nav",26),i.Ub(88,"div",2),i.Ub(89,"a",3),i.Gc(90,"Navbar"),i.Tb(),i.Ub(91,"button",17),i.Pb(92,"span",5),i.Tb(),i.Ub(93,"div",18),i.Ub(94,"ul",19),i.Ub(95,"li",8),i.Ub(96,"a",9),i.Gc(97,"Home "),i.Ub(98,"span",10),i.Gc(99,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(100,"li",11),i.Ub(101,"a",9),i.Gc(102,"Features"),i.Tb(),i.Tb(),i.Ub(103,"li",11),i.Ub(104,"a",9),i.Gc(105,"Pricing"),i.Tb(),i.Tb(),i.Ub(106,"li",11),i.Ub(107,"a",9),i.Gc(108,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(109,"form",20),i.Ub(110,"div",21),i.Pb(111,"input",22),i.Tb(),i.Ub(112,"button",23),i.Ub(113,"i",24),i.Gc(114,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(115,"div",27),i.Ub(116,"nav",28),i.Ub(117,"div",2),i.Ub(118,"a",3),i.Gc(119,"Navbar"),i.Tb(),i.Ub(120,"button",17),i.Pb(121,"span",5),i.Tb(),i.Ub(122,"div",18),i.Ub(123,"ul",19),i.Ub(124,"li",8),i.Ub(125,"a",9),i.Gc(126,"Home "),i.Ub(127,"span",10),i.Gc(128,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(129,"li",11),i.Ub(130,"a",9),i.Gc(131,"Features"),i.Tb(),i.Tb(),i.Ub(132,"li",11),i.Ub(133,"a",9),i.Gc(134,"Pricing"),i.Tb(),i.Tb(),i.Ub(135,"li",11),i.Ub(136,"a",9),i.Gc(137,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(138,"form",20),i.Ub(139,"div",21),i.Pb(140,"input",22),i.Tb(),i.Ub(141,"button",23),i.Ub(142,"i",24),i.Gc(143,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(144,"div",29),i.Ub(145,"nav",30),i.Ub(146,"div",2),i.Ub(147,"a",3),i.Gc(148,"Navbar"),i.Tb(),i.Ub(149,"button",17),i.Pb(150,"span",5),i.Tb(),i.Ub(151,"div",18),i.Ub(152,"ul",19),i.Ub(153,"li",8),i.Ub(154,"a",9),i.Gc(155,"Home "),i.Ub(156,"span",10),i.Gc(157,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(158,"li",11),i.Ub(159,"a",9),i.Gc(160,"Features"),i.Tb(),i.Tb(),i.Ub(161,"li",11),i.Ub(162,"a",9),i.Gc(163,"Pricing"),i.Tb(),i.Tb(),i.Ub(164,"li",11),i.Ub(165,"a",9),i.Gc(166,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(167,"form",20),i.Ub(168,"div",21),i.Pb(169,"input",22),i.Tb(),i.Ub(170,"button",23),i.Ub(171,"i",24),i.Gc(172,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(173,"div",31),i.Ub(174,"nav",32),i.Ub(175,"div",2),i.Ub(176,"a",3),i.Gc(177,"Navbar"),i.Tb(),i.Ub(178,"button",17),i.Pb(179,"span",5),i.Tb(),i.Ub(180,"div",18),i.Ub(181,"ul",19),i.Ub(182,"li",8),i.Ub(183,"a",9),i.Gc(184,"Home "),i.Ub(185,"span",10),i.Gc(186,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(187,"li",11),i.Ub(188,"a",9),i.Gc(189,"Features"),i.Tb(),i.Tb(),i.Ub(190,"li",11),i.Ub(191,"a",9),i.Gc(192,"Pricing"),i.Tb(),i.Tb(),i.Ub(193,"li",11),i.Ub(194,"a",9),i.Gc(195,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(196,"form",20),i.Ub(197,"div",21),i.Pb(198,"input",22),i.Tb(),i.Ub(199,"button",23),i.Ub(200,"i",24),i.Gc(201,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(202,"div"),i.Ub(203,"nav",33),i.Ub(204,"div",2),i.Ub(205,"a",3),i.Gc(206,"Navbar"),i.Tb(),i.Ub(207,"button",17),i.Pb(208,"span",5),i.Tb(),i.Ub(209,"div",18),i.Ub(210,"ul",19),i.Ub(211,"li",8),i.Ub(212,"a",9),i.Gc(213,"Home "),i.Ub(214,"span",10),i.Gc(215,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(216,"li",11),i.Ub(217,"a",9),i.Gc(218,"Features"),i.Tb(),i.Tb(),i.Ub(219,"li",11),i.Ub(220,"a",9),i.Gc(221,"Pricing"),i.Tb(),i.Tb(),i.Ub(222,"li",11),i.Ub(223,"a",9),i.Gc(224,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(225,"form",20),i.Ub(226,"div",21),i.Pb(227,"input",22),i.Tb(),i.Ub(228,"button",23),i.Ub(229,"i",24),i.Gc(230,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(231,"div"),i.Ub(232,"nav",34),i.Ub(233,"div",2),i.Ub(234,"a",3),i.Gc(235,"Navbar"),i.Tb(),i.Ub(236,"button",17),i.Pb(237,"span",5),i.Tb(),i.Ub(238,"div",18),i.Ub(239,"ul",19),i.Ub(240,"li",8),i.Ub(241,"a",9),i.Gc(242,"Home "),i.Ub(243,"span",10),i.Gc(244,"(current)"),i.Tb(),i.Tb(),i.Tb(),i.Ub(245,"li",11),i.Ub(246,"a",9),i.Gc(247,"Features"),i.Tb(),i.Tb(),i.Ub(248,"li",11),i.Ub(249,"a",9),i.Gc(250,"Pricing"),i.Tb(),i.Tb(),i.Ub(251,"li",11),i.Ub(252,"a",9),i.Gc(253,"About"),i.Tb(),i.Tb(),i.Tb(),i.Ub(254,"form",20),i.Ub(255,"div",21),i.Pb(256,"input",22),i.Tb(),i.Ub(257,"button",23),i.Ub(258,"i",24),i.Gc(259,"search"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(260,"p",14),i.Gc(261," Besides all this customisation, we have an extra navbar. "),i.Ub(262,"code"),i.Gc(263,".navbar-transparent"),i.Tb(),i.Gc(264," is a special class that you can to use if you want the navbar to be transparent. "),i.Tb(),i.Ub(265,"p",14),i.Ub(266,"b"),i.Gc(267,"Navbar Fixed:"),i.Tb(),i.Gc(268," Add the class "),i.Ub(269,"code"),i.Gc(270,"fixed-top"),i.Tb(),i.Gc(271," on navbar. "),i.Tb(),i.Tb())},directives:[b.w,b.p,b.q],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),m=e("p+mS"),g=e("2J1J");function h(t,n){if(1&t&&(i.Ub(0,"tr"),i.Ub(1,"td",2),i.Gc(2),i.Tb(),i.Ub(3,"td"),i.Gc(4),i.Tb(),i.Ub(5,"td"),i.Gc(6),i.Tb(),i.Ub(7,"td"),i.Gc(8),i.Tb(),i.Ub(9,"td",3),i.Gc(10),i.Tb(),i.Ub(11,"td",15),i.Ub(12,"button",16),i.Ub(13,"i",14),i.Gc(14,"person"),i.Tb(),i.Tb(),i.Ub(15,"button",16),i.Ub(16,"i",14),i.Gc(17,"edit"),i.Tb(),i.Tb(),i.Ub(18,"button",16),i.Ub(19,"i",14),i.Gc(20,"close"),i.Tb(),i.Tb(),i.Tb(),i.Tb()),2&t){var e=n.$implicit;i.Cb(2),i.Hc(e[0]),i.Cb(2),i.Hc(e[1]),i.Cb(2),i.Hc(e[2]),i.Cb(2),i.Hc(e[3]),i.Cb(2),i.Ic("\u20ac ",e[4],""),i.Cb(2),i.Eb("btn btn-info ",e[5],""),i.Cb(3),i.Eb("btn btn-success ",e[5],""),i.Cb(3),i.Eb("btn btn-danger ",e[5],"")}}function T(t,n){if(1&t&&(i.Ub(0,"tr"),i.Ub(1,"td"),i.Ub(2,"div",17),i.Pb(3,"img",18),i.Tb(),i.Tb(),i.Ub(4,"td",19),i.Ub(5,"a",20),i.Gc(6),i.Tb(),i.Pb(7,"br"),i.Ub(8,"small"),i.Gc(9),i.Tb(),i.Tb(),i.Ub(10,"td"),i.Gc(11),i.Tb(),i.Ub(12,"td"),i.Gc(13),i.Tb(),i.Ub(14,"td",21),i.Ub(15,"small"),i.Gc(16,"\u20ac"),i.Tb(),i.Gc(17),i.Tb(),i.Ub(18,"td",22),i.Gc(19),i.Ub(20,"div",23),i.Ub(21,"button",24),i.Ub(22,"i",14),i.Gc(23,"remove"),i.Tb(),i.Tb(),i.Ub(24,"button",24),i.Ub(25,"i",14),i.Gc(26,"add"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(27,"td",22),i.Ub(28,"small"),i.Gc(29,"\u20ac"),i.Tb(),i.Gc(30),i.Tb(),i.Ub(31,"td",25),i.Ub(32,"button",26),i.Ub(33,"i",14),i.Gc(34,"close"),i.Tb(),i.Tb(),i.Tb(),i.Tb()),2&t){var e=n.$implicit;i.Cb(3),i.pc("src","./assets/img/",e[0],".jpg",i.Ac),i.Cb(2),i.oc("href",e[1],i.Ac),i.Cb(1),i.Hc(e[2]),i.Cb(3),i.Hc(e[3]),i.Cb(2),i.Hc(e[4]),i.Cb(2),i.Ic(" ",e[5]," "),i.Cb(4),i.Ic(" ",e[6],""),i.Cb(2),i.Ic(" ",e[7]," "),i.Cb(11),i.Ic("",e[8]," "),i.Cb(2),i.nc("matTooltipPosition","left")}}var f=function(){function t(){}return t.prototype.ngOnInit=function(){this.tableData1={headerRow:["#","Name","Job Position","Since","Salary","Actions"],dataRows:[["1","Andrew Mike","Develop","2013","99,225",""],["2","John Doe","Design","2012","89,241","btn-round"],["3","Alex Mike","Design","2010","92,144","btn-link"],["4","Mike Monday","Marketing","2013","49,990","btn-round"],["5","Paul Dickens","Communication","2015","69,201",""]]},this.tableData3={headerRow:["","PRODUCT","COLOR","SIZE","PRICE","QTY","AMOUNT"],dataRows:[["product1","#jacket","Spring Jacket","by Dolce&Gabbana","Red","M","549","1","549"],["product2","#pants","Short Pants","by Pucci","Purple","M","499","2","998"],["product3","#nothing","Pencil Skirt","by Valentino","White","XL","799","1","799"]]}},t.prototype.getTotal=function(){for(var t=0,n=0;n<this.tableData3.dataRows.length;n++)t+=parseInt(this.tableData3.dataRows[n][8],10);return t},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-tables"]],decls:70,vars:141,consts:[[1,"table-responsive"],[1,"table"],[1,"text-center"],[1,"text-right"],[4,"ngFor","ngForOf"],[1,"prettyprint"],[1,"table","table-shopping"],[1,"th-description"],["colspan","5"],[1,"td-total"],["colspan","1",1,"td-price"],["colspan","6"],["colspan","2",1,"text-right"],["mat-raised-button","","type","button",1,"btn","btn-info","btn-round"],[1,"material-icons"],[1,"td-actions","text-right"],["type","button","rel","tooltip"],[1,"img-container"],["alt","...",3,"src"],[1,"td-name"],[3,"href"],[1,"td-number","text-right"],[1,"td-number"],[1,"btn-group","btn-group-sm"],["mat-raised-button","",1,"btn","btn-round","btn-info","btn-xs"],[1,"td-actions"],["mat-button","","type","button","matTooltip","Remove item",1,"btn","btn-link",3,"matTooltipPosition"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Tables "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added tables that have actions and table with switches. We have also created the Big Boy table, that can be used for content management systems or in the checkout process of an ecommerce. It offers extended functionality, like adding pictures, descriptions and actions. "),i.Pb(6,"br"),i.Gc(7," You can see coded examples below: "),i.Tb(),i.Ub(8,"h4"),i.Gc(9,"Simple Table with Actions"),i.Tb(),i.Ub(10,"div",0),i.Ub(11,"table",1),i.Ub(12,"thead"),i.Ub(13,"tr"),i.Ub(14,"th",2),i.Gc(15),i.Tb(),i.Ub(16,"th"),i.Gc(17),i.Tb(),i.Ub(18,"th"),i.Gc(19),i.Tb(),i.Ub(20,"th"),i.Gc(21),i.Tb(),i.Ub(22,"th",3),i.Gc(23),i.Tb(),i.Ub(24,"th",3),i.Gc(25),i.Tb(),i.Tb(),i.Tb(),i.Ub(26,"tbody"),i.Fc(27,h,21,14,"tr",4),i.Tb(),i.Tb(),i.Tb(),i.Ub(28,"pre",5),i.Gc(29),i.Tb(),i.Ub(30,"h4"),i.Gc(31,"Shopping Cart Table"),i.Tb(),i.Ub(32,"div",0),i.Ub(33,"table",6),i.Ub(34,"thead"),i.Ub(35,"tr"),i.Ub(36,"th",2),i.Gc(37),i.Tb(),i.Ub(38,"th"),i.Gc(39),i.Tb(),i.Ub(40,"th",7),i.Gc(41),i.Tb(),i.Ub(42,"th",7),i.Gc(43),i.Tb(),i.Ub(44,"th",3),i.Gc(45),i.Tb(),i.Ub(46,"th",3),i.Gc(47),i.Tb(),i.Ub(48,"th",3),i.Gc(49),i.Tb(),i.Pb(50,"th"),i.Tb(),i.Tb(),i.Ub(51,"tbody"),i.Fc(52,T,35,10,"tr",4),i.Ub(53,"tr"),i.Pb(54,"td",8),i.Ub(55,"td",9),i.Gc(56," Total "),i.Tb(),i.Ub(57,"td",10),i.Gc(58),i.hc(59,"currency"),i.Tb(),i.Pb(60,"td"),i.Tb(),i.Ub(61,"tr"),i.Pb(62,"td",11),i.Ub(63,"td",12),i.Ub(64,"button",13),i.Gc(65,"Complete Purchase "),i.Ub(66,"i",14),i.Gc(67,"keyboard_arrow_right"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(68,"pre",5),i.Gc(69),i.Tb(),i.Tb()),2&t&&(i.Cb(15),i.Hc(n.tableData1.headerRow[0]),i.Cb(2),i.Hc(n.tableData1.headerRow[1]),i.Cb(2),i.Hc(n.tableData1.headerRow[2]),i.Cb(2),i.Hc(n.tableData1.headerRow[3]),i.Cb(2),i.Hc(n.tableData1.headerRow[4]),i.Cb(2),i.Hc(n.tableData1.headerRow[5]),i.Cb(2),i.nc("ngForOf",n.tableData1.dataRows),i.Cb(2),i.Mc(['    <div class="table-responsive">\n        <table class="table">\n                <thead>\n                    <tr>\n                      <th class="text-center">',"{","","{"," tableData1.headerRow[0] ","}","","}","</th>\n                      <th>","{","","{"," tableData1.headerRow[1] ","}","","}","</th>\n                      <th>","{","","{"," tableData1.headerRow[2] ","}","","}","</th>\n                      <th>","{","","{"," tableData1.headerRow[3] ","}","","}",'</th>\n                      <th class="text-right">',"{","","{"," tableData1.headerRow[4] }","}","","}",'</th>\n                      <th class="text-right">',"{","","{"," tableData1.headerRow[5] ","}","","}",'</th>\n                    </tr>\n                </thead>\n              <tbody>\n                  <tr *ngFor="let row of tableData1.dataRows">\n                      <td class="text-center">',"{","","{","row[0]","}","","}","</td>\n                      <td>","{","","{","row[1]","}","","}","</td>\n                      <td>","{","","{","row[2]","}","","}","</td>\n                      <td>","{","","{","row[3]","}","","}",'</td>\n                      <td class="text-right">&euro; ',"{","","{","row[4]","}","","}",'</td>\n                      <td class="td-actions text-right">\n                          <button type="button" rel="tooltip" class="btn btn-info ',"{","","{","row[5]","}","","}",'">\n                              <i class="material-icons">person</i>\n                          </button>\n                          <button type="button" rel="tooltip" class="btn btn-success ',"{","","{","row[5]","}","","}",'">\n                              <i class="material-icons">edit</i>\n                          </button>\n                          <button type="button" rel="tooltip" class="btn btn-danger ',"{","","{","row[5]","}","","}",'">\n                              <i class="material-icons">close</i>\n                          </button>\n                      </td>\n                  </tr>\n              </tbody>\n        </table>\n    </div>\n']),i.Cb(8),i.Hc(n.tableData3.headerRow[0]),i.Cb(2),i.Hc(n.tableData3.headerRow[1]),i.Cb(2),i.Hc(n.tableData3.headerRow[2]),i.Cb(2),i.Hc(n.tableData3.headerRow[3]),i.Cb(2),i.Hc(n.tableData3.headerRow[4]),i.Cb(2),i.Hc(n.tableData3.headerRow[5]),i.Cb(2),i.Hc(n.tableData3.headerRow[6]),i.Cb(3),i.nc("ngForOf",n.tableData3.dataRows),i.Cb(6),i.Ic(" ",i.kc(59,136,n.getTotal(),"EUR",!0,"1.2-2")," "),i.Cb(11),i.Mc(['    <div class="table-responsive">\n        <table class="table table-shopping">\n                <thead>\n                    <tr>\n                      <th class="text-center">',"{","","{"," tableData3.headerRow[0] ","}","","}","</th>\n                      <th>","{","","{",' tableData3.headerRow[1] }}</th>\n                      <th class="th-description">',"{","","{"," tableData3.headerRow[2] ","}","","}",'</th>\n                      <th class="th-description">',"{","","{"," tableData3.headerRow[3] ","}","","}",'</th>\n                      <th class="text-right">',"{","","{"," tableData3.headerRow[4] ","}","","}",'</th>\n                      <th class="text-right">',"{","","{"," tableData3.headerRow[5] ","}","","}",'</th>\n                      <th class="text-right">',"{","","{"," tableData3.headerRow[6] ","}","","}",'</th>\n                      <th></th>\n                    </tr>\n                </thead>\n              <tbody>\n                  <tr *ngFor="let row of tableData3.dataRows">\n                      <td>\n                          <div class="img-container">\n                              <img src="./assets/img/',"{","","{","row[0]","}","","}",'.jpg" alt="...">\n                          </div>\n                      </td>\n                      <td class="td-name">\n                          <a href="',"{","","{",'row[1]}}">',"{","","{","row[2]","}","","}","</a>\n                          <br />\n                          <small>","{","","{","row[3]","}","","}","</small>\n                      </td>\n                      <td>","{","","{","row[4]","}","","}","</td>\n                      <td>\n                          ","{","","{","row[5]","}","","}",'\n                      </td>\n                      <td class="td-number text-right"><small>&euro;</small> ',"{","","{","row[6]","}","","}",'</td>\n                      <td class="td-number">\n                          ',"{","","{","row[7]","}","","}",'\n                          <div class="btn-group">\n                              <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">remove</i> </button>\n                              <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">add</i> </button>\n                          </div>\n                      </td>\n                      <td class="td-number">\n                          <small>&euro;</small>',"{","","{","row[8]","}","","}",'\n                      </td>\n                      <td class="td-actions">\n                          <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">\n                              <i class="material-icons">close</i>\n                          </button>\n                      </td>\n                  </tr>\n                  <tr>\n                      <td colspan="5"></td>\n                      <td class="td-total">\n                          Total\n                      </td>\n                      <td colspan="1" class="td-price">\n                          ',"{","","{","getTotal()| currency:'EUR':true:'1.2-2'","}","","}",'\n                      </td>\n                      <td></td>\n                  </tr>\n                  <tr>\n                      <td colspan="6"></td>\n                      <td colspan="2" class="text-right">\n                          <button type="button" class="btn btn-info btn-round">Complete Purchase <i class="material-icons">keyboard_arrow_right</i></button>\n                      </td>\n                  </tr>\n              </tbody>\n        </table>\n    </div>\n']))},directives:[o.l,m.b,g.a],pipes:[o.d],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),v=function(){function t(){}return t.prototype.ngOnInit=function(){},t.prototype.showNotification=function(t,n){var e=Math.floor(6*Math.random()+1);$.notify({icon:"notifications",message:"Welcome to <b>Material Dashboard</b> - a beautiful dashboard for every web developer."},{type:["","info","success","warning","danger","rose","primary"][e],timer:3e3,placement:{from:t,align:n},template:'<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0} alert-with-icon" role="alert"><button mat-raised-button type="button" aria-hidden="true" class="close" data-notify="dismiss">  <i class="material-icons">close</i></button><i class="material-icons" data-notify="icon">notifications</i> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'})},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-notifications"]],decls:61,vars:8,consts:[["href","https://github.com/mouse0270/bootstrap-notify","target","_blank"],["mat-button","",1,"btn","btn-primary",3,"click"],[1,"prettyprint"],["data-notify","container",1,"alert","alert-info","alert-with-icon"],["data-notify","icon",1,"material-icons"],["mat-button","","type","button","data-dismiss","alert","aria-label","Close",1,"close"],[1,"material-icons"],["data-notify","message"],["data-notify","container",1,"alert","alert-success","alert-with-icon"],[1,"alert","alert-warning","alert-with-icon"],["data-notigy","message"],[1,"alert","alert-danger","alert-with-icon"]],template:function(t,n){1&t&&(i.Ub(0,"h2"),i.Gc(1," Bootstrap Notify "),i.Ub(2,"small"),i.Gc(3,"v3.1.3"),i.Tb(),i.Tb(),i.Pb(4,"legend"),i.Ub(5,"p"),i.Gc(6," The new Material Dashboard Pro notification are looking fresh and clean. They go great with the navbar. "),i.Pb(7,"br"),i.Pb(8,"br"),i.Gc(9," If you want to use add special animations for them, we integrated a third party plugin called Bootstrap Notify. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below. "),i.Pb(10,"br"),i.Pb(11,"br"),i.Gc(12," For more information please check "),i.Ub(13,"b"),i.Ub(14,"a",0),i.Gc(15,"Full Github Documentation"),i.Tb(),i.Tb(),i.Gc(16,"."),i.Tb(),i.Ub(17,"button",1),i.cc("click",(function(t){return n.showNotification("top","right")})),i.Gc(18,"Top Right Notification"),i.Tb(),i.Ub(19,"pre",2),i.Gc(20),i.Tb(),i.Ub(21,"div",3),i.Ub(22,"i",4),i.Gc(23,"add_alert"),i.Tb(),i.Ub(24,"button",5),i.Ub(25,"i",6),i.Gc(26,"close"),i.Tb(),i.Tb(),i.Ub(27,"span",7),i.Gc(28,"This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style."),i.Tb(),i.Tb(),i.Ub(29,"div",8),i.Ub(30,"i",4),i.Gc(31,"check"),i.Tb(),i.Ub(32,"button",5),i.Ub(33,"i",6),i.Gc(34,"close"),i.Tb(),i.Tb(),i.Ub(35,"span",7),i.Ub(36,"b"),i.Gc(37,"Success Alert:"),i.Tb(),i.Gc(38," Yuhuuu! You've got your $11.99 album from The Weeknd"),i.Tb(),i.Tb(),i.Ub(39,"div",9),i.Ub(40,"i",4),i.Gc(41,"warning"),i.Tb(),i.Ub(42,"button",5),i.Ub(43,"i",6),i.Gc(44,"close"),i.Tb(),i.Tb(),i.Ub(45,"span",10),i.Ub(46,"b"),i.Gc(47,"Warning Alert:"),i.Tb(),i.Gc(48,' Hey, it looks like you still have the "copyright \xa9 2015" in your footer. Please update it! '),i.Tb(),i.Tb(),i.Ub(49,"div",11),i.Ub(50,"i",4),i.Gc(51,"error_outline"),i.Tb(),i.Ub(52,"button",5),i.Ub(53,"i",6),i.Gc(54,"close"),i.Tb(),i.Tb(),i.Ub(55,"span",7),i.Ub(56,"b"),i.Gc(57,"Error Alert:"),i.Tb(),i.Gc(58," Damn man! You screwed up the server this time. You should find a good excuse for your Boss..."),i.Tb(),i.Tb(),i.Ub(59,"pre",2),i.Gc(60,'<div class="alert alert-info alert-with-icon" data-notify="container">\n    <i class="material-icons" data-notify="icon">add_alert</i>\n    <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">  <i class="material-icons">close</i></button>\n    <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don\'t have to worry about the style.</span>\n</div>\n<div class="alert alert-success alert-with-icon" data-notify="container">\n    <i class="material-icons" data-notify="icon">check</i>\n    <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">  <i class="material-icons">close</i></button>\n    <span data-notify="message">\n        <b>Success Alert:</b> Yuhuuu! You\'ve got your $11.99 album from The Weeknd</span>\n</div>\n<div class="alert alert-warning alert-with-icon">\n    <i class="material-icons" data-notify="icon">warning</i>\n    <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">  <i class="material-icons">close</i></button>\n    <span data-notigy="message">\n        <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy; 2015" in your footer. Please update it! </span>\n</div>\n<div class="alert alert-danger alert-with-icon">\n    <i class="material-icons" data-notify="icon">error_outline</i>\n    <button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">  <i class="material-icons">close</i></button>\n    <span data-notify="message">\n        <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...</span>\n</div>\n'),i.Tb()),2&t&&(i.Cb(20),i.Lc("\x3c!-- button to trigger the action --\x3e\n<button class=\"btn btn-default\" onclick=\"showNotification('top','right')\">Top Right Notification</button>\n\n\x3c!-- javascript --\x3e\n\nfunction showNotification(from, align)","{","\n\n$.notify(","{",'\nicon: "add_alert",\nmessage: "Welcome to <b>Material Dashboard Pro</b> - a beautiful dashboard for every web developer."\n\n',"}",",","{","\ntype: 'success',\ntimer: 4000,\nplacement: ","{","\nfrom: from,\nalign: align\n","}","\n","}",");\n","}","\n"))},directives:[m.b],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),U=e("PSD3"),G=e.n(U),y=function(){function t(){}return t.prototype.showSwal=function(t){"basic"===t&&(console.log("basic"),G()({title:"Here is a message!",buttonsStyling:!1,confirmButtonClass:"btn btn-success"}).catch(G.a.noop))},t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-sweet-alert"]],decls:19,vars:0,consts:[["href","https://twitter.com/t4t5","target","_blank"],["href","https://sweetalert2.github.io/","target","_blank"],["mat-raised-button","",1,"btn","btn-default","btn-fill",3,"click"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Sweet Alert "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colors for the plugin provided by "),i.Ub(6,"a",0),i.Gc(7,"Tristan Edwards"),i.Tb(),i.Gc(8,". If you want to see the full documentation, please check "),i.Ub(9,"a",1),i.Gc(10,"out this page"),i.Tb(),i.Gc(11,". "),i.Pb(12,"br"),i.Pb(13,"br"),i.Gc(14," If you want to see a basic coded example, here is one below. "),i.Tb(),i.Ub(15,"button",2),i.cc("click",(function(t){return n.showSwal("basic")})),i.Gc(16,"Try me!"),i.Tb(),i.Ub(17,"pre",3),i.Gc(18,'  <button mat-raised-button class="btn btn-default btn-fill" (click)="showSwal(\'basic\')">Try me!</button>\n'),i.Tb(),i.Tb())},directives:[m.b],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),P=e("tNiZ"),w=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-date-picker"]],decls:21,vars:2,consts:[["href","https://material.angular.io/components/datepicker/overview"],[1,"row"],[1,"col-md-4"],["matInput","","placeholder","Choose a date",3,"matDatepicker","click"],["matSuffix","",3,"for"],["picker",""],[1,"prettyprint"]],template:function(t,n){if(1&t){var e=i.Vb();i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"DateTimePicker "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"For more informations, please check "),i.Ub(6,"a",0),i.Gc(7,"Material Datepicker"),i.Tb(),i.Gc(8,"."),i.Pb(9,"br"),i.Pb(10,"br"),i.Gc(11," Here is a coded example: "),i.Tb(),i.Ub(12,"div",1),i.Ub(13,"div",2),i.Ub(14,"mat-form-field"),i.Ub(15,"input",3),i.cc("click",(function(t){return i.yc(e),i.vc(18).open()})),i.Tb(),i.Pb(16,"mat-datepicker-toggle",4),i.Pb(17,"mat-datepicker",null,5),i.Tb(),i.Tb(),i.Tb(),i.Ub(19,"pre",6),i.Gc(20,'<mat-form-field >\n  <input matInput [matDatepicker]="picker" placeholder="Choose a date" (click)="picker.open()">\n  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n'),i.Tb(),i.Tb()}if(2&t){var a=i.vc(18);i.Cb(15),i.nc("matDatepicker",a),i.Cb(1),i.nc("for",a)}},directives:[r.b,s.b,P.b,P.d,r.e,P.a],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}md-calendar[_ngcontent-%COMP%]{width:300px}"]}),t}(),C=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-buttons"]],decls:289,vars:0,consts:[["mat-raised-button","",1,"btn"],["mat-raised-button","",1,"btn","btn-primary"],["mat-raised-button","",1,"btn","btn-info"],["mat-raised-button","",1,"btn","btn-success"],["mat-raised-button","",1,"btn","btn-warning"],["mat-raised-button","",1,"btn","btn-danger"],["mat-raised-button","",1,"btn","btn-rose"],[1,"prettyprint"],["mat-raised-button","",1,"btn","btn-primary","btn-lg"],["mat-raised-button","",1,"btn","btn-primary","btn-sm"],["mat-raised-button","",1,"btn","btn-primary","btn-round"],[1,"material-icons"],["mat-raised-button","","mat-min-fab","",1,"btn","btn-primary","btn-just-icon","btn-round"],["mat-raised-button","",1,"btn","btn-primary","btn-simple"],["href","https://fortawesome.github.io/Font-Awesome/icons/","target","_blank"],["href","https://design.google.com/icons/","target","_blank"],[1,"row"],[1,"col-md-4","col-sm-5"],[1,"category"],["mat-raised-button","",1,"btn","btn-twitter"],[1,"fa","fa-twitter"],[1,"col-md-1","col-sm-1"],["mat-raised-button","",1,"btn","btn-just-icon","btn-twitter"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-twitter"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-twitter"],[1,"col-md-3","col-sm-4"],["mat-raised-button","",1,"btn","btn-link","btn-twitter"],["mat-raised-button","",1,"btn","btn-facebook"],[1,"fa","fa-facebook-square"],["mat-raised-button","",1,"btn","btn-just-icon","btn-facebook"],[1,"fa","fa-facebook"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-facebook"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-facebook"],["mat-raised-button","",1,"btn","btn-link","btn-facebook"],["mat-raised-button","",1,"btn","btn-google"],[1,"fa","fa-google-plus"],["mat-raised-button","",1,"btn","btn-just-icon","btn-google"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-google"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-google"],["mat-raised-button","",1,"btn","btn-link","btn-google"],["mat-raised-button","",1,"btn","btn-linkedin"],[1,"fa","fa-linkedin-square"],["mat-raised-button","",1,"btn","btn-just-icon","btn-linkedin"],[1,"fa","fa-linkedin"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-linkedin"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-linkedin"],["mat-raised-button","",1,"btn","btn-link","btn-linkedin"],["mat-raised-button","",1,"btn","btn-pinterest"],[1,"fa","fa-pinterest"],["mat-raised-button","",1,"btn","btn-just-icon","btn-pinterest"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-pinterest"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-pinterest"],["mat-raised-button","",1,"btn","btn-link","btn-pinterest"],["mat-raised-button","",1,"btn","btn-youtube"],[1,"fa","fa-youtube-play"],["mat-raised-button","",1,"btn","btn-just-icon","btn-youtube"],[1,"fa","fa-youtube"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-youtube"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-youtube"],["mat-raised-button","",1,"btn","btn-link","btn-youtube"],["mat-raised-button","",1,"btn","btn-tumblr"],[1,"fa","fa-tumblr-square"],["mat-raised-button","",1,"btn","btn-just-icon","btn-tumblr"],[1,"fa","fa-tumblr"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-tumblr"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-tumblr"],["mat-raised-button","",1,"btn","btn-link","btn-tumblr"],["mat-raised-button","",1,"btn","btn-github"],[1,"fa","fa-github"],["mat-raised-button","",1,"btn","btn-just-icon","btn-github"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-github"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-github"],["mat-raised-button","",1,"btn","btn-link","btn-github"],["mat-raised-button","",1,"btn","btn-behance"],[1,"fa","fa-behance-square"],["mat-raised-button","",1,"btn","btn-just-icon","btn-behance"],[1,"fa","fa-behance"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-behance"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-behance"],["mat-raised-button","",1,"btn","btn-link","btn-behance"],["mat-raised-button","",1,"btn","btn-dribbble"],[1,"fa","fa-dribbble"],["mat-raised-button","",1,"btn","btn-just-icon","btn-dribbble"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-dribbble"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-dribbble"],["mat-raised-button","",1,"btn","btn-link","btn-dribbble"],["mat-raised-button","",1,"btn","btn-reddit"],[1,"fa","fa-reddit"],["mat-raised-button","",1,"btn","btn-just-icon","btn-reddit"],["mat-raised-button","",1,"btn","btn-just-icon","btn-round","btn-reddit"],["mat-raised-button","",1,"btn","btn-just-icon","btn-link","btn-reddit"],["mat-raised-button","",1,"btn","btn-link","btn-reddit"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Buttons"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"h4"),i.Gc(5,"Colors"),i.Tb(),i.Ub(6,"p"),i.Gc(7,"We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette."),i.Tb(),i.Ub(8,"p"),i.Ub(9,"button",0),i.Gc(10,"Default"),i.Tb(),i.Ub(11,"button",1),i.Gc(12,"Primary"),i.Tb(),i.Ub(13,"button",2),i.Gc(14,"Info"),i.Tb(),i.Ub(15,"button",3),i.Gc(16,"Success"),i.Tb(),i.Ub(17,"button",4),i.Gc(18,"Warning"),i.Tb(),i.Ub(19,"button",5),i.Gc(20,"Danger"),i.Tb(),i.Ub(21,"button",6),i.Gc(22,"Rose"),i.Tb(),i.Tb(),i.Ub(23,"pre",7),i.Gc(24,'<button mat-raised-button class="btn btn-default">Default</button>\n<button mat-raised-button class="btn btn-primary">Primary</button>\n<button mat-raised-button class="btn btn-info">Info</button>\n<button mat-raised-button class="btn btn-success">Success</button>\n<button mat-raised-button class="btn btn-warning">Warning</button>\n<button mat-raised-button class="btn btn-danger">Danger</button>\n<button mat-raised-button class="btn btn-rose">Rose</button>\n'),i.Tb(),i.Ub(25,"h4"),i.Gc(26,"Sizes"),i.Tb(),i.Ub(27,"p"),i.Gc(28,"Buttons come in all needed sizes:"),i.Tb(),i.Ub(29,"p"),i.Ub(30,"button",8),i.Gc(31,"Large"),i.Tb(),i.Ub(32,"button",1),i.Gc(33,"Normal"),i.Tb(),i.Ub(34,"button",9),i.Gc(35,"Small"),i.Tb(),i.Tb(),i.Ub(36,"pre",7),i.Gc(37,'<button mat-raised-button class="btn btn-primary btn-lg">Large</button>\n<button mat-raised-button class="btn btn-primary">Normal</button>\n<button mat-raised-button class="btn btn-primary btn-sm">Small</button>\n'),i.Tb(),i.Ub(38,"h4"),i.Gc(39,"Styles"),i.Tb(),i.Ub(40,"p"),i.Gc(41,"We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or simple buttons. If you are using buttons that only have an icon inside of them, you can add "),i.Ub(42,"code"),i.Gc(43,".btn-just-icon"),i.Tb(),i.Gc(44," so the icon properly aligns. Let's see some examples: "),i.Tb(),i.Ub(45,"p"),i.Ub(46,"button",1),i.Gc(47,"Default"),i.Tb(),i.Ub(48,"button",10),i.Gc(49,"Round"),i.Tb(),i.Ub(50,"button",10),i.Ub(51,"i",11),i.Gc(52,"favorite"),i.Tb(),i.Gc(53," With Icon "),i.Tb(),i.Ub(54,"button",12),i.Ub(55,"i",11),i.Gc(56,"favorite"),i.Tb(),i.Tb(),i.Ub(57,"button",13),i.Gc(58,"Simple"),i.Tb(),i.Tb(),i.Ub(59,"pre",7),i.Gc(60,'<button mat-raised-button class="btn btn-primary ">Default</button>\n<button mat-raised-button class="btn btn-primary btn-round">Round</button>\n<button mat-raised-button class="btn btn-primary btn-round">\n<i class="material-icons">favorite</i> With Icon\n</button>\n<button mat-raised-button mat-min-fab class="btn btn-primary btn-just-icon btn-round">\n<i class="material-icons">favorite</i>\n</button>\n<button mat-raised-button class="btn btn-primary btn-simple">Default</button>\n'),i.Tb(),i.Ub(61,"p"),i.Gc(62," Button groups, toolbars, and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found "),i.Ub(63,"a",14),i.Gc(64,"here"),i.Tb(),i.Gc(65," and Material Design Icons that can be found "),i.Ub(66,"a",15),i.Gc(67," here"),i.Tb(),i.Gc(68,". "),i.Tb(),i.Pb(69,"br"),i.Ub(70,"h4"),i.Gc(71,"Social"),i.Tb(),i.Ub(72,"p"),i.Gc(73,"We have created special buttons for the main social networks. You can use the buttons with any styles, you just need to add the class "),i.Ub(74,"code"),i.Gc(75,".btn-[#social-network]"),i.Tb(),i.Gc(76," for the button to have the brand colour of the network. "),i.Tb(),i.Ub(77,"div",16),i.Ub(78,"div",17),i.Ub(79,"p",18),i.Gc(80,"Default"),i.Tb(),i.Ub(81,"button",19),i.Pb(82,"i",20),i.Gc(83," Connect with Twitter "),i.Tb(),i.Tb(),i.Ub(84,"div",21),i.Ub(85,"p",18),i.Gc(86,"\xa0"),i.Tb(),i.Ub(87,"button",22),i.Pb(88,"i",20),i.Tb(),i.Tb(),i.Ub(89,"div",21),i.Ub(90,"p",18),i.Gc(91,"\xa0"),i.Tb(),i.Ub(92,"button",23),i.Pb(93,"i",20),i.Tb(),i.Tb(),i.Ub(94,"div",21),i.Ub(95,"p",18),i.Gc(96,"Neutral"),i.Tb(),i.Ub(97,"button",24),i.Pb(98,"i",20),i.Tb(),i.Tb(),i.Ub(99,"div",25),i.Ub(100,"p",18),i.Gc(101,"\xa0"),i.Tb(),i.Ub(102,"button",26),i.Pb(103,"i",20),i.Gc(104," Connect with Twitter "),i.Tb(),i.Tb(),i.Tb(),i.Ub(105,"div",16),i.Ub(106,"div",17),i.Ub(107,"button",27),i.Pb(108,"i",28),i.Gc(109," Share \xb7 2.2k "),i.Tb(),i.Tb(),i.Ub(110,"div",21),i.Ub(111,"button",29),i.Pb(112,"i",30),i.Tb(),i.Tb(),i.Ub(113,"div",21),i.Ub(114,"button",31),i.Pb(115,"i",30),i.Tb(),i.Tb(),i.Ub(116,"div",21),i.Ub(117,"button",32),i.Pb(118,"i",28),i.Tb(),i.Tb(),i.Ub(119,"div",25),i.Ub(120,"button",33),i.Pb(121,"i",28),i.Gc(122," Share \xb7 2.2k "),i.Tb(),i.Tb(),i.Tb(),i.Ub(123,"div",16),i.Ub(124,"div",17),i.Ub(125,"button",34),i.Pb(126,"i",35),i.Gc(127," Share on Google+ "),i.Tb(),i.Tb(),i.Ub(128,"div",21),i.Ub(129,"button",36),i.Pb(130,"i",35),i.Tb(),i.Tb(),i.Ub(131,"div",21),i.Ub(132,"button",37),i.Pb(133,"i",35),i.Tb(),i.Tb(),i.Ub(134,"div",21),i.Ub(135,"button",38),i.Pb(136,"i",35),i.Tb(),i.Tb(),i.Ub(137,"div",25),i.Ub(138,"button",39),i.Pb(139,"i",35),i.Gc(140," Share on Google+ "),i.Tb(),i.Tb(),i.Tb(),i.Ub(141,"div",16),i.Ub(142,"div",17),i.Ub(143,"button",40),i.Pb(144,"i",41),i.Gc(145," Connect with Linkedin "),i.Tb(),i.Tb(),i.Ub(146,"div",21),i.Ub(147,"button",42),i.Pb(148,"i",43),i.Tb(),i.Tb(),i.Ub(149,"div",21),i.Ub(150,"button",44),i.Pb(151,"i",43),i.Tb(),i.Tb(),i.Ub(152,"div",21),i.Ub(153,"button",45),i.Pb(154,"i",41),i.Tb(),i.Tb(),i.Ub(155,"div",25),i.Ub(156,"button",46),i.Pb(157,"i",41),i.Gc(158," Connect with Linkedin "),i.Tb(),i.Tb(),i.Tb(),i.Ub(159,"div",16),i.Ub(160,"div",17),i.Ub(161,"button",47),i.Pb(162,"i",48),i.Gc(163," Pint it \xb7 212 "),i.Tb(),i.Tb(),i.Ub(164,"div",21),i.Ub(165,"button",49),i.Pb(166,"i",48),i.Tb(),i.Tb(),i.Ub(167,"div",21),i.Ub(168,"button",50),i.Pb(169,"i",48),i.Tb(),i.Tb(),i.Ub(170,"div",21),i.Ub(171,"button",51),i.Pb(172,"i",48),i.Tb(),i.Tb(),i.Ub(173,"div",25),i.Ub(174,"button",52),i.Pb(175,"i",48),i.Gc(176," Pint it \xb7 212 "),i.Tb(),i.Tb(),i.Tb(),i.Ub(177,"div",16),i.Ub(178,"div",17),i.Ub(179,"button",53),i.Pb(180,"i",54),i.Gc(181," View on Youtube "),i.Tb(),i.Tb(),i.Ub(182,"div",21),i.Ub(183,"button",55),i.Pb(184,"i",56),i.Tb(),i.Tb(),i.Ub(185,"div",21),i.Ub(186,"button",57),i.Pb(187,"i",56),i.Tb(),i.Tb(),i.Ub(188,"div",21),i.Ub(189,"button",58),i.Pb(190,"i",56),i.Tb(),i.Tb(),i.Ub(191,"div",25),i.Ub(192,"button",59),i.Pb(193,"i",54),i.Gc(194," View on Youtube "),i.Tb(),i.Tb(),i.Tb(),i.Ub(195,"div",16),i.Ub(196,"div",17),i.Ub(197,"button",60),i.Pb(198,"i",61),i.Gc(199," Repost "),i.Tb(),i.Tb(),i.Ub(200,"div",21),i.Ub(201,"button",62),i.Pb(202,"i",63),i.Tb(),i.Tb(),i.Ub(203,"div",21),i.Ub(204,"button",64),i.Pb(205,"i",63),i.Tb(),i.Tb(),i.Ub(206,"div",21),i.Ub(207,"button",65),i.Pb(208,"i",61),i.Tb(),i.Tb(),i.Ub(209,"div",25),i.Ub(210,"button",66),i.Pb(211,"i",61),i.Gc(212," Repost "),i.Tb(),i.Tb(),i.Tb(),i.Ub(213,"div",16),i.Ub(214,"div",17),i.Ub(215,"button",67),i.Pb(216,"i",68),i.Gc(217," Connect with Github "),i.Tb(),i.Tb(),i.Ub(218,"div",21),i.Ub(219,"button",69),i.Pb(220,"i",68),i.Tb(),i.Tb(),i.Ub(221,"div",21),i.Ub(222,"button",70),i.Pb(223,"i",68),i.Tb(),i.Tb(),i.Ub(224,"div",21),i.Ub(225,"button",71),i.Pb(226,"i",68),i.Tb(),i.Tb(),i.Ub(227,"div",25),i.Ub(228,"button",72),i.Pb(229,"i",68),i.Gc(230," Connect with Github "),i.Tb(),i.Tb(),i.Tb(),i.Ub(231,"div",16),i.Ub(232,"div",17),i.Ub(233,"button",73),i.Pb(234,"i",74),i.Gc(235," Follow us "),i.Tb(),i.Tb(),i.Ub(236,"div",21),i.Ub(237,"button",75),i.Pb(238,"i",76),i.Tb(),i.Tb(),i.Ub(239,"div",21),i.Ub(240,"button",77),i.Pb(241,"i",76),i.Tb(),i.Tb(),i.Ub(242,"div",21),i.Ub(243,"button",78),i.Pb(244,"i",76),i.Tb(),i.Tb(),i.Ub(245,"div",25),i.Ub(246,"button",79),i.Pb(247,"i",74),i.Gc(248," Follow us "),i.Tb(),i.Tb(),i.Tb(),i.Ub(249,"div",16),i.Ub(250,"div",17),i.Ub(251,"button",80),i.Pb(252,"i",81),i.Gc(253," Find us on Dribble "),i.Tb(),i.Tb(),i.Ub(254,"div",21),i.Ub(255,"button",82),i.Pb(256,"i",81),i.Tb(),i.Tb(),i.Ub(257,"div",21),i.Ub(258,"button",83),i.Pb(259,"i",81),i.Tb(),i.Tb(),i.Ub(260,"div",21),i.Ub(261,"button",84),i.Pb(262,"i",81),i.Tb(),i.Tb(),i.Ub(263,"div",25),i.Ub(264,"button",85),i.Pb(265,"i",81),i.Gc(266," Find us on Dribble "),i.Tb(),i.Tb(),i.Tb(),i.Ub(267,"div",16),i.Ub(268,"div",17),i.Ub(269,"button",86),i.Pb(270,"i",87),i.Gc(271," Repost \xb7 232 "),i.Tb(),i.Tb(),i.Ub(272,"div",21),i.Ub(273,"button",88),i.Pb(274,"i",87),i.Tb(),i.Tb(),i.Ub(275,"div",21),i.Ub(276,"button",89),i.Pb(277,"i",87),i.Tb(),i.Tb(),i.Ub(278,"div",21),i.Ub(279,"button",90),i.Pb(280,"i",87),i.Tb(),i.Tb(),i.Ub(281,"div",25),i.Ub(282,"button",91),i.Pb(283,"i",87),i.Gc(284," Repost \xb7 232 "),i.Tb(),i.Tb(),i.Tb(),i.Pb(285,"br"),i.Pb(286,"br"),i.Ub(287,"pre",7),i.Gc(288,'<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <p class="category">Default</p>\n    <button mat-raised-button class="btn btn-twitter">\n      <i class="fa fa-twitter"></i> Connect with Twitter\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <p class="category">&nbsp;</p>\n    <button mat-raised-button class="btn btn-just-icon btn-twitter">\n      <i class="fa fa-twitter"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <p class="category">&nbsp;</p>\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-twitter">\n      <i class="fa fa-twitter"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <p class="category">Neutral</p>\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-twitter">\n      <i class="fa fa-twitter"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <p class="category">&nbsp;</p>\n    <button mat-raised-button class="btn btn-link btn-twitter">\n      <i class="fa fa-twitter"></i> Connect with Twitter\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-facebook">\n      <i class="fa fa-facebook-square"></i> Share \xb7 2.2k\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-facebook">\n      <i class="fa fa-facebook"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-facebook">\n      <i class="fa fa-facebook"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-facebook">\n      <i class="fa fa-facebook-square"> </i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-facebook">\n      <i class="fa fa-facebook-square"></i> Share \xb7 2.2k\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-google">\n      <i class="fa fa-google-plus"></i> Share on Google+\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-google">\n      <i class="fa fa-google-plus"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-google">\n      <i class="fa fa-google-plus"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-google">\n      <i class="fa fa-google-plus"> </i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-google">\n      <i class="fa fa-google-plus"></i> Share on Google+\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-linkedin">\n      <i class="fa fa-linkedin-square"></i> Connect with Linkedin\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-linkedin">\n      <i class="fa fa-linkedin"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-linkedin">\n      <i class="fa fa-linkedin"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-linkedin">\n      <i class="fa fa-linkedin-square"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-linkedin">\n      <i class="fa fa-linkedin-square"></i> Connect with Linkedin\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-pinterest">\n      <i class="fa fa-pinterest"></i> Pint it \xb7 212\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-pinterest">\n      <i class="fa fa-pinterest"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-pinterest">\n      <i class="fa fa-pinterest"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-pinterest">\n      <i class="fa fa-pinterest"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-pinterest">\n      <i class="fa fa-pinterest"></i> Pint it \xb7 212\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-youtube">\n      <i class="fa fa-youtube-play"></i> View on Youtube\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-youtube">\n      <i class="fa fa-youtube"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-youtube">\n      <i class="fa fa-youtube"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-youtube">\n      <i class="fa fa-youtube"> </i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-youtube">\n      <i class="fa fa-youtube-play"></i> View on Youtube\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-tumblr">\n      <i class="fa fa-tumblr-square"></i> Repost\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-tumblr">\n      <i class="fa fa-tumblr"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-tumblr">\n      <i class="fa fa-tumblr"> </i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-tumblr">\n      <i class="fa fa-tumblr-square"> </i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-tumblr">\n      <i class="fa fa-tumblr-square"></i> Repost\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-github">\n      <i class="fa fa-github"></i> Connect with Github\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-github">\n      <i class="fa fa-github"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-github">\n      <i class="fa fa-github"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-github">\n      <i class="fa fa-github"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-github">\n      <i class="fa fa-github"></i> Connect with Github\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-behance">\n      <i class="fa fa-behance-square"></i> Follow us\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-behance">\n      <i class="fa fa-behance"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-behance">\n      <i class="fa fa-behance"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-behance">\n      <i class="fa fa-behance"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-behance">\n      <i class="fa fa-behance-square"></i> Follow us\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-dribbble">\n      <i class="fa fa-dribbble"></i> Find us on Dribble\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-dribbble">\n      <i class="fa fa-dribbble"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-dribbble">\n      <i class="fa fa-dribbble"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-dribbble">\n      <i class="fa fa-dribbble"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-dribbble">\n      <i class="fa fa-dribbble"></i> Find us on Dribble\n    </button>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-4 col-sm-5">\n    <button mat-raised-button class="btn btn-reddit">\n      <i class="fa fa-reddit"></i> Repost \xb7 232\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-reddit">\n      <i class="fa fa-reddit"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-round btn-reddit">\n      <i class="fa fa-reddit"></i>\n    </button>\n  </div>\n  <div class="col-md-1 col-sm-1">\n    <button mat-raised-button class="btn btn-just-icon btn-link btn-reddit">\n      <i class="fa fa-reddit"></i>\n    </button>\n  </div>\n  <div class="col-md-3 col-sm-4">\n    <button mat-raised-button class="btn btn-link btn-reddit">\n      <i class="fa fa-reddit"></i> Repost \xb7 232\n    </button>\n  </div>\n</div>\n'),i.Tb(),i.Tb())},directives:[m.b],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),x=e("DjAo"),k=e("mWkv"),M=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-crs"]],decls:47,vars:0,consts:[["disabled",""],[1,"prettyprint"],["checked","true"],[1,"togglebutton"],["type","checkbox","checked",""],[1,"toggle"],["type","checkbox"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Checkboxes "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js "),i.Tb(),i.Ub(6,"mat-checkbox"),i.Gc(7,"Option one is this and that\u2014be sure to include why it's great"),i.Tb(),i.Pb(8,"br"),i.Ub(9,"mat-checkbox",0),i.Gc(10,"Option two is disabled"),i.Tb(),i.Ub(11,"pre",1),i.Gc(12,"<mat-checkbox>\n  Option one is this and that&mdash;be sure to include why it's great\n</mat-checkbox>\n\n<mat-checkbox disabled>\n  Option one is this and that&mdash;be sure to include why it's great\n</mat-checkbox>\n\n\n"),i.Tb(),i.Tb(),i.Ub(13,"div"),i.Ub(14,"h2"),i.Gc(15," Radio Buttons "),i.Tb(),i.Pb(16,"legend"),i.Ub(17,"p"),i.Gc(18," To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js. "),i.Tb(),i.Ub(19,"mat-radio-button"),i.Gc(20,"Radio is off"),i.Tb(),i.Pb(21,"br"),i.Ub(22,"mat-radio-button",2),i.Gc(23,"Radio is on"),i.Tb(),i.Pb(24,"br"),i.Ub(25,"mat-radio-button",0),i.Gc(26,"Disabled radio is off"),i.Tb(),i.Ub(27,"pre",1),i.Gc(28,'<mat-radio-button>\n  Radio is off\n</mat-radio-button>\n\n<mat-radio-button checked="true">\n  Radio is on\n</mat-radio-button>\n\n<mat-radio-button disabled>\n  Disabled radio is off\n</mat-radio-button>\n'),i.Tb(),i.Tb(),i.Ub(29,"div"),i.Ub(30,"h2"),i.Gc(31,"Toggle Buttons"),i.Tb(),i.Pb(32,"legend"),i.Ub(33,"p"),i.Gc(34,"If you want to use something more special than a checkbox, we recommend the toggle buttons."),i.Tb(),i.Ub(35,"div",3),i.Ub(36,"label"),i.Pb(37,"input",4),i.Pb(38,"span",5),i.Gc(39," Toggle is on "),i.Tb(),i.Tb(),i.Ub(40,"div",3),i.Ub(41,"label"),i.Pb(42,"input",6),i.Pb(43,"span",5),i.Gc(44," Toggle is off "),i.Tb(),i.Tb(),i.Ub(45,"pre",1),i.Gc(46,'<div class="togglebutton">\n  <label>\n    <input type="checkbox" checked="">\n      <span class="toggle"></span>\n      Toggle is on\n  </label>\n</div>\n<div class="togglebutton">\n  <label>\n    <input type="checkbox">\n      <span class="toggle"></span>\n        Toggle is off\n  </label>\n</div>\n'),i.Tb(),i.Tb())},directives:[x.a,k.a],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),O=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-dropdown"]],decls:117,vars:0,consts:[[1,"row"],[1,"col-md-3"],[1,"dropdown"],["mat-raised-button","","href","#pablo","data-toggle","dropdown","aria-expanded","true",1,"btn","dropdown-toggle"],[1,"caret"],[1,"dropdown-menu"],["href","#pablo"],[1,"divider"],["src","./assets/img/flags/US.png"],["src","./assets/img/flags/DE.png"],["src","./assets/img/flags/GB.png"],["src","./assets/img/flags/FR.png"],["src","./assets/img/flags/RO.png"],["src","./assets/img/flags/IT.png"],["src","./assets/img/flags/ES.png"],[1,"label","label-default"],["src","./assets/img/flags/BR.png"],["src","./assets/img/flags/JP.png"],[1,"prettyprint"],[1,"col-sm-12"],[1,"dropup"],["mat-raised-button","","href","#pablo","data-toggle","dropdown",1,"dropdown-toggle","btn","btn-primary","btn-round"],[1,"dropdown-menu","dropdown-primary","dropdown-menu-left"],[1,"dropdown-header"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Dropdown "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," We are very proud to present the dropdown which has a subtle animation. "),i.Ub(6,"b"),i.Gc(7,"IMPORTANT!"),i.Tb(),i.Gc(8," The focus state is "),i.Ub(9,"b"),i.Gc(10,"Purple"),i.Tb(),i.Gc(11," by default and, on the dropdowns from the navbars, they will take the colour of the parent navbar."),i.Tb(),i.Ub(12,"div",0),i.Ub(13,"div",1),i.Ub(14,"span",2),i.Ub(15,"button",3),i.Gc(16," Regular "),i.Pb(17,"b",4),i.Tb(),i.Ub(18,"ul",5),i.Ub(19,"li"),i.Ub(20,"a",6),i.Gc(21,"Action"),i.Tb(),i.Tb(),i.Ub(22,"li"),i.Ub(23,"a",6),i.Gc(24,"Another action"),i.Tb(),i.Tb(),i.Ub(25,"li"),i.Ub(26,"a",6),i.Gc(27,"Something else here"),i.Tb(),i.Tb(),i.Pb(28,"li",7),i.Ub(29,"li"),i.Ub(30,"a",6),i.Gc(31,"Separated link"),i.Tb(),i.Tb(),i.Pb(32,"li",7),i.Ub(33,"li"),i.Ub(34,"a",6),i.Gc(35,"One more separated link"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(36,"div",1),i.Ub(37,"span",2),i.Ub(38,"button",3),i.Pb(39,"img",8),i.Gc(40," Flags "),i.Pb(41,"b",4),i.Tb(),i.Ub(42,"ul",5),i.Ub(43,"li"),i.Ub(44,"a",6),i.Pb(45,"img",9),i.Gc(46," Deutsch"),i.Tb(),i.Tb(),i.Ub(47,"li"),i.Ub(48,"a",6),i.Pb(49,"img",10),i.Gc(50," English(UK)"),i.Tb(),i.Tb(),i.Ub(51,"li"),i.Ub(52,"a",6),i.Pb(53,"img",11),i.Gc(54," Fran\xe7ais"),i.Tb(),i.Tb(),i.Ub(55,"li"),i.Ub(56,"a",6),i.Pb(57,"img",12),i.Gc(58," Rom\xe2n\u0103"),i.Tb(),i.Tb(),i.Ub(59,"li"),i.Ub(60,"a",6),i.Pb(61,"img",13),i.Gc(62," Italiano"),i.Tb(),i.Tb(),i.Pb(63,"li",7),i.Ub(64,"li"),i.Ub(65,"a",6),i.Pb(66,"img",14),i.Gc(67," Espa\xf1ol "),i.Ub(68,"span",15),i.Gc(69,"soon"),i.Tb(),i.Tb(),i.Tb(),i.Ub(70,"li"),i.Ub(71,"a",6),i.Pb(72,"img",16),i.Gc(73," Portugu\xeas "),i.Ub(74,"span",15),i.Gc(75,"soon"),i.Tb(),i.Tb(),i.Tb(),i.Ub(76,"li"),i.Ub(77,"a",6),i.Pb(78,"img",17),i.Gc(79," \u65e5\u672c\u8a9e "),i.Ub(80,"span",15),i.Gc(81,"soon"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(82,"pre",18),i.Gc(83,'<div class="dropdown">\n    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="true" >\n        Regular\n        <b class="caret"></b>\n    </button>\n    <ul class="dropdown-menu">\n        <li><a href="#">Action</a></li>\n        <li><a href="#">Another action</a></li>\n        <li><a href="#">Something else here</a></li>\n        <li class="divider"></li>\n        <li><a href="#">Separated link</a></li>\n        <li class="divider"></li>\n        <li><a href="#">One more separated link</a></li>\n    </ul>\n</div>\n'),i.Tb(),i.Tb(),i.Ub(84,"div"),i.Ub(85,"h2"),i.Gc(86," Dropup "),i.Tb(),i.Pb(87,"legend"),i.Ub(88,"p"),i.Gc(89,"We restyled the dropup and added a different animation for the opening. You can see the full implementation below."),i.Tb(),i.Ub(90,"div",19),i.Ub(91,"span",20),i.Ub(92,"button",21),i.Gc(93,"Dropup "),i.Pb(94,"b",4),i.Tb(),i.Ub(95,"ul",22),i.Ub(96,"li",23),i.Gc(97,"Dropdown header"),i.Tb(),i.Ub(98,"li"),i.Ub(99,"a",6),i.Gc(100,"Action"),i.Tb(),i.Tb(),i.Ub(101,"li"),i.Ub(102,"a",6),i.Gc(103,"Another action"),i.Tb(),i.Tb(),i.Ub(104,"li"),i.Ub(105,"a",6),i.Gc(106,"Something else here"),i.Tb(),i.Tb(),i.Pb(107,"li",7),i.Ub(108,"li"),i.Ub(109,"a",6),i.Gc(110,"Separated link"),i.Tb(),i.Tb(),i.Pb(111,"li",7),i.Ub(112,"li"),i.Ub(113,"a",6),i.Gc(114,"One more separated link"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(115,"pre",18),i.Gc(116,'<span class="dropup">\n    <button href="#" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropup <b class="caret"></b></button>\n    <ul class="dropdown-menu dropdown-primary dropdown-menu-right">\n        <li class="dropdown-header">Dropdown header</li>\n        <li><a href="#">Action</a></li>\n        <li><a href="#">Another action</a></li>\n        <li><a href="#">Something else here</a></li>\n        <li class="divider"></li>\n        <li><a href="#">Separated link</a></li>\n        <li class="divider"></li>\n        <li><a href="#">One more separated link</a></li>\n    </ul>\n</span>\n'),i.Tb(),i.Tb())},directives:[m.b],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),_=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-textarea"]],decls:10,vars:0,consts:[[1,"example-full-width"],["matInput","","placeholder","Leave a comment"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Textarea"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"The textarea has a new style, so it looks similar to all other inputs."),i.Tb(),i.Ub(6,"mat-form-field",0),i.Pb(7,"textarea",1),i.Tb(),i.Ub(8,"pre",2),i.Gc(9,'<mat-form-field class="example-full-width">\n <textarea matInput placeholder="Leave a comment"></textarea>\n</mat-form-field> '),i.Tb(),i.Tb())},directives:[r.b,s.b],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),j=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-jasny"]],decls:47,vars:0,consts:[["href","https://www.jasny.net/bootstrap/","target","_blank"],[1,"row"],[1,"col-md-4","col-sm-4"],["data-provides","fileinput",1,"fileinput","fileinput-new","text-center"],[1,"fileinput-new","thumbnail"],["src","./assets/img/image_placeholder.jpg","alt","..."],[1,"fileinput-preview","fileinput-exists","thumbnail"],[1,"btn","btn-rose","btn-round","btn-file"],[1,"fileinput-new"],[1,"fileinput-exists"],["type","file","name","..."],["href","#pablo","data-dismiss","fileinput",1,"btn","btn-danger","btn-round","fileinput-exists"],[1,"fa","fa-times"],[1,"col-md-3","col-sm-4"],[1,"fileinput-new","thumbnail","img-circle"],["src","./assets/img/placeholder.jpg","alt","..."],[1,"fileinput-preview","fileinput-exists","thumbnail","img-circle"],[1,"btn","btn-round","btn-rose","btn-file"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"FileUpload Jasny"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"We have styled the select picker to look similar to the dropdown and the other inputs. "),i.Pb(6,"br"),i.Pb(7,"br"),i.Gc(8," For more information please check "),i.Ub(9,"b"),i.Ub(10,"a",0),i.Gc(11,"Full Github Documentation"),i.Tb(),i.Tb(),i.Gc(12,"."),i.Tb(),i.Ub(13,"div",1),i.Ub(14,"div",2),i.Ub(15,"div",3),i.Ub(16,"div",4),i.Pb(17,"img",5),i.Tb(),i.Pb(18,"div",6),i.Ub(19,"div"),i.Ub(20,"span",7),i.Ub(21,"span",8),i.Gc(22,"Select image"),i.Tb(),i.Ub(23,"span",9),i.Gc(24,"Change"),i.Tb(),i.Pb(25,"input",10),i.Tb(),i.Ub(26,"a",11),i.Pb(27,"i",12),i.Gc(28," Remove"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(29,"div",13),i.Ub(30,"div",3),i.Ub(31,"div",14),i.Pb(32,"img",15),i.Tb(),i.Pb(33,"div",16),i.Ub(34,"div"),i.Ub(35,"span",17),i.Ub(36,"span",8),i.Gc(37,"Add Photo"),i.Tb(),i.Ub(38,"span",9),i.Gc(39,"Change"),i.Tb(),i.Pb(40,"input",10),i.Tb(),i.Pb(41,"br"),i.Ub(42,"a",11),i.Pb(43,"i",12),i.Gc(44," Remove"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(45,"pre",18),i.Gc(46,'<div class="fileinput fileinput-new text-center" data-provides="fileinput">\n    <div class="fileinput-new thumbnail">\n        <img src="./assets/img/image_placeholder.jpg" alt="...">\n    </div>\n    <div class="fileinput-preview fileinput-exists thumbnail"></div>\n    <div>\n        <span class="btn btn-rose btn-round btn-file">\n            <span class="fileinput-new">Select image</span>\n            <span class="fileinput-exists">Change</span>\n            <input type="file" name="..." />\n        </span>\n    <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>\n    </div>\n</div>\n\n<div class="fileinput fileinput-new text-center" data-provides="fileinput">\n    <div class="fileinput-new thumbnail img-circle">\n        <img src="./assets/img/placeholder.jpg" alt="...">\n    </div>\n    <div class="fileinput-preview fileinput-exists thumbnail img-circle"></div>\n    <div>\n        <span class="btn btn-round btn-rose btn-file">\n            <span class="fileinput-new">Add Photo</span>\n            <span class="fileinput-exists">Change</span>\n                <input type="file" name="..." />\n        </span>\n        <br />\n        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>\n    </div>\n</div>\n'),i.Tb(),i.Tb())},styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),I=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-materialicons"]],decls:33,vars:0,consts:[["href","https://design.google.com/icons/","target","_blank"],[1,"material-icons"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Material Icons"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5," Through most of the examples in this dashboard, we have used the default "),i.Ub(6,"a",0),i.Gc(7,"Icons for the Material Design"),i.Tb(),i.Gc(8," provided by Google. "),i.Tb(),i.Ub(9,"i",1),i.Gc(10,"face"),i.Tb(),i.Ub(11,"pre",2),i.Gc(12,'<i class="material-icons">face</i>\n'),i.Tb(),i.Ub(13,"p"),i.Ub(14,"b"),i.Gc(15,"!IMPORTANT:"),i.Tb(),i.Gc(16," In case of using "),i.Ub(17,"b"),i.Gc(18,"Internet Explorer"),i.Tb(),i.Gc(19," or "),i.Ub(20,"b"),i.Gc(21,"Android Default Browser"),i.Tb(),i.Gc(22," the material icons will not appear and you most replace the text inside of "),i.Ub(23,"code"),i.Gc(24,'<i class="material-icons">...</i>'),i.Tb(),i.Gc(25," tag with coded version like in the example bellow. The coded version can be found on "),i.Ub(26,"a",0),i.Gc(27,"Icons for the Material Design"),i.Tb(),i.Gc(28," provided by Google.\n"),i.Tb(),i.Ub(29,"i",1),i.Gc(30,"\ue88a"),i.Tb(),i.Ub(31,"pre",2),i.Gc(32,'<i class="material-icons">&#xE88A;</i>\n'),i.Tb(),i.Tb())},styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),S=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-changingcolors"]],decls:48,vars:0,consts:[[1,"highlighter-rouge"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Changing Colors (SASS)"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"You can change the default colors via variables from SASS:"),i.Tb(),i.Ub(6,"ol"),i.Ub(7,"li"),i.Gc(8," You will find all the branding colors inside "),i.Ub(9,"code"),i.Gc(10,"assets/scss/core/variables/_brand.scss"),i.Tb(),i.Gc(11,". You can change them with a HEX value or with other predefined variables from "),i.Ub(12,"code"),i.Gc(13,"assets/scss/core/variables/_colors.scss"),i.Tb(),i.Gc(14,"."),i.Tb(),i.Ub(15,"li"),i.Gc(16,"Change them with anything you want and save the "),i.Ub(17,"code"),i.Gc(18,".scss"),i.Tb(),i.Gc(19," file, it will be automatically compiled by Angular."),i.Tb(),i.Tb(),i.Ub(20,"ol"),i.Ub(21,"li"),i.Gc(22,"Download the project\u2019s zip"),i.Tb(),i.Ub(23,"li"),i.Gc(24,"Make sure you have node.js (https://nodejs.org/en/) installed"),i.Tb(),i.Ub(25,"li"),i.Gc(26,"Type "),i.Ub(27,"code",0),i.Gc(28,"npm install"),i.Tb(),i.Gc(29," in terminal/console in the source folder where "),i.Ub(30,"code",0),i.Gc(31,"package.json"),i.Tb(),i.Gc(32," is located"),i.Tb(),i.Ub(33,"li"),i.Gc(34,"You will find all the branding colors inside "),i.Ub(35,"code",0),i.Gc(36,"assets/scss/core/variables/_brand.scss"),i.Tb(),i.Gc(37,". You can change them with a "),i.Ub(38,"code",0),i.Gc(39,"HEX"),i.Tb(),i.Gc(40," value or with other predefined variables from "),i.Ub(41,"code",0),i.Gc(42,"assets/scss/core/variables/_colors.scss"),i.Tb(),i.Tb(),i.Ub(43,"li"),i.Gc(44,"Run in terminal "),i.Ub(45,"code",0),i.Gc(46,"npm start"),i.Tb(),i.Gc(47,". "),i.Tb(),i.Tb(),i.Tb())},styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),D=e("uki+"),R=function(){function t(){}return t.prototype.startAnimationForLineChart=function(t){var n;n=0,t.on("draw",(function(t){"line"===t.type||"area"===t.type?t.element.animate({d:{begin:600,dur:700,from:t.path.clone().scale(1,0).translate(0,t.chartRect.height()).stringify(),to:t.path.clone().stringify(),easing:D.Svg.Easing.easeOutQuint}}):"point"===t.type&&(n++,t.element.animate({opacity:{begin:80*n,dur:500,from:0,to:1,easing:"ease"}}))})),n=0},t.prototype.ngOnInit=function(){var t={lineSmooth:D.Interpolation.cardinal({tension:0}),low:0,high:50,chartPadding:{top:0,right:0,bottom:0,left:0}};new D.Line("#dailySalesChart",{labels:["M","T","W","T","F","S","S"],series:[[12,17,7,17,23,18,38]]},t)},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-cards"]],decls:214,vars:0,consts:[[1,"highlighter-rouge"],[1,"row"],[1,"col-md-6"],[1,"card"],[1,"card-header"],[1,"card-title"],[1,"category"],[1,"card-body"],[1,"card-header","card-header-danger"],[1,"card-category"],[1,"card-header","card-header-icon","card-header-rose"],[1,"card-icon"],[1,"material-icons"],[1,"card-header","card-header-primary"],[1,"prettyprint"],[1,"card-header","card-chart","card-header-warning"],["id","dailySalesChart",1,"ct-chart"],[1,"text-success"],[1,"fa","fa-long-arrow-up"],[1,"card-footer"],[1,"card-stats"],[1,"card","card-stats"],[1,"card-header","card-header-warning","card-header-icon"],[1,"stats"],[1,"material-icons","text-danger"],["href","#pablo"],[1,"card-header","card-header-success","card-header-icon"],[1,"col-lg-8","col-md-12"],[1,"card-header","card-header-tabs","card-header-primary"],[1,"nav-tabs-navigation"],[1,"nav-tabs-wrapper"],[1,"nav-tabs-title"],["data-tabs","tabs",1,"nav","nav-tabs"],[1,"nav-item","active"],["href","#profile","data-toggle","tab",1,"nav-link"],[1,"ripple-container"],[1,"nav-item"],["href","#messages","data-toggle","tab",1,"nav-link"],["href","#settings","data-toggle","tab",1,"nav-link"],[1,"tab-content"],["id","profile",1,"tab-pane","active"],["id","messages",1,"tab-pane"],["id","settings",1,"tab-pane"],[1,"col-lg-4","col-md-6"],[1,"card","card-pricing","card-plain"],[1,"card-description"],[1,"card-footer","justify-content-center"],["href","#pablo",1,"btn","btn-white","btn-round"],[1,"card","card-pricing"],[1,"card-icon","icon-rose"],["href","#pablo",1,"btn","btn-round","btn-rose"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Cards"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called "),i.Ub(6,"code",0),i.Gc(7,".card"),i.Tb(),i.Gc(8,". The information inside the card usually goes inside the content (class "),i.Ub(9,"code",0),i.Gc(10,".card-body"),i.Tb(),i.Gc(11,"). The content can have three types of elements inside: "),i.Ub(12,"code",0),i.Gc(13,".card-title"),i.Tb(),i.Gc(14," and .category. You can optionally add a .card-footer, if you want to place a call-to-action.\nYou can change the color of the header using the "),i.Ub(15,"code",0),i.Gc(16,"card-header-*color"),i.Tb(),i.Gc(17," attribute like this: "),i.Ub(18,"code",0),i.Gc(19,"card-header-primary | info | success | warning | danger | rose"),i.Tb(),i.Gc(20,"."),i.Tb(),i.Pb(21,"br"),i.Ub(22,"p"),i.Gc(23,"If you want to use the cards on white background you can remove it\u2019s shadow using the class "),i.Ub(24,"code",0),i.Gc(25,".card-plain"),i.Tb(),i.Tb(),i.Pb(26,"br"),i.Ub(27,"h4"),i.Gc(28,"Cards Headers Type"),i.Tb(),i.Ub(29,"p"),i.Gc(30,"The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: "),i.Ub(31,"code",0),i.Gc(32,".card-header-icon"),i.Tb(),i.Gc(33," or "),i.Ub(34,"code",0),i.Gc(35,".card-header-text"),i.Tb(),i.Gc(36,"."),i.Tb(),i.Ub(37,"div",1),i.Ub(38,"div",2),i.Ub(39,"div",3),i.Ub(40,"div",4),i.Ub(41,"h4",5),i.Gc(42,"Regular header"),i.Tb(),i.Ub(43,"p",6),i.Gc(44,"Category subtitle"),i.Tb(),i.Tb(),i.Ub(45,"div",7),i.Gc(46,' The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona... '),i.Tb(),i.Tb(),i.Tb(),i.Ub(47,"div",2),i.Ub(48,"div",3),i.Ub(49,"div",8),i.Ub(50,"h4",5),i.Gc(51,"Full header coloured"),i.Tb(),i.Ub(52,"p",9),i.Gc(53,"Category subtitle"),i.Tb(),i.Tb(),i.Ub(54,"div",7),i.Gc(55,' The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona... '),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(56,"div",1),i.Ub(57,"div",2),i.Ub(58,"div",3),i.Ub(59,"div",10),i.Ub(60,"div",11),i.Ub(61,"i",12),i.Gc(62,"\ue894"),i.Tb(),i.Tb(),i.Ub(63,"h4",5),i.Gc(64,"Here is the Icon"),i.Tb(),i.Tb(),i.Ub(65,"div",7),i.Gc(66,' The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona... '),i.Tb(),i.Tb(),i.Tb(),i.Ub(67,"div",2),i.Ub(68,"div",3),i.Ub(69,"div",13),i.Ub(70,"h4",5),i.Gc(71,"Here is the Text"),i.Tb(),i.Ub(72,"p",9),i.Gc(73,"Category subtitle"),i.Tb(),i.Tb(),i.Ub(74,"div",7),i.Gc(75,' The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona... '),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(76,"pre",14),i.Gc(77,'<div class="row">\n  <div class="col-md-6">\n      <div class="card">\n          <div class="card-header">\n              <h4 class="card-title">Regular header</h4>\n              <p class="category">Category subtitle</p>\n          </div>\n          <div class="card-body">\n              The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...\n          </div>\n      </div>\n  </div>\n  <div class="col-md-6">\n      <div class="card">\n          <div class="card-header card-header-danger">\n              <h4 class="card-title">Full header coloured</h4>\n              <p class="card-category">Category subtitle</p>\n          </div>\n          <div class="card-body">\n              The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...\n          </div>\n      </div>\n  </div>\n</div>\n<div class="row">\n  <div class="col-md-6">\n      <div class="card">\n          <div class="card-header card-header-icon card-header-rose">\n            <div class="card-icon">\n              <i class="material-icons">\ue894</i>\n            </div>\n            <h4 class="card-title">Here is the Icon</h4>\n          </div>\n          <div class="card-body">\n              The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...\n          </div>\n      </div>\n  </div>\n  <div class="col-md-6">\n      <div class="card">\n          <div class="card-header card-header-primary">\n              <h4 class="card-title">Here is the Text</h4>\n              <p class="card-category">Category subtitle</p>\n          </div>\n          <div class="card-body">\n              The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...\n          </div>\n      </div>\n  </div>\n</div>\n'),i.Tb(),i.Pb(78,"br"),i.Pb(79,"br"),i.Ub(80,"h4"),i.Gc(81,"Card Chart"),i.Tb(),i.Ub(82,"div",1),i.Ub(83,"div",2),i.Ub(84,"div",3),i.Ub(85,"div",15),i.Pb(86,"div",16),i.Tb(),i.Ub(87,"div",7),i.Ub(88,"h4",5),i.Gc(89,"Daily Sales"),i.Tb(),i.Ub(90,"p",9),i.Ub(91,"span",17),i.Pb(92,"i",18),i.Gc(93," 55% "),i.Tb(),i.Gc(94," increase in today sales."),i.Tb(),i.Tb(),i.Ub(95,"div",19),i.Ub(96,"div",20),i.Ub(97,"i",12),i.Gc(98,"access_time"),i.Tb(),i.Gc(99," updated 4 minutes ago "),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(100,"pre",14),i.Gc(101,'<div class="row">\n    <div class="col-md-6">\n        <div class="card">\n            <div class="card-header card-chart card-header-warning">\n                <div class="ct-chart" id="dailySalesChart"></div>\n            </div>\n            <div class="card-body">\n                <h4 class="card-title">Daily Sales</h4>\n                <p class="card-category">\n                    <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>\n            </div>\n            <div class="card-footer">\n                <div class="card-stats">\n                    <i class="material-icons">access_time</i> updated 4 minutes ago\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n// INFO: #dailySalesChart is initialised inside ./cards.component.ts\n'),i.Tb(),i.Ub(102,"h4"),i.Gc(103,"Card Stats"),i.Tb(),i.Ub(104,"div",1),i.Ub(105,"div",2),i.Ub(106,"div",21),i.Ub(107,"div",22),i.Ub(108,"div",11),i.Ub(109,"i",12),i.Gc(110,"content_copy"),i.Tb(),i.Tb(),i.Ub(111,"p",9),i.Gc(112,"Used Space"),i.Tb(),i.Ub(113,"h3",5),i.Gc(114,"49/50 "),i.Ub(115,"small"),i.Gc(116,"GB"),i.Tb(),i.Tb(),i.Tb(),i.Ub(117,"div",19),i.Ub(118,"div",23),i.Ub(119,"i",24),i.Gc(120,"warning"),i.Tb(),i.Ub(121,"a",25),i.Gc(122,"Get More Space..."),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(123,"div",2),i.Ub(124,"div",21),i.Ub(125,"div",26),i.Ub(126,"div",11),i.Ub(127,"i",12),i.Gc(128,"store"),i.Tb(),i.Tb(),i.Ub(129,"p",9),i.Gc(130,"Revenue"),i.Tb(),i.Ub(131,"h3",5),i.Gc(132,"$34,245"),i.Tb(),i.Tb(),i.Ub(133,"div",19),i.Ub(134,"div",23),i.Ub(135,"i",12),i.Gc(136,"date_range"),i.Tb(),i.Gc(137," Last 24 Hours "),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(138,"pre",14),i.Gc(139,'<div class="row">\n  <div class="col-md-6">\n      <div class="card card-stats">\n          <div class="card-header card-header-warning card-header-icon">\n            <div class="card-icon">\n              <i class="material-icons">content_copy</i>\n            </div>\n              <p class="card-category">Used Space</p>\n              <h3 class="card-title">49/50\n                  <small>GB</small>\n              </h3>\n          </div>\n          <div class="card-footer">\n              <div class="stats">\n                  <i class="material-icons text-danger">warning</i>\n                  <a href="#pablo">Get More Space...</a>\n              </div>\n          </div>\n      </div>\n  </div>\n  <div class="col-md-6">\n      <div class="card card-stats">\n          <div class="card-header card-header-success card-header-icon">\n            <div class="card-icon">\n              <i class="material-icons">store</i>\n            </div>\n            <p class="card-category">Revenue</p>\n            <h3 class="card-title">$34,245</h3>\n          </div>\n          <div class="card-footer">\n              <div class="stats">\n                  <i class="material-icons">date_range</i> Last 24 Hours\n              </div>\n          </div>\n      </div>\n  </div>\n</div>\n'),i.Tb(),i.Ub(140,"h4"),i.Gc(141,"Card Nav-Tabs"),i.Tb(),i.Ub(142,"div",1),i.Ub(143,"div",27),i.Ub(144,"div",3),i.Ub(145,"div",28),i.Ub(146,"div",29),i.Ub(147,"div",30),i.Ub(148,"span",31),i.Gc(149,"Tasks:"),i.Tb(),i.Ub(150,"ul",32),i.Ub(151,"li",33),i.Ub(152,"a",34),i.Ub(153,"i",12),i.Gc(154,"bug_report"),i.Tb(),i.Gc(155," First "),i.Pb(156,"div",35),i.Tb(),i.Tb(),i.Ub(157,"li",36),i.Ub(158,"a",37),i.Ub(159,"i",12),i.Gc(160,"code"),i.Tb(),i.Gc(161," Second "),i.Pb(162,"div",35),i.Tb(),i.Tb(),i.Ub(163,"li",36),i.Ub(164,"a",38),i.Ub(165,"i",12),i.Gc(166,"cloud"),i.Tb(),i.Gc(167," Third "),i.Pb(168,"div",35),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(169,"div",7),i.Ub(170,"div",39),i.Ub(171,"div",40),i.Gc(172," First Tab "),i.Tb(),i.Ub(173,"div",41),i.Gc(174," Second Tab "),i.Tb(),i.Ub(175,"div",42),i.Gc(176," Third Tab "),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(177,"pre",14),i.Gc(178,'<div class="row">\n  <div class="col-lg-8 col-md-12">\n      <div class="card">\n          <div class="card-header card-header-tabs card-header-primary">\n              <div class="nav-tabs-navigation">\n                  <div class="nav-tabs-wrapper">\n                      <span class="nav-tabs-title">Tasks:</span>\n                      <ul class="nav nav-tabs" data-tabs="tabs">\n                          <li class="nav-item active">\n                              <a href="#profile" class="nav-link" data-toggle="tab">\n                                  <i class="material-icons">bug_report</i> First\n                                  <div class="ripple-container"></div>\n                              </a>\n                          </li>\n                          <li class="nav-item">\n                              <a href="#messages" class="nav-link" data-toggle="tab">\n                                  <i class="material-icons">code</i> Second\n                                  <div class="ripple-container"></div>\n                              </a>\n                          </li>\n                          <li class="nav-item">\n                              <a href="#settings" class="nav-link" data-toggle="tab">\n                                  <i class="material-icons">cloud</i> Third\n                                  <div class="ripple-container"></div>\n                              </a>\n                          </li>\n                      </ul>\n                  </div>\n              </div>\n          </div>\n          <div class="card-body">\n              <div class="tab-content">\n                  <div class="tab-pane active" id="profile">\n                      First Tab\n                  </div>\n                  <div class="tab-pane" id="messages">\n                      Second Tab\n                  </div>\n                  <div class="tab-pane" id="settings">\n                      Third Tab\n                  </div>\n              </div>\n          </div>\n      </div>\n  </div>\n</div>\n'),i.Tb(),i.Ub(179,"h4"),i.Gc(180,"Card Pricing"),i.Tb(),i.Ub(181,"div",1),i.Ub(182,"div",43),i.Ub(183,"div",44),i.Ub(184,"div",7),i.Ub(185,"h6",9),i.Gc(186,"Freelancer"),i.Tb(),i.Ub(187,"div",11),i.Ub(188,"i",12),i.Gc(189,"weekend"),i.Tb(),i.Tb(),i.Ub(190,"h3",5),i.Gc(191,"FREE"),i.Tb(),i.Ub(192,"p",45),i.Gc(193," This is good if your company size is between 2 and 10 Persons. "),i.Tb(),i.Tb(),i.Ub(194,"div",46),i.Ub(195,"a",47),i.Gc(196,"Choose Plan"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(197,"div",43),i.Ub(198,"div",48),i.Ub(199,"h6",9),i.Gc(200," Small Company"),i.Tb(),i.Ub(201,"div",7),i.Ub(202,"div",49),i.Ub(203,"i",12),i.Gc(204,"home"),i.Tb(),i.Tb(),i.Ub(205,"h3",5),i.Gc(206,"29$"),i.Tb(),i.Ub(207,"p",45),i.Gc(208,"This is good if your company size is between 2 and 10 Persons."),i.Tb(),i.Tb(),i.Ub(209,"div",46),i.Ub(210,"a",50),i.Gc(211,"Choose Plan"),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(212,"pre",14),i.Gc(213,'<div class="row">\n  <div class="col-lg-4 col-md-6">\n      <div class="card card-pricing card-plain">\n          <div class="card-body">\n              <h6 class="card-category">Freelancer</h6>\n              <div class="card-icon">\n                  <i class="material-icons">weekend</i>\n              </div>\n              <h3 class="card-title">FREE</h3>\n              <p class="card-description">\n                  This is good if your company size is between 2 and 10 Persons.\n              </p>\n          </div>\n          <div class="card-footer justify-content-center ">\n            <a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>\n          </div>\n      </div>\n  </div>\n  <div class="col-lg-4 col-md-6">\n    <div class="card card-pricing ">\n      <h6 class="card-category"> Small Company</h6>\n      <div class="card-body">\n        <div class="card-icon icon-rose ">\n          <i class="material-icons">home</i>\n        </div>\n        <h3 class="card-title">29$</h3>\n        <p class="card-description">This is good if your company size is between 2 and 10 Persons.</p>\n      </div>\n      <div class="card-footer justify-content-center ">\n        <a class="btn btn-round btn-rose" href="#pablo">Choose Plan</a>\n      </div>\n    </div>\n  </div>\n</div>\n'),i.Tb(),i.Tb())},styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),A=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-ps"]],decls:27,vars:0,consts:[["href","https://github.com/noraesae/perfect-scrollbar","target","_blank"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Perfect Scrollbar"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,' "Minimalistic but perfect custom scrollbar plugin." '),i.Pb(6,"br"),i.Pb(7,"br"),i.Ub(8,"b"),i.Gc(9,"!IMPORTANT"),i.Tb(),i.Gc(10," Perfect Scrollbar is applied on the "),i.Ub(11,"code"),i.Gc(12,".main-panel"),i.Tb(),i.Gc(13," and "),i.Ub(14,"code"),i.Gc(15,".sidebar .sidebar-wrapper"),i.Tb(),i.Gc(16," so we will have a nice scrollbar that is visible only when you actually scroll. Since it is changing the overflows of the CSS it is also affecting the child elements which have a scroll so please make sure that you add the class "),i.Ub(17,"code"),i.Gc(18,".ps-child"),i.Tb(),i.Gc(19," to any element that should have scroll. "),i.Pb(20,"br"),i.Pb(21,"br"),i.Gc(22," For more information please check "),i.Ub(23,"b"),i.Ub(24,"a",0),i.Gc(25,"Full Github Documentation"),i.Tb(),i.Tb(),i.Gc(26,". "),i.Tb(),i.Tb())},styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),F=e("agxM"),B=e("MqYC");function N(t,n){if(1&t&&(i.Ub(0,"mat-option",6),i.Gc(1),i.Tb()),2&t){var e=n.$implicit;i.nc("value",e.value),i.Cb(1),i.Ic(" ",e.viewValue," ")}}var H=function(){function t(){this.selectTheme="primary",this.cities=[{value:"paris-0",viewValue:"Paris"},{value:"miami-1",viewValue:"Miami"},{value:"bucharest-2",viewValue:"Bucharest"},{value:"new-york-3",viewValue:"New York"},{value:"london-4",viewValue:"London"},{value:"barcelona-5",viewValue:"Barcelona"},{value:"moscow-6",viewValue:"Moscow"}]}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-selectbootstrap"]],decls:20,vars:5,consts:[["href","https://material.angular.io/components/select/overview","target","_blank"],[1,"row"],[1,"col-md-4"],["placeholder","Single City","name","city"],[3,"value",4,"ngFor","ngForOf"],[1,"prettyprint"],[3,"value"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2,"Select Boostrap"),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"We have styled the select picker to look similar to the dropdown and the other inputs. "),i.Pb(6,"br"),i.Pb(7,"br"),i.Gc(8," For more information please check "),i.Ub(9,"b"),i.Ub(10,"a",0),i.Gc(11,"Full Documentation"),i.Tb(),i.Tb(),i.Gc(12,"."),i.Tb(),i.Ub(13,"div",1),i.Ub(14,"div",2),i.Ub(15,"mat-form-field"),i.Ub(16,"mat-select",3),i.Fc(17,N,2,2,"mat-option",4),i.Tb(),i.Tb(),i.Tb(),i.Tb(),i.Ub(18,"pre",5),i.Gc(19),i.Tb(),i.Tb()),2&t&&(i.Cb(17),i.nc("ngForOf",n.cities),i.Cb(2),i.Jc('<mat-select placeholder="Single City" name="city" ngClass="btn btn-primary btn-round simple">\n  <mat-option *ngFor="let city of cities" [value]="city.value">\n    ',"{","","{"," city.viewValue ","}","","}","\n  </mat-option>\n</mat-select>\n"))},directives:[r.b,F.a,o.l,B.n],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}(),E=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-integration"]],decls:6,vars:0,template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Integration "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"To integrate our product into your project, you must first add our style to your project, after that you can take components from product and add it to you. You still need to have the same plugins installed in package.json. I'm here if you have any other questions."),i.Tb(),i.Tb())},styles:[""]}),t}(),W=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-hidesidebar"]],decls:15,vars:0,template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Minimize Sidebar/Hide Sidebar "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"If you want to switch from Minimize Sidebar to Hide Sidebar you need to change the function "),i.Ub(6,"code"),i.Gc(7,"minimizeSidebar"),i.Tb(),i.Gc(8," from "),i.Ub(9,"code"),i.Gc(10,"src/app/shared/navbar/navbar.component.html"),i.Tb(),i.Gc(11," with "),i.Ub(12,"code"),i.Gc(13,"hideSidebar"),i.Tb(),i.Gc(14,"."),i.Tb(),i.Tb())},styles:[""]}),t}(),Y=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-visualstudio"]],decls:9,vars:0,consts:[["href","https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Integration with Visual Studio "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"Here is a video tutorial for integration with Visual Studio: "),i.Ub(6,"a",0),i.Gc(7,"Video Tutorial"),i.Tb(),i.Gc(8,"."),i.Tb(),i.Tb())},styles:[""]}),t}(),L=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-authentication"]],decls:19,vars:28,consts:[[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," Authentication Guard "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Ub(5,"b"),i.Gc(6,"This is the answer from GitHub repository."),i.Tb(),i.Tb(),i.Ub(7,"p"),i.Gc(8," I have implemented an AuthGuard and it's working fine. You must make a few changes to get it done. I keept the App pointing to dashboard by default, instead login page. First, the structure of my _**app.routing.ts**_ is almost the same as the original, just including the canActivate property:"),i.Tb(),i.Ub(9,"pre",0),i.Gc(10),i.Tb(),i.Ub(11,"p"),i.Gc(12,"Then, my _**auth-guard.service.ts**_ will redirect to original login page (under pages folder) if user is not logged in:"),i.Tb(),i.Ub(13,"pre",0),i.Gc(14),i.Tb(),i.Ub(15,"p"),i.Gc(16,"And finally, just for whim, if user enter login page after logged in, I send back to root (dashboard) in my _**pages/login/login.component.ts**_:"),i.Tb(),i.Ub(17,"pre",0),i.Gc(18),i.Tb(),i.Tb()),2&t&&(i.Cb(10),i.Mc(["    typescript\n    export const AppRoutes: Routes = [\n        ","{","\n            path: '',\n            redirectTo: 'dashboard',\n            pathMatch: 'full',\n          ","}",",\n        ","{","\n            path: '',\n            component: AdminLayoutComponent,\n            canActivate: [AuthGuard], //added canActivate and AuthGuard service\n            children: [\n                ","{","\n                    path: '',\n                    loadChildren: './dashboard/dashboard.module#DashboardModule'\n                  ","}","\n            ]\n          ","}",",\n        ","{","\n            path: '',\n            component: AuthLayoutComponent,\n            children: [","{","\n                path: 'pages', //login page still under \"pages\" folder as the original code\n                loadChildren: './pages/pages.module#PagesModule'\n              ","}","]\n          ","}","\n    ];\n  "]),i.Cb(4),i.Mc(["  typescript\n  export class AuthGuard implements CanActivate ","{","\n      constructor(private router: Router, private authService: AuthService) ","{","","}","\n      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):\n          Observable | Promise | boolean ","{","\n          if (!this.authService.isLoggedIn()) ","{","\n              this.router.navigate(['pages/login'], ","{"," queryParams: ","{"," returnUrl: state.url ","}","","}",");\n          ","}","\n          return true;\n      ","}","\n  ","}",'\n\n\n  RouterStateSnapshot is optional. I\'m using it for some cases wich user type a permanent link stored at browser history, but user is not logged in. For example:\n\n  User open browser an type: "http://localhost:4200/settings/system/preferences" but is not logged in.\n  Then the AuthGuard will redirects to login and, after login, the user will be redirected to the requested url, instead root page (dashboard).\n\n  ']),i.Cb(4),i.Kc("  typescript\n  constructor(private element: ElementRef, public authService: AuthService,\n      private router: Router, private route: ActivatedRoute) ","{","\n          if (this.authService.isLoggedIn()) ","{","\n              this.router.navigate(['dashboard']);\n          ","}"," else ","{","\n              this.nativeElement = element.nativeElement;\n              this.sidebarVisible = false;\n          ","}","\n      ","}","\n  "))},styles:[""]}),t}(),V=function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-rtl"]],decls:24,vars:0,template:function(t,n){1&t&&(i.Ub(0,"div"),i.Ub(1,"h2"),i.Gc(2," RTL Support "),i.Tb(),i.Pb(3,"legend"),i.Ub(4,"p"),i.Gc(5,"If you want to add RTL support you need to do add "),i.Ub(6,"code"),i.Gc(7,'"../node_modules/bootstrap-rtl/dist/css/bootstrap-rtl.css"'),i.Tb(),i.Gc(8," in "),i.Ub(9,"code"),i.Gc(10,"styles"),i.Tb(),i.Gc(11," in "),i.Ub(12,"code"),i.Gc(13,"angular-cli.json"),i.Tb(),i.Gc(14," after "),i.Ub(15,"code"),i.Gc(16,'"../node_modules/bootstrap/dist/css/bootstrap.css"'),i.Tb(),i.Gc(17," and add class "),i.Ub(18,"code"),i.Gc(19,"rtl-active"),i.Tb(),i.Gc(20," on "),i.Ub(21,"code"),i.Gc(22,"body"),i.Tb(),i.Gc(23,"."),i.Tb(),i.Tb())},styles:[""]}),t}(),q=[{path:"",children:[{path:"tutorial",component:c},{path:"buttons",component:C},{path:"inputs",component:l},{path:"tags",component:p},{path:"tooltips",component:function(){function t(){}return t.prototype.ngOnInit=function(){},t.\u0275fac=function(n){return new(n||t)},t.\u0275cmp=i.Ib({type:t,selectors:[["app-tooltips"]],decls:16,vars:1,consts:[["href","https://material.angular.io/components/tooltip/overview","target","_blank"],["mat-raised-button","","matTooltip","Tooltip!",1,"btn","btn-primary",3,"matTooltipPosition"],[1,"prettyprint"]],template:function(t,n){1&t&&(i.Ub(0,"h2"),i.Gc(1,"Tooltips"),i.Tb(),i.Pb(2,"legend"),i.Ub(3,"p"),i.Gc(4,"We have styled the select picker to look similar to the dropdown and the other inputs.\n"),i.Pb(5,"br"),i.Pb(6,"br"),i.Gc(7," For more information please check\n"),i.Ub(8,"b"),i.Ub(9,"a",0),i.Gc(10,"Full Documentation"),i.Tb(),i.Tb(),i.Gc(11,"."),i.Tb(),i.Ub(12,"button",1),i.Gc(13,"Primary"),i.Tb(),i.Ub(14,"pre",2),i.Gc(15,'    <button mat-raised-button class="btn btn-primary" matTooltip="Tooltip!" [matTooltipPosition]="\'above\'">Primary</button>\n'),i.Tb()),2&t&&(i.Cb(12),i.nc("matTooltipPosition","above"))},directives:[m.b,g.a],styles:["pre.prettyprint[_ngcontent-%COMP%]{background-color:#eee;border:0;margin-bottom:60px;margin-top:30px;padding:20px;text-align:left}.atv[_ngcontent-%COMP%], .str[_ngcontent-%COMP%]{color:#05ae0e}.kwd[_ngcontent-%COMP%], .pln[_ngcontent-%COMP%], .tag[_ngcontent-%COMP%]{color:#3472f7}.atn[_ngcontent-%COMP%]{color:#2c93ff}.pln[_ngcontent-%COMP%]{color:#333}.com[_ngcontent-%COMP%]{color:#999}.space-top[_ngcontent-%COMP%]{margin-top:50px}.area-line[_ngcontent-%COMP%]{border:1px solid #999;border-left:0;border-right:0;color:#666;display:block;margin-top:20px;padding:8px 0;text-align:center}.area-line[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#666}.container-fluid[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}"]}),t}()},{path:"textarea",component:_},{path:"navigation",component:u},{path:"tables",component:f},{path:"notifications",component:v},{path:"sweet-alert",component:y},{path:"datepicker",component:w},{path:"crs",component:M},{path:"dropdown",component:O},{path:"select-bootstrap",component:H},{path:"jasny",component:j},{path:"icons",component:I},{path:"perfectscrollbar",component:A},{path:"cards",component:R},{path:"colors",component:S},{path:"integration",component:E},{path:"hidesidebar",component:W},{path:"visualstudio",component:Y},{path:"authentication",component:L},{path:"rtl",component:V}]}],z=e("ZAI4");e.d(n,"DocumentationModule",(function(){return J}));var J=function(){function t(){}return t.\u0275mod=i.Mb({type:t}),t.\u0275inj=i.Lb({factory:function(n){return new(n||t)},imports:[[o.c,a.f.forChild(q),b.j,b.u,z.b,d.b]]}),t}()}}]);