├── README.md ├── angular-11 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── angular.json ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── dashboard │ │ │ ├── dashboard-components │ │ │ │ ├── activity │ │ │ │ │ ├── activity-data.ts │ │ │ │ │ ├── activity.component.css │ │ │ │ │ ├── activity.component.html │ │ │ │ │ ├── activity.component.spec.ts │ │ │ │ │ └── activity.component.ts │ │ │ │ ├── contacts │ │ │ │ │ ├── contact-data.ts │ │ │ │ │ ├── contacts.component.css │ │ │ │ │ ├── contacts.component.html │ │ │ │ │ ├── contacts.component.spec.ts │ │ │ │ │ └── contacts.component.ts │ │ │ │ ├── sales-overview-grap │ │ │ │ │ ├── data.json │ │ │ │ │ ├── sales-overview-grap.component.css │ │ │ │ │ ├── sales-overview-grap.component.html │ │ │ │ │ ├── sales-overview-grap.component.spec.ts │ │ │ │ │ └── sales-overview-grap.component.ts │ │ │ │ ├── sticker │ │ │ │ │ ├── sticker.component.css │ │ │ │ │ ├── sticker.component.html │ │ │ │ │ ├── sticker.component.spec.ts │ │ │ │ │ └── sticker.component.ts │ │ │ │ └── visiter-graph │ │ │ │ │ ├── data.json │ │ │ │ │ ├── visiter-graph.component.css │ │ │ │ │ ├── visiter-graph.component.html │ │ │ │ │ ├── visiter-graph.component.spec.ts │ │ │ │ │ └── visiter-graph.component.ts │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.scss │ │ │ ├── dashboard.component.ts │ │ │ ├── dashboard.module.ts │ │ │ ├── dashboard.routing.ts │ │ │ └── data.json │ │ ├── demo-material-module.ts │ │ ├── layouts │ │ │ └── full │ │ │ │ ├── full.component.html │ │ │ │ ├── full.component.ts │ │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar │ │ │ │ ├── sidebar.component.html │ │ │ │ └── sidebar.component.ts │ │ ├── material-component │ │ │ ├── buttons │ │ │ │ ├── buttons.component.html │ │ │ │ ├── buttons.component.scss │ │ │ │ └── buttons.component.ts │ │ │ ├── chips │ │ │ │ ├── chips.component.html │ │ │ │ ├── chips.component.scss │ │ │ │ └── chips.component.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-overview-example.html │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ └── dialog.component.ts │ │ │ ├── expansion │ │ │ │ ├── expansion.component.html │ │ │ │ ├── expansion.component.scss │ │ │ │ └── expansion.component.ts │ │ │ ├── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ └── grid.component.ts │ │ │ ├── lists │ │ │ │ ├── lists.component.html │ │ │ │ ├── lists.component.scss │ │ │ │ └── lists.component.ts │ │ │ ├── material.module.ts │ │ │ ├── material.routing.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── progress-snipper │ │ │ │ ├── progress-snipper.component.html │ │ │ │ ├── progress-snipper.component.scss │ │ │ │ └── progress-snipper.component.ts │ │ │ ├── progress │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ └── progress.component.ts │ │ │ ├── slide-toggle │ │ │ │ ├── slide-toggle.component.html │ │ │ │ ├── slide-toggle.component.scss │ │ │ │ └── slide-toggle.component.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ └── slider.component.ts │ │ │ ├── snackbar │ │ │ │ ├── snackbar.component.html │ │ │ │ ├── snackbar.component.scss │ │ │ │ └── snackbar.component.ts │ │ │ ├── stepper │ │ │ │ ├── stepper.component.html │ │ │ │ ├── stepper.component.scss │ │ │ │ └── stepper.component.ts │ │ │ ├── tabs │ │ │ │ ├── tabs.component.html │ │ │ │ ├── tabs.component.scss │ │ │ │ └── tabs.component.ts │ │ │ ├── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.scss │ │ │ │ └── toolbar.component.ts │ │ │ └── tooltip │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ └── tooltip.component.ts │ │ └── shared │ │ │ ├── accordion │ │ │ ├── accordion.directive.ts │ │ │ ├── accordionanchor.directive.ts │ │ │ ├── accordionlink.directive.ts │ │ │ └── index.ts │ │ │ ├── menu-items │ │ │ └── menu-items.ts │ │ │ ├── shared.module.ts │ │ │ └── spinner.component.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── images │ │ │ ├── background │ │ │ │ ├── profile-bg.jpg │ │ │ │ └── user-info.jpg │ │ │ ├── big │ │ │ │ ├── img1.jpg │ │ │ │ ├── img2.jpg │ │ │ │ ├── img3.jpg │ │ │ │ ├── img4.jpg │ │ │ │ ├── img5.jpg │ │ │ │ └── img6.jpg │ │ │ ├── custom-select.png │ │ │ ├── favicon.png │ │ │ ├── logo-icon.png │ │ │ ├── logo-light-icon.png │ │ │ ├── logo-light-text.png │ │ │ ├── logo-text.png │ │ │ └── users │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ ├── d1.jpg │ │ │ │ ├── d2.jpg │ │ │ │ ├── d3.jpg │ │ │ │ ├── d4.jpg │ │ │ │ ├── d5.jpg │ │ │ │ └── profile.png │ │ └── styles │ │ │ ├── app.scss │ │ │ ├── header.scss │ │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── pages.scss │ │ │ ├── responsive.scss │ │ │ ├── sidebar.scss │ │ │ ├── spinner.scss │ │ │ ├── style.scss │ │ │ └── variable.scss │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ └── typings.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── angular-12 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── angular.json ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── dashboard │ │ │ ├── dashboard-components │ │ │ │ ├── activity │ │ │ │ │ ├── activity-data.ts │ │ │ │ │ ├── activity.component.css │ │ │ │ │ ├── activity.component.html │ │ │ │ │ ├── activity.component.spec.ts │ │ │ │ │ └── activity.component.ts │ │ │ │ ├── contacts │ │ │ │ │ ├── contact-data.ts │ │ │ │ │ ├── contacts.component.css │ │ │ │ │ ├── contacts.component.html │ │ │ │ │ ├── contacts.component.spec.ts │ │ │ │ │ └── contacts.component.ts │ │ │ │ ├── sales-overview-grap │ │ │ │ │ ├── data.json │ │ │ │ │ ├── sales-overview-grap.component.css │ │ │ │ │ ├── sales-overview-grap.component.html │ │ │ │ │ ├── sales-overview-grap.component.spec.ts │ │ │ │ │ └── sales-overview-grap.component.ts │ │ │ │ ├── sticker │ │ │ │ │ ├── sticker.component.css │ │ │ │ │ ├── sticker.component.html │ │ │ │ │ ├── sticker.component.spec.ts │ │ │ │ │ └── sticker.component.ts │ │ │ │ └── visiter-graph │ │ │ │ │ ├── data.json │ │ │ │ │ ├── visiter-graph.component.css │ │ │ │ │ ├── visiter-graph.component.html │ │ │ │ │ ├── visiter-graph.component.spec.ts │ │ │ │ │ └── visiter-graph.component.ts │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.scss │ │ │ ├── dashboard.component.ts │ │ │ ├── dashboard.module.ts │ │ │ ├── dashboard.routing.ts │ │ │ └── data.json │ │ ├── demo-material-module.ts │ │ ├── layouts │ │ │ └── full │ │ │ │ ├── full.component.html │ │ │ │ ├── full.component.ts │ │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar │ │ │ │ ├── sidebar.component.html │ │ │ │ └── sidebar.component.ts │ │ ├── material-component │ │ │ ├── buttons │ │ │ │ ├── buttons.component.html │ │ │ │ ├── buttons.component.scss │ │ │ │ └── buttons.component.ts │ │ │ ├── chips │ │ │ │ ├── chips.component.html │ │ │ │ ├── chips.component.scss │ │ │ │ └── chips.component.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-overview-example.html │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ └── dialog.component.ts │ │ │ ├── expansion │ │ │ │ ├── expansion.component.html │ │ │ │ ├── expansion.component.scss │ │ │ │ └── expansion.component.ts │ │ │ ├── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ └── grid.component.ts │ │ │ ├── lists │ │ │ │ ├── lists.component.html │ │ │ │ ├── lists.component.scss │ │ │ │ └── lists.component.ts │ │ │ ├── material.module.ts │ │ │ ├── material.routing.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── progress-snipper │ │ │ │ ├── progress-snipper.component.html │ │ │ │ ├── progress-snipper.component.scss │ │ │ │ └── progress-snipper.component.ts │ │ │ ├── progress │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ └── progress.component.ts │ │ │ ├── slide-toggle │ │ │ │ ├── slide-toggle.component.html │ │ │ │ ├── slide-toggle.component.scss │ │ │ │ └── slide-toggle.component.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ └── slider.component.ts │ │ │ ├── snackbar │ │ │ │ ├── snackbar.component.html │ │ │ │ ├── snackbar.component.scss │ │ │ │ └── snackbar.component.ts │ │ │ ├── stepper │ │ │ │ ├── stepper.component.html │ │ │ │ ├── stepper.component.scss │ │ │ │ └── stepper.component.ts │ │ │ ├── tabs │ │ │ │ ├── tabs.component.html │ │ │ │ ├── tabs.component.scss │ │ │ │ └── tabs.component.ts │ │ │ ├── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.scss │ │ │ │ └── toolbar.component.ts │ │ │ └── tooltip │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ └── tooltip.component.ts │ │ └── shared │ │ │ ├── accordion │ │ │ ├── accordion.directive.ts │ │ │ ├── accordionanchor.directive.ts │ │ │ ├── accordionlink.directive.ts │ │ │ └── index.ts │ │ │ ├── menu-items │ │ │ └── menu-items.ts │ │ │ ├── shared.module.ts │ │ │ └── spinner.component.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── images │ │ │ ├── background │ │ │ │ ├── profile-bg.jpg │ │ │ │ └── user-info.jpg │ │ │ ├── big │ │ │ │ ├── img1.jpg │ │ │ │ ├── img2.jpg │ │ │ │ ├── img3.jpg │ │ │ │ ├── img4.jpg │ │ │ │ ├── img5.jpg │ │ │ │ └── img6.jpg │ │ │ ├── custom-select.png │ │ │ ├── favicon.png │ │ │ ├── logo-icon.png │ │ │ ├── logo-light-icon.png │ │ │ ├── logo-light-text.png │ │ │ ├── logo-text.png │ │ │ └── users │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ ├── d1.jpg │ │ │ │ ├── d2.jpg │ │ │ │ ├── d3.jpg │ │ │ │ ├── d4.jpg │ │ │ │ ├── d5.jpg │ │ │ │ └── profile.png │ │ └── styles │ │ │ ├── app.scss │ │ │ ├── header.scss │ │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── pages.scss │ │ │ ├── responsive.scss │ │ │ ├── sidebar.scss │ │ │ ├── spinner.scss │ │ │ ├── style.scss │ │ │ └── variable.scss │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ └── typings.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── angular-13 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .npmrc ├── angular.json ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── dashboard │ │ │ ├── dashboard-components │ │ │ │ ├── activity-timeline │ │ │ │ │ ├── activity-timeline-data.ts │ │ │ │ │ ├── activity-timeline.component.html │ │ │ │ │ └── activity-timeline.component.ts │ │ │ │ ├── contacts │ │ │ │ │ ├── contact-data.ts │ │ │ │ │ ├── contacts.component.html │ │ │ │ │ └── contacts.component.ts │ │ │ │ ├── our-visiter │ │ │ │ │ ├── our-visiter.component.html │ │ │ │ │ └── our-visiter.component.ts │ │ │ │ ├── profile │ │ │ │ │ ├── profile.component.html │ │ │ │ │ └── profile.component.ts │ │ │ │ └── sales-overview │ │ │ │ │ ├── sales-overview.component.html │ │ │ │ │ └── sales-overview.component.ts │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.ts │ │ │ ├── dashboard.module.ts │ │ │ └── dashboard.routing.ts │ │ ├── demo-material-module.ts │ │ ├── layouts │ │ │ └── full │ │ │ │ ├── full.component.html │ │ │ │ ├── full.component.ts │ │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar │ │ │ │ ├── sidebar.component.html │ │ │ │ └── sidebar.component.ts │ │ ├── material-component │ │ │ ├── buttons │ │ │ │ ├── buttons.component.html │ │ │ │ ├── buttons.component.scss │ │ │ │ └── buttons.component.ts │ │ │ ├── chips │ │ │ │ ├── chips.component.html │ │ │ │ ├── chips.component.scss │ │ │ │ └── chips.component.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-overview-example.html │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ └── dialog.component.ts │ │ │ ├── expansion │ │ │ │ ├── expansion.component.html │ │ │ │ ├── expansion.component.scss │ │ │ │ └── expansion.component.ts │ │ │ ├── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ └── grid.component.ts │ │ │ ├── lists │ │ │ │ ├── lists.component.html │ │ │ │ ├── lists.component.scss │ │ │ │ └── lists.component.ts │ │ │ ├── material.module.ts │ │ │ ├── material.routing.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── progress-snipper │ │ │ │ ├── progress-snipper.component.html │ │ │ │ ├── progress-snipper.component.scss │ │ │ │ └── progress-snipper.component.ts │ │ │ ├── progress │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ └── progress.component.ts │ │ │ ├── slide-toggle │ │ │ │ ├── slide-toggle.component.html │ │ │ │ ├── slide-toggle.component.scss │ │ │ │ └── slide-toggle.component.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ └── slider.component.ts │ │ │ ├── snackbar │ │ │ │ ├── snackbar.component.html │ │ │ │ ├── snackbar.component.scss │ │ │ │ └── snackbar.component.ts │ │ │ ├── stepper │ │ │ │ ├── stepper.component.html │ │ │ │ ├── stepper.component.scss │ │ │ │ └── stepper.component.ts │ │ │ ├── tabs │ │ │ │ ├── tabs.component.html │ │ │ │ ├── tabs.component.scss │ │ │ │ └── tabs.component.ts │ │ │ ├── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.scss │ │ │ │ └── toolbar.component.ts │ │ │ └── tooltip │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ └── tooltip.component.ts │ │ └── shared │ │ │ ├── accordion │ │ │ ├── accordion.directive.ts │ │ │ ├── accordionanchor.directive.ts │ │ │ ├── accordionlink.directive.ts │ │ │ └── index.ts │ │ │ ├── menu-items │ │ │ └── menu-items.ts │ │ │ ├── shared.module.ts │ │ │ └── spinner.component.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── images │ │ │ ├── background │ │ │ │ ├── profile-bg.jpg │ │ │ │ └── user-info.jpg │ │ │ ├── big │ │ │ │ ├── img1.jpg │ │ │ │ ├── img2.jpg │ │ │ │ ├── img3.jpg │ │ │ │ ├── img4.jpg │ │ │ │ ├── img5.jpg │ │ │ │ └── img6.jpg │ │ │ ├── custom-select.png │ │ │ ├── favicon.png │ │ │ ├── logo-icon.png │ │ │ ├── logo-light-icon.png │ │ │ ├── logo-light-text.png │ │ │ ├── logo-text.png │ │ │ └── users │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ ├── d1.jpg │ │ │ │ ├── d2.jpg │ │ │ │ ├── d3.jpg │ │ │ │ ├── d4.jpg │ │ │ │ ├── d5.jpg │ │ │ │ └── profile.png │ │ └── styles │ │ │ ├── component │ │ │ ├── _card.scss │ │ │ ├── _dashboard.scss │ │ │ ├── _global.scss │ │ │ ├── _header.scss │ │ │ ├── _heading.scss │ │ │ ├── _sidebar.scss │ │ │ └── _spinner.scss │ │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── mixins │ │ │ ├── _color.scss │ │ │ ├── _font.scss │ │ │ ├── _spacing.scss │ │ │ └── _weight.scss │ │ │ ├── responsive.scss │ │ │ ├── style.scss │ │ │ └── variable.scss │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ └── typings.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── angular-14 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .npmrc ├── angular.json ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── dashboard │ │ │ ├── dashboard-components │ │ │ │ ├── activity-timeline │ │ │ │ │ ├── activity-timeline-data.ts │ │ │ │ │ ├── activity-timeline.component.html │ │ │ │ │ └── activity-timeline.component.ts │ │ │ │ ├── contacts │ │ │ │ │ ├── contact-data.ts │ │ │ │ │ ├── contacts.component.html │ │ │ │ │ └── contacts.component.ts │ │ │ │ ├── our-visiter │ │ │ │ │ ├── our-visiter.component.html │ │ │ │ │ └── our-visiter.component.ts │ │ │ │ ├── profile │ │ │ │ │ ├── profile.component.html │ │ │ │ │ └── profile.component.ts │ │ │ │ └── sales-overview │ │ │ │ │ ├── sales-overview.component.html │ │ │ │ │ └── sales-overview.component.ts │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.ts │ │ │ ├── dashboard.module.ts │ │ │ └── dashboard.routing.ts │ │ ├── demo-material-module.ts │ │ ├── layouts │ │ │ └── full │ │ │ │ ├── full.component.html │ │ │ │ ├── full.component.ts │ │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar │ │ │ │ ├── sidebar.component.html │ │ │ │ └── sidebar.component.ts │ │ ├── material-component │ │ │ ├── buttons │ │ │ │ ├── buttons.component.html │ │ │ │ ├── buttons.component.scss │ │ │ │ └── buttons.component.ts │ │ │ ├── chips │ │ │ │ ├── chips.component.html │ │ │ │ ├── chips.component.scss │ │ │ │ └── chips.component.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-overview-example.html │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ └── dialog.component.ts │ │ │ ├── expansion │ │ │ │ ├── expansion.component.html │ │ │ │ ├── expansion.component.scss │ │ │ │ └── expansion.component.ts │ │ │ ├── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ └── grid.component.ts │ │ │ ├── lists │ │ │ │ ├── lists.component.html │ │ │ │ ├── lists.component.scss │ │ │ │ └── lists.component.ts │ │ │ ├── material.module.ts │ │ │ ├── material.routing.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── progress-snipper │ │ │ │ ├── progress-snipper.component.html │ │ │ │ ├── progress-snipper.component.scss │ │ │ │ └── progress-snipper.component.ts │ │ │ ├── progress │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ └── progress.component.ts │ │ │ ├── slide-toggle │ │ │ │ ├── slide-toggle.component.html │ │ │ │ ├── slide-toggle.component.scss │ │ │ │ └── slide-toggle.component.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ └── slider.component.ts │ │ │ ├── snackbar │ │ │ │ ├── snackbar.component.html │ │ │ │ ├── snackbar.component.scss │ │ │ │ └── snackbar.component.ts │ │ │ ├── stepper │ │ │ │ ├── stepper.component.html │ │ │ │ ├── stepper.component.scss │ │ │ │ └── stepper.component.ts │ │ │ ├── tabs │ │ │ │ ├── tabs.component.html │ │ │ │ ├── tabs.component.scss │ │ │ │ └── tabs.component.ts │ │ │ ├── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.scss │ │ │ │ └── toolbar.component.ts │ │ │ └── tooltip │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ └── tooltip.component.ts │ │ └── shared │ │ │ ├── accordion │ │ │ ├── accordion.directive.ts │ │ │ ├── accordionanchor.directive.ts │ │ │ ├── accordionlink.directive.ts │ │ │ └── index.ts │ │ │ ├── menu-items │ │ │ └── menu-items.ts │ │ │ ├── shared.module.ts │ │ │ └── spinner.component.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── images │ │ │ ├── background │ │ │ │ ├── profile-bg.jpg │ │ │ │ └── user-info.jpg │ │ │ ├── big │ │ │ │ ├── img1.jpg │ │ │ │ ├── img2.jpg │ │ │ │ ├── img3.jpg │ │ │ │ ├── img4.jpg │ │ │ │ ├── img5.jpg │ │ │ │ └── img6.jpg │ │ │ ├── custom-select.png │ │ │ ├── favicon.png │ │ │ ├── logo-icon.png │ │ │ ├── logo-light-icon.png │ │ │ ├── logo-light-text.png │ │ │ ├── logo-text.png │ │ │ └── users │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ ├── d1.jpg │ │ │ │ ├── d2.jpg │ │ │ │ ├── d3.jpg │ │ │ │ ├── d4.jpg │ │ │ │ ├── d5.jpg │ │ │ │ └── profile.png │ │ └── styles │ │ │ ├── component │ │ │ ├── _card.scss │ │ │ ├── _dashboard.scss │ │ │ ├── _global.scss │ │ │ ├── _header.scss │ │ │ ├── _heading.scss │ │ │ ├── _sidebar.scss │ │ │ └── _spinner.scss │ │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── mixins │ │ │ ├── _color.scss │ │ │ ├── _font.scss │ │ │ ├── _spacing.scss │ │ │ └── _weight.scss │ │ │ ├── responsive.scss │ │ │ ├── style.scss │ │ │ └── variable.scss │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ └── typings.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── angular-16 ├── .editorconfig ├── .gitignore ├── .npmrc ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── dashboard │ │ │ ├── dashboard-components │ │ │ │ ├── activity-timeline │ │ │ │ │ ├── activity-timeline-data.ts │ │ │ │ │ ├── activity-timeline.component.html │ │ │ │ │ └── activity-timeline.component.ts │ │ │ │ ├── contacts │ │ │ │ │ ├── contact-data.ts │ │ │ │ │ ├── contacts.component.html │ │ │ │ │ └── contacts.component.ts │ │ │ │ ├── our-visiter │ │ │ │ │ ├── our-visiter.component.html │ │ │ │ │ └── our-visiter.component.ts │ │ │ │ ├── profile │ │ │ │ │ ├── profile.component.html │ │ │ │ │ └── profile.component.ts │ │ │ │ └── sales-overview │ │ │ │ │ ├── sales-overview.component.html │ │ │ │ │ └── sales-overview.component.ts │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.ts │ │ │ ├── dashboard.module.ts │ │ │ └── dashboard.routing.ts │ │ ├── demo-material-module.ts │ │ ├── layouts │ │ │ └── full │ │ │ │ ├── full.component.html │ │ │ │ ├── full.component.ts │ │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar │ │ │ │ ├── sidebar.component.html │ │ │ │ └── sidebar.component.ts │ │ ├── material-component │ │ │ ├── buttons │ │ │ │ ├── buttons.component.html │ │ │ │ ├── buttons.component.scss │ │ │ │ └── buttons.component.ts │ │ │ ├── chips │ │ │ │ ├── chips.component.html │ │ │ │ ├── chips.component.scss │ │ │ │ └── chips.component.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-overview-example.html │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ └── dialog.component.ts │ │ │ ├── expansion │ │ │ │ ├── expansion.component.html │ │ │ │ ├── expansion.component.scss │ │ │ │ └── expansion.component.ts │ │ │ ├── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ └── grid.component.ts │ │ │ ├── lists │ │ │ │ ├── lists.component.html │ │ │ │ ├── lists.component.scss │ │ │ │ └── lists.component.ts │ │ │ ├── material.module.ts │ │ │ ├── material.routing.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── progress-snipper │ │ │ │ ├── progress-snipper.component.html │ │ │ │ ├── progress-snipper.component.scss │ │ │ │ └── progress-snipper.component.ts │ │ │ ├── progress │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ └── progress.component.ts │ │ │ ├── slide-toggle │ │ │ │ ├── slide-toggle.component.html │ │ │ │ ├── slide-toggle.component.scss │ │ │ │ └── slide-toggle.component.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ └── slider.component.ts │ │ │ ├── snackbar │ │ │ │ ├── snackbar.component.html │ │ │ │ ├── snackbar.component.scss │ │ │ │ └── snackbar.component.ts │ │ │ ├── stepper │ │ │ │ ├── stepper.component.html │ │ │ │ ├── stepper.component.scss │ │ │ │ └── stepper.component.ts │ │ │ ├── tabs │ │ │ │ ├── tabs.component.html │ │ │ │ ├── tabs.component.scss │ │ │ │ └── tabs.component.ts │ │ │ ├── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.scss │ │ │ │ └── toolbar.component.ts │ │ │ └── tooltip │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ └── tooltip.component.ts │ │ └── shared │ │ │ ├── accordion │ │ │ ├── accordion.directive.ts │ │ │ ├── accordionanchor.directive.ts │ │ │ ├── accordionlink.directive.ts │ │ │ └── index.ts │ │ │ ├── menu-items │ │ │ └── menu-items.ts │ │ │ ├── shared.module.ts │ │ │ └── spinner.component.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── images │ │ │ ├── background │ │ │ │ ├── profile-bg.jpg │ │ │ │ └── user-info.jpg │ │ │ ├── big │ │ │ │ ├── img1.jpg │ │ │ │ ├── img2.jpg │ │ │ │ ├── img3.jpg │ │ │ │ ├── img4.jpg │ │ │ │ ├── img5.jpg │ │ │ │ └── img6.jpg │ │ │ ├── custom-select.png │ │ │ ├── favicon.png │ │ │ ├── logo-icon.png │ │ │ ├── logo-light-icon.png │ │ │ ├── logo-light-text.png │ │ │ ├── logo-text.png │ │ │ └── users │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ ├── d1.jpg │ │ │ │ ├── d2.jpg │ │ │ │ ├── d3.jpg │ │ │ │ ├── d4.jpg │ │ │ │ ├── d5.jpg │ │ │ │ └── profile.png │ │ └── styles │ │ │ ├── component │ │ │ ├── _card.scss │ │ │ ├── _dashboard.scss │ │ │ ├── _global.scss │ │ │ ├── _header.scss │ │ │ ├── _heading.scss │ │ │ ├── _sidebar.scss │ │ │ └── _spinner.scss │ │ │ ├── grid │ │ │ ├── _grid.scss │ │ │ ├── _mixins.scss │ │ │ └── _variables.scss │ │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── mixins │ │ │ ├── _color.scss │ │ │ ├── _font.scss │ │ │ ├── _spacing.scss │ │ │ └── _weight.scss │ │ │ ├── responsive.scss │ │ │ ├── style.scss │ │ │ └── variable.scss │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ └── styles.scss ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-17 ├── .editorconfig ├── .gitignore ├── .npmrc ├── README.md ├── angular.json ├── netlify.toml ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── dashboard │ │ │ ├── dashboard-components │ │ │ │ ├── activity-timeline │ │ │ │ │ ├── activity-timeline-data.ts │ │ │ │ │ ├── activity-timeline.component.html │ │ │ │ │ └── activity-timeline.component.ts │ │ │ │ ├── contacts │ │ │ │ │ ├── contact-data.ts │ │ │ │ │ ├── contacts.component.html │ │ │ │ │ └── contacts.component.ts │ │ │ │ ├── our-visiter │ │ │ │ │ ├── our-visiter.component.html │ │ │ │ │ └── our-visiter.component.ts │ │ │ │ ├── profile │ │ │ │ │ ├── profile.component.html │ │ │ │ │ └── profile.component.ts │ │ │ │ └── sales-overview │ │ │ │ │ ├── sales-overview.component.html │ │ │ │ │ └── sales-overview.component.ts │ │ │ ├── dashboard.component.html │ │ │ ├── dashboard.component.ts │ │ │ ├── dashboard.module.ts │ │ │ └── dashboard.routing.ts │ │ ├── demo-material-module.ts │ │ ├── layouts │ │ │ └── full │ │ │ │ ├── full.component.html │ │ │ │ ├── full.component.ts │ │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ └── header.component.ts │ │ │ │ └── sidebar │ │ │ │ ├── sidebar.component.html │ │ │ │ └── sidebar.component.ts │ │ ├── material-component │ │ │ ├── buttons │ │ │ │ ├── buttons.component.html │ │ │ │ ├── buttons.component.scss │ │ │ │ └── buttons.component.ts │ │ │ ├── chips │ │ │ │ ├── chips.component.html │ │ │ │ ├── chips.component.scss │ │ │ │ └── chips.component.ts │ │ │ ├── dialog │ │ │ │ ├── dialog-overview-example.html │ │ │ │ ├── dialog.component.html │ │ │ │ ├── dialog.component.scss │ │ │ │ └── dialog.component.ts │ │ │ ├── expansion │ │ │ │ ├── expansion.component.html │ │ │ │ ├── expansion.component.scss │ │ │ │ └── expansion.component.ts │ │ │ ├── grid │ │ │ │ ├── grid.component.html │ │ │ │ ├── grid.component.scss │ │ │ │ └── grid.component.ts │ │ │ ├── lists │ │ │ │ ├── lists.component.html │ │ │ │ ├── lists.component.scss │ │ │ │ └── lists.component.ts │ │ │ ├── material.module.ts │ │ │ ├── material.routing.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── progress-snipper │ │ │ │ ├── progress-snipper.component.html │ │ │ │ ├── progress-snipper.component.scss │ │ │ │ └── progress-snipper.component.ts │ │ │ ├── progress │ │ │ │ ├── progress.component.html │ │ │ │ ├── progress.component.scss │ │ │ │ └── progress.component.ts │ │ │ ├── slide-toggle │ │ │ │ ├── slide-toggle.component.html │ │ │ │ ├── slide-toggle.component.scss │ │ │ │ └── slide-toggle.component.ts │ │ │ ├── slider │ │ │ │ ├── slider.component.html │ │ │ │ ├── slider.component.scss │ │ │ │ └── slider.component.ts │ │ │ ├── snackbar │ │ │ │ ├── snackbar.component.html │ │ │ │ ├── snackbar.component.scss │ │ │ │ └── snackbar.component.ts │ │ │ ├── stepper │ │ │ │ ├── stepper.component.html │ │ │ │ ├── stepper.component.scss │ │ │ │ └── stepper.component.ts │ │ │ ├── tabs │ │ │ │ ├── tabs.component.html │ │ │ │ ├── tabs.component.scss │ │ │ │ └── tabs.component.ts │ │ │ ├── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.scss │ │ │ │ └── toolbar.component.ts │ │ │ └── tooltip │ │ │ │ ├── tooltip.component.html │ │ │ │ ├── tooltip.component.scss │ │ │ │ └── tooltip.component.ts │ │ └── shared │ │ │ ├── accordion │ │ │ ├── accordion.directive.ts │ │ │ ├── accordionanchor.directive.ts │ │ │ ├── accordionlink.directive.ts │ │ │ └── index.ts │ │ │ ├── menu-items │ │ │ └── menu-items.ts │ │ │ ├── shared.module.ts │ │ │ └── spinner.component.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── images │ │ │ ├── background │ │ │ │ ├── profile-bg.jpg │ │ │ │ └── user-info.jpg │ │ │ ├── big │ │ │ │ ├── img1.jpg │ │ │ │ ├── img2.jpg │ │ │ │ ├── img3.jpg │ │ │ │ ├── img4.jpg │ │ │ │ ├── img5.jpg │ │ │ │ └── img6.jpg │ │ │ ├── custom-select.png │ │ │ ├── favicon.png │ │ │ ├── favicon.svg │ │ │ ├── logo-icon.png │ │ │ ├── logo-icon.svg │ │ │ ├── logo-light-icon.png │ │ │ ├── logo-light-icon.svg │ │ │ ├── logo-light-text.png │ │ │ ├── logo-light-text.svg │ │ │ ├── logo-text.png │ │ │ ├── logo-text.svg │ │ │ └── users │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.jpg │ │ │ │ ├── 3.jpg │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.jpg │ │ │ │ ├── 8.jpg │ │ │ │ ├── d1.jpg │ │ │ │ ├── d2.jpg │ │ │ │ ├── d3.jpg │ │ │ │ ├── d4.jpg │ │ │ │ ├── d5.jpg │ │ │ │ └── profile.png │ │ └── styles │ │ │ ├── component │ │ │ ├── _card.scss │ │ │ ├── _dashboard.scss │ │ │ ├── _global.scss │ │ │ ├── _header.scss │ │ │ ├── _heading.scss │ │ │ ├── _sidebar.scss │ │ │ └── _spinner.scss │ │ │ ├── grid │ │ │ ├── _grid.scss │ │ │ ├── _mixins.scss │ │ │ └── _variables.scss │ │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── mixins │ │ │ ├── _color.scss │ │ │ ├── _font.scss │ │ │ ├── _spacing.scss │ │ │ └── _weight.scss │ │ │ ├── responsive.scss │ │ │ ├── style.scss │ │ │ └── variable.scss │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ └── styles.scss ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── discount-code.html ├── docs.html ├── hire-us.html ├── landingpage ├── assets │ └── plugins │ │ ├── bootstrap │ │ └── dist │ │ │ ├── css │ │ │ ├── bootstrap-grid.min.css │ │ │ ├── bootstrap-reboot.min.css │ │ │ └── bootstrap.min.css │ │ │ └── js │ │ │ ├── bootstrap.bundle.min.js │ │ │ └── bootstrap.min.js │ │ ├── jquery │ │ └── dist │ │ │ ├── core.js │ │ │ ├── jquery.min.js │ │ │ └── jquery.slim.min.js │ │ └── popper.js │ │ └── dist │ │ ├── esm │ │ ├── popper-utils.min.js │ │ └── popper.min.js │ │ ├── popper-utils.min.js │ │ ├── popper.min.js │ │ └── umd │ │ ├── popper-utils.min.js │ │ └── popper.min.js ├── dist │ ├── css │ │ ├── icons │ │ │ └── material-design-iconic-font │ │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ ├── material-design-iconic-font.min.css │ │ │ │ └── materialdesignicons.min.css │ │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ ├── Material-Design-Iconic-Font.woff2 │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ └── style.css │ └── scss │ │ ├── bootstrap │ │ ├── _alert.scss │ │ ├── _badge.scss │ │ ├── _breadcrumb.scss │ │ ├── _button-group.scss │ │ ├── _buttons.scss │ │ ├── _card.scss │ │ ├── _carousel.scss │ │ ├── _close.scss │ │ ├── _code.scss │ │ ├── _custom-forms.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _functions.scss │ │ ├── _grid.scss │ │ ├── _images.scss │ │ ├── _input-group.scss │ │ ├── _jumbotron.scss │ │ ├── _list-group.scss │ │ ├── _media.scss │ │ ├── _mixins.scss │ │ ├── _modal.scss │ │ ├── _nav.scss │ │ ├── _navbar.scss │ │ ├── _pagination.scss │ │ ├── _popover.scss │ │ ├── _print.scss │ │ ├── _progress.scss │ │ ├── _reboot.scss │ │ ├── _root.scss │ │ ├── _tables.scss │ │ ├── _tooltip.scss │ │ ├── _transitions.scss │ │ ├── _type.scss │ │ ├── _utilities.scss │ │ ├── _variables.scss │ │ ├── bootstrap-grid.scss │ │ ├── bootstrap-reboot.scss │ │ ├── bootstrap.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _background-variant.scss │ │ │ ├── _badge.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-shadow.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _caret.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _float.scss │ │ │ ├── _forms.scss │ │ │ ├── _gradients.scss │ │ │ ├── _grid-framework.scss │ │ │ ├── _grid.scss │ │ │ ├── _hover.scss │ │ │ ├── _image.scss │ │ │ ├── _list-group.scss │ │ │ ├── _lists.scss │ │ │ ├── _nav-divider.scss │ │ │ ├── _pagination.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _resize.scss │ │ │ ├── _screen-reader.scss │ │ │ ├── _size.scss │ │ │ ├── _table-row.scss │ │ │ ├── _text-emphasis.scss │ │ │ ├── _text-hide.scss │ │ │ ├── _text-truncate.scss │ │ │ ├── _transition.scss │ │ │ └── _visibility.scss │ │ └── utilities │ │ │ ├── _align.scss │ │ │ ├── _background.scss │ │ │ ├── _borders.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _display.scss │ │ │ ├── _embed.scss │ │ │ ├── _flex.scss │ │ │ ├── _float.scss │ │ │ ├── _position.scss │ │ │ ├── _screenreaders.scss │ │ │ ├── _shadows.scss │ │ │ ├── _sizing.scss │ │ │ ├── _spacing.scss │ │ │ ├── _text.scss │ │ │ └── _visibility.scss │ │ ├── custom.scss │ │ ├── prepros-6.config │ │ ├── responsive.scss │ │ ├── style.scss │ │ └── variable.scss └── index.html └── package ├── .editorconfig ├── .gitignore ├── .npmrc ├── README.md ├── angular.json ├── netlify.toml ├── package-lock.json ├── package.json ├── src ├── app │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.config.ts │ ├── app.routes.ts │ ├── components │ │ ├── activity-timeline │ │ │ ├── activity-timeline.component.html │ │ │ └── activity-timeline.component.ts │ │ ├── my-contacts │ │ │ ├── my-contacts.component.html │ │ │ └── my-contacts.component.ts │ │ ├── our-visitors │ │ │ ├── our-visitors.component.html │ │ │ └── our-visitors.component.ts │ │ ├── profile-card │ │ │ ├── profile-card.component.html │ │ │ └── profile-card.component.ts │ │ └── sales-overview │ │ │ ├── sales-overview.component.html │ │ │ └── sales-overview.component.ts │ ├── config.ts │ ├── layouts │ │ ├── blank │ │ │ ├── blank.component.html │ │ │ └── blank.component.ts │ │ └── full │ │ │ ├── full.component.html │ │ │ ├── full.component.ts │ │ │ ├── header │ │ │ ├── header.component.html │ │ │ └── header.component.ts │ │ │ ├── sidebar │ │ │ ├── branding.component.ts │ │ │ ├── nav-item │ │ │ │ ├── nav-item.component.html │ │ │ │ ├── nav-item.component.ts │ │ │ │ └── nav-item.ts │ │ │ ├── sidebar-data.ts │ │ │ ├── sidebar.component.html │ │ │ └── sidebar.component.ts │ │ │ └── top-strip │ │ │ ├── topstrip.component.html │ │ │ └── topstrip.component.ts │ ├── material.module.ts │ ├── pages │ │ ├── authentication │ │ │ ├── authentication.routes.ts │ │ │ ├── side-login │ │ │ │ ├── side-login.component.html │ │ │ │ └── side-login.component.ts │ │ │ └── side-register │ │ │ │ ├── side-register.component.html │ │ │ │ └── side-register.component.ts │ │ ├── extra │ │ │ ├── extra.routes.ts │ │ │ ├── icons │ │ │ │ ├── icons.component.html │ │ │ │ └── icons.component.ts │ │ │ └── sample-page │ │ │ │ ├── sample-page.component.html │ │ │ │ └── sample-page.component.ts │ │ ├── pages.routes.ts │ │ ├── starter │ │ │ ├── starter.component.html │ │ │ └── starter.component.ts │ │ └── ui-components │ │ │ ├── badge │ │ │ ├── badge.component.html │ │ │ └── badge.component.ts │ │ │ ├── chips │ │ │ ├── chips.component.html │ │ │ ├── chips.component.scss │ │ │ └── chips.component.ts │ │ │ ├── forms │ │ │ ├── forms.component.html │ │ │ └── forms.component.ts │ │ │ ├── lists │ │ │ ├── lists.component.html │ │ │ └── lists.component.ts │ │ │ ├── menu │ │ │ ├── menu.component.html │ │ │ └── menu.component.ts │ │ │ ├── tables │ │ │ ├── tables.component.html │ │ │ └── tables.component.ts │ │ │ ├── tooltips │ │ │ ├── tooltips.component.html │ │ │ └── tooltips.component.ts │ │ │ └── ui-components.routes.ts │ ├── pipe │ │ └── filter.pipe.ts │ └── services │ │ ├── core.service.ts │ │ └── nav.service.ts ├── assets │ ├── .gitkeep │ ├── images │ │ ├── backgrounds │ │ │ ├── profile-bg.jpg │ │ │ ├── rocket.png │ │ │ └── user-info.jpg │ │ ├── blog │ │ │ ├── blog-img1.jpg │ │ │ ├── blog-img2.jpg │ │ │ ├── blog-img3.jpg │ │ │ └── blog-img4.jpg │ │ ├── logos │ │ │ ├── dark-logo.svg │ │ │ ├── light-logo.svg │ │ │ └── logo-wrappixel.svg │ │ ├── products │ │ │ ├── p1.jpg │ │ │ ├── p2.jpg │ │ │ ├── p3.jpg │ │ │ ├── p4.jpg │ │ │ ├── product-1.png │ │ │ ├── product-2.png │ │ │ ├── product-3.png │ │ │ └── product-4.png │ │ ├── profile │ │ │ ├── user-1.jpg │ │ │ ├── user-2.jpg │ │ │ ├── user-3.jpg │ │ │ └── user-4.jpg │ │ └── svgs │ │ │ ├── angular-cat-icon.svg │ │ │ ├── bt-cat-icon.svg │ │ │ ├── facebook-icon.svg │ │ │ ├── google-icon.svg │ │ │ ├── next-cat-icon.svg │ │ │ ├── nuxt-cat-icon.svg │ │ │ ├── react-cat-icon.svg │ │ │ ├── tailwindcss.svg │ │ │ └── vue-cat-icon.svg │ └── scss │ │ ├── _container.scss │ │ ├── _variables.scss │ │ ├── grid │ │ ├── _grid.scss │ │ ├── _mixins.scss │ │ └── _variables.scss │ │ ├── helpers │ │ ├── _border-color.scss │ │ ├── _border.scss │ │ ├── _color.scss │ │ ├── _custom-flex.scss │ │ ├── _display.scss │ │ ├── _flexbox.scss │ │ ├── _functions.scss │ │ ├── _icon-size.scss │ │ ├── _index.scss │ │ ├── _rounded.scss │ │ ├── _spacing.scss │ │ ├── _text.scss │ │ └── _variables.scss │ │ ├── layouts │ │ ├── _header.scss │ │ ├── _layouts.scss │ │ ├── _sidebar.scss │ │ └── _transitions.scss │ │ ├── override-component │ │ ├── _badge.scss │ │ ├── _button-toggle.scss │ │ ├── _button.scss │ │ ├── _card.scss │ │ ├── _checkbox.scss │ │ ├── _chip.scss │ │ ├── _dialog.scss │ │ ├── _drawer.scss │ │ ├── _fab.scss │ │ ├── _form-field.scss │ │ ├── _index.scss │ │ ├── _list.scss │ │ ├── _menu.scss │ │ ├── _progress.scss │ │ ├── _table.scss │ │ ├── _theme.scss │ │ └── _typography.scss │ │ ├── pages │ │ ├── _auth.scss │ │ └── _dashboards.scss │ │ ├── style.scss │ │ ├── theme-variables │ │ ├── _default-variables.scss │ │ └── _light-theme-variables.scss │ │ └── themecolors │ │ └── _blue_theme.scss ├── favicon.ico ├── index.html ├── main.ts └── styles.scss ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /angular-11/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /angular-11/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /angular-11/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('material App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | /*it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | });*/ 14 | }); 15 | -------------------------------------------------------------------------------- /angular-11/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular-11/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /angular-11/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/app.component.css -------------------------------------------------------------------------------- /angular-11/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-11/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent {} 9 | -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/activity/activity.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/dashboard/dashboard-components/activity/activity.component.css -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/contacts/contacts.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/dashboard/dashboard-components/contacts/contacts.component.css -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/sales-overview-grap/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Bar": { 3 | "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 4 | "series": [[9, 4, 11, 7, 10, 12], [3, 2, 9, 5, 8, 10]] 5 | }, 6 | "Pie": { 7 | "series": [20, 10, 30, 40] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/sales-overview-grap/sales-overview-grap.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/dashboard/dashboard-components/sales-overview-grap/sales-overview-grap.component.css -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/sticker/sticker.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/dashboard/dashboard-components/sticker/sticker.component.css -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/sticker/sticker.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-sticker', 5 | templateUrl: './sticker.component.html', 6 | styleUrls: ['./sticker.component.css'] 7 | }) 8 | export class StickerComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/visiter-graph/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Bar": { 3 | "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 4 | "series": [[9, 4, 11, 7, 10, 12], [3, 2, 9, 5, 8, 10]] 5 | }, 6 | "Pie": { 7 | "series": [20, 10, 30, 40] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard-components/visiter-graph/visiter-graph.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/dashboard/dashboard-components/visiter-graph/visiter-graph.component.css -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard.component.scss: -------------------------------------------------------------------------------- 1 | .position-relative { 2 | position: relative; 3 | } 4 | 5 | .add-contact { 6 | position: absolute; 7 | right: 17px; 8 | top: 57px; 9 | } -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dashboard', 5 | templateUrl: './dashboard.component.html', 6 | styleUrls: ['./dashboard.component.scss'] 7 | }) 8 | export class DashboardComponent implements AfterViewInit { 9 | 10 | ngAfterViewInit() { } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/dashboard.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | export const DashboardRoutes: Routes = [{ 6 | path: '', 7 | component: DashboardComponent 8 | }]; 9 | -------------------------------------------------------------------------------- /angular-11/src/app/dashboard/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Bar": { 3 | "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 4 | "series": [[9, 4, 11, 7, 10, 12], [3, 2, 9, 5, 8, 10]] 5 | }, 6 | "Pie": { 7 | "series": [20, 10, 30, 40] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /angular-11/src/app/layouts/full/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: [] 7 | }) 8 | export class AppHeaderComponent {} 9 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/buttons/buttons.component.scss: -------------------------------------------------------------------------------- 1 | .example-button-row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {MatButtonModule} from '@angular/material/button'; 3 | 4 | @Component({ 5 | selector: 'app-buttons', 6 | templateUrl: './buttons.component.html', 7 | styleUrls: ['./buttons.component.scss'] 8 | }) 9 | export class ButtonsComponent { 10 | constructor() { } 11 | } 12 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .demo-chip-list { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/dialog/dialog.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/expansion/expansion.component.scss: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/lists/lists.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/lists/lists.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/menu/menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/menu/menu.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatMenuModule } from '@angular/material/menu'; 3 | @Component({ 4 | selector: 'app-menu', 5 | templateUrl: './menu.component.html', 6 | styleUrls: ['./menu.component.scss'] 7 | }) 8 | export class MenuComponent {} 9 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/progress-snipper/progress-snipper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/progress-snipper/progress-snipper.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/slide-toggle/slide-toggle.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/slide-toggle/slide-toggle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatSlideToggleModule } from '@angular/material/slide-toggle'; 3 | 4 | @Component({ 5 | selector: 'app-slide-toggle', 6 | templateUrl: './slide-toggle.component.html', 7 | styleUrls: ['./slide-toggle.component.scss'] 8 | }) 9 | export class SlideToggleComponent { 10 | color = 'accent'; 11 | checked = false; 12 | disabled = false; 13 | } 14 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/slider/slider.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/slider/slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatSliderModule } from '@angular/material/slider'; 3 | 4 | @Component({ 5 | selector: 'app-slider', 6 | templateUrl: './slider.component.html', 7 | styleUrls: ['./slider.component.scss'] 8 | }) 9 | export class SliderComponent { 10 | 11 | demo: number=0; 12 | val = 50; 13 | min = 0; 14 | max = 100; 15 | 16 | constructor() {} 17 | } 18 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/snackbar/snackbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/snackbar/snackbar.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/stepper/stepper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/app/material-component/stepper/stepper.component.scss -------------------------------------------------------------------------------- /angular-11/src/app/material-component/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | .demo-tab-group { 2 | border: 1px solid #e8e8e8; 3 | } 4 | 5 | .demo-tab-content { 6 | padding: 24px; 7 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import { MatTabsModule } from '@angular/material/tabs'; 3 | 4 | @Component({ 5 | selector: 'app-tabs', 6 | templateUrl: './tabs.component.html', 7 | styleUrls: ['./tabs.component.scss'] 8 | }) 9 | export class TabsComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/toolbar/toolbar.component.scss: -------------------------------------------------------------------------------- 1 | .no-shadow mat-toolbar{ 2 | box-shadow: none; 3 | } 4 | .example-fill-remaining-space { 5 | // This fills the remaining space, by using flexbox. 6 | // Every toolbar row uses a flexbox row layout. 7 | flex: 1 1 auto; 8 | } 9 | .example-icon { 10 | padding: 0 14px; 11 | } 12 | 13 | .example-spacer { 14 | flex: 1 1 auto; 15 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/toolbar/toolbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatToolbarModule } from '@angular/material/toolbar'; 3 | 4 | @Component({ 5 | selector: 'app-toolbar', 6 | templateUrl: './toolbar.component.html', 7 | styleUrls: ['./toolbar.component.scss'] 8 | }) 9 | export class ToolbarComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /angular-11/src/app/material-component/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | .example-tooltip-host { 2 | display: inline-flex; 3 | align-items: center; 4 | margin: 50px; 5 | } 6 | 7 | .example-select { 8 | margin: 0 10px; 9 | } -------------------------------------------------------------------------------- /angular-11/src/app/material-component/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TooltipPosition, MatTooltipModule } from '@angular/material/tooltip'; 3 | 4 | 5 | @Component({ 6 | selector: 'app-tooltip', 7 | templateUrl: './tooltip.component.html', 8 | styleUrls: ['./tooltip.component.scss'] 9 | }) 10 | export class TooltipComponent { 11 | position = 'before'; 12 | } 13 | -------------------------------------------------------------------------------- /angular-11/src/app/shared/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordionanchor.directive'; 2 | export * from './accordionlink.directive'; 3 | export * from './accordion.directive'; 4 | -------------------------------------------------------------------------------- /angular-11/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-11/src/assets/images/background/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/background/profile-bg.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/background/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/background/user-info.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/big/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/big/img1.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/big/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/big/img2.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/big/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/big/img3.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/big/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/big/img4.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/big/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/big/img5.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/big/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/big/img6.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /angular-11/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/favicon.png -------------------------------------------------------------------------------- /angular-11/src/assets/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/logo-icon.png -------------------------------------------------------------------------------- /angular-11/src/assets/images/logo-light-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/logo-light-icon.png -------------------------------------------------------------------------------- /angular-11/src/assets/images/logo-light-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/logo-light-text.png -------------------------------------------------------------------------------- /angular-11/src/assets/images/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/logo-text.png -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/1.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/2.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/3.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/4.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/5.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/6.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/7.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/8.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/d1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/d1.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/d2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/d2.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/d3.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/d4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/d4.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/d5.jpg -------------------------------------------------------------------------------- /angular-11/src/assets/images/users/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/images/users/profile.png -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /angular-11/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-11/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /angular-11/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-11/src/favicon.ico -------------------------------------------------------------------------------- /angular-11/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import 'hammerjs'; 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.log(err)); 14 | -------------------------------------------------------------------------------- /angular-11/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-11/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /angular-11/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ], 14 | "angularCompilerOptions": { 15 | "enableIvy": true 16 | } 17 | } -------------------------------------------------------------------------------- /angular-11/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular-12/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /angular-12/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('material App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | /*it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | });*/ 14 | }); 15 | -------------------------------------------------------------------------------- /angular-12/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular-12/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /angular-12/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/app.component.css -------------------------------------------------------------------------------- /angular-12/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-12/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent {} 9 | -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/activity/activity.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/dashboard/dashboard-components/activity/activity.component.css -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/contacts/contacts.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/dashboard/dashboard-components/contacts/contacts.component.css -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/sales-overview-grap/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Bar": { 3 | "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 4 | "series": [[9, 4, 11, 7, 10, 12], [3, 2, 9, 5, 8, 10]] 5 | }, 6 | "Pie": { 7 | "series": [20, 10, 30, 40] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/sales-overview-grap/sales-overview-grap.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/dashboard/dashboard-components/sales-overview-grap/sales-overview-grap.component.css -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/sticker/sticker.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/dashboard/dashboard-components/sticker/sticker.component.css -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/sticker/sticker.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-sticker', 5 | templateUrl: './sticker.component.html', 6 | styleUrls: ['./sticker.component.css'] 7 | }) 8 | export class StickerComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/visiter-graph/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Bar": { 3 | "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 4 | "series": [[9, 4, 11, 7, 10, 12], [3, 2, 9, 5, 8, 10]] 5 | }, 6 | "Pie": { 7 | "series": [20, 10, 30, 40] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard-components/visiter-graph/visiter-graph.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/dashboard/dashboard-components/visiter-graph/visiter-graph.component.css -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard.component.scss: -------------------------------------------------------------------------------- 1 | .position-relative { 2 | position: relative; 3 | } 4 | 5 | .add-contact { 6 | position: absolute; 7 | right: 17px; 8 | top: 57px; 9 | } -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dashboard', 5 | templateUrl: './dashboard.component.html', 6 | styleUrls: ['./dashboard.component.scss'] 7 | }) 8 | export class DashboardComponent implements AfterViewInit { 9 | 10 | ngAfterViewInit() { } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/dashboard.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | export const DashboardRoutes: Routes = [{ 6 | path: '', 7 | component: DashboardComponent 8 | }]; 9 | -------------------------------------------------------------------------------- /angular-12/src/app/dashboard/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Bar": { 3 | "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 4 | "series": [[9, 4, 11, 7, 10, 12], [3, 2, 9, 5, 8, 10]] 5 | }, 6 | "Pie": { 7 | "series": [20, 10, 30, 40] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /angular-12/src/app/layouts/full/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: [] 7 | }) 8 | export class AppHeaderComponent {} 9 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/buttons/buttons.component.scss: -------------------------------------------------------------------------------- 1 | .example-button-row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {MatButtonModule} from '@angular/material/button'; 3 | 4 | @Component({ 5 | selector: 'app-buttons', 6 | templateUrl: './buttons.component.html', 7 | styleUrls: ['./buttons.component.scss'] 8 | }) 9 | export class ButtonsComponent { 10 | constructor() { } 11 | } 12 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .demo-chip-list { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/dialog/dialog.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/expansion/expansion.component.scss: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/lists/lists.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/lists/lists.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/menu/menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/menu/menu.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatMenuModule } from '@angular/material/menu'; 3 | @Component({ 4 | selector: 'app-menu', 5 | templateUrl: './menu.component.html', 6 | styleUrls: ['./menu.component.scss'] 7 | }) 8 | export class MenuComponent {} 9 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/progress-snipper/progress-snipper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/progress-snipper/progress-snipper.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/slide-toggle/slide-toggle.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/slide-toggle/slide-toggle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatSlideToggleModule } from '@angular/material/slide-toggle'; 3 | 4 | @Component({ 5 | selector: 'app-slide-toggle', 6 | templateUrl: './slide-toggle.component.html', 7 | styleUrls: ['./slide-toggle.component.scss'] 8 | }) 9 | export class SlideToggleComponent { 10 | color = 'accent'; 11 | checked = false; 12 | disabled = false; 13 | } 14 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/slider/slider.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/slider/slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatSliderModule } from '@angular/material/slider'; 3 | 4 | @Component({ 5 | selector: 'app-slider', 6 | templateUrl: './slider.component.html', 7 | styleUrls: ['./slider.component.scss'] 8 | }) 9 | export class SliderComponent { 10 | 11 | demo: number=0; 12 | val = 50; 13 | min = 0; 14 | max = 100; 15 | 16 | constructor() {} 17 | } 18 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/snackbar/snackbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/snackbar/snackbar.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/stepper/stepper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/app/material-component/stepper/stepper.component.scss -------------------------------------------------------------------------------- /angular-12/src/app/material-component/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | .demo-tab-group { 2 | border: 1px solid #e8e8e8; 3 | } 4 | 5 | .demo-tab-content { 6 | padding: 24px; 7 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import { MatTabsModule } from '@angular/material/tabs'; 3 | 4 | @Component({ 5 | selector: 'app-tabs', 6 | templateUrl: './tabs.component.html', 7 | styleUrls: ['./tabs.component.scss'] 8 | }) 9 | export class TabsComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/toolbar/toolbar.component.scss: -------------------------------------------------------------------------------- 1 | .no-shadow mat-toolbar{ 2 | box-shadow: none; 3 | } 4 | .example-fill-remaining-space { 5 | // This fills the remaining space, by using flexbox. 6 | // Every toolbar row uses a flexbox row layout. 7 | flex: 1 1 auto; 8 | } 9 | .example-icon { 10 | padding: 0 14px; 11 | } 12 | 13 | .example-spacer { 14 | flex: 1 1 auto; 15 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/toolbar/toolbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatToolbarModule } from '@angular/material/toolbar'; 3 | 4 | @Component({ 5 | selector: 'app-toolbar', 6 | templateUrl: './toolbar.component.html', 7 | styleUrls: ['./toolbar.component.scss'] 8 | }) 9 | export class ToolbarComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /angular-12/src/app/material-component/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | .example-tooltip-host { 2 | display: inline-flex; 3 | align-items: center; 4 | margin: 50px; 5 | } 6 | 7 | .example-select { 8 | margin: 0 10px; 9 | } -------------------------------------------------------------------------------- /angular-12/src/app/material-component/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TooltipPosition, MatTooltipModule } from '@angular/material/tooltip'; 3 | 4 | 5 | @Component({ 6 | selector: 'app-tooltip', 7 | templateUrl: './tooltip.component.html', 8 | styleUrls: ['./tooltip.component.scss'] 9 | }) 10 | export class TooltipComponent { 11 | position = 'before'; 12 | } 13 | -------------------------------------------------------------------------------- /angular-12/src/app/shared/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordionanchor.directive'; 2 | export * from './accordionlink.directive'; 3 | export * from './accordion.directive'; 4 | -------------------------------------------------------------------------------- /angular-12/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-12/src/assets/images/background/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/background/profile-bg.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/background/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/background/user-info.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/big/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/big/img1.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/big/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/big/img2.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/big/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/big/img3.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/big/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/big/img4.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/big/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/big/img5.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/big/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/big/img6.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /angular-12/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/favicon.png -------------------------------------------------------------------------------- /angular-12/src/assets/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/logo-icon.png -------------------------------------------------------------------------------- /angular-12/src/assets/images/logo-light-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/logo-light-icon.png -------------------------------------------------------------------------------- /angular-12/src/assets/images/logo-light-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/logo-light-text.png -------------------------------------------------------------------------------- /angular-12/src/assets/images/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/logo-text.png -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/1.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/2.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/3.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/4.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/5.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/6.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/7.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/8.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/d1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/d1.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/d2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/d2.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/d3.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/d4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/d4.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/d5.jpg -------------------------------------------------------------------------------- /angular-12/src/assets/images/users/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/images/users/profile.png -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /angular-12/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-12/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /angular-12/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-12/src/favicon.ico -------------------------------------------------------------------------------- /angular-12/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import 'hammerjs'; 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.log(err)); 14 | -------------------------------------------------------------------------------- /angular-12/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-12/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /angular-12/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ], 14 | "angularCompilerOptions": { 15 | "enableIvy": true 16 | } 17 | } -------------------------------------------------------------------------------- /angular-12/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular-13/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /angular-13/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /angular-13/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('material App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | /*it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | });*/ 14 | }); 15 | -------------------------------------------------------------------------------- /angular-13/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular-13/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /angular-13/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/app.component.css -------------------------------------------------------------------------------- /angular-13/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-13/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent {} 9 | -------------------------------------------------------------------------------- /angular-13/src/app/dashboard/dashboard-components/profile/profile.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-profile', 5 | templateUrl: './profile.component.html', 6 | }) 7 | export class ProfileComponent implements OnInit { 8 | 9 | constructor() { } 10 | 11 | ngOnInit(): void { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /angular-13/src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dashboard', 5 | templateUrl: './dashboard.component.html' 6 | }) 7 | export class DashboardComponent implements AfterViewInit { 8 | 9 | ngAfterViewInit() { } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /angular-13/src/app/dashboard/dashboard.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | export const DashboardRoutes: Routes = [{ 6 | path: '', 7 | component: DashboardComponent 8 | }]; 9 | -------------------------------------------------------------------------------- /angular-13/src/app/layouts/full/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: [] 7 | }) 8 | export class AppHeaderComponent {} 9 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/buttons/buttons.component.scss: -------------------------------------------------------------------------------- 1 | .example-button-row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {MatButtonModule} from '@angular/material/button'; 3 | 4 | @Component({ 5 | selector: 'app-buttons', 6 | templateUrl: './buttons.component.html', 7 | styleUrls: ['./buttons.component.scss'] 8 | }) 9 | export class ButtonsComponent { 10 | constructor() { } 11 | } 12 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .demo-chip-list { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/dialog/dialog.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/expansion/expansion.component.scss: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/lists/lists.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/lists/lists.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/menu/menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/menu/menu.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatMenuModule } from '@angular/material/menu'; 3 | @Component({ 4 | selector: 'app-menu', 5 | templateUrl: './menu.component.html', 6 | styleUrls: ['./menu.component.scss'] 7 | }) 8 | export class MenuComponent {} 9 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/progress-snipper/progress-snipper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/progress-snipper/progress-snipper.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/slide-toggle/slide-toggle.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/slide-toggle/slide-toggle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatSlideToggleModule } from '@angular/material/slide-toggle'; 3 | 4 | @Component({ 5 | selector: 'app-slide-toggle', 6 | templateUrl: './slide-toggle.component.html', 7 | styleUrls: ['./slide-toggle.component.scss'] 8 | }) 9 | export class SlideToggleComponent { 10 | color = 'accent'; 11 | checked = false; 12 | disabled = false; 13 | } 14 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/slider/slider.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/slider/slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatSliderModule } from '@angular/material/slider'; 3 | 4 | @Component({ 5 | selector: 'app-slider', 6 | templateUrl: './slider.component.html', 7 | styleUrls: ['./slider.component.scss'] 8 | }) 9 | export class SliderComponent { 10 | 11 | demo: number=0; 12 | val = 50; 13 | min = 0; 14 | max = 100; 15 | 16 | constructor() {} 17 | } 18 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/snackbar/snackbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/snackbar/snackbar.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/stepper/stepper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/app/material-component/stepper/stepper.component.scss -------------------------------------------------------------------------------- /angular-13/src/app/material-component/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | .demo-tab-group { 2 | border: 1px solid #e8e8e8; 3 | } 4 | 5 | .demo-tab-content { 6 | padding: 24px; 7 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import { MatTabsModule } from '@angular/material/tabs'; 3 | 4 | @Component({ 5 | selector: 'app-tabs', 6 | templateUrl: './tabs.component.html', 7 | styleUrls: ['./tabs.component.scss'] 8 | }) 9 | export class TabsComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/toolbar/toolbar.component.scss: -------------------------------------------------------------------------------- 1 | .no-shadow mat-toolbar{ 2 | box-shadow: none; 3 | } 4 | .example-fill-remaining-space { 5 | // This fills the remaining space, by using flexbox. 6 | // Every toolbar row uses a flexbox row layout. 7 | flex: 1 1 auto; 8 | } 9 | .example-icon { 10 | padding: 0 14px; 11 | } 12 | 13 | .example-spacer { 14 | flex: 1 1 auto; 15 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/toolbar/toolbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatToolbarModule } from '@angular/material/toolbar'; 3 | 4 | @Component({ 5 | selector: 'app-toolbar', 6 | templateUrl: './toolbar.component.html', 7 | styleUrls: ['./toolbar.component.scss'] 8 | }) 9 | export class ToolbarComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /angular-13/src/app/material-component/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | .example-tooltip-host { 2 | display: inline-flex; 3 | align-items: center; 4 | margin: 50px; 5 | } 6 | 7 | .example-select { 8 | margin: 0 10px; 9 | } -------------------------------------------------------------------------------- /angular-13/src/app/material-component/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TooltipPosition, MatTooltipModule } from '@angular/material/tooltip'; 3 | 4 | 5 | @Component({ 6 | selector: 'app-tooltip', 7 | templateUrl: './tooltip.component.html', 8 | styleUrls: ['./tooltip.component.scss'] 9 | }) 10 | export class TooltipComponent { 11 | position = 'before'; 12 | } 13 | -------------------------------------------------------------------------------- /angular-13/src/app/shared/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordionanchor.directive'; 2 | export * from './accordionlink.directive'; 3 | export * from './accordion.directive'; 4 | -------------------------------------------------------------------------------- /angular-13/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-13/src/assets/images/background/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/background/profile-bg.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/background/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/background/user-info.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/big/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/big/img1.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/big/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/big/img2.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/big/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/big/img3.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/big/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/big/img4.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/big/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/big/img5.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/big/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/big/img6.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /angular-13/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/favicon.png -------------------------------------------------------------------------------- /angular-13/src/assets/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/logo-icon.png -------------------------------------------------------------------------------- /angular-13/src/assets/images/logo-light-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/logo-light-icon.png -------------------------------------------------------------------------------- /angular-13/src/assets/images/logo-light-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/logo-light-text.png -------------------------------------------------------------------------------- /angular-13/src/assets/images/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/logo-text.png -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/1.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/2.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/3.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/4.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/5.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/6.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/7.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/8.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/d1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/d1.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/d2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/d2.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/d3.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/d4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/d4.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/d5.jpg -------------------------------------------------------------------------------- /angular-13/src/assets/images/users/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/images/users/profile.png -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /angular-13/src/assets/styles/mixins/_font.scss: -------------------------------------------------------------------------------- 1 | $f: 10; 2 | 3 | @while $f <= 50 { 4 | .fs-#{$f} { 5 | font-size: 1px * $f; 6 | } 7 | 8 | $f: $f+2; 9 | } -------------------------------------------------------------------------------- /angular-13/src/assets/styles/mixins/_weight.scss: -------------------------------------------------------------------------------- 1 | $font-array:(lighter: 100, 2 | light: 300, 3 | normal: 400, 4 | medium: 500, 5 | semibold: 600, 6 | bold: 700, 7 | ); 8 | 9 | @each $font-weight, 10 | $font-value in $font-array { 11 | .fw-#{$font-weight} { 12 | font-weight: $font-value; 13 | } 14 | } -------------------------------------------------------------------------------- /angular-13/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-13/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /angular-13/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-13/src/favicon.ico -------------------------------------------------------------------------------- /angular-13/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import 'hammerjs'; 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.log(err)); 14 | -------------------------------------------------------------------------------- /angular-13/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-13/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /angular-13/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ], 14 | "angularCompilerOptions": { 15 | "enableIvy": true 16 | } 17 | } -------------------------------------------------------------------------------- /angular-13/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular-14/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /angular-14/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /angular-14/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('material App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | /*it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | });*/ 14 | }); 15 | -------------------------------------------------------------------------------- /angular-14/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular-14/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /angular-14/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/app.component.css -------------------------------------------------------------------------------- /angular-14/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-14/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent {} 9 | -------------------------------------------------------------------------------- /angular-14/src/app/dashboard/dashboard-components/profile/profile.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-profile', 5 | templateUrl: './profile.component.html', 6 | }) 7 | export class ProfileComponent implements OnInit { 8 | 9 | constructor() { } 10 | 11 | ngOnInit(): void { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /angular-14/src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dashboard', 5 | templateUrl: './dashboard.component.html' 6 | }) 7 | export class DashboardComponent implements AfterViewInit { 8 | 9 | ngAfterViewInit() { } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /angular-14/src/app/dashboard/dashboard.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | export const DashboardRoutes: Routes = [{ 6 | path: '', 7 | component: DashboardComponent 8 | }]; 9 | -------------------------------------------------------------------------------- /angular-14/src/app/layouts/full/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: [] 7 | }) 8 | export class AppHeaderComponent {} 9 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/buttons/buttons.component.scss: -------------------------------------------------------------------------------- 1 | .example-button-row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {MatButtonModule} from '@angular/material/button'; 3 | 4 | @Component({ 5 | selector: 'app-buttons', 6 | templateUrl: './buttons.component.html', 7 | styleUrls: ['./buttons.component.scss'] 8 | }) 9 | export class ButtonsComponent { 10 | constructor() { } 11 | } 12 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .demo-chip-list { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/dialog/dialog.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/expansion/expansion.component.scss: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/lists/lists.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/lists/lists.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/menu/menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/menu/menu.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatMenuModule } from '@angular/material/menu'; 3 | @Component({ 4 | selector: 'app-menu', 5 | templateUrl: './menu.component.html', 6 | styleUrls: ['./menu.component.scss'] 7 | }) 8 | export class MenuComponent {} 9 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/progress-snipper/progress-snipper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/progress-snipper/progress-snipper.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/slide-toggle/slide-toggle.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/slide-toggle/slide-toggle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatSlideToggleModule } from '@angular/material/slide-toggle'; 3 | 4 | @Component({ 5 | selector: 'app-slide-toggle', 6 | templateUrl: './slide-toggle.component.html', 7 | styleUrls: ['./slide-toggle.component.scss'] 8 | }) 9 | export class SlideToggleComponent { 10 | color = 'accent'; 11 | checked = false; 12 | disabled = false; 13 | } 14 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/slider/slider.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/slider/slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatSliderModule } from '@angular/material/slider'; 3 | 4 | @Component({ 5 | selector: 'app-slider', 6 | templateUrl: './slider.component.html', 7 | styleUrls: ['./slider.component.scss'] 8 | }) 9 | export class SliderComponent { 10 | 11 | demo: number=0; 12 | val = 50; 13 | min = 0; 14 | max = 100; 15 | 16 | constructor() {} 17 | } 18 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/snackbar/snackbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/snackbar/snackbar.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/stepper/stepper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/app/material-component/stepper/stepper.component.scss -------------------------------------------------------------------------------- /angular-14/src/app/material-component/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | .demo-tab-group { 2 | border: 1px solid #e8e8e8; 3 | } 4 | 5 | .demo-tab-content { 6 | padding: 24px; 7 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import { MatTabsModule } from '@angular/material/tabs'; 3 | 4 | @Component({ 5 | selector: 'app-tabs', 6 | templateUrl: './tabs.component.html', 7 | styleUrls: ['./tabs.component.scss'] 8 | }) 9 | export class TabsComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/toolbar/toolbar.component.scss: -------------------------------------------------------------------------------- 1 | .no-shadow mat-toolbar{ 2 | box-shadow: none; 3 | } 4 | .example-fill-remaining-space { 5 | // This fills the remaining space, by using flexbox. 6 | // Every toolbar row uses a flexbox row layout. 7 | flex: 1 1 auto; 8 | } 9 | .example-icon { 10 | padding: 0 14px; 11 | } 12 | 13 | .example-spacer { 14 | flex: 1 1 auto; 15 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/toolbar/toolbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MatToolbarModule } from '@angular/material/toolbar'; 3 | 4 | @Component({ 5 | selector: 'app-toolbar', 6 | templateUrl: './toolbar.component.html', 7 | styleUrls: ['./toolbar.component.scss'] 8 | }) 9 | export class ToolbarComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /angular-14/src/app/material-component/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | .example-tooltip-host { 2 | display: inline-flex; 3 | align-items: center; 4 | margin: 50px; 5 | } 6 | 7 | .example-select { 8 | margin: 0 10px; 9 | } -------------------------------------------------------------------------------- /angular-14/src/app/material-component/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TooltipPosition, MatTooltipModule } from '@angular/material/tooltip'; 3 | 4 | 5 | @Component({ 6 | selector: 'app-tooltip', 7 | templateUrl: './tooltip.component.html', 8 | styleUrls: ['./tooltip.component.scss'] 9 | }) 10 | export class TooltipComponent { 11 | position = 'before'; 12 | } 13 | -------------------------------------------------------------------------------- /angular-14/src/app/shared/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordionanchor.directive'; 2 | export * from './accordionlink.directive'; 3 | export * from './accordion.directive'; 4 | -------------------------------------------------------------------------------- /angular-14/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-14/src/assets/images/background/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/background/profile-bg.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/background/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/background/user-info.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/big/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/big/img1.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/big/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/big/img2.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/big/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/big/img3.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/big/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/big/img4.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/big/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/big/img5.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/big/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/big/img6.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /angular-14/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/favicon.png -------------------------------------------------------------------------------- /angular-14/src/assets/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/logo-icon.png -------------------------------------------------------------------------------- /angular-14/src/assets/images/logo-light-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/logo-light-icon.png -------------------------------------------------------------------------------- /angular-14/src/assets/images/logo-light-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/logo-light-text.png -------------------------------------------------------------------------------- /angular-14/src/assets/images/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/logo-text.png -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/1.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/2.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/3.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/4.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/5.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/6.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/7.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/8.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/d1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/d1.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/d2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/d2.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/d3.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/d4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/d4.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/d5.jpg -------------------------------------------------------------------------------- /angular-14/src/assets/images/users/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/images/users/profile.png -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /angular-14/src/assets/styles/mixins/_font.scss: -------------------------------------------------------------------------------- 1 | $f: 10; 2 | 3 | @while $f <= 50 { 4 | .fs-#{$f} { 5 | font-size: 1px * $f; 6 | } 7 | 8 | $f: $f+2; 9 | } -------------------------------------------------------------------------------- /angular-14/src/assets/styles/mixins/_weight.scss: -------------------------------------------------------------------------------- 1 | $font-array:(lighter: 100, 2 | light: 300, 3 | normal: 400, 4 | medium: 500, 5 | semibold: 600, 6 | bold: 700, 7 | ); 8 | 9 | @each $font-weight, 10 | $font-value in $font-array { 11 | .fw-#{$font-weight} { 12 | font-weight: $font-value; 13 | } 14 | } -------------------------------------------------------------------------------- /angular-14/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-14/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /angular-14/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-14/src/favicon.ico -------------------------------------------------------------------------------- /angular-14/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import 'hammerjs'; 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.log(err)); 14 | -------------------------------------------------------------------------------- /angular-14/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-14/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /angular-14/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ], 14 | "angularCompilerOptions": { 15 | "enableIvy": true 16 | } 17 | } -------------------------------------------------------------------------------- /angular-14/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular-16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /angular-16/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /angular-16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /angular-16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/app.component.css -------------------------------------------------------------------------------- /angular-16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-16/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/app.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title(title: any) { 10 | throw new Error('Method not implemented.'); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /angular-16/src/app/dashboard/dashboard.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | export const DashboardRoutes: Routes = [{ 6 | path: '', 7 | component: DashboardComponent 8 | }]; 9 | -------------------------------------------------------------------------------- /angular-16/src/app/layouts/full/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: [] 7 | }) 8 | export class AppHeaderComponent {} 9 | -------------------------------------------------------------------------------- /angular-16/src/app/material-component/buttons/buttons.component.scss: -------------------------------------------------------------------------------- 1 | .example-button-row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /angular-16/src/app/material-component/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .demo-chip-list { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/material-component/dialog/dialog.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/material-component/expansion/expansion.component.scss: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/lists/lists.component.scss: -------------------------------------------------------------------------------- 1 | .mat-mdc-list-item-icon { 2 | color: rgba(0, 0, 0, 0.54); 3 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/menu/menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/material-component/menu/menu.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/material-component/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatMenuModule } from '@angular/material/menu'; 3 | import { DemoMaterialModule } from 'src/app/demo-material-module'; 4 | @Component({ 5 | selector: 'app-menu', 6 | standalone: true, 7 | imports: [DemoMaterialModule, MatMenuModule], 8 | templateUrl: './menu.component.html', 9 | styleUrls: ['./menu.component.scss'] 10 | }) 11 | export class MenuComponent { } 12 | -------------------------------------------------------------------------------- /angular-16/src/app/material-component/progress-snipper/progress-snipper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/material-component/progress-snipper/progress-snipper.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/material-component/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/slide-toggle/slide-toggle.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/material-component/slider/slider.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/material-component/snackbar/snackbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/material-component/snackbar/snackbar.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/material-component/stepper/stepper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/app/material-component/stepper/stepper.component.scss -------------------------------------------------------------------------------- /angular-16/src/app/material-component/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | .demo-tab-group { 2 | border: 1px solid #e8e8e8; 3 | } 4 | 5 | .demo-tab-content { 6 | padding: 24px; 7 | } -------------------------------------------------------------------------------- /angular-16/src/app/material-component/toolbar/toolbar.component.scss: -------------------------------------------------------------------------------- 1 | .no-shadow mat-toolbar{ 2 | box-shadow: none; 3 | } 4 | .example-fill-remaining-space { 5 | // This fills the remaining space, by using flexbox. 6 | // Every toolbar row uses a flexbox row layout. 7 | flex: 1 1 auto; 8 | } 9 | 10 | .example-spacer { 11 | flex: 1 1 auto; 12 | } 13 | -------------------------------------------------------------------------------- /angular-16/src/app/material-component/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | .example-tooltip-host { 2 | display: inline-flex; 3 | align-items: center; 4 | margin: 50px; 5 | } 6 | 7 | .example-select { 8 | margin: 0 10px; 9 | } -------------------------------------------------------------------------------- /angular-16/src/app/shared/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordionanchor.directive'; 2 | export * from './accordionlink.directive'; 3 | export * from './accordion.directive'; 4 | -------------------------------------------------------------------------------- /angular-16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-16/src/assets/images/background/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/background/profile-bg.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/background/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/background/user-info.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/big/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/big/img1.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/big/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/big/img2.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/big/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/big/img3.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/big/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/big/img4.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/big/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/big/img5.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/big/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/big/img6.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /angular-16/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/favicon.png -------------------------------------------------------------------------------- /angular-16/src/assets/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/logo-icon.png -------------------------------------------------------------------------------- /angular-16/src/assets/images/logo-light-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/logo-light-icon.png -------------------------------------------------------------------------------- /angular-16/src/assets/images/logo-light-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/logo-light-text.png -------------------------------------------------------------------------------- /angular-16/src/assets/images/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/logo-text.png -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/1.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/2.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/3.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/4.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/5.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/6.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/7.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/8.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/d1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/d1.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/d2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/d2.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/d3.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/d4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/d4.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/d5.jpg -------------------------------------------------------------------------------- /angular-16/src/assets/images/users/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/images/users/profile.png -------------------------------------------------------------------------------- /angular-16/src/assets/styles/grid/_variables.scss: -------------------------------------------------------------------------------- 1 | $grid-columns: 12 !default; 2 | $grid-gutter: 30px !default; 3 | 4 | $breakpoints: ( 5 | xsmall: 0, 6 | small: 600px, 7 | medium: 960px, 8 | large: 1280px, 9 | xlarge: 2100px 10 | ) !default; 11 | 12 | $breakpoint-infixs: ( 13 | xsmall: '', 14 | small: 'sm', 15 | medium: 'md', 16 | large: 'lg', 17 | xlarge: 'xl' 18 | ) !default; -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /angular-16/src/assets/styles/mixins/_font.scss: -------------------------------------------------------------------------------- 1 | $f: 10; 2 | 3 | @while $f <= 50 { 4 | .fs-#{$f} { 5 | font-size: 1px * $f; 6 | } 7 | 8 | $f: $f+2; 9 | } -------------------------------------------------------------------------------- /angular-16/src/assets/styles/mixins/_weight.scss: -------------------------------------------------------------------------------- 1 | $font-array:(lighter: 100, 2 | light: 300, 3 | normal: 400, 4 | medium: 500, 5 | semibold: 600, 6 | bold: 700, 7 | ); 8 | 9 | @each $font-weight, 10 | $font-value in $font-array { 11 | .fw-#{$font-weight} { 12 | font-weight: $font-value; 13 | } 14 | } -------------------------------------------------------------------------------- /angular-16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-16/src/favicon.ico -------------------------------------------------------------------------------- /angular-16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MaterialProAngularLite 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular-16/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule) 7 | .catch(err => console.error(err)); 8 | -------------------------------------------------------------------------------- /angular-16/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /angular-16/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /angular-17/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /angular-17/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /angular-17/netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/index.html" 4 | status = 200 -------------------------------------------------------------------------------- /angular-17/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /angular-17/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/app.component.css -------------------------------------------------------------------------------- /angular-17/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /angular-17/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/app.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title(title: any) { 10 | throw new Error('Method not implemented.'); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /angular-17/src/app/dashboard/dashboard.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | export const DashboardRoutes: Routes = [{ 6 | path: '', 7 | component: DashboardComponent 8 | }]; 9 | -------------------------------------------------------------------------------- /angular-17/src/app/layouts/full/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: [] 7 | }) 8 | export class AppHeaderComponent {} 9 | -------------------------------------------------------------------------------- /angular-17/src/app/material-component/buttons/buttons.component.scss: -------------------------------------------------------------------------------- 1 | .example-button-row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /angular-17/src/app/material-component/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .demo-chip-list { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/dialog/dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/material-component/dialog/dialog.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/material-component/expansion/expansion.component.scss: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/lists/lists.component.scss: -------------------------------------------------------------------------------- 1 | .mat-mdc-list-item-icon { 2 | color: rgba(0, 0, 0, 0.54); 3 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/menu/menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/material-component/menu/menu.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/material-component/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MatMenuModule } from '@angular/material/menu'; 3 | import { DemoMaterialModule } from 'src/app/demo-material-module'; 4 | @Component({ 5 | selector: 'app-menu', 6 | standalone: true, 7 | imports: [DemoMaterialModule, MatMenuModule], 8 | templateUrl: './menu.component.html', 9 | styleUrls: ['./menu.component.scss'] 10 | }) 11 | export class MenuComponent { } 12 | -------------------------------------------------------------------------------- /angular-17/src/app/material-component/progress-snipper/progress-snipper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/material-component/progress-snipper/progress-snipper.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/material-component/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/slide-toggle/slide-toggle.component.scss: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/slider/slider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/material-component/slider/slider.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/material-component/snackbar/snackbar.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/material-component/snackbar/snackbar.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/material-component/stepper/stepper.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/app/material-component/stepper/stepper.component.scss -------------------------------------------------------------------------------- /angular-17/src/app/material-component/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | .demo-tab-group { 2 | border: 1px solid #e8e8e8; 3 | } 4 | 5 | .demo-tab-content { 6 | padding: 24px; 7 | } -------------------------------------------------------------------------------- /angular-17/src/app/material-component/toolbar/toolbar.component.scss: -------------------------------------------------------------------------------- 1 | .no-shadow mat-toolbar{ 2 | box-shadow: none; 3 | } 4 | .example-fill-remaining-space { 5 | // This fills the remaining space, by using flexbox. 6 | // Every toolbar row uses a flexbox row layout. 7 | flex: 1 1 auto; 8 | } 9 | 10 | .example-spacer { 11 | flex: 1 1 auto; 12 | } 13 | -------------------------------------------------------------------------------- /angular-17/src/app/material-component/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | .example-tooltip-host { 2 | display: inline-flex; 3 | align-items: center; 4 | margin: 50px; 5 | } 6 | 7 | .example-select { 8 | margin: 0 10px; 9 | } -------------------------------------------------------------------------------- /angular-17/src/app/shared/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordionanchor.directive'; 2 | export * from './accordionlink.directive'; 3 | export * from './accordion.directive'; 4 | -------------------------------------------------------------------------------- /angular-17/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular-17/src/assets/images/background/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/background/profile-bg.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/background/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/background/user-info.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/big/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/big/img1.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/big/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/big/img2.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/big/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/big/img3.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/big/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/big/img4.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/big/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/big/img5.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/big/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/big/img6.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/custom-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/custom-select.png -------------------------------------------------------------------------------- /angular-17/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/favicon.png -------------------------------------------------------------------------------- /angular-17/src/assets/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/logo-icon.png -------------------------------------------------------------------------------- /angular-17/src/assets/images/logo-light-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/logo-light-icon.png -------------------------------------------------------------------------------- /angular-17/src/assets/images/logo-light-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/logo-light-text.png -------------------------------------------------------------------------------- /angular-17/src/assets/images/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/logo-text.png -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/1.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/2.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/3.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/4.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/5.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/6.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/7.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/8.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/d1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/d1.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/d2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/d2.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/d3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/d3.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/d4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/d4.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/d5.jpg -------------------------------------------------------------------------------- /angular-17/src/assets/images/users/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/images/users/profile.png -------------------------------------------------------------------------------- /angular-17/src/assets/styles/grid/_variables.scss: -------------------------------------------------------------------------------- 1 | $grid-columns: 12 !default; 2 | $grid-gutter: 30px !default; 3 | 4 | $breakpoints: ( 5 | xsmall: 0, 6 | small: 600px, 7 | medium: 960px, 8 | large: 1280px, 9 | xlarge: 2100px 10 | ) !default; 11 | 12 | $breakpoint-infixs: ( 13 | xsmall: '', 14 | small: 'sm', 15 | medium: 'md', 16 | large: 'lg', 17 | xlarge: 'xl' 18 | ) !default; -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/assets/styles/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /angular-17/src/assets/styles/mixins/_font.scss: -------------------------------------------------------------------------------- 1 | $f: 10; 2 | 3 | @while $f <= 50 { 4 | .fs-#{$f} { 5 | font-size: 1px * $f; 6 | } 7 | 8 | $f: $f+2; 9 | } -------------------------------------------------------------------------------- /angular-17/src/assets/styles/mixins/_weight.scss: -------------------------------------------------------------------------------- 1 | $font-array:(lighter: 100, 2 | light: 300, 3 | normal: 400, 4 | medium: 500, 5 | semibold: 600, 6 | bold: 700, 7 | ); 8 | 9 | @each $font-weight, 10 | $font-value in $font-array { 11 | .fw-#{$font-weight} { 12 | font-weight: $font-value; 13 | } 14 | } -------------------------------------------------------------------------------- /angular-17/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/angular-17/src/favicon.ico -------------------------------------------------------------------------------- /angular-17/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule) 7 | .catch(err => console.error(err)); 8 | -------------------------------------------------------------------------------- /angular-17/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-17/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /angular-17/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /hire-us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MaterialPro Angular Free Template | Docs 6 | 8 | 9 | 10 | 11 |

MaterialPro Angular Free Template

12 | https://www.wrappixel.com/hire-us/ 13 | 14 | 15 | -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.eot -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.ttf -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff -------------------------------------------------------------------------------- /landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/css/icons/material-design-iconic-font/fonts/materialdesignicons-webfont.woff2 -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | padding: $jumbotron-padding ($jumbotron-padding / 2); 3 | margin-bottom: $jumbotron-padding; 4 | background-color: $jumbotron-bg; 5 | @include border-radius($border-radius-lg); 6 | 7 | @include media-breakpoint-up(sm) { 8 | padding: ($jumbotron-padding * 2) $jumbotron-padding; 9 | } 10 | } 11 | 12 | .jumbotron-fluid { 13 | padding-right: 0; 14 | padding-left: 0; 15 | @include border-radius(0); 16 | } 17 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: flex-start; 4 | } 5 | 6 | .media-body { 7 | flex: 1; 8 | } 9 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/_transitions.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | .fade { 4 | @include transition($transition-fade); 5 | 6 | &:not(.show) { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .collapse { 12 | &:not(.show) { 13 | display: none; 14 | } 15 | } 16 | 17 | .collapsing { 18 | position: relative; 19 | height: 0; 20 | overflow: hidden; 21 | @include transition($transition-collapse); 22 | } 23 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: $color; 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | 6 | hr { 7 | border-top-color: darken($border, 5%); 8 | } 9 | 10 | .alert-link { 11 | color: darken($color, 10%); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | box-shadow: $shadow; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ""; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @mixin float-left { 4 | float: left !important; 5 | } 6 | @mixin float-right { 7 | float: right !important; 8 | } 9 | @mixin float-none { 10 | float: none !important; 11 | } 12 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { 6 | height: 0; 7 | margin: $margin-y 0; 8 | overflow: hidden; 9 | border-top: 1px solid $color; 10 | } 11 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | } 7 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Typography 4 | 5 | @mixin text-emphasis-variant($parent, $color) { 6 | #{$parent} { 7 | color: $color !important; 8 | } 9 | a#{$parent} { 10 | @include hover-focus { 11 | color: darken($color, 10%) !important; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | @mixin transition($transition...) { 2 | @if $enable-transitions { 3 | @if length($transition) == 0 { 4 | transition: $transition-base; 5 | } @else { 6 | transition: $transition; 7 | } 8 | } 9 | 10 | @media screen and (prefers-reduced-motion: reduce) { 11 | transition: none; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/mixins/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Visibility 4 | 5 | @mixin invisible($visibility) { 6 | visibility: $visibility !important; 7 | } 8 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .align-baseline { vertical-align: baseline !important; } // Browser default 4 | .align-top { vertical-align: top !important; } 5 | .align-middle { vertical-align: middle !important; } 6 | .align-bottom { vertical-align: bottom !important; } 7 | .align-text-bottom { vertical-align: text-bottom !important; } 8 | .align-text-top { vertical-align: text-top !important; } 9 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | @each $breakpoint in map-keys($grid-breakpoints) { 2 | @include media-breakpoint-up($breakpoint) { 3 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 4 | 5 | .float#{$infix}-left { @include float-left; } 6 | .float#{$infix}-right { @include float-right; } 7 | .float#{$infix}-none { @include float-none; } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_screenreaders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Screenreaders 3 | // 4 | 5 | .sr-only { 6 | @include sr-only(); 7 | } 8 | 9 | .sr-only-focusable { 10 | @include sr-only-focusable(); 11 | } 12 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .shadow-sm { box-shadow: $box-shadow-sm !important; } 4 | .shadow { box-shadow: $box-shadow !important; } 5 | .shadow-lg { box-shadow: $box-shadow-lg !important; } 6 | .shadow-none { box-shadow: none !important; } 7 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Width and height 4 | 5 | @each $prop, $abbrev in (width: w, height: h) { 6 | @each $size, $length in $sizes { 7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; } 8 | } 9 | } 10 | 11 | .mw-100 { max-width: 100% !important; } 12 | .mh-100 { max-height: 100% !important; } 13 | -------------------------------------------------------------------------------- /landingpage/dist/scss/bootstrap/utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visibility utilities 3 | // 4 | 5 | .visible { 6 | @include invisible(visible); 7 | } 8 | 9 | .invisible { 10 | @include invisible(hidden); 11 | } 12 | -------------------------------------------------------------------------------- /landingpage/dist/scss/responsive.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/landingpage/dist/scss/responsive.scss -------------------------------------------------------------------------------- /landingpage/dist/scss/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Template Name: Material-Pro Admin Template 3 | Author: Niravjoshi / Wrappixel 4 | File: scss 5 | */ 6 | //(Required file) 7 | @import 'variable'; 8 | 9 | // Import Bootstrap source files (Required file) 10 | @import "bootstrap/bootstrap"; 11 | 12 | //custom style 13 | @import 'custom'; 14 | 15 | //icons 16 | @import "icons/material-design-iconic-font/css/materialdesignicons.min.css"; -------------------------------------------------------------------------------- /package/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /package/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /package/README.md: -------------------------------------------------------------------------------- 1 | # MaterialPro-Angular-pro 2 | MaterialPro Angular Admin Dashboard 3 | -------------------------------------------------------------------------------- /package/netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/index.html" 4 | status = 200 -------------------------------------------------------------------------------- /package/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /package/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [RouterOutlet], 7 | templateUrl: './app.component.html' 8 | }) 9 | export class AppComponent { 10 | title = 'MaterialPro Angular Admin Template'; 11 | } 12 | -------------------------------------------------------------------------------- /package/src/app/components/profile-card/profile-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TablerIconsModule } from 'angular-tabler-icons'; 3 | import { MaterialModule } from 'src/app/material.module'; 4 | 5 | @Component({ 6 | selector: 'app-profile-card', 7 | imports: [MaterialModule, TablerIconsModule], 8 | templateUrl: './profile-card.component.html', 9 | }) 10 | export class AppProfileCardComponent { 11 | constructor() { } 12 | } 13 | -------------------------------------------------------------------------------- /package/src/app/config.ts: -------------------------------------------------------------------------------- 1 | export interface AppSettings { 2 | 3 | sidenavOpened: boolean; 4 | sidenavCollapsed: boolean; 5 | 6 | } 7 | 8 | export const defaults: AppSettings = { 9 | sidenavOpened: false, 10 | sidenavCollapsed: false, 11 | }; 12 | -------------------------------------------------------------------------------- /package/src/app/layouts/blank/blank.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /package/src/app/layouts/full/sidebar/nav-item/nav-item.ts: -------------------------------------------------------------------------------- 1 | export interface NavItem { 2 | displayName?: string; 3 | iconName?: string; 4 | navCap?: string; 5 | route?: string; 6 | children?: NavItem[]; 7 | chip?: boolean; 8 | chipContent?: string; 9 | chipClass?: string; 10 | external?: boolean; 11 | } -------------------------------------------------------------------------------- /package/src/app/pages/extra/icons/icons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MaterialModule } from '../../../material.module'; 3 | 4 | @Component({ 5 | selector: 'app-icons', 6 | imports: [MaterialModule], 7 | templateUrl: './icons.component.html', 8 | }) 9 | export class AppIconsComponent { } 10 | -------------------------------------------------------------------------------- /package/src/app/pages/extra/sample-page/sample-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sample Page 7 | This is test page 8 | 9 | -------------------------------------------------------------------------------- /package/src/app/pages/extra/sample-page/sample-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MaterialModule } from '../../../material.module'; 3 | 4 | @Component({ 5 | selector: 'app-sample-page', 6 | imports: [MaterialModule], 7 | templateUrl: './sample-page.component.html', 8 | }) 9 | 10 | export class AppSamplePageComponent { } 11 | -------------------------------------------------------------------------------- /package/src/app/pages/pages.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { StarterComponent } from './starter/starter.component'; 3 | 4 | export const PagesRoutes: Routes = [ 5 | { 6 | path: '', 7 | component: StarterComponent, 8 | data: { 9 | title: 'Starter Page', 10 | urls: [ 11 | { title: 'Dashboard', url: '/dashboards/dashboard1' }, 12 | { title: 'Starter Page' }, 13 | ], 14 | }, 15 | }, 16 | ]; 17 | -------------------------------------------------------------------------------- /package/src/app/pages/ui-components/chips/chips.component.scss: -------------------------------------------------------------------------------- 1 | .example-box.cdk-drag-animating { 2 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); 3 | } 4 | 5 | .example-chip .cdk-drop-list-dragging { 6 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); 7 | } -------------------------------------------------------------------------------- /package/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/.gitkeep -------------------------------------------------------------------------------- /package/src/assets/images/backgrounds/profile-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/backgrounds/profile-bg.jpg -------------------------------------------------------------------------------- /package/src/assets/images/backgrounds/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/backgrounds/rocket.png -------------------------------------------------------------------------------- /package/src/assets/images/backgrounds/user-info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/backgrounds/user-info.jpg -------------------------------------------------------------------------------- /package/src/assets/images/blog/blog-img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/blog/blog-img1.jpg -------------------------------------------------------------------------------- /package/src/assets/images/blog/blog-img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/blog/blog-img2.jpg -------------------------------------------------------------------------------- /package/src/assets/images/blog/blog-img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/blog/blog-img3.jpg -------------------------------------------------------------------------------- /package/src/assets/images/blog/blog-img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/blog/blog-img4.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/p1.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/p2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/p2.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/p3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/p3.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/p4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/p4.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/product-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/product-1.png -------------------------------------------------------------------------------- /package/src/assets/images/products/product-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/product-2.png -------------------------------------------------------------------------------- /package/src/assets/images/products/product-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/product-3.png -------------------------------------------------------------------------------- /package/src/assets/images/products/product-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/products/product-4.png -------------------------------------------------------------------------------- /package/src/assets/images/profile/user-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/profile/user-1.jpg -------------------------------------------------------------------------------- /package/src/assets/images/profile/user-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/profile/user-2.jpg -------------------------------------------------------------------------------- /package/src/assets/images/profile/user-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/profile/user-3.jpg -------------------------------------------------------------------------------- /package/src/assets/images/profile/user-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/assets/images/profile/user-4.jpg -------------------------------------------------------------------------------- /package/src/assets/scss/grid/_variables.scss: -------------------------------------------------------------------------------- 1 | $grid-columns: 12 !default; 2 | $grid-gutter: 30px !default; 3 | 4 | $breakpoints: ( 5 | xsmall: 0, 6 | small: 600px, 7 | medium: 960px, 8 | large: 1280px, 9 | xlarge: 2100px 10 | ) !default; 11 | 12 | $breakpoint-infixs: ( 13 | xsmall: '', 14 | small: 'sm', 15 | medium: 'md', 16 | large: 'lg', 17 | xlarge: 'xl' 18 | ) !default; -------------------------------------------------------------------------------- /package/src/assets/scss/helpers/_display.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | 3 | $utilities: ( 4 | "display": (property: display, 5 | class: d, 6 | values: inline inline-block block grid table table-row table-cell flex inline-flex none, 7 | ), 8 | ); -------------------------------------------------------------------------------- /package/src/assets/scss/helpers/_icon-size.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | 3 | $columns: 48; 4 | 5 | @mixin icon_size { 6 | @for $i from 1 through $columns { 7 | .icon-#{$i} { 8 | height: #{$i}px !important; 9 | width: #{$i}px !important; 10 | line-height: #{$i + 8}px !important; 11 | } 12 | } 13 | } 14 | 15 | @include icon_size; 16 | -------------------------------------------------------------------------------- /package/src/assets/scss/layouts/_layouts.scss: -------------------------------------------------------------------------------- 1 | @use "sidebar"; 2 | @use "header"; -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_badge.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | @include mat.badge-overrides( 4 | ( 5 | background-color: var(--mat-sys-primary), 6 | ) 7 | ); 8 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_button-toggle.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | @use "../variables" as *; 4 | 5 | @include mat.button-toggle-overrides( 6 | ( 7 | shape: $border-radius, 8 | ) 9 | ); 10 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_chip.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | 4 | @include mat.chips-overrides( 5 | ( 6 | focus-state-layer-color: var(--mat-option-focus-state-layer-color), 7 | ) 8 | ); 9 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_dialog.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | 4 | @include mat.dialog-overrides( 5 | ( 6 | container-shape: var(--mat-sys-corner-small), 7 | subhead-size: 18px, 8 | subhead-weight: 600, 9 | content-padding: 20px 24px, 10 | actions-padding: 20px 24px, 11 | container-min-width: 300px, 12 | subhead-tracking: unset, 13 | supporting-text-tracking: unset, 14 | ) 15 | ); 16 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_drawer.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | 4 | @include mat.sidenav-overrides( 5 | ( 6 | container-shape: 0, 7 | ) 8 | ); 9 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_index.scss: -------------------------------------------------------------------------------- 1 | @use "badge"; 2 | @use "button"; 3 | @use "button-toggle"; 4 | @use "card"; 5 | @use "checkbox"; 6 | @use "chip"; 7 | @use "dialog"; 8 | @use "fab"; 9 | @use "form-field"; 10 | @use "list"; 11 | @use "menu"; 12 | @use "theme"; 13 | @use "table"; 14 | @use "typography"; 15 | @use "drawer"; 16 | @use "progress"; 17 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_list.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | 4 | @include mat.list-overrides( 5 | ( 6 | list-item-hover-state-layer-color: var(--mat-sys-primary), 7 | list-item-container-shape: var(--mat-sys-corner-small), 8 | active-indicator-shape: var(--mat-sys-corner-small), 9 | list-item-two-line-container-height: 70px, 10 | list-item-three-line-container-height: 100px, 11 | ) 12 | ); 13 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_menu.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@angular/material" as mat; 3 | 4 | @include mat.menu-overrides( 5 | ( 6 | container-shape: var(--mat-sys-corner-small), 7 | ) 8 | ); 9 | 10 | // styles 11 | html { 12 | .mat-mdc-menu-panel { 13 | box-shadow: var(--mat-sys-level3) !important; 14 | } 15 | 16 | .mat-mdc-select-panel { 17 | padding: 8px !important; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package/src/assets/scss/override-component/_typography.scss: -------------------------------------------------------------------------------- 1 | @use "../variables" as *; 2 | html { 3 | .mdc-list-item__primary-text, 4 | .mat-drawer-container, 5 | .mat-drawer, 6 | .text-body { 7 | color: $text-color; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /package/src/assets/scss/themecolors/_blue_theme.scss: -------------------------------------------------------------------------------- 1 | html .blue_theme { 2 | --mat-sys-primary: rgb(27, 132, 255); 3 | --mat-sys-primary-fixed-dim: rgb(27, 132, 255, 0.15); 4 | --mat-sys-secondary: rgb(67, 206, 215); 5 | --mat-sys-secondary-fixed-dim: rgb(67, 206, 215, 0.15); 6 | } -------------------------------------------------------------------------------- /package/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrappixel/material-pro-angular-lite/90ecd0b23d0e7baf7f8f14723268ff293647cf47/package/src/favicon.ico -------------------------------------------------------------------------------- /package/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch((err) => 6 | console.error(err) 7 | ); 8 | -------------------------------------------------------------------------------- /package/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, 4 | body { 5 | height: 100%; 6 | margin: 0; 7 | } -------------------------------------------------------------------------------- /package/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /package/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | --------------------------------------------------------------------------------