├── .circleci └── config.yml ├── .editorconfig ├── .github └── ISSUE_TEMPLATE │ ├── Bug_report.md │ └── Feature_request.md ├── .gitignore ├── .npmignore ├── .vscode ├── launch.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── angular.json ├── app.json ├── appveyor.yml ├── demo ├── browserslist ├── karma.conf.js ├── src │ ├── _route-animation-host.scss │ ├── _variables.scss │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.animation.ts │ │ ├── app.routing.ts │ │ ├── badge │ │ │ ├── badge.component.html │ │ │ ├── badge.component.scss │ │ │ ├── badge.component.ts │ │ │ ├── badge.module.ts │ │ │ └── badge.routing.ts │ │ ├── button │ │ │ ├── button.component.html │ │ │ ├── button.component.scss │ │ │ ├── button.component.ts │ │ │ ├── button.module.ts │ │ │ └── button.routing.ts │ │ ├── card │ │ │ ├── card.component.html │ │ │ ├── card.component.scss │ │ │ ├── card.component.ts │ │ │ ├── card.module.ts │ │ │ └── card.routing.ts │ │ ├── checkbox │ │ │ ├── checkbox.component.html │ │ │ ├── checkbox.component.scss │ │ │ ├── checkbox.component.ts │ │ │ ├── checkbox.module.ts │ │ │ └── checkbox.routing.ts │ │ ├── chip │ │ │ ├── chip.component.html │ │ │ ├── chip.component.scss │ │ │ ├── chip.component.ts │ │ │ ├── chip.module.ts │ │ │ └── chip.routing.ts │ │ ├── collapsible │ │ │ ├── collapsible.component.html │ │ │ ├── collapsible.component.scss │ │ │ ├── collapsible.component.ts │ │ │ ├── collapsible.module.ts │ │ │ └── collapsible.routing.ts │ │ ├── collection │ │ │ ├── collection.component.html │ │ │ ├── collection.component.scss │ │ │ ├── collection.component.ts │ │ │ ├── collection.module.ts │ │ │ └── collection.routing.ts │ │ ├── datepicker │ │ │ ├── datepicker.component.html │ │ │ ├── datepicker.component.scss │ │ │ ├── datepicker.component.ts │ │ │ ├── datepicker.module.ts │ │ │ └── datepicker.routing.ts │ │ ├── dropdown │ │ │ ├── dropdown.component.html │ │ │ ├── dropdown.component.scss │ │ │ ├── dropdown.component.ts │ │ │ ├── dropdown.module.ts │ │ │ └── dropdown.routing.ts │ │ ├── feature-discovery │ │ │ ├── feature-discovery.component.html │ │ │ ├── feature-discovery.component.scss │ │ │ ├── feature-discovery.component.ts │ │ │ ├── feature-discovery.module.ts │ │ │ └── feature-discovery.routing.ts │ │ ├── home │ │ │ ├── home.component.html │ │ │ ├── home.component.scss │ │ │ ├── home.component.ts │ │ │ ├── home.module.ts │ │ │ └── home.routing.ts │ │ ├── icon │ │ │ ├── icon.component.html │ │ │ ├── icon.component.scss │ │ │ ├── icon.component.ts │ │ │ ├── icon.module.ts │ │ │ └── icon.routing.ts │ │ ├── index.ts │ │ ├── input │ │ │ ├── input.component.html │ │ │ ├── input.component.scss │ │ │ ├── input.component.ts │ │ │ ├── input.module.ts │ │ │ └── input.routing.ts │ │ ├── materialize-css-class │ │ │ ├── materialize-css-class.component.html │ │ │ ├── materialize-css-class.component.scss │ │ │ ├── materialize-css-class.component.ts │ │ │ ├── materialize-css-class.module.ts │ │ │ └── materialize-css-class.routing.ts │ │ ├── media │ │ │ ├── media.component.html │ │ │ ├── media.component.scss │ │ │ ├── media.component.ts │ │ │ ├── media.module.ts │ │ │ └── media.routing.ts │ │ ├── modal │ │ │ ├── modal-example │ │ │ │ ├── modal-example.component.html │ │ │ │ ├── modal-example.component.scss │ │ │ │ └── modal-example.component.ts │ │ │ ├── modal.component.html │ │ │ ├── modal.component.scss │ │ │ ├── modal.component.ts │ │ │ ├── modal.module.ts │ │ │ └── modal.routing.ts │ │ ├── navbar │ │ │ ├── navbar.component.html │ │ │ ├── navbar.component.scss │ │ │ ├── navbar.component.ts │ │ │ ├── navbar.module.ts │ │ │ └── navbar.routing.ts │ │ ├── pagination │ │ │ ├── pagination.component.html │ │ │ ├── pagination.component.scss │ │ │ ├── pagination.component.ts │ │ │ ├── pagination.module.ts │ │ │ └── pagination.routing.ts │ │ ├── parallax │ │ │ ├── parallax.component.html │ │ │ ├── parallax.component.scss │ │ │ ├── parallax.component.ts │ │ │ ├── parallax.module.ts │ │ │ └── parallax.routing.ts │ │ ├── progress │ │ │ ├── progress.component.html │ │ │ ├── progress.component.scss │ │ │ ├── progress.component.ts │ │ │ ├── progress.module.ts │ │ │ └── progress.routing.ts │ │ ├── radio-button │ │ │ ├── radio-button.component.html │ │ │ ├── radio-button.component.scss │ │ │ ├── radio-button.component.ts │ │ │ ├── radio-button.module.ts │ │ │ └── radio-button.routing.ts │ │ ├── select │ │ │ ├── select.component.html │ │ │ ├── select.component.scss │ │ │ ├── select.component.ts │ │ │ ├── select.module.ts │ │ │ └── select.routing.ts │ │ ├── shared │ │ │ ├── code-snippet │ │ │ │ ├── code-snippet.component.html │ │ │ │ ├── code-snippet.component.scss │ │ │ │ ├── code-snippet.component.ts │ │ │ │ └── code-snippet.module.ts │ │ │ └── properties-table │ │ │ │ ├── properties-table.component.html │ │ │ │ ├── properties-table.component.scss │ │ │ │ ├── properties-table.component.ts │ │ │ │ └── properties-table.module.ts │ │ ├── sidenav │ │ │ ├── sidenav.component.html │ │ │ ├── sidenav.component.scss │ │ │ ├── sidenav.component.ts │ │ │ ├── sidenav.module.ts │ │ │ └── sidenav.routing.ts │ │ ├── spinner │ │ │ ├── spinner.component.html │ │ │ ├── spinner.component.scss │ │ │ ├── spinner.component.ts │ │ │ ├── spinner.module.ts │ │ │ └── spinner.routing.ts │ │ ├── switch │ │ │ ├── switch.component.html │ │ │ ├── switch.component.scss │ │ │ ├── switch.component.ts │ │ │ ├── switch.module.ts │ │ │ └── switch.routing.ts │ │ ├── tab │ │ │ ├── tab.component.html │ │ │ ├── tab.component.scss │ │ │ ├── tab.component.ts │ │ │ ├── tab.module.ts │ │ │ └── tab.routing.ts │ │ ├── textarea │ │ │ ├── textarea.component.html │ │ │ ├── textarea.component.scss │ │ │ ├── textarea.component.ts │ │ │ ├── textarea.module.ts │ │ │ └── textarea.routing.ts │ │ ├── timepicker │ │ │ ├── timepicker.component.html │ │ │ ├── timepicker.component.scss │ │ │ ├── timepicker.component.ts │ │ │ ├── timepicker.module.ts │ │ │ └── timepicker.routing.ts │ │ ├── toast │ │ │ ├── toast.component.html │ │ │ ├── toast.component.scss │ │ │ ├── toast.component.ts │ │ │ ├── toast.module.ts │ │ │ └── toast.routing.ts │ │ ├── tooltip │ │ │ ├── tooltip.component.html │ │ │ ├── tooltip.component.scss │ │ │ ├── tooltip.component.ts │ │ │ ├── tooltip.module.ts │ │ │ └── tooltip.routing.ts │ │ └── validation │ │ │ ├── markdown │ │ │ └── component.module.diff │ │ │ ├── models │ │ │ ├── activity-sector.ts │ │ │ ├── index.ts │ │ │ ├── province.ts │ │ │ └── user.ts │ │ │ ├── validation-binding │ │ │ ├── markdown │ │ │ │ ├── component.html │ │ │ │ └── component.ts │ │ │ ├── validation-binding.component.html │ │ │ ├── validation-binding.component.scss │ │ │ └── validation-binding.component.ts │ │ │ ├── validation-form-state │ │ │ ├── markdown │ │ │ │ ├── component.html │ │ │ │ └── component.ts │ │ │ ├── validation-form-state.component.html │ │ │ ├── validation-form-state.component.scss │ │ │ └── validation-form-state.component.ts │ │ │ ├── validation-ngmodel │ │ │ ├── markdown │ │ │ │ ├── component.html │ │ │ │ └── component.ts │ │ │ ├── validation-ngmodel.component.html │ │ │ ├── validation-ngmodel.component.scss │ │ │ └── validation-ngmodel.component.ts │ │ │ ├── validation-playground │ │ │ ├── markdown │ │ │ │ ├── component.html │ │ │ │ └── component.ts │ │ │ ├── validation-playground.component.html │ │ │ ├── validation-playground.component.scss │ │ │ └── validation-playground.component.ts │ │ │ ├── validation.component.html │ │ │ ├── validation.component.scss │ │ │ ├── validation.component.ts │ │ │ ├── validation.module.ts │ │ │ └── validation.routing.ts │ ├── assets │ │ ├── angular.png │ │ ├── card-1.jpg │ │ ├── google_g_logo.png │ │ ├── home-header-bg.png │ │ ├── materialize-logo.png │ │ ├── materialize.png │ │ ├── ngx-materialize-circle.png │ │ ├── parallax-1.png │ │ ├── parallax-2.png │ │ ├── select-icon-1.jpg │ │ ├── select-icon-2.jpg │ │ ├── select-icon-3.jpg │ │ ├── sidenav-demo-avatar.png │ │ └── sidenav-demo-bg.png │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ └── typings.d.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── lib ├── karma.conf.js ├── ng-package.json ├── ng-package.prod.json ├── package.json ├── public_api.ts ├── src │ ├── badge │ │ ├── badge.component.html │ │ ├── badge.component.scss │ │ ├── badge.component.ts │ │ ├── badge.component.unit.spec.ts │ │ ├── badge.component.view.spec.ts │ │ ├── badge.module.ts │ │ └── index.ts │ ├── button │ │ ├── button.directive.ts │ │ ├── button.directive.unit.spec.ts │ │ ├── button.module.ts │ │ └── index.ts │ ├── card │ │ ├── card.component.html │ │ ├── card.component.scss │ │ ├── card.component.ts │ │ ├── card.component.unit.spec.ts │ │ ├── card.component.view.spec.ts │ │ ├── card.module.ts │ │ ├── halfway-fab │ │ │ ├── halfway-fab.directive.ts │ │ │ ├── halfway-fab.directive.unit.spec.ts │ │ │ ├── halfway-fab.module.ts │ │ │ └── index.ts │ │ └── index.ts │ ├── checkbox │ │ ├── checkbox-container │ │ │ ├── checkbox-container.component.html │ │ │ ├── checkbox-container.component.scss │ │ │ ├── checkbox-container.component.ts │ │ │ ├── checkbox-container.component.unit.spec.ts │ │ │ ├── checkbox-container.component.view.spec.ts │ │ │ └── index.ts │ │ ├── checkbox.directive.ts │ │ ├── checkbox.directive.unit.spec.ts │ │ ├── checkbox.module.ts │ │ └── index.ts │ ├── chip │ │ ├── chip-input │ │ │ ├── chip-input.component.html │ │ │ ├── chip-input.component.scss │ │ │ ├── chip-input.component.ts │ │ │ ├── chip-input.component.view.spec.ts │ │ │ └── index.ts │ │ ├── chip.component.html │ │ ├── chip.component.scss │ │ ├── chip.component.ts │ │ ├── chip.component.view.spec.ts │ │ ├── chip.module.ts │ │ └── index.ts │ ├── collapsible │ │ ├── collapsible-item │ │ │ ├── collapsible-item.component.html │ │ │ ├── collapsible-item.component.scss │ │ │ ├── collapsible-item.component.ts │ │ │ ├── collapsible-item.component.unit.spec.ts │ │ │ ├── collapsible-item.component.view.spec.ts │ │ │ └── index.ts │ │ ├── collapsible.component.html │ │ ├── collapsible.component.scss │ │ ├── collapsible.component.ts │ │ ├── collapsible.component.unit.spec.ts │ │ ├── collapsible.component.view.spec.ts │ │ ├── collapsible.module.ts │ │ └── index.ts │ ├── collection │ │ ├── avatar │ │ │ ├── avatar.directive.ts │ │ │ ├── avatar.directive.view.spec.ts │ │ │ └── index.ts │ │ ├── collection-header │ │ │ ├── collection-header.component.html │ │ │ ├── collection-header.component.scss │ │ │ ├── collection-header.component.ts │ │ │ ├── collection-header.component.view.spec.ts │ │ │ └── index.ts │ │ ├── collection-item │ │ │ ├── collection-item.component.html │ │ │ ├── collection-item.component.scss │ │ │ ├── collection-item.component.ts │ │ │ ├── collection-item.component.view.spec.ts │ │ │ └── index.ts │ │ ├── collection-link │ │ │ ├── collection-link.directive.ts │ │ │ ├── collection-link.directive.view.spec.ts │ │ │ └── index.ts │ │ ├── collection.component.html │ │ ├── collection.component.scss │ │ ├── collection.component.ts │ │ ├── collection.component.view.spec.ts │ │ ├── collection.module.ts │ │ ├── index.ts │ │ └── secondary-content │ │ │ ├── index.ts │ │ │ ├── secondary-content.directive.ts │ │ │ └── secondary-content.directive.view.spec.ts │ ├── datepicker │ │ ├── datepicker-container │ │ │ ├── datepicker-container.component.html │ │ │ ├── datepicker-container.component.scss │ │ │ ├── datepicker-container.component.ts │ │ │ ├── datepicker-container.component.unit.spec.ts │ │ │ ├── datepicker-container.component.view.spec.ts │ │ │ └── index.ts │ │ ├── datepicker.directive.ts │ │ ├── datepicker.directive.unit.spec.ts │ │ ├── datepicker.directive.view.spec.ts │ │ ├── datepicker.module.ts │ │ └── index.ts │ ├── dropdown │ │ ├── dropdown-divider │ │ │ ├── dropdown-divider.component.html │ │ │ ├── dropdown-divider.component.scss │ │ │ ├── dropdown-divider.component.ts │ │ │ ├── dropdown-divider.component.unit.spec.ts │ │ │ ├── dropdown-divider.component.view.spec.ts │ │ │ └── index.ts │ │ ├── dropdown-item │ │ │ ├── dropdown-item.component.html │ │ │ ├── dropdown-item.component.scss │ │ │ ├── dropdown-item.component.ts │ │ │ ├── dropdown-item.component.unit.spec.ts │ │ │ ├── dropdown-item.component.view.spec.ts │ │ │ └── index.ts │ │ ├── dropdown.component.html │ │ ├── dropdown.component.scss │ │ ├── dropdown.component.ts │ │ ├── dropdown.component.unit.spec.ts │ │ ├── dropdown.component.view.spec.ts │ │ ├── dropdown.module.ts │ │ └── index.ts │ ├── feature-discovery │ │ ├── feature-discovery.component.html │ │ ├── feature-discovery.component.scss │ │ ├── feature-discovery.component.ts │ │ ├── feature-discovery.component.view.spec.ts │ │ ├── feature-discovery.module.ts │ │ └── index.ts │ ├── icon-mdi │ │ ├── icon-mdi.directive.ts │ │ ├── icon-mdi.directive.unit.spec.ts │ │ ├── icon-mdi.module.ts │ │ └── index.ts │ ├── icon │ │ ├── icon.directive.ts │ │ ├── icon.directive.unit.spec.ts │ │ ├── icon.module.ts │ │ └── index.ts │ ├── index.ts │ ├── input │ │ ├── index.ts │ │ ├── input-container │ │ │ ├── index.ts │ │ │ ├── input-container.component.html │ │ │ ├── input-container.component.scss │ │ │ ├── input-container.component.ts │ │ │ ├── input-container.component.unit.spec.ts │ │ │ └── input-container.component.view.spec.ts │ │ ├── input-prefix │ │ │ ├── index.ts │ │ │ ├── input-prefix.directive.ts │ │ │ └── input-prefix.directive.unit.spec.ts │ │ ├── input.directive.ts │ │ ├── input.directive.unit.spec.ts │ │ └── input.module.ts │ ├── materialize.module.ts │ ├── media │ │ ├── index.ts │ │ ├── media.module.ts │ │ ├── media.service.ts │ │ ├── media.service.unit.spec.ts │ │ └── models │ │ │ ├── index.ts │ │ │ ├── matchOperator.ts │ │ │ ├── media.ts │ │ │ └── mediaBreakpoint.ts │ ├── modal │ │ ├── index.ts │ │ ├── modal-base │ │ │ ├── index.ts │ │ │ ├── modal-base.ts │ │ │ └── modal-base.view.spec.ts │ │ ├── modal-close │ │ │ ├── index.ts │ │ │ ├── modal-close.directive.ts │ │ │ └── modal-close.directive.view.spec.ts │ │ ├── modal.component.html │ │ ├── modal.component.scss │ │ ├── modal.component.ts │ │ ├── modal.component.unit.spec.ts │ │ ├── modal.component.view.spec.ts │ │ ├── modal.module.ts │ │ └── services │ │ │ ├── index.ts │ │ │ ├── modal.service.ts │ │ │ ├── modal.service.unit.spec.ts │ │ │ └── modal.service.view.spec.ts │ ├── navbar │ │ ├── index.ts │ │ ├── navbar-item-container │ │ │ ├── index.ts │ │ │ ├── navbar-item-container.component.html │ │ │ ├── navbar-item-container.component.scss │ │ │ ├── navbar-item-container.component.ts │ │ │ ├── navbar-item-container.component.unit.spec.ts │ │ │ └── navbar-item-container.component.view.spec.ts │ │ ├── navbar-item │ │ │ ├── index.ts │ │ │ ├── navbar-item.component.html │ │ │ ├── navbar-item.component.scss │ │ │ ├── navbar-item.component.ts │ │ │ ├── navbar-item.component.unit.spec.ts │ │ │ └── navbar-item.component.view.spec.ts │ │ ├── navbar.component.html │ │ ├── navbar.component.scss │ │ ├── navbar.component.ts │ │ ├── navbar.component.unit.spec.ts │ │ ├── navbar.component.view.spec.ts │ │ └── navbar.module.ts │ ├── pagination │ │ ├── index.ts │ │ ├── pagination-page-button │ │ │ ├── index.ts │ │ │ ├── pagination-page-button.component.html │ │ │ ├── pagination-page-button.component.scss │ │ │ └── pagination-page-button.component.ts │ │ ├── pagination.component.html │ │ ├── pagination.component.scss │ │ ├── pagination.component.ts │ │ ├── pagination.component.unit.spec.ts │ │ ├── pagination.component.view.spec.ts │ │ └── pagination.module.ts │ ├── parallax │ │ ├── index.ts │ │ ├── parallax.component.html │ │ ├── parallax.component.scss │ │ ├── parallax.component.ts │ │ ├── parallax.component.unit.spec.ts │ │ ├── parallax.component.view.spec.ts │ │ └── parallax.module.ts │ ├── progress │ │ ├── index.ts │ │ ├── progress.component.html │ │ ├── progress.component.scss │ │ ├── progress.component.ts │ │ ├── progress.component.unit.spec.ts │ │ ├── progress.component.view.spec.ts │ │ └── progress.module.ts │ ├── radio-button │ │ ├── index.ts │ │ ├── radio-button-container │ │ │ ├── index.ts │ │ │ ├── radio-button-container.component.html │ │ │ ├── radio-button-container.component.scss │ │ │ ├── radio-button-container.component.ts │ │ │ ├── radio-button-container.component.unit.spec.ts │ │ │ └── radio-button-container.component.view.spec.ts │ │ ├── radio-button.directive.ts │ │ ├── radio-button.directive.unit.spec.ts │ │ └── radio-button.module.ts │ ├── select │ │ ├── index.ts │ │ ├── select-container │ │ │ ├── index.ts │ │ │ ├── select-container.component.html │ │ │ ├── select-container.component.scss │ │ │ ├── select-container.component.ts │ │ │ ├── select-container.component.unit.spec.ts │ │ │ └── select-container.component.view.spec.ts │ │ ├── select.directive.ts │ │ ├── select.directive.unit.spec.ts │ │ ├── select.directive.view.spec.ts │ │ └── select.module.ts │ ├── shared │ │ ├── handle-prop-changes.ts │ │ ├── index.ts │ │ ├── injection │ │ │ ├── index.ts │ │ │ ├── injection.module.ts │ │ │ ├── injection.service.ts │ │ │ └── injection.service.view.spec.ts │ │ ├── remove-component-host │ │ │ ├── index.ts │ │ │ ├── remove-component-host.ts │ │ │ └── remove-component-host.view.spec.ts │ │ └── test-wrapper │ │ │ ├── index.ts │ │ │ ├── mocks │ │ │ ├── index.ts │ │ │ ├── mock-change-detector-ref.ts │ │ │ └── mock-renderer.ts │ │ │ ├── test-wrapper.builder.ts │ │ │ ├── test-wrapper.component.ts │ │ │ └── test-wrapper.module.ts │ ├── sidenav │ │ ├── index.ts │ │ ├── sidenav-collapsible │ │ │ ├── index.ts │ │ │ ├── sidenav-collapsible-header │ │ │ │ ├── index.ts │ │ │ │ ├── sidenav-collapsible-header.component.html │ │ │ │ ├── sidenav-collapsible-header.component.scss │ │ │ │ ├── sidenav-collapsible-header.component.ts │ │ │ │ ├── sidenav-collapsible-header.component.unit.spec.ts │ │ │ │ └── sidenav-collapsible-header.component.view.spec.ts │ │ │ ├── sidenav-collapsible.component.html │ │ │ ├── sidenav-collapsible.component.scss │ │ │ ├── sidenav-collapsible.component.ts │ │ │ ├── sidenav-collapsible.component.unit.spec.ts │ │ │ └── sidenav-collapsible.component.view.spec.ts │ │ ├── sidenav-divider │ │ │ ├── index.ts │ │ │ ├── sidenav-divider.component.html │ │ │ ├── sidenav-divider.component.scss │ │ │ ├── sidenav-divider.component.ts │ │ │ ├── sidenav-divider.component.unit.spec.ts │ │ │ └── sidenav-divider.component.view.spec.ts │ │ ├── sidenav-header │ │ │ ├── index.ts │ │ │ ├── sidenav-header.component.html │ │ │ ├── sidenav-header.component.scss │ │ │ ├── sidenav-header.component.ts │ │ │ ├── sidenav-header.component.unit.spec.ts │ │ │ └── sidenav-header.component.view.spec.ts │ │ ├── sidenav-link │ │ │ ├── index.ts │ │ │ ├── sidenav-link.component.html │ │ │ ├── sidenav-link.component.scss │ │ │ ├── sidenav-link.component.ts │ │ │ ├── sidenav-link.component.unit.spec.ts │ │ │ └── sidenav-link.component.view.spec.ts │ │ ├── sidenav-subheader │ │ │ ├── index.ts │ │ │ ├── sidenav-subheader.component.html │ │ │ ├── sidenav-subheader.component.scss │ │ │ ├── sidenav-subheader.component.ts │ │ │ ├── sidenav-subheader.component.unit.spec.ts │ │ │ └── sidenav-subheader.component.view.spec.ts │ │ ├── sidenav.component.html │ │ ├── sidenav.component.ts │ │ ├── sidenav.component.unit.spec.ts │ │ ├── sidenav.component.view.spec.ts │ │ └── sidenav.module.ts │ ├── spinner │ │ ├── index.ts │ │ ├── spinner.component.html │ │ ├── spinner.component.scss │ │ ├── spinner.component.ts │ │ ├── spinner.component.unit.spec.ts │ │ ├── spinner.component.view.spec.ts │ │ └── spinner.module.ts │ ├── switch │ │ ├── index.ts │ │ ├── switch-container │ │ │ ├── index.ts │ │ │ ├── switch-container.component.html │ │ │ ├── switch-container.component.scss │ │ │ ├── switch-container.component.ts │ │ │ └── switch-container.component.view.spec.ts │ │ ├── switch.directive.ts │ │ ├── switch.directive.view.spec.ts │ │ └── switch.module.ts │ ├── tab │ │ ├── index.ts │ │ ├── tab-item │ │ │ ├── index.ts │ │ │ ├── tab-item.component.html │ │ │ ├── tab-item.component.scss │ │ │ └── tab-item.component.ts │ │ ├── tab.component.html │ │ ├── tab.component.scss │ │ ├── tab.component.ts │ │ ├── tab.component.view.spec.ts │ │ └── tab.module.ts │ ├── test.ts │ ├── textarea │ │ ├── index.ts │ │ ├── textarea-container │ │ │ ├── index.ts │ │ │ ├── textarea-container.component.html │ │ │ ├── textarea-container.component.scss │ │ │ ├── textarea-container.component.ts │ │ │ ├── textarea-container.component.unit.spec.ts │ │ │ └── textarea-container.component.view.spec.ts │ │ ├── textarea-prefix │ │ │ ├── index.ts │ │ │ ├── textarea-prefix.directive.ts │ │ │ └── textarea-prefix.directive.unit.spec.ts │ │ ├── textarea.directive.ts │ │ ├── textarea.directive.unit.spec.ts │ │ └── textarea.module.ts │ ├── timepicker │ │ ├── index.ts │ │ ├── timepicker-container │ │ │ ├── index.ts │ │ │ ├── timepicker-container.component.html │ │ │ ├── timepicker-container.component.scss │ │ │ ├── timepicker-container.component.spec.ts │ │ │ └── timepicker-container.component.ts │ │ ├── timepicker.directive.ts │ │ ├── timepicker.directive.unit.spec.ts │ │ ├── timepicker.directive.view.spec.ts │ │ └── timepicker.module.ts │ ├── toast │ │ ├── index.ts │ │ ├── services │ │ │ ├── index.ts │ │ │ ├── toast.service.ts │ │ │ └── toast.service.unit.spec.ts │ │ └── toast.module.ts │ ├── tooltip │ │ ├── index.ts │ │ ├── tooltip.directive.ts │ │ ├── tooltip.directive.unit.spec.ts │ │ ├── tooltip.directive.view.spec.ts │ │ └── tooltip.module.ts │ └── validation │ │ ├── error-message │ │ ├── error-message.component.html │ │ ├── error-message.component.scss │ │ ├── error-message.component.ts │ │ ├── error-message.component.unit.spec.ts │ │ ├── error-message.component.view.spec.ts │ │ ├── index.ts │ │ └── models │ │ │ ├── error-message.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── validation.component.html │ │ ├── validation.component.scss │ │ ├── validation.component.ts │ │ ├── validation.component.unit.spec.ts │ │ ├── validation.component.view.spec.ts │ │ └── validation.module.ts ├── tsconfig.lib.json ├── tsconfig.spec.json ├── tslint.json ├── typings.d.ts └── yarn.lock ├── package.json ├── static.json ├── tsconfig.json ├── tslint.json ├── typings.json └── yarn.lock /.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 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the fea -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /documentation 6 | /tmp 7 | /out-tsc 8 | 9 | # dependencies 10 | **/node_modules 11 | 12 | # IDEs and editors 13 | /.idea 14 | .project 15 | .classpath 16 | .c9/ 17 | *.launch 18 | .settings/ 19 | *.sublime-workspace 20 | 21 | # IDE - VSCode 22 | .vscode/* 23 | !.vscode/settings.json 24 | !.vscode/tasks.json 25 | !.vscode/launch.json 26 | !.vscode/extensions.json 27 | 28 | # misc 29 | /.sass-cache 30 | /connect.lock 31 | /coverage 32 | /libpeerconnection.log 33 | /package 34 | /typings 35 | package-lock.json 36 | test-results.xml 37 | tslint.xml 38 | *.log 39 | *.tar 40 | *.tgz 41 | 42 | # System Files 43 | .DS_Store 44 | Thumbs.db 45 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /* 2 | !/dist 3 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible Node.js debug attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost, with sourcemaps", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:4200/", 12 | "sourceMaps": true, 13 | "webRoot": "${workspaceRoot}", 14 | "trace": true, 15 | "sourceMapPathOverrides": { 16 | "webpack:///../*": "${webRoot}/*" 17 | }, 18 | "userDataDir": "${workspaceRoot}/out/chrome" 19 | }, 20 | { 21 | "name": "Attach to Chrome, with sourcemaps", 22 | "type": "chrome", 23 | "request": "attach", 24 | "url": "http://localhost:4200/home", 25 | "port": 9222, 26 | "sourceMaps": true, 27 | "webRoot": "${workspaceRoot}", 28 | "trace": true, 29 | "sourceMapPathOverrides": { 30 | "webpack:///../*": "${webRoot}/*" 31 | } 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Auto-Import extension 4 | "autoimport.doubleQuotes": false, 5 | "autoimport.spaceBetweenBraces": true, 6 | 7 | // Editor 8 | 9 | // The number of spaces a tab is equal to. This setting is overriden based on the file contents when `editor.detectIndentation` is on. 10 | "editor.tabSize": 2, 11 | 12 | // Controls whether the editor should render indent guides 13 | "editor.renderIndentGuides": true, 14 | 15 | // Files 16 | 17 | // When enabled, will trim trailing whitespace when you save a file. 18 | "files.trimTrailingWhitespace": true, 19 | 20 | // Search 21 | 22 | // Configure glob patterns for excluding files and folders in searches. Inherits all glob patterns from the file.exclude setting. 23 | "search.exclude": { 24 | "**/.tmp": true, 25 | "**/coverage": true, 26 | "**/dist": true, 27 | "**/inline-template": true 28 | }, 29 | 30 | // Vscode-Icon extension 31 | "typescript.tsdk": "node_modules\\typescript\\lib" 32 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-materialize", 3 | "scripts": {}, 4 | "env": { 5 | "NODE_ENV": { 6 | "value": "development" 7 | }, 8 | "NPM_CONFIG_PRODUCTION": { 9 | "value": "false" 10 | } 11 | }, 12 | "formation": {}, 13 | "addons": [], 14 | "buildpacks": [ 15 | { 16 | "url": "heroku/nodejs" 17 | }, 18 | { 19 | "url": "https://github.com/heroku/heroku-buildpack-static.git" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | image: Visual Studio 2017 2 | 3 | branches: 4 | only: 5 | - master 6 | 7 | environment: 8 | matrix: 9 | - nodejs_version: "8" 10 | 11 | platform: 12 | - x64 13 | 14 | install: 15 | - ps: Install-Product node $env:nodejs_version 16 | - yarn install --frozen-lockfile --no-progress 17 | - yarn build:lib --prod 18 | - npm pack ./dist/lib 19 | - 7z x ngx-materialize-*.tgz && 7z x ngx-materialize-*.tar 20 | - cd package && yarn link && cd .. 21 | - yarn install --frozen-lockfile --no-progress 22 | - yarn link ngx-materialize 23 | 24 | test_script: 25 | - node --version 26 | - npm --version 27 | - yarn --version 28 | - yarn lint:demo 29 | - yarn build:demo --prod --no-progress 30 | 31 | after_test: 32 | - yarn unlink ngx-materialize 33 | - cd package && yarn unlink && cd .. 34 | 35 | build: off 36 | 37 | cache: 38 | - node_modules -> yarn.lock 39 | - "%LOCALAPPDATA%/Yarn" 40 | -------------------------------------------------------------------------------- /demo/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | IE 9-11 -------------------------------------------------------------------------------- /demo/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /demo/src/_route-animation-host.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /demo/src/_variables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Copied from materialize-css _variable.scss 3 | // ========================================================================== 4 | 5 | // Media Query Ranges 6 | $small-screen-up: 601px !default; 7 | $medium-screen-up: 993px !default; 8 | $large-screen-up: 1201px !default; 9 | $small-screen: 600px !default; 10 | $medium-screen: 992px !default; 11 | $large-screen: 1200px !default; 12 | 13 | $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; 14 | $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; 15 | $small-and-down: "only screen and (max-width : #{$small-screen})" !default; 16 | $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; 17 | $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; 18 | 19 | // ========================================================================== -------------------------------------------------------------------------------- /demo/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpModule } from '@angular/http'; 4 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 5 | import { RouterModule } from '@angular/router'; 6 | import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar'; 7 | import { MarkdownModule } from 'ngx-markdown'; 8 | import { MzButtonModule, MzIconMdiModule, MzSidenavModule } from 'ngx-materialize'; 9 | 10 | import { AppComponent } from './app.component'; 11 | import { ROUTES } from './app.routing'; 12 | 13 | @NgModule({ 14 | imports: [ 15 | // external modules 16 | BrowserAnimationsModule, 17 | CommonModule, 18 | MalihuScrollbarModule.forRoot(), 19 | MzButtonModule, 20 | MzIconMdiModule, 21 | MzSidenavModule, 22 | MarkdownModule.forRoot(), 23 | RouterModule.forRoot(ROUTES), 24 | ], 25 | declarations: [AppComponent], 26 | bootstrap: [AppComponent], 27 | }) 28 | export class AppModule { } 29 | -------------------------------------------------------------------------------- /demo/src/app/badge/badge.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | #{'/deep/'} { 4 | span.badge { 5 | float: left; 6 | 7 | &:not(.new) { 8 | padding: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo/src/app/badge/badge.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MarkdownModule } from 'ngx-markdown'; 5 | import { MzBadgeModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { BadgeComponent } from './badge.component'; 10 | import { ROUTES } from './badge.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | MarkdownModule.forRoot(), 17 | MzBadgeModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [BadgeComponent], 22 | }) 23 | export class BadgeModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/badge/badge.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { BadgeComponent } from './badge.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: BadgeComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/button/button.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/button/button.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzIconMdiModule, MzIconModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { ButtonComponent } from './button.component'; 9 | import { ROUTES } from './button.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzButtonModule, 16 | MzIconModule, 17 | MzIconMdiModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [ButtonComponent], 22 | }) 23 | export class ButtonModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/button/button.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ButtonComponent } from './button.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ButtonComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/card/card.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | #{'/deep/'} .color-hoverable { 4 | background-color: #333333; 5 | } -------------------------------------------------------------------------------- /demo/src/app/card/card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { ROUTE_ANIMATION, ROUTE_ANIMATION_HOST } from '../app.routing.animation'; 4 | import { IPropertyRow } from '../shared/properties-table/properties-table.component'; 5 | 6 | @Component({ 7 | selector: 'app-card', 8 | templateUrl: './card.component.html', 9 | styleUrls: ['./card.component.scss'], 10 | host: ROUTE_ANIMATION_HOST, // tslint:disable-line:use-host-property-decorator 11 | animations: [ROUTE_ANIMATION], 12 | }) 13 | export class CardComponent { 14 | properties: IPropertyRow[] = [ 15 | { 16 | name: 'horizontal', 17 | mandatory: false, 18 | type: 'boolean', 19 | description: `Change the card image to horizontal`, 20 | defaultValue: `false`, 21 | }, 22 | { 23 | name: 'hoverable', 24 | mandatory: false, 25 | type: 'boolean', 26 | description: `Box-shadow css animnation on card rollover`, 27 | defaultValue: `false`, 28 | }, 29 | ]; 30 | } 31 | -------------------------------------------------------------------------------- /demo/src/app/card/card.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzCardModule, MzIconModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { CardComponent } from './card.component'; 9 | import { ROUTES } from './card.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzButtonModule, 16 | MzCardModule, 17 | MzIconModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [CardComponent], 22 | }) 23 | export class CardModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/card/card.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { CardComponent } from './card.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: CardComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/checkbox/checkbox.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/checkbox/checkbox.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzInputModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { CheckboxComponent } from './checkbox.component'; 10 | import { ROUTES } from './checkbox.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzInputModule, 19 | PropertiesTableModule, 20 | RouterModule.forChild(ROUTES), 21 | ], 22 | declarations: [CheckboxComponent], 23 | }) 24 | export class CheckboxModule { } 25 | -------------------------------------------------------------------------------- /demo/src/app/checkbox/checkbox.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { CheckboxComponent } from './checkbox.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: CheckboxComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/chip/chip.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/chip/chip.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzButtonModule, MzChipModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { ChipComponent } from './chip.component'; 10 | import { ROUTES } from './chip.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzButtonModule, 18 | MzChipModule, 19 | PropertiesTableModule, 20 | RouterModule.forChild(ROUTES), 21 | ], 22 | declarations: [ChipComponent], 23 | }) 24 | export class ChipModule { } 25 | -------------------------------------------------------------------------------- /demo/src/app/chip/chip.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ChipComponent } from './chip.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ChipComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/collapsible/collapsible.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | #{'/deep/'} .collapsible-body { 4 | background: rgba(255,255,255,0.87); 5 | } -------------------------------------------------------------------------------- /demo/src/app/collapsible/collapsible.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzCollapsibleModule, MzIconMdiModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { CollapsibleComponent } from './collapsible.component'; 9 | import { ROUTES } from './collapsible.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzButtonModule, 16 | MzCollapsibleModule, 17 | MzIconMdiModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [CollapsibleComponent], 22 | }) 23 | export class CollapsibleModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/collapsible/collapsible.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { CollapsibleComponent } from './collapsible.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: CollapsibleComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/collection/collection.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/collection/collection.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { ROUTE_ANIMATION, ROUTE_ANIMATION_HOST } from '../app.routing.animation'; 4 | import { IPropertyRow } from '../shared/properties-table/properties-table.component'; 5 | 6 | @Component({ 7 | selector: 'app-collection', 8 | templateUrl: './collection.component.html', 9 | styleUrls: ['./collection.component.scss'], 10 | host: ROUTE_ANIMATION_HOST, // tslint:disable-line:use-host-property-decorator 11 | animations: [ROUTE_ANIMATION], 12 | }) 13 | export class CollectionComponent { 14 | 15 | collectionItemProperties: IPropertyRow[] = [ 16 | { 17 | name: 'dismissable', 18 | mandatory: false, 19 | type: 'boolean', 20 | description: 'Enable collection item to be swiped away (only for touch enabled devices)', 21 | defaultValue: 'false', 22 | }, 23 | ]; 24 | 25 | collectionLinkProperties: IPropertyRow[] = [ 26 | { 27 | name: 'active', 28 | mandatory: false, 29 | type: 'boolean', 30 | description: 'Highlight the link item by applying active css class', 31 | defaultValue: 'false', 32 | }, 33 | ]; 34 | } 35 | -------------------------------------------------------------------------------- /demo/src/app/collection/collection.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCollectionModule, MzIconMdiModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { CollectionComponent } from './collection.component'; 10 | import { ROUTES } from './collection.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | MzCollectionModule, 17 | MzIconMdiModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [CollectionComponent], 22 | }) 23 | export class CollectionModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/collection/collection.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { CollectionComponent } from './collection.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: CollectionComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/datepicker/datepicker.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/datepicker/datepicker.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzDatepickerModule, MzIconMdiModule, MzInputModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { DatepickerComponent } from './datepicker.component'; 10 | import { ROUTES } from './datepicker.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzDatepickerModule, 19 | MzIconMdiModule, 20 | MzInputModule, 21 | PropertiesTableModule, 22 | RouterModule.forChild(ROUTES), 23 | ], 24 | declarations: [DatepickerComponent], 25 | }) 26 | export class DatepickerModule { } 27 | -------------------------------------------------------------------------------- /demo/src/app/datepicker/datepicker.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DatepickerComponent } from './datepicker.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: DatepickerComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/dropdown/dropdown.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/dropdown/dropdown.module.ts: -------------------------------------------------------------------------------- 1 | 2 | import { CommonModule } from '@angular/common'; 3 | import { NgModule } from '@angular/core'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzButtonModule, MzDropdownModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { DropdownComponent } from './dropdown.component'; 10 | import { ROUTES } from './dropdown.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | MzButtonModule, 17 | MzDropdownModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [DropdownComponent], 22 | }) 23 | export class DropdownModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/dropdown/dropdown.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DropdownComponent } from './dropdown.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: DropdownComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/feature-discovery/feature-discovery.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/feature-discovery/feature-discovery.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Renderer } from '@angular/core'; 2 | 3 | import { ROUTE_ANIMATION, ROUTE_ANIMATION_HOST } from '../app.routing.animation'; 4 | import { IPropertyRow } from '../shared/properties-table/properties-table.component'; 5 | 6 | @Component({ 7 | selector: 'app-feature-discovery', 8 | templateUrl: './feature-discovery.component.html', 9 | styleUrls: ['./feature-discovery.component.scss'], 10 | host: ROUTE_ANIMATION_HOST, // tslint:disable-line:use-host-property-decorator 11 | animations: [ROUTE_ANIMATION], 12 | }) 13 | export class FeatureDiscoveryComponent implements OnInit { 14 | // table properties 15 | properties: IPropertyRow[] = [ 16 | { name: 'targetId', 17 | mandatory: true, 18 | type: 'string', 19 | description: `Id of the target for feature discovery`, 20 | }, 21 | ]; 22 | 23 | constructor( 24 | private renderer: Renderer, 25 | ) { } 26 | 27 | ngOnInit() { 28 | // initialize scrollspy 29 | const scrollSpy = $('.scrollspy'); 30 | this.renderer.invokeElementMethod(scrollSpy, 'scrollSpy'); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /demo/src/app/feature-discovery/feature-discovery.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzFeatureDiscoveryModule, MzIconMdiModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { FeatureDiscoveryComponent } from './feature-discovery.component'; 9 | import { ROUTES } from './feature-discovery.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzButtonModule, 16 | MzFeatureDiscoveryModule, 17 | MzIconMdiModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [FeatureDiscoveryComponent], 22 | }) 23 | export class FeatureDiscoveryModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/feature-discovery/feature-discovery.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { FeatureDiscoveryComponent } from './feature-discovery.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: FeatureDiscoveryComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/home/home.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../_variables'; 2 | 3 | $logo-resize: "only screen and (max-width: 650px)" !default; 4 | 5 | .header-background { 6 | box-shadow: 0 -1px 32px rgba(0, 0, 0, 0.33) inset; 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | width: 100%; 11 | } 12 | 13 | .header-content { 14 | position: relative; 15 | height: 176px; 16 | margin-bottom: 76px; 17 | } 18 | 19 | .github-button { 20 | position: absolute; 21 | bottom: -56px; 22 | right: 0; 23 | 24 | @media #{$logo-resize} { 25 | right: calc(50% - 75px); 26 | } 27 | } 28 | 29 | .angular-logo { 30 | max-height: 175px; 31 | 32 | @media #{$logo-resize} { 33 | max-height: 140px; 34 | margin-left: calc(50% - 162px); 35 | } 36 | } 37 | 38 | .plus-logo.mdi:before { 39 | color: rgba(255,255,255,0.75); 40 | font-size: 116px; 41 | margin: 0 -58px; 42 | } 43 | 44 | .materialize-logo { 45 | margin: 14px; 46 | max-height: 125px; 47 | 48 | @media #{$logo-resize} { 49 | max-height: 90px; 50 | } 51 | } -------------------------------------------------------------------------------- /demo/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.scss'], 7 | }) 8 | export class HomeComponent { 9 | navigateToGithub() { 10 | window.location.href = 'https://github.com/sherweb/ngx-materialize'; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /demo/src/app/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MarkdownModule } from 'ngx-markdown'; 5 | import { MzButtonModule, MzIconMdiModule, MzParallaxModule } from 'ngx-materialize'; 6 | 7 | import { HomeComponent } from './home.component'; 8 | import { ROUTES } from './home.routing'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | MarkdownModule.forRoot(), 13 | MzButtonModule, 14 | MzIconMdiModule, 15 | MzParallaxModule, 16 | RouterModule.forChild(ROUTES), 17 | ], 18 | declarations: [HomeComponent], 19 | }) 20 | export class HomeModule { } 21 | -------------------------------------------------------------------------------- /demo/src/app/home/home.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: HomeComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/icon/icon.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/icon/icon.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzIconMdiModule, MzIconModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { IconComponent } from './icon.component'; 9 | import { ROUTES } from './icon.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzIconMdiModule, 16 | MzIconModule, 17 | PropertiesTableModule, 18 | RouterModule.forChild(ROUTES), 19 | ], 20 | declarations: [IconComponent], 21 | }) 22 | export class IconModule { } 23 | -------------------------------------------------------------------------------- /demo/src/app/icon/icon.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { IconComponent } from './icon.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: IconComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/index.ts: -------------------------------------------------------------------------------- 1 | export * from './app.component'; 2 | export * from './app.module'; 3 | -------------------------------------------------------------------------------- /demo/src/app/input/input.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | .section { 4 | .row { 5 | margin-bottom: 0; 6 | } 7 | } -------------------------------------------------------------------------------- /demo/src/app/input/input.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzIconMdiModule, MzInputModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { InputComponent } from './input.component'; 10 | import { ROUTES } from './input.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzIconMdiModule, 19 | MzInputModule, 20 | PropertiesTableModule, 21 | RouterModule.forChild(ROUTES), 22 | ], 23 | declarations: [InputComponent], 24 | }) 25 | export class InputModule { } 26 | -------------------------------------------------------------------------------- /demo/src/app/input/input.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { InputComponent } from './input.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: InputComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/materialize-css-class/materialize-css-class.component.html: -------------------------------------------------------------------------------- 1 |

Materialize CSS Class

2 | 3 |
4 |

5 | Materialize CSS classes can be used all around your application. For this reason those CSS classes will not be wrapped into directive. 6 |

7 |
8 | 9 |
10 |
Pages from Materialize
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
Page NameLink
{{ page.name }}{{ page.link }}
27 |
28 | -------------------------------------------------------------------------------- /demo/src/app/materialize-css-class/materialize-css-class.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/materialize-css-class/materialize-css-class.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { RouterModule } from '@angular/router'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { MaterializeCssClassComponent } from './materialize-css-class.component'; 8 | import { ROUTES } from './materialize-css-class.routing'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CodeSnippetModule, 13 | CommonModule, 14 | RouterModule.forChild(ROUTES), 15 | ], 16 | declarations: [MaterializeCssClassComponent], 17 | }) 18 | export class MaterializeCssClassModule { } 19 | -------------------------------------------------------------------------------- /demo/src/app/materialize-css-class/materialize-css-class.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { MaterializeCssClassComponent } from './materialize-css-class.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: MaterializeCssClassComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/media/media.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | .json-sample { 4 | background: rgba(0,0,0,0.07); 5 | border-radius: 2px; 6 | margin: 0 0.05em; 7 | padding: 1em; 8 | } 9 | 10 | .demo { 11 | border-radius: 3px; 12 | height: 135px; 13 | 14 | transition: background 0.25s ease-in; 15 | } 16 | 17 | .label { 18 | border-radius: 3px; 19 | color: white; 20 | padding: 4px 8px; 21 | 22 | &:not(:last-child) { 23 | margin-bottom: 5px; 24 | } 25 | } 26 | 27 | .s-is-active { 28 | background: #3cba54; 29 | } 30 | 31 | .m-is-active { 32 | background: #f4c20d; 33 | } 34 | 35 | .l-is-active { 36 | background: #db3236; 37 | } 38 | 39 | .xl-is-active { 40 | background: #4885ed; 41 | } 42 | 43 | .active-true { 44 | color: #3cba54; 45 | } 46 | 47 | .active-false { 48 | color: #db3236; 49 | } -------------------------------------------------------------------------------- /demo/src/app/media/media.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzMediaModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { MediaComponent } from './media.component'; 8 | import { ROUTES } from './media.routing'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CodeSnippetModule, 13 | CommonModule, 14 | MzMediaModule, 15 | RouterModule.forChild(ROUTES), 16 | ], 17 | declarations: [MediaComponent], 18 | }) 19 | export class MediaModule { } 20 | -------------------------------------------------------------------------------- /demo/src/app/media/media.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { MediaComponent } from './media.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: MediaComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/modal/modal-example/modal-example.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/app/modal/modal-example/modal-example.component.scss -------------------------------------------------------------------------------- /demo/src/app/modal/modal-example/modal-example.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MzBaseModal } from 'ngx-materialize'; 3 | 4 | @Component({ 5 | selector: 'app-modal-example', 6 | templateUrl: './modal-example.component.html', 7 | styleUrls: ['./modal-example.component.scss'], 8 | }) 9 | export class ModalExampleComponent extends MzBaseModal { } 10 | -------------------------------------------------------------------------------- /demo/src/app/modal/modal.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/modal/modal.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzInjectionModule, MzModalModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { ModalExampleComponent } from './modal-example/modal-example.component'; 9 | import { ModalComponent } from './modal.component'; 10 | import { ROUTES } from './modal.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | MzButtonModule, 17 | MzModalModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [ 22 | ModalComponent, 23 | ModalExampleComponent, 24 | ], 25 | entryComponents: [ 26 | ModalExampleComponent, 27 | ], 28 | }) 29 | export class ModalModule { } 30 | -------------------------------------------------------------------------------- /demo/src/app/modal/modal.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ModalComponent } from './modal.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ModalComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/navbar/navbar.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | #{'/deep/'} nav { 4 | background: #26a69a; 5 | } -------------------------------------------------------------------------------- /demo/src/app/navbar/navbar.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzNavbarModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { NavbarComponent } from './navbar.component'; 9 | import { ROUTES } from './navbar.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzNavbarModule, 16 | PropertiesTableModule, 17 | RouterModule.forChild(ROUTES), 18 | ], 19 | declarations: [NavbarComponent], 20 | }) 21 | export class NavbarModule { } 22 | -------------------------------------------------------------------------------- /demo/src/app/navbar/navbar.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: NavbarComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/pagination/pagination.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/pagination/pagination.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzInputModule, MzPaginationModule, MzSelectModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { PaginationComponent } from './pagination.component'; 10 | import { ROUTES } from './pagination.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzInputModule, 19 | MzPaginationModule, 20 | MzSelectModule, 21 | PropertiesTableModule, 22 | RouterModule.forChild(ROUTES), 23 | ], 24 | declarations: [PaginationComponent], 25 | }) 26 | export class PaginationModule { } 27 | -------------------------------------------------------------------------------- /demo/src/app/pagination/pagination.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { PaginationComponent } from './pagination.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: PaginationComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/parallax/parallax.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | .parallax-card #{'/deep/'} { 4 | 5 | .card-content { 6 | padding: 0; 7 | } 8 | 9 | .parallax-container { 10 | z-index: 1; 11 | } 12 | 13 | .parallax-section { 14 | padding: 32px; 15 | } 16 | 17 | .parallax-image { 18 | height: 650px; 19 | } 20 | 21 | a { 22 | word-wrap: break-word; 23 | } 24 | } -------------------------------------------------------------------------------- /demo/src/app/parallax/parallax.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { ROUTE_ANIMATION, ROUTE_ANIMATION_HOST } from '../app.routing.animation'; 4 | import { IPropertyRow } from '../shared/properties-table/properties-table.component'; 5 | 6 | @Component({ 7 | selector: 'app-parallax', 8 | templateUrl: './parallax.component.html', 9 | styleUrls: ['./parallax.component.scss'], 10 | host: ROUTE_ANIMATION_HOST, // tslint:disable-line:use-host-property-decorator 11 | animations: [ROUTE_ANIMATION], 12 | }) 13 | export class ParallaxComponent { 14 | properties: IPropertyRow[] = [ 15 | { name: 'height', 16 | mandatory: false, 17 | type: 'number', 18 | description: `Parallax container height in pixels`, 19 | defaultValue: `500`, 20 | }, 21 | ]; 22 | } 23 | -------------------------------------------------------------------------------- /demo/src/app/parallax/parallax.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzCardModule, MzParallaxModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { ParallaxComponent } from './parallax.component'; 9 | import { ROUTES } from './parallax.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzCardModule, 16 | MzParallaxModule, 17 | PropertiesTableModule, 18 | RouterModule.forChild(ROUTES), 19 | ], 20 | declarations: [ParallaxComponent], 21 | }) 22 | export class ParallaxModule { } 23 | -------------------------------------------------------------------------------- /demo/src/app/parallax/parallax.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ParallaxComponent } from './parallax.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ParallaxComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/progress/progress.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_variables"; 2 | @import "../../_route-animation-host"; 3 | 4 | .valign-wrapper { 5 | @media #{$small-and-down} { 6 | display: block !important; 7 | } 8 | } -------------------------------------------------------------------------------- /demo/src/app/progress/progress.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzProgressModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { ProgressComponent } from './progress.component'; 9 | import { ROUTES } from './progress.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzProgressModule, 16 | PropertiesTableModule, 17 | RouterModule.forChild(ROUTES), 18 | ], 19 | declarations: [ProgressComponent], 20 | }) 21 | export class ProgressModule { } 22 | -------------------------------------------------------------------------------- /demo/src/app/progress/progress.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ProgressComponent } from './progress.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ProgressComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/radio-button/radio-button.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/radio-button/radio-button.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzInputModule, MzRadioButtonModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { RadioButtonComponent } from './radio-button.component'; 10 | import { ROUTES } from './radio-button.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzInputModule, 19 | MzRadioButtonModule, 20 | PropertiesTableModule, 21 | RouterModule.forChild(ROUTES), 22 | ], 23 | declarations: [RadioButtonComponent], 24 | }) 25 | export class RadioButtonModule { } 26 | -------------------------------------------------------------------------------- /demo/src/app/radio-button/radio-button.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { RadioButtonComponent } from './radio-button.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: RadioButtonComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/select/select.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/select/select.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzInputModule, MzSelectModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { SelectComponent } from './select.component'; 10 | import { ROUTES } from './select.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzInputModule, 19 | MzSelectModule, 20 | PropertiesTableModule, 21 | RouterModule.forChild(ROUTES), 22 | ], 23 | declarations: [SelectComponent], 24 | }) 25 | export class SelectModule { } 26 | -------------------------------------------------------------------------------- /demo/src/app/select/select.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { SelectComponent } from './select.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: SelectComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/shared/code-snippet/code-snippet.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /demo/src/app/shared/code-snippet/code-snippet.component.scss: -------------------------------------------------------------------------------- 1 | code { 2 | border-radius: 3px; 3 | background: rgba(0, 0, 0, 0.07) !important; 4 | font-family: monospace, monospace; 5 | font-size: 1em; 6 | margin-top: 15px; 7 | padding: 1em !important; 8 | white-space: pre; 9 | } -------------------------------------------------------------------------------- /demo/src/app/shared/code-snippet/code-snippet.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | Component, 4 | ElementRef, 5 | Input, 6 | ViewChild, 7 | } from '@angular/core'; 8 | 9 | @Component({ 10 | selector: 'app-code-snippet', 11 | templateUrl: './code-snippet.component.html', 12 | styleUrls: ['./code-snippet.component.scss'], 13 | }) 14 | export class CodeSnippetComponent implements AfterViewInit { 15 | @Input() language: string; 16 | @ViewChild('codeSample') codeSample: ElementRef; 17 | 18 | ngAfterViewInit(): void { 19 | // remove start/ending whitespaces 20 | this.codeSample.nativeElement.innerHTML = this.codeSample.nativeElement.innerHTML.trim(); 21 | // hightlight code block 22 | hljs.highlightBlock(this.codeSample.nativeElement); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /demo/src/app/shared/code-snippet/code-snippet.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { CodeSnippetComponent } from './code-snippet.component'; 4 | 5 | @NgModule({ 6 | imports: [CommonModule], 7 | declarations: [CodeSnippetComponent], 8 | exports: [CodeSnippetComponent], 9 | }) 10 | export class CodeSnippetModule { } 11 | -------------------------------------------------------------------------------- /demo/src/app/shared/properties-table/properties-table.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 | 25 | 26 | 27 |
PropertyMandatoryTypeDescriptionDefault value
{{ property.name }} 19 | 20 | 21 | {{ property.type }}
28 | -------------------------------------------------------------------------------- /demo/src/app/shared/properties-table/properties-table.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/app/shared/properties-table/properties-table.component.scss -------------------------------------------------------------------------------- /demo/src/app/shared/properties-table/properties-table.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | export interface IPropertyRow { 4 | name: string; 5 | mandatory: boolean; 6 | type: string; 7 | description: string; 8 | defaultValue?: string; 9 | } 10 | 11 | @Component({ 12 | selector: 'app-properties-table', 13 | templateUrl: './properties-table.component.html', 14 | styleUrls: ['./properties-table.component.scss'], 15 | }) 16 | export class PropertiesTableComponent { 17 | @Input() properties: IPropertyRow[]; 18 | } 19 | -------------------------------------------------------------------------------- /demo/src/app/shared/properties-table/properties-table.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { MzIconMdiModule } from 'ngx-materialize'; 4 | 5 | import { PropertiesTableComponent } from './properties-table.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | MzIconMdiModule, 11 | ], 12 | declarations: [PropertiesTableComponent], 13 | exports: [PropertiesTableComponent], 14 | }) 15 | export class PropertiesTableModule { } 16 | -------------------------------------------------------------------------------- /demo/src/app/sidenav/sidenav.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | .sidenav-opened { 4 | border: 1px solid rgba(0,0,0,0.18); 5 | border-radius: 3px; 6 | padding: 9px 24px; 7 | margin-left: 10px; 8 | } 9 | 10 | .user-view { 11 | background: url('../../assets/sidenav-demo-bg.png'); 12 | background-position: -90px; 13 | background-size: 400px; 14 | padding: 32px 32px 16px; 15 | 16 | .name { 17 | font-size: 1.25em; 18 | } 19 | 20 | .name, 21 | .email { 22 | height: auto; 23 | line-height: 24px; 24 | padding: 0; 25 | } 26 | } 27 | 28 | :host #{'/deep/'} { 29 | a { 30 | i.caret { 31 | float: right; 32 | margin-right: -10px; 33 | -ms-transition: 0.2s; 34 | -webkit-transition: 0.2s; 35 | -o-transition: 0.2s; 36 | transition: 0.2s; 37 | } 38 | 39 | &.active { 40 | i.caret { 41 | -ms-transform: rotate(90deg); 42 | -webkit-transform: rotate(90deg); 43 | -o-transform: rotate(90deg); 44 | transform: rotate(90deg); 45 | } 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /demo/src/app/sidenav/sidenav.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzIconMdiModule, MzSidenavModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { SidenavComponent } from './sidenav.component'; 9 | import { ROUTES } from './sidenav.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzButtonModule, 16 | MzIconMdiModule, 17 | MzSidenavModule, 18 | PropertiesTableModule, 19 | RouterModule.forChild(ROUTES), 20 | ], 21 | declarations: [SidenavComponent], 22 | }) 23 | export class SidenavModule { } 24 | -------------------------------------------------------------------------------- /demo/src/app/sidenav/sidenav.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { SidenavComponent } from './sidenav.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: SidenavComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/spinner/spinner.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/spinner/spinner.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzSpinnerModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { SpinnerComponent } from './spinner.component'; 9 | import { ROUTES } from './spinner.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzSpinnerModule, 16 | PropertiesTableModule, 17 | RouterModule.forChild(ROUTES), 18 | ], 19 | declarations: [SpinnerComponent], 20 | }) 21 | export class SpinnerModule { } 22 | -------------------------------------------------------------------------------- /demo/src/app/spinner/spinner.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { SpinnerComponent } from './spinner.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: SpinnerComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/switch/switch.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/switch/switch.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzInputModule, MzSwitchModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { SwitchComponent } from './switch.component'; 10 | import { ROUTES } from './switch.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzInputModule, 19 | MzSwitchModule, 20 | PropertiesTableModule, 21 | RouterModule.forChild(ROUTES), 22 | ], 23 | declarations: [SwitchComponent], 24 | }) 25 | export class SwitchModule { } 26 | -------------------------------------------------------------------------------- /demo/src/app/switch/switch.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { SwitchComponent } from './switch.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: SwitchComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/tab/tab.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | .tab-content { 4 | padding: 5px; 5 | } 6 | -------------------------------------------------------------------------------- /demo/src/app/tab/tab.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzTabModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { TabComponent } from './tab.component'; 9 | import { ROUTES } from './tab.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzTabModule, 16 | PropertiesTableModule, 17 | RouterModule.forChild(ROUTES), 18 | ], 19 | declarations: [TabComponent], 20 | }) 21 | export class TabModule { } 22 | -------------------------------------------------------------------------------- /demo/src/app/tab/tab.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { TabComponent } from './tab.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: TabComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/textarea/textarea.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/textarea/textarea.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzIconMdiModule, MzInputModule, MzTextareaModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { TextareaComponent } from './textarea.component'; 10 | import { ROUTES } from './textarea.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzIconMdiModule, 19 | MzInputModule, 20 | MzTextareaModule, 21 | PropertiesTableModule, 22 | RouterModule.forChild(ROUTES), 23 | ], 24 | declarations: [TextareaComponent], 25 | }) 26 | export class TextareaModule { } 27 | -------------------------------------------------------------------------------- /demo/src/app/textarea/textarea.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { TextareaComponent } from './textarea.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: TextareaComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/timepicker/timepicker.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | -------------------------------------------------------------------------------- /demo/src/app/timepicker/timepicker.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzCheckboxModule, MzIconMdiModule, MzInputModule, MzTimepickerModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { TimepickerComponent } from './timepicker.component'; 10 | import { ROUTES } from './timepicker.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzCheckboxModule, 18 | MzIconMdiModule, 19 | MzInputModule, 20 | MzTimepickerModule, 21 | PropertiesTableModule, 22 | RouterModule.forChild(ROUTES), 23 | ], 24 | declarations: [TimepickerComponent], 25 | }) 26 | export class TimepickerModule { } 27 | -------------------------------------------------------------------------------- /demo/src/app/timepicker/timepicker.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { TimepickerComponent } from './timepicker.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: TimepickerComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/toast/toast.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; 2 | 3 | .method-name { 4 | font-size: 1.1rem; 5 | padding: 5px 0; 6 | } -------------------------------------------------------------------------------- /demo/src/app/toast/toast.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { MzButtonModule, MzToastModule } from 'ngx-materialize'; 5 | 6 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 7 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 8 | import { ToastComponent } from './toast.component'; 9 | import { ROUTES } from './toast.routing'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CodeSnippetModule, 14 | CommonModule, 15 | MzButtonModule, 16 | MzToastModule, 17 | PropertiesTableModule, 18 | RouterModule.forChild(ROUTES), 19 | ], 20 | declarations: [ToastComponent], 21 | }) 22 | export class ToastModule { } 23 | -------------------------------------------------------------------------------- /demo/src/app/toast/toast.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ToastComponent } from './toast.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ToastComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/tooltip/tooltip.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MzButtonModule, MzCheckboxModule, MzInputModule, MzSelectModule, MzTooltipModule } from 'ngx-materialize'; 6 | 7 | import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module'; 8 | import { PropertiesTableModule } from '../shared/properties-table/properties-table.module'; 9 | import { TooltipComponent } from './tooltip.component'; 10 | import { ROUTES } from './tooltip.routing'; 11 | 12 | @NgModule({ 13 | imports: [ 14 | CodeSnippetModule, 15 | CommonModule, 16 | FormsModule, 17 | MzButtonModule, 18 | MzCheckboxModule, 19 | MzInputModule, 20 | MzSelectModule, 21 | MzTooltipModule, 22 | PropertiesTableModule, 23 | RouterModule.forChild(ROUTES), 24 | ], 25 | declarations: [TooltipComponent], 26 | }) 27 | export class TooltipModule { } 28 | -------------------------------------------------------------------------------- /demo/src/app/tooltip/tooltip.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { TooltipComponent } from './tooltip.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: TooltipComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/app/validation/markdown/component.module.diff: -------------------------------------------------------------------------------- 1 | + import { ReactiveFormsModule } from '@angular/forms'; 2 | ... 3 | @NgModule({ 4 | declarations: [ ... ], 5 | imports: [ 6 | + ReactiveFormsModule, 7 | ], 8 | }) 9 | export class ComponentModule { } 10 | -------------------------------------------------------------------------------- /demo/src/app/validation/models/activity-sector.ts: -------------------------------------------------------------------------------- 1 | export abstract class ActivitySector { 2 | slug: string; 3 | text: string; 4 | } 5 | -------------------------------------------------------------------------------- /demo/src/app/validation/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './activity-sector'; 2 | export * from './province'; 3 | export * from './user'; 4 | -------------------------------------------------------------------------------- /demo/src/app/validation/models/province.ts: -------------------------------------------------------------------------------- 1 | export abstract class Province { 2 | code: string; 3 | name: string; 4 | } 5 | -------------------------------------------------------------------------------- /demo/src/app/validation/models/user.ts: -------------------------------------------------------------------------------- 1 | import { ActivitySector } from './activity-sector'; 2 | import { Province } from './province'; 3 | 4 | export abstract class User { 5 | activitySector: ActivitySector; 6 | address: string; 7 | address2: string; 8 | birthDate: string; 9 | companyName: string; 10 | city: string; 11 | firstName: string; 12 | gender: string; 13 | jobDescription: string; 14 | jobPrivate: boolean; 15 | jobTitle: string; 16 | jobType: string; 17 | lastName: string; 18 | phoneNumbers: Array; 19 | postalCode: string; 20 | province: Province; 21 | } 22 | -------------------------------------------------------------------------------- /demo/src/app/validation/validation-binding/validation-binding.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/app/validation/validation-binding/validation-binding.component.scss -------------------------------------------------------------------------------- /demo/src/app/validation/validation-form-state/validation-form-state.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/app/validation/validation-form-state/validation-form-state.component.scss -------------------------------------------------------------------------------- /demo/src/app/validation/validation-ngmodel/validation-ngmodel.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/app/validation/validation-ngmodel/validation-ngmodel.component.scss -------------------------------------------------------------------------------- /demo/src/app/validation/validation-playground/validation-playground.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/app/validation/validation-playground/validation-playground.component.scss -------------------------------------------------------------------------------- /demo/src/app/validation/validation.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../_route-animation-host"; -------------------------------------------------------------------------------- /demo/src/app/validation/validation.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ValidationComponent } from './validation.component'; 4 | 5 | export const ROUTES: Routes = [ 6 | { path: '', component: ValidationComponent }, 7 | ]; 8 | -------------------------------------------------------------------------------- /demo/src/assets/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/angular.png -------------------------------------------------------------------------------- /demo/src/assets/card-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/card-1.jpg -------------------------------------------------------------------------------- /demo/src/assets/google_g_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/google_g_logo.png -------------------------------------------------------------------------------- /demo/src/assets/home-header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/home-header-bg.png -------------------------------------------------------------------------------- /demo/src/assets/materialize-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/materialize-logo.png -------------------------------------------------------------------------------- /demo/src/assets/materialize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/materialize.png -------------------------------------------------------------------------------- /demo/src/assets/ngx-materialize-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/ngx-materialize-circle.png -------------------------------------------------------------------------------- /demo/src/assets/parallax-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/parallax-1.png -------------------------------------------------------------------------------- /demo/src/assets/parallax-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/parallax-2.png -------------------------------------------------------------------------------- /demo/src/assets/select-icon-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/select-icon-1.jpg -------------------------------------------------------------------------------- /demo/src/assets/select-icon-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/select-icon-2.jpg -------------------------------------------------------------------------------- /demo/src/assets/select-icon-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/select-icon-3.jpg -------------------------------------------------------------------------------- /demo/src/assets/sidenav-demo-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/sidenav-demo-avatar.png -------------------------------------------------------------------------------- /demo/src/assets/sidenav-demo-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/assets/sidenav-demo-bg.png -------------------------------------------------------------------------------- /demo/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /demo/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /demo/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/demo/src/favicon.ico -------------------------------------------------------------------------------- /demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ngx-Materialize 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 |
19 |
20 | 35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app'; 5 | import { environment } from './environments/environment'; 6 | 7 | // Workaround to copy README.md from root folder into dist folder on build as it is 8 | // currently impossible with Angular-CLI to get files outside the src folder with assets 9 | // http://stackoverflow.com/a/39881977/5583283 10 | const readme = require('file-loader?name=[name].[ext]!../../README.md'); // tslint:disable-line:no-unused-variable 11 | 12 | if (environment.production) { 13 | enableProdMode(); 14 | } 15 | 16 | platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true }) 17 | .catch(err => console.log(err)); 18 | -------------------------------------------------------------------------------- /demo/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting, 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: any; 12 | 13 | // First, initialize the Angular testing environment. 14 | getTestBed().initTestEnvironment( 15 | BrowserDynamicTestingModule, 16 | platformBrowserDynamicTesting(), 17 | ); 18 | // Then we find all the tests. 19 | const context = require.context('./', true, /\.spec\.ts$/); 20 | // And load the modules. 21 | context.keys().map(context); 22 | -------------------------------------------------------------------------------- /demo/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Typings reference file, you can add your own global typings here 3 | * https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html 4 | **/ 5 | 6 | /// 7 | 8 | declare var System: any; 9 | -------------------------------------------------------------------------------- /demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "types": [ 7 | "jquery", 8 | "materialize-css", 9 | "mcustomscrollbar", 10 | "node", 11 | "prismjs" 12 | ] 13 | }, 14 | "angularCompilerOptions": { 15 | "preserveWhitespaces": true 16 | }, 17 | "exclude": [ 18 | "src/test.ts", 19 | "**/*.spec.ts", 20 | "**/markdown/*" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "jquery", 9 | "materialize-css", 10 | "mcustomscrollbar", 11 | "node", 12 | "prismjs" 13 | ], 14 | "paths": { 15 | "@angular/*": ["node_modules/@angular/*"], 16 | "rxjs/*": ["node_modules/rxjs/*"] 17 | } 18 | }, 19 | "files": [ 20 | "src/test.ts", 21 | "src/polyfills.ts" 22 | ], 23 | "include": [ 24 | "**/*.spec.ts", 25 | "**/*.d.ts" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /demo/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../dist/lib", 4 | "deleteDestPath": true, 5 | "lib": { 6 | "entryFile": "public_api.ts" 7 | }, 8 | "whitelistedNonPeerDependencies": ["."] 9 | } -------------------------------------------------------------------------------- /lib/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../dist/lib", 4 | "deleteDestPath": true, 5 | "lib": { 6 | "entryFile": "public_api.ts" 7 | }, 8 | "whitelistedNonPeerDependencies": ["."] 9 | } -------------------------------------------------------------------------------- /lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-materialize", 3 | "version": "6.1.3", 4 | "description": "An Angular wrap around Materialize library", 5 | "license": "Apache-2.0", 6 | "repository": "sherweb/ngx-materialize", 7 | "keywords": [ 8 | "angular", 9 | "ng", 10 | "ngx", 11 | "material", 12 | "material-design", 13 | "materialize", 14 | "materializecss", 15 | "component", 16 | "ui" 17 | ], 18 | "dependencies": { 19 | "@types/jquery": "^3.2.12", 20 | "@types/materialize-css": "^0.100.4", 21 | "materialize-css": "^0.100.2" 22 | }, 23 | "peerDependencies": { 24 | "@angular/animations": "^6.0.0-rc.0 || ^6.0.0", 25 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 26 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0", 27 | "@angular/forms": "^6.0.0-rc.0 || ^6.0.0", 28 | "rxjs": "^6.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /lib/src/badge/badge.component.html: -------------------------------------------------------------------------------- 1 | 5 | {{ value }} 6 | 7 | -------------------------------------------------------------------------------- /lib/src/badge/badge.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/badge/badge.component.scss -------------------------------------------------------------------------------- /lib/src/badge/badge.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-badge', 5 | templateUrl: './badge.component.html', 6 | styleUrls: ['./badge.component.scss'], 7 | }) 8 | export class MzBadgeComponent { 9 | @Input() badgeClass: string; 10 | @Input() caption: string; 11 | @Input() new: boolean; 12 | @Input() value: number; 13 | } 14 | -------------------------------------------------------------------------------- /lib/src/badge/badge.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzBadgeComponent } from './badge.component'; 4 | 5 | describe('MzBadgeComponent:unit', () => { 6 | let component: MzBadgeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzBadgeComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzBadgeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/badge/badge.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzBadgeComponent } from './badge.component'; 4 | 5 | @NgModule({ 6 | declarations: [MzBadgeComponent], 7 | exports: [MzBadgeComponent], 8 | }) 9 | export class MzBadgeModule { } 10 | -------------------------------------------------------------------------------- /lib/src/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './badge.component'; 2 | export * from './badge.module'; 3 | -------------------------------------------------------------------------------- /lib/src/button/button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzButtonDirective } from './button.directive'; 4 | 5 | @NgModule({ 6 | declarations: [MzButtonDirective], 7 | exports: [MzButtonDirective], 8 | }) 9 | export class MzButtonModule { } 10 | -------------------------------------------------------------------------------- /lib/src/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './button.directive'; 2 | export * from './button.module'; 3 | -------------------------------------------------------------------------------- /lib/src/card/card.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |
7 | 8 |
9 |
10 |
11 | 12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 |
-------------------------------------------------------------------------------- /lib/src/card/card.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /lib/src/card/card.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 3 | 4 | import { MzCardComponent } from './card.component'; 5 | 6 | describe('MzCardComponent:unit', () => { 7 | let component: MzCardComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [MzCardComponent], 13 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 14 | }) 15 | .compileComponents(); 16 | })); 17 | 18 | beforeEach(() => { 19 | fixture = TestBed.createComponent(MzCardComponent); 20 | component = fixture.componentInstance; 21 | fixture.detectChanges(); 22 | }); 23 | 24 | it('should create', () => { 25 | expect(component).toBeTruthy(); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /lib/src/card/card.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { 5 | MzCardActionDirective, 6 | MzCardComponent, 7 | MzCardContentDirective, 8 | MzCardImageDirective, 9 | MzCardImageTitleDirective, 10 | MzCardTitleDirective, 11 | } from './card.component'; 12 | import { MzHalfwayFabModule } from './halfway-fab/halfway-fab.module'; 13 | 14 | @NgModule({ 15 | imports: [ 16 | CommonModule, 17 | MzHalfwayFabModule, 18 | ], 19 | declarations: [ 20 | MzCardActionDirective, 21 | MzCardComponent, 22 | MzCardContentDirective, 23 | MzCardImageDirective, 24 | MzCardImageTitleDirective, 25 | MzCardTitleDirective, 26 | ], 27 | exports: [ 28 | MzCardActionDirective, 29 | MzCardComponent, 30 | MzCardContentDirective, 31 | MzCardImageDirective, 32 | MzCardImageTitleDirective, 33 | MzCardTitleDirective, 34 | ], 35 | }) 36 | export class MzCardModule { } 37 | -------------------------------------------------------------------------------- /lib/src/card/halfway-fab/halfway-fab.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostBinding } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: ` 5 | a[mz-halfway-fab], 6 | a[mzHalfwayFab], 7 | button[mz-halfway-fab], 8 | button[mzHalfwayFab]`, 9 | }) 10 | export class MzHalfwayFabDirective { 11 | @HostBinding('class.halfway-fab') true; 12 | } 13 | -------------------------------------------------------------------------------- /lib/src/card/halfway-fab/halfway-fab.directive.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, TestBed } from '@angular/core/testing'; 2 | import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 3 | 4 | import { buildComponent, MzTestWrapperComponent } from '../../shared/test-wrapper'; 5 | import { MzHalfwayFabDirective } from './halfway-fab.directive'; 6 | 7 | describe('MzHalfwayFab:unit', () => { 8 | let nativeElement: any; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | NoopAnimationsModule, 14 | ], 15 | declarations: [ 16 | MzHalfwayFabDirective, 17 | MzTestWrapperComponent, 18 | ], 19 | }); 20 | })); 21 | 22 | function button(): HTMLDivElement { 23 | return nativeElement.querySelector('button'); 24 | } 25 | 26 | it('should add halfway-fab class', async() => { 27 | buildComponent(` 28 | 31 | `).then((fixture) => { 32 | nativeElement = fixture.nativeElement; 33 | fixture.detectChanges(); 34 | 35 | expect(button().classList).toContain('halfway-fab'); 36 | }); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /lib/src/card/halfway-fab/halfway-fab.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { MzHalfwayFabDirective } from './halfway-fab.directive'; 5 | 6 | @NgModule({ 7 | imports: [CommonModule], 8 | declarations: [ 9 | MzHalfwayFabDirective, 10 | ], 11 | exports: [ 12 | MzHalfwayFabDirective, 13 | ], 14 | }) 15 | export class MzHalfwayFabModule { } 16 | -------------------------------------------------------------------------------- /lib/src/card/halfway-fab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './halfway-fab.directive'; 2 | export * from './halfway-fab.module'; 3 | -------------------------------------------------------------------------------- /lib/src/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './halfway-fab/index'; 2 | export * from './card.component'; 3 | export * from './card.module'; 4 | -------------------------------------------------------------------------------- /lib/src/checkbox/checkbox-container/checkbox-container.component.html: -------------------------------------------------------------------------------- 1 |

2 | 3 |

-------------------------------------------------------------------------------- /lib/src/checkbox/checkbox-container/checkbox-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/checkbox/checkbox-container/checkbox-container.component.scss -------------------------------------------------------------------------------- /lib/src/checkbox/checkbox-container/checkbox-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-checkbox-container', 5 | templateUrl: './checkbox-container.component.html', 6 | styleUrls: ['./checkbox-container.component.scss'], 7 | }) 8 | export class MzCheckboxContainerComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/checkbox/checkbox-container/checkbox-container.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzCheckboxContainerComponent } from './checkbox-container.component'; 4 | 5 | describe('MzCheckboxContainerComponent:unit', () => { 6 | let component: MzCheckboxContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzCheckboxContainerComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzCheckboxContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/checkbox/checkbox-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/checkbox/checkbox.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzCheckboxContainerComponent } from './checkbox-container/index'; 4 | import { MzCheckboxDirective } from './checkbox.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | MzCheckboxDirective, 9 | MzCheckboxContainerComponent, 10 | ], 11 | exports: [ 12 | MzCheckboxDirective, 13 | MzCheckboxContainerComponent, 14 | ], 15 | }) 16 | export class MzCheckboxModule { } 17 | -------------------------------------------------------------------------------- /lib/src/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox-container/index'; 2 | export * from './checkbox.directive'; 3 | export * from './checkbox.module'; 4 | -------------------------------------------------------------------------------- /lib/src/chip/chip-input/chip-input.component.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/chip/chip-input/chip-input.component.html -------------------------------------------------------------------------------- /lib/src/chip/chip-input/chip-input.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/src/chip/chip-input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './chip-input.component'; 2 | -------------------------------------------------------------------------------- /lib/src/chip/chip.component.html: -------------------------------------------------------------------------------- 1 | 2 | close -------------------------------------------------------------------------------- /lib/src/chip/chip.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/chip/chip.component.scss -------------------------------------------------------------------------------- /lib/src/chip/chip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, EventEmitter, HostBinding, Input, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-chip', 5 | templateUrl: './chip.component.html', 6 | styleUrls: ['./chip.component.scss'], 7 | }) 8 | export class MzChipComponent { 9 | @HostBinding('class.chip') chipClass = true; 10 | 11 | @Input() close = false; 12 | @Output() delete = new EventEmitter(); 13 | 14 | get chipElement(): HTMLElement { 15 | return this.elementRef.nativeElement as HTMLElement; 16 | } 17 | 18 | constructor( 19 | private elementRef: ElementRef, 20 | ) { } 21 | 22 | onDelete() { 23 | let value = ''; 24 | for (let i = 0; i < this.chipElement.childNodes.length; i++) { 25 | if (this.chipElement.childNodes.item(i).nodeType === Node.TEXT_NODE) { 26 | value += this.chipElement.childNodes.item(i).nodeValue; 27 | } 28 | } 29 | this.delete.emit(value.trim()); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /lib/src/chip/chip.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { MzChipInputComponent } from './chip-input/index'; 5 | import { MzChipComponent } from './chip.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | ], 11 | declarations: [ 12 | MzChipComponent, 13 | MzChipInputComponent, 14 | ], 15 | exports: [ 16 | MzChipComponent, 17 | MzChipInputComponent, 18 | ], 19 | }) 20 | export class MzChipModule { } 21 | -------------------------------------------------------------------------------- /lib/src/chip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './chip-input/index'; 2 | export * from './chip.component'; 3 | export * from './chip.module'; 4 | -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible-item/collapsible-item.component.html: -------------------------------------------------------------------------------- 1 |
  • 2 |
    5 | 6 |
    7 |
    8 | 9 |
    10 |
    • -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible-item/collapsible-item.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/collapsible/collapsible-item/collapsible-item.component.scss -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible-item/collapsible-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Directive, Input } from '@angular/core'; 2 | 3 | import { MzRemoveComponentHost } from '../../shared/remove-component-host/remove-component-host'; 4 | 5 | @Component({ 6 | selector: 'mz-collapsible-item', 7 | templateUrl: './collapsible-item.component.html', 8 | styleUrls: ['./collapsible-item.component.scss'], 9 | }) 10 | export class MzCollapsibleItemComponent extends MzRemoveComponentHost { 11 | @Input() active: boolean; 12 | } 13 | 14 | // Declare the tags to avoid error: '' is not a known element 15 | // https://github.com/angular/angular/issues/11251 16 | // tslint:disable: directive-selector 17 | @Directive({ selector: 'mz-collapsible-item-body' }) export class MzCollapsibleItemBodyDirective { } 18 | @Directive({ selector: 'mz-collapsible-item-header' }) export class MzCollapsibleItemHeaderDirective { } 19 | -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible-item/collapsible-item.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzCollapsibleItemComponent } from './collapsible-item.component'; 4 | 5 | describe('MzCollapsibleItemComponent:unit', () => { 6 | let component: MzCollapsibleItemComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzCollapsibleItemComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzCollapsibleItemComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './collapsible-item.component'; 2 | -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible.component.html: -------------------------------------------------------------------------------- 1 |
      6 | 7 |
    -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible.component.scss: -------------------------------------------------------------------------------- 1 | // In some browser, using some specific elements in the header such as image will make the header end up with 1 extra pixel 2 | // for height compared to he container. This style is to prevent that extra pixel from pushing the content of the next element. 3 | #{'/deep/'} { 4 | .collapsible-header { 5 | clear: both; 6 | } 7 | 8 | .collapsible-body { 9 | clear: both; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lib/src/collapsible/collapsible.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { 4 | MzCollapsibleItemBodyDirective, 5 | MzCollapsibleItemComponent, 6 | MzCollapsibleItemHeaderDirective, 7 | } from './collapsible-item/index'; 8 | import { MzCollapsibleComponent } from './collapsible.component'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | MzCollapsibleComponent, 13 | MzCollapsibleItemBodyDirective, 14 | MzCollapsibleItemComponent, 15 | MzCollapsibleItemHeaderDirective, 16 | ], 17 | exports: [ 18 | MzCollapsibleComponent, 19 | MzCollapsibleItemBodyDirective, 20 | MzCollapsibleItemComponent, 21 | MzCollapsibleItemHeaderDirective, 22 | ], 23 | }) 24 | export class MzCollapsibleModule { } 25 | -------------------------------------------------------------------------------- /lib/src/collapsible/index.ts: -------------------------------------------------------------------------------- 1 | export * from './collapsible-item/index'; 2 | export * from './collapsible.component'; 3 | export * from './collapsible.module'; 4 | -------------------------------------------------------------------------------- /lib/src/collection/avatar/avatar.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostBinding } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[mzAvatar], [mz-avatar]', 5 | }) 6 | export class MzAvatarDirective { 7 | @HostBinding('class.circle') true; 8 | } 9 | -------------------------------------------------------------------------------- /lib/src/collection/avatar/avatar.directive.view.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, TestBed } from '@angular/core/testing'; 2 | 3 | import { buildComponent, MzTestWrapperComponent } from '../../shared/test-wrapper'; 4 | import { MzAvatarDirective } from './avatar.directive'; 5 | 6 | describe('MzAvatarDirective:view', () => { 7 | 8 | beforeEach(async(() => { 9 | TestBed.configureTestingModule({ 10 | declarations: [ 11 | MzAvatarDirective, 12 | MzTestWrapperComponent, 13 | ], 14 | }); 15 | })); 16 | 17 | describe('host element', () => { 18 | 19 | it('should have circle css class applied correctly', async(() => { 20 | 21 | buildComponent(` 22 |
    23 | `).then((fixture) => { 24 | 25 | fixture.detectChanges(); 26 | 27 | const avatarElement = fixture.nativeElement.querySelector('[mz-avatar]'); 28 | 29 | expect(avatarElement.classList.length).toBe(1); 30 | expect(avatarElement.classList).toContain('circle'); 31 | }); 32 | })); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /lib/src/collection/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar.directive'; 2 | -------------------------------------------------------------------------------- /lib/src/collection/collection-header/collection-header.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    -------------------------------------------------------------------------------- /lib/src/collection/collection-header/collection-header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/collection/collection-header/collection-header.component.scss -------------------------------------------------------------------------------- /lib/src/collection/collection-header/collection-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-collection-header', 5 | templateUrl: './collection-header.component.html', 6 | styleUrls: ['./collection-header.component.scss'], 7 | }) 8 | export class MzCollectionHeaderComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/collection/collection-header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './collection-header.component'; 2 | -------------------------------------------------------------------------------- /lib/src/collection/collection-item/collection-item.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/src/collection/collection-item/collection-item.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /lib/src/collection/collection-item/collection-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, HostBinding, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-collection-item', 5 | templateUrl: './collection-item.component.html', 6 | styleUrls: ['./collection-item.component.scss'], 7 | }) 8 | export class MzCollectionItemComponent { 9 | @HostBinding('class.collection-item') true; 10 | @HostBinding('class.avatar') @Input() avatar: boolean; 11 | @HostBinding('class.dismissable') @Input() dismissable: boolean; 12 | } 13 | -------------------------------------------------------------------------------- /lib/src/collection/collection-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './collection-item.component'; 2 | -------------------------------------------------------------------------------- /lib/src/collection/collection-link/collection-link.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostBinding, Input } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[mzCollectionLink], [mz-collection-link]', 5 | }) 6 | export class MzCollectionLinkDirective { 7 | @HostBinding('class.active') @Input() active: boolean; 8 | @HostBinding('class.collection-item') true; 9 | } 10 | -------------------------------------------------------------------------------- /lib/src/collection/collection-link/index.ts: -------------------------------------------------------------------------------- 1 | export * from './collection-link.directive'; 2 | -------------------------------------------------------------------------------- /lib/src/collection/collection.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    -------------------------------------------------------------------------------- /lib/src/collection/collection.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/collection/collection.component.scss -------------------------------------------------------------------------------- /lib/src/collection/collection.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-collection', 5 | templateUrl: './collection.component.html', 6 | styleUrls: ['./collection.component.scss'], 7 | }) 8 | export class MzCollectionComponent implements OnInit { 9 | collectionElement: JQuery; 10 | collectionHeaderElement: JQuery; 11 | 12 | constructor( 13 | private elementRef: ElementRef, 14 | private renderer: Renderer2, 15 | ) { } 16 | 17 | ngOnInit() { 18 | this.initElements(); 19 | this.initCollectionHeader(); 20 | } 21 | 22 | initElements() { 23 | this.collectionElement = $(this.elementRef.nativeElement).find('.collection'); 24 | this.collectionHeaderElement = $(this.elementRef.nativeElement).find('.collection-header'); 25 | } 26 | 27 | initCollectionHeader() { 28 | if (this.collectionHeaderElement.length > 0) { 29 | this.renderer.addClass(this.collectionElement[0], 'with-header'); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /lib/src/collection/collection.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzAvatarDirective } from './avatar/index'; 4 | import { MzCollectionHeaderComponent } from './collection-header/index'; 5 | import { MzCollectionItemComponent } from './collection-item/index'; 6 | import { MzCollectionLinkDirective } from './collection-link/index'; 7 | import { MzCollectionComponent } from './collection.component'; 8 | import { MzSecondaryContentDirective } from './secondary-content/index'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | MzAvatarDirective, 13 | MzCollectionComponent, 14 | MzCollectionItemComponent, 15 | MzCollectionLinkDirective, 16 | MzCollectionHeaderComponent, 17 | MzSecondaryContentDirective, 18 | ], 19 | exports: [ 20 | MzAvatarDirective, 21 | MzCollectionComponent, 22 | MzCollectionItemComponent, 23 | MzCollectionLinkDirective, 24 | MzCollectionHeaderComponent, 25 | MzSecondaryContentDirective, 26 | ], 27 | }) 28 | export class MzCollectionModule { } 29 | -------------------------------------------------------------------------------- /lib/src/collection/index.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar/index'; 2 | export * from './collection-header/index'; 3 | export * from './collection-item/index'; 4 | export * from './collection-link/index'; 5 | export * from './collection.component'; 6 | export * from './collection.module'; 7 | export * from './secondary-content/index'; 8 | -------------------------------------------------------------------------------- /lib/src/collection/secondary-content/index.ts: -------------------------------------------------------------------------------- 1 | export * from './secondary-content.directive'; 2 | -------------------------------------------------------------------------------- /lib/src/collection/secondary-content/secondary-content.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostBinding } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[mzSecondaryContent], [mz-secondary-content]', 5 | }) 6 | export class MzSecondaryContentDirective { 7 | @HostBinding('class.secondary-content') true; 8 | } 9 | -------------------------------------------------------------------------------- /lib/src/collection/secondary-content/secondary-content.directive.view.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, TestBed } from '@angular/core/testing'; 2 | 3 | import { buildComponent, MzTestWrapperComponent } from '../../shared/test-wrapper'; 4 | import { MzSecondaryContentDirective } from './secondary-content.directive'; 5 | 6 | describe('MzSecondaryContentDirective:view', () => { 7 | 8 | beforeEach(async(() => { 9 | TestBed.configureTestingModule({ 10 | declarations: [ 11 | MzSecondaryContentDirective, 12 | MzTestWrapperComponent, 13 | ], 14 | }); 15 | })); 16 | 17 | describe('host element', () => { 18 | 19 | it('should have secondary-content css class applied correctly', async(() => { 20 | 21 | buildComponent(` 22 |
    23 | `).then((fixture) => { 24 | 25 | fixture.detectChanges(); 26 | 27 | const secondaryContentElement = fixture.nativeElement.querySelector('[mz-secondary-content]'); 28 | 29 | expect(secondaryContentElement.classList.length).toBe(1); 30 | expect(secondaryContentElement.classList).toContain('secondary-content'); 31 | }); 32 | })); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker-container/datepicker-container.component.html: -------------------------------------------------------------------------------- 1 |
    5 | 6 |
    -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker-container/datepicker-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/datepicker/datepicker-container/datepicker-container.component.scss -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker-container/datepicker-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-datepicker-container', 5 | templateUrl: './datepicker-container.component.html', 6 | styleUrls: ['./datepicker-container.component.scss'], 7 | }) 8 | export class MzDatepickerContainerComponent { 9 | @Input() inline: boolean; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker-container/datepicker-container.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzDatepickerContainerComponent } from './datepicker-container.component'; 4 | 5 | describe('MzDatepickerContainerComponent:unit', () => { 6 | let component: MzDatepickerContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzDatepickerContainerComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzDatepickerContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './datepicker-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker.directive.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { Subscription } from 'rxjs'; 2 | 3 | import { MzDatepickerDirective } from './datepicker.directive'; 4 | 5 | describe('MzDatepickerDirective:unit', () => { 6 | let directive: MzDatepickerDirective; 7 | 8 | beforeEach(() => { 9 | directive = new MzDatepickerDirective(null, null, null, null); 10 | }); 11 | 12 | describe('ngOnDestroy', () => { 13 | 14 | it('should unsubscribe inputValueSubscription when subscribed', () => { 15 | 16 | directive.inputValueSubscription = new Subscription(); 17 | directive.ngOnDestroy(); 18 | 19 | expect(directive.inputValueSubscription.closed).toBeTruthy(); 20 | }); 21 | 22 | it('should not unsubscribe inputValueSubscription when not subscribed', () => { 23 | 24 | spyOn(Subscription.prototype, 'unsubscribe'); 25 | 26 | directive.ngOnDestroy(); 27 | 28 | expect(Subscription.prototype.unsubscribe).not.toHaveBeenCalled(); 29 | }); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /lib/src/datepicker/datepicker.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzDatepickerContainerComponent } from './datepicker-container/index'; 4 | import { MzDatepickerDirective } from './datepicker.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | MzDatepickerDirective, 9 | MzDatepickerContainerComponent, 10 | ], 11 | exports: [ 12 | MzDatepickerDirective, 13 | MzDatepickerContainerComponent, 14 | ], 15 | }) 16 | export class MzDatepickerModule { } 17 | -------------------------------------------------------------------------------- /lib/src/datepicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './datepicker-container/index'; 2 | export * from './datepicker.directive'; 3 | export * from './datepicker.module'; 4 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-divider/dropdown-divider.component.html: -------------------------------------------------------------------------------- 1 |
  • -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-divider/dropdown-divider.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/dropdown/dropdown-divider/dropdown-divider.component.scss -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-divider/dropdown-divider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-dropdown-divider', 5 | templateUrl: './dropdown-divider.component.html', 6 | styleUrls: ['./dropdown-divider.component.scss'], 7 | }) 8 | export class MzDropdownDividerComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-divider/dropdown-divider.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzDropdownDividerComponent } from './dropdown-divider.component'; 4 | 5 | describe('MzDropdownDividerComponent:unit', () => { 6 | let component: MzDropdownDividerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzDropdownDividerComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzDropdownDividerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-divider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dropdown-divider.component'; 2 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-item/dropdown-item.component.html: -------------------------------------------------------------------------------- 1 |
  • 2 | 3 |
    • -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-item/dropdown-item.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/dropdown/dropdown-item/dropdown-item.component.scss -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-item/dropdown-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-dropdown-item', 5 | templateUrl: './dropdown-item.component.html', 6 | styleUrls: ['./dropdown-item.component.scss'], 7 | }) 8 | export class MzDropdownItemComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-item/dropdown-item.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzDropdownItemComponent } from './dropdown-item.component'; 4 | 5 | describe('MzDropdownItemComponent:unit', () => { 6 | let component: MzDropdownItemComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzDropdownItemComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzDropdownItemComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dropdown-item.component'; 2 | -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown.component.html: -------------------------------------------------------------------------------- 1 |
      5 | 6 |
    -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/dropdown/dropdown.component.scss -------------------------------------------------------------------------------- /lib/src/dropdown/dropdown.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzDropdownDividerComponent } from './dropdown-divider/index'; 4 | import { MzDropdownItemComponent } from './dropdown-item/index'; 5 | import { MzDropdownComponent } from './dropdown.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | MzDropdownComponent, 10 | MzDropdownDividerComponent, 11 | MzDropdownItemComponent, 12 | ], 13 | exports: [ 14 | MzDropdownComponent, 15 | MzDropdownDividerComponent, 16 | MzDropdownItemComponent, 17 | ], 18 | }) 19 | export class MzDropdownModule { } 20 | -------------------------------------------------------------------------------- /lib/src/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dropdown-divider/index'; 2 | export * from './dropdown-item/index'; 3 | export * from './dropdown.component'; 4 | export * from './dropdown.module'; 5 | -------------------------------------------------------------------------------- /lib/src/feature-discovery/feature-discovery.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | -------------------------------------------------------------------------------- /lib/src/feature-discovery/feature-discovery.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/src/feature-discovery/feature-discovery.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, ElementRef, HostBinding, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-feature-discovery', 5 | templateUrl: './feature-discovery.component.html', 6 | styleUrls: ['./feature-discovery.component.scss'], 7 | }) 8 | export class MzFeatureDiscoveryComponent implements AfterViewInit { 9 | @HostBinding('class.tap-target') 10 | targetClass = true; 11 | 12 | @HostBinding('attr.data-activates') 13 | @Input() 14 | targetId: string; 15 | 16 | private target: JQuery; 17 | 18 | constructor( 19 | private elementRef: ElementRef, 20 | ) { } 21 | 22 | ngAfterViewInit() { 23 | this.target = $(this.elementRef.nativeElement); 24 | } 25 | 26 | close() { 27 | this.target.tapTarget('close'); 28 | } 29 | 30 | open() { 31 | this.target.tapTarget('open'); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /lib/src/feature-discovery/feature-discovery.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { MzFeatureDiscoveryComponent } from './feature-discovery.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | ], 10 | declarations: [ 11 | MzFeatureDiscoveryComponent, 12 | ], 13 | exports: [ 14 | MzFeatureDiscoveryComponent, 15 | ], 16 | }) 17 | export class MzFeatureDiscoveryModule { } 18 | -------------------------------------------------------------------------------- /lib/src/feature-discovery/index.ts: -------------------------------------------------------------------------------- 1 | export * from './feature-discovery.component'; 2 | export * from './feature-discovery.module'; 3 | -------------------------------------------------------------------------------- /lib/src/icon-mdi/icon-mdi.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzIconMdiDirective } from './icon-mdi.directive'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | MzIconMdiDirective, 8 | ], 9 | exports: [ 10 | MzIconMdiDirective, 11 | ], 12 | }) 13 | export class MzIconMdiModule { } 14 | -------------------------------------------------------------------------------- /lib/src/icon-mdi/index.ts: -------------------------------------------------------------------------------- 1 | export * from './icon-mdi.directive'; 2 | export * from './icon-mdi.module'; 3 | -------------------------------------------------------------------------------- /lib/src/icon/icon.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzIconDirective } from './icon.directive'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | MzIconDirective, 8 | ], 9 | exports: [ 10 | MzIconDirective, 11 | ], 12 | }) 13 | export class MzIconModule { } 14 | -------------------------------------------------------------------------------- /lib/src/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './icon.directive'; 2 | export * from './icon.module'; 3 | -------------------------------------------------------------------------------- /lib/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './badge/index'; 2 | export * from './button/index'; 3 | export * from './card/index'; 4 | export * from './checkbox/index'; 5 | export * from './chip/index'; 6 | export * from './collapsible/index'; 7 | export * from './collection/index'; 8 | export * from './datepicker/index'; 9 | export * from './dropdown/index'; 10 | export * from './feature-discovery/index'; 11 | export * from './icon/index'; 12 | export * from './icon-mdi/index'; 13 | export * from './input/index'; 14 | export * from './materialize.module'; 15 | export * from './media/index'; 16 | export * from './modal/index'; 17 | export * from './navbar/index'; 18 | export * from './pagination/index'; 19 | export * from './parallax/index'; 20 | export * from './progress/index'; 21 | export * from './radio-button/index'; 22 | export * from './select/index'; 23 | export * from './shared/index'; 24 | export * from './sidenav/index'; 25 | export * from './spinner/index'; 26 | export * from './switch/index'; 27 | export * from './tab/index'; 28 | export * from './textarea/index'; 29 | export * from './timepicker/index'; 30 | export * from './toast/index'; 31 | export * from './tooltip/index'; 32 | export * from './validation/index'; 33 | -------------------------------------------------------------------------------- /lib/src/input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input-container/index'; 2 | export * from './input-prefix/index'; 3 | export * from './input.directive'; 4 | export * from './input.module'; 5 | -------------------------------------------------------------------------------- /lib/src/input/input-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/input/input-container/input-container.component.html: -------------------------------------------------------------------------------- 1 |
    5 | 6 |
    -------------------------------------------------------------------------------- /lib/src/input/input-container/input-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/input/input-container/input-container.component.scss -------------------------------------------------------------------------------- /lib/src/input/input-container/input-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-input-container', 5 | templateUrl: './input-container.component.html', 6 | styleUrls: ['./input-container.component.scss'], 7 | }) 8 | export class MzInputContainerComponent { 9 | @Input() inline: boolean; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/input/input-container/input-container.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzInputContainerComponent } from './input-container.component'; 4 | 5 | describe('MzInputContainerComponent:unit', () => { 6 | let component: MzInputContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzInputContainerComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzInputContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/input/input-prefix/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input-prefix.directive'; 2 | -------------------------------------------------------------------------------- /lib/src/input/input-prefix/input-prefix.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, OnInit, Renderer } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'i[mzInputPrefix], i[mz-input-prefix]', 5 | }) 6 | export class MzInputPrefixDirective implements OnInit { 7 | 8 | constructor( 9 | private elementRef: ElementRef, 10 | private renderer: Renderer) { } 11 | 12 | ngOnInit() { 13 | this.renderer.setElementClass(this.elementRef.nativeElement, 'prefix', true); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/src/input/input-prefix/input-prefix.directive.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef, Renderer } from '@angular/core'; 2 | import { TestBed } from '@angular/core/testing'; 3 | 4 | import { mockRenderer } from '../../shared/test-wrapper/mocks'; 5 | import { MzInputPrefixDirective } from './input-prefix.directive'; 6 | 7 | describe('MzInputPrefixDirective:unit', () => { 8 | 9 | const mockElementRef = new ElementRef({ fake: true }); 10 | 11 | let directive: MzInputPrefixDirective; 12 | let renderer: Renderer; 13 | 14 | beforeEach(() => { 15 | TestBed.configureTestingModule({ 16 | providers: [ 17 | { provide: Renderer, useValue: mockRenderer }, 18 | ], 19 | }); 20 | }); 21 | 22 | beforeEach(() => { 23 | renderer = TestBed.get(Renderer); 24 | directive = new MzInputPrefixDirective(mockElementRef, renderer); 25 | }); 26 | 27 | describe('ngOnInit', () => { 28 | 29 | it('should add prefix css class on element', () => { 30 | 31 | spyOn(renderer, 'setElementClass'); 32 | 33 | directive.ngOnInit(); 34 | 35 | expect(renderer.setElementClass).toHaveBeenCalledWith(mockElementRef.nativeElement, 'prefix', true); 36 | }); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /lib/src/input/input.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzInputContainerComponent } from './input-container/index'; 4 | import { MzInputPrefixDirective } from './input-prefix/index'; 5 | import { MzInputDirective } from './input.directive'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | MzInputContainerComponent, 10 | MzInputDirective, 11 | MzInputPrefixDirective, 12 | ], 13 | exports: [ 14 | MzInputContainerComponent, 15 | MzInputDirective, 16 | MzInputPrefixDirective, 17 | ], 18 | }) 19 | export class MzInputModule { } 20 | -------------------------------------------------------------------------------- /lib/src/media/index.ts: -------------------------------------------------------------------------------- 1 | export * from './media.module'; 2 | export * from './media.service'; 3 | export * from './models/index'; 4 | -------------------------------------------------------------------------------- /lib/src/media/media.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzMediaService } from './media.service'; 4 | 5 | @NgModule({ 6 | providers: [MzMediaService], 7 | }) 8 | export class MzMediaModule { } 9 | -------------------------------------------------------------------------------- /lib/src/media/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './matchOperator'; 2 | export * from './media'; 3 | export * from './mediaBreakpoint'; 4 | -------------------------------------------------------------------------------- /lib/src/media/models/matchOperator.ts: -------------------------------------------------------------------------------- 1 | import { MediaBreakpoint } from './mediaBreakpoint'; 2 | 3 | export abstract class MatchOperator { 4 | operator: 'gt' | 'lt'; 5 | match: (breakpoint: MediaBreakpoint) => boolean; 6 | } 7 | -------------------------------------------------------------------------------- /lib/src/media/models/media.ts: -------------------------------------------------------------------------------- 1 | export abstract class Media { 2 | alias: 's' | 'm' | 'l' | 'xl'; 3 | windowHeight: number; 4 | windowWidth: number; 5 | } 6 | -------------------------------------------------------------------------------- /lib/src/media/models/mediaBreakpoint.ts: -------------------------------------------------------------------------------- 1 | export abstract class MediaBreakpoint { 2 | alias: 's' | 'm' | 'l' | 'xl'; 3 | maxWidth: number; 4 | minWidth: number; 5 | } 6 | -------------------------------------------------------------------------------- /lib/src/modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal-base/index'; 2 | export * from './modal-close/index'; 3 | export * from './modal.component'; 4 | export * from './modal.module'; 5 | export * from './services/index'; 6 | -------------------------------------------------------------------------------- /lib/src/modal/modal-base/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal-base'; 2 | -------------------------------------------------------------------------------- /lib/src/modal/modal-base/modal-base.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | ViewChild, 4 | } from '@angular/core'; 5 | 6 | import { MzModalComponent } from '../modal.component'; 7 | 8 | export abstract class MzBaseModal implements AfterViewInit { 9 | @ViewChild(MzModalComponent) modalComponent: MzModalComponent; 10 | 11 | ngAfterViewInit() { 12 | this.modalComponent.openModal(); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /lib/src/modal/modal-close/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal-close.directive'; 2 | -------------------------------------------------------------------------------- /lib/src/modal/modal-close/modal-close.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostListener } from '@angular/core'; 2 | 3 | import { MzModalComponent } from '../modal.component'; 4 | 5 | @Directive({ 6 | selector: 'a[mzModalClose], button[mzModalClose], a[mz-modal-close], button[mz-modal-close]', 7 | }) 8 | export class MzModalCloseDirective { 9 | 10 | @HostListener('click') onclick() { 11 | this.modalComponent.closeModal(); 12 | } 13 | 14 | constructor( 15 | private modalComponent: MzModalComponent, 16 | ) { } 17 | } 18 | -------------------------------------------------------------------------------- /lib/src/modal/modal.component.html: -------------------------------------------------------------------------------- 1 |
    7 |
    8 | 9 |
    10 | 11 |
    12 |
    13 |
    14 | 15 |
    16 |
    17 | -------------------------------------------------------------------------------- /lib/src/modal/modal.component.scss: -------------------------------------------------------------------------------- 1 | .modal { 2 | 3 | &:not(.bottom-sheet) { 4 | &.modal-fullscreen { 5 | top: 12px !important; 6 | margin: 0 auto; 7 | width: calc(100% - 24px); 8 | height: calc(100% - 24px); 9 | max-height: none; 10 | } 11 | } 12 | 13 | &.bottom-sheet { 14 | &.modal-fullscreen { 15 | height: 100%; 16 | max-height: none; 17 | } 18 | } 19 | } 20 | 21 | #{'/deep/'} mz-modal-header { 22 | h5, h6 23 | { 24 | margin-top: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lib/src/modal/modal.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzInjectionModule } from '../shared/injection/injection.module'; 4 | import { MzModalCloseDirective } from './modal-close/index'; 5 | import { 6 | MzModalComponent, 7 | MzModalContentDirective, 8 | MzModalFooterDirective, 9 | MzModalHeaderDirective, 10 | } from './modal.component'; 11 | import { MzModalService } from './services/index'; 12 | 13 | @NgModule({ 14 | imports: [MzInjectionModule], 15 | declarations: [ 16 | MzModalCloseDirective, 17 | MzModalComponent, 18 | MzModalContentDirective, 19 | MzModalFooterDirective, 20 | MzModalHeaderDirective, 21 | ], 22 | exports: [ 23 | MzModalCloseDirective, 24 | MzModalComponent, 25 | MzModalContentDirective, 26 | MzModalFooterDirective, 27 | MzModalHeaderDirective, 28 | ], 29 | providers: [MzModalService], 30 | }) 31 | export class MzModalModule { } 32 | -------------------------------------------------------------------------------- /lib/src/modal/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal.service'; 2 | -------------------------------------------------------------------------------- /lib/src/modal/services/modal.service.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentRef, 3 | Injectable, 4 | Type, 5 | } from '@angular/core'; 6 | import { first } from 'rxjs/operators'; 7 | 8 | import { MzInjectionService } from '../../shared/injection/injection.service'; 9 | import { MzBaseModal } from '../modal-base/index'; 10 | 11 | @Injectable() 12 | export class MzModalService { 13 | 14 | constructor( 15 | private injectionService: MzInjectionService, 16 | ) { } 17 | 18 | /** 19 | * Open modal component. 20 | */ 21 | open(componentClass: Type, options: any = {}): ComponentRef { 22 | const componentRef = this.injectionService.appendComponent(componentClass, options); 23 | componentRef.instance.modalComponent.close 24 | .pipe(first()) 25 | .subscribe(() => { 26 | componentRef.destroy(); 27 | }); 28 | return componentRef; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/src/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './navbar.component'; 2 | export * from './navbar.module'; 3 | export * from './navbar-item/index'; 4 | export * from './navbar-item-container/index'; 5 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './navbar-item-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item-container/navbar-item-container.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item-container/navbar-item-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/navbar/navbar-item-container/navbar-item-container.component.scss -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item-container/navbar-item-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-navbar-item-container', 5 | templateUrl: './navbar-item-container.component.html', 6 | styleUrls: ['./navbar-item-container.component.scss'], 7 | }) 8 | export class MzNavbarItemContainerComponent { 9 | @Input() align: string; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item-container/navbar-item-container.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzNavbarItemContainerComponent } from './navbar-item-container.component'; 4 | 5 | describe('MzNavbarItemContainerComponent:unit', () => { 6 | let component: MzNavbarItemContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzNavbarItemContainerComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzNavbarItemContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './navbar-item.component'; 2 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item/navbar-item.component.html: -------------------------------------------------------------------------------- 1 |
  • 5 | 6 |
    • -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item/navbar-item.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/navbar/navbar-item/navbar-item.component.scss -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item/navbar-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-navbar-item', 5 | templateUrl: './navbar-item.component.html', 6 | styleUrls: ['./navbar-item.component.scss'], 7 | }) 8 | export class MzNavbarItemComponent { 9 | @Input() active: boolean; 10 | @Input() itemClass: string; 11 | } 12 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar-item/navbar-item.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzNavbarItemComponent } from './navbar-item.component'; 4 | 5 | describe('MzNavbarItemComponent:unit', () => { 6 | let component: MzNavbarItemComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzNavbarItemComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzNavbarItemComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar.component.scss: -------------------------------------------------------------------------------- 1 | .nav-wrapper #{'/deep/'} { 2 | .btn { 3 | i { 4 | // fix button icon vertical alignment in navbar 5 | line-height: inherit; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /lib/src/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-navbar', 5 | templateUrl: './navbar.component.html', 6 | styleUrls: ['./navbar.component.scss'], 7 | }) 8 | export class MzNavbarComponent { 9 | @Input() navbarClass: string; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzNavbarComponent } from './navbar.component'; 4 | 5 | describe('MzNavbarComponent:unit', () => { 6 | let component: MzNavbarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzNavbarComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzNavbarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/navbar/navbar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzNavbarItemContainerComponent } from './navbar-item-container/index'; 4 | import { MzNavbarItemComponent } from './navbar-item/index'; 5 | import { MzNavbarComponent } from './navbar.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | MzNavbarComponent, 10 | MzNavbarItemComponent, 11 | MzNavbarItemContainerComponent, 12 | ], 13 | exports: [ 14 | MzNavbarComponent, 15 | MzNavbarItemComponent, 16 | MzNavbarItemContainerComponent, 17 | ], 18 | }) 19 | export class MzNavbarModule { } 20 | -------------------------------------------------------------------------------- /lib/src/pagination/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pagination-page-button/index'; 2 | export * from './pagination.component'; 3 | export * from './pagination.module'; 4 | -------------------------------------------------------------------------------- /lib/src/pagination/pagination-page-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pagination-page-button.component'; 2 | -------------------------------------------------------------------------------- /lib/src/pagination/pagination-page-button/pagination-page-button.component.html: -------------------------------------------------------------------------------- 1 |
  • 4 | 5 |
    • -------------------------------------------------------------------------------- /lib/src/pagination/pagination-page-button/pagination-page-button.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/pagination/pagination-page-button/pagination-page-button.component.scss -------------------------------------------------------------------------------- /lib/src/pagination/pagination-page-button/pagination-page-button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-pagination-page-button', 5 | templateUrl: './pagination-page-button.component.html', 6 | styleUrls: ['./pagination-page-button.component.scss'], 7 | }) 8 | export class MzPaginationPageButtonComponent { 9 | @Input() active: boolean; 10 | @Input() disabled: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /lib/src/pagination/pagination.component.html: -------------------------------------------------------------------------------- 1 | 2 |
      3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | {{ page }} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
    -------------------------------------------------------------------------------- /lib/src/pagination/pagination.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/pagination/pagination.component.scss -------------------------------------------------------------------------------- /lib/src/pagination/pagination.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { MzIconModule } from '../icon/icon.module'; 5 | import { MzPaginationPageButtonComponent } from './pagination-page-button/pagination-page-button.component'; 6 | import { MzPaginationComponent } from './pagination.component'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | MzIconModule, 12 | ], 13 | declarations: [ 14 | MzPaginationComponent, 15 | MzPaginationPageButtonComponent, 16 | ], 17 | exports: [ 18 | MzPaginationComponent, 19 | ], 20 | }) 21 | export class MzPaginationModule { } 22 | -------------------------------------------------------------------------------- /lib/src/parallax/index.ts: -------------------------------------------------------------------------------- 1 | export * from './parallax.component'; 2 | export * from './parallax.module'; 3 | -------------------------------------------------------------------------------- /lib/src/parallax/parallax.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |
    5 |
    -------------------------------------------------------------------------------- /lib/src/parallax/parallax.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/parallax/parallax.component.scss -------------------------------------------------------------------------------- /lib/src/parallax/parallax.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | Component, 4 | ElementRef, 5 | Input, 6 | Renderer, 7 | ViewChild } from '@angular/core'; 8 | 9 | @Component({ 10 | selector: 'mz-parallax', 11 | templateUrl: './parallax.component.html', 12 | styleUrls: ['./parallax.component.scss'], 13 | }) 14 | export class MzParallaxComponent implements AfterViewInit { 15 | @Input() height: number; 16 | 17 | @ViewChild('parallax') parallax: ElementRef; 18 | @ViewChild('parallaxContainer') parallaxContainer: ElementRef; 19 | 20 | constructor(public renderer: Renderer) { } 21 | 22 | ngAfterViewInit(): void { 23 | this.renderer.setElementStyle(this.parallaxContainer.nativeElement, 'height', isNaN(this.height) ? '500px' : this.height + 'px'); 24 | this.renderer.invokeElementMethod($(this.parallax.nativeElement), 'parallax'); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lib/src/parallax/parallax.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzParallaxComponent } from './parallax.component'; 4 | 5 | @NgModule({ 6 | declarations: [MzParallaxComponent], 7 | exports: [MzParallaxComponent], 8 | }) 9 | export class MzParallaxModule { } 10 | -------------------------------------------------------------------------------- /lib/src/progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from './progress.component'; 2 | export * from './progress.module'; 3 | -------------------------------------------------------------------------------- /lib/src/progress/progress.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    8 |
    9 |
    -------------------------------------------------------------------------------- /lib/src/progress/progress.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/progress/progress.component.scss -------------------------------------------------------------------------------- /lib/src/progress/progress.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-progress', 5 | templateUrl: './progress.component.html', 6 | styleUrls: ['./progress.component.scss'], 7 | }) 8 | export class MzProgressComponent { 9 | @Input() backgroundClass: string; 10 | @Input() percentage: number; 11 | @Input() progressClass: string; 12 | } 13 | -------------------------------------------------------------------------------- /lib/src/progress/progress.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzProgressComponent } from './progress.component'; 4 | 5 | describe('MzProgressComponent:unit', () => { 6 | let component: MzProgressComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzProgressComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzProgressComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/progress/progress.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzProgressComponent } from './progress.component'; 4 | 5 | @NgModule({ 6 | declarations: [MzProgressComponent], 7 | exports: [MzProgressComponent], 8 | }) 9 | export class MzProgressModule { } 10 | -------------------------------------------------------------------------------- /lib/src/radio-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './radio-button-container/index'; 2 | export * from './radio-button.directive'; 3 | export * from './radio-button.module'; 4 | -------------------------------------------------------------------------------- /lib/src/radio-button/radio-button-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './radio-button-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/radio-button/radio-button-container/radio-button-container.component.html: -------------------------------------------------------------------------------- 1 |

    2 | 3 |

    -------------------------------------------------------------------------------- /lib/src/radio-button/radio-button-container/radio-button-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/radio-button/radio-button-container/radio-button-container.component.scss -------------------------------------------------------------------------------- /lib/src/radio-button/radio-button-container/radio-button-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-radio-button-container', 5 | templateUrl: './radio-button-container.component.html', 6 | styleUrls: ['./radio-button-container.component.scss'], 7 | }) 8 | export class MzRadioButtonContainerComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/radio-button/radio-button-container/radio-button-container.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzRadioButtonContainerComponent } from './radio-button-container.component'; 4 | 5 | describe('MzRadioButtonContainerComponent:unit', () => { 6 | let component: MzRadioButtonContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzRadioButtonContainerComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzRadioButtonContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/radio-button/radio-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzRadioButtonContainerComponent } from './radio-button-container/index'; 4 | import { MzRadioButtonDirective } from './radio-button.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | MzRadioButtonDirective, 9 | MzRadioButtonContainerComponent, 10 | ], 11 | exports: [ 12 | MzRadioButtonDirective, 13 | MzRadioButtonContainerComponent, 14 | ], 15 | }) 16 | export class MzRadioButtonModule { } 17 | -------------------------------------------------------------------------------- /lib/src/select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './select-container/index'; 2 | export * from './select.directive'; 3 | export * from './select.module'; 4 | -------------------------------------------------------------------------------- /lib/src/select/select-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './select-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/select/select-container/select-container.component.html: -------------------------------------------------------------------------------- 1 |
    5 | 6 |
    -------------------------------------------------------------------------------- /lib/src/select/select-container/select-container.component.scss: -------------------------------------------------------------------------------- 1 | .input-field:not(.inline) { 2 | // fix unwanted space under the input-field when error-message is not shown 3 | display: block; 4 | } 5 | 6 | // workaround for materialize bug: multiple select options are not aligned 7 | // https://github.com/Dogfalo/materialize/issues/5083#issue-248489869 8 | #{'/deep/'} .input-field .dropdown-content [type="checkbox"]+label { 9 | top: -11px; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/select/select.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzSelectContainerComponent } from './select-container/index'; 4 | import { MzSelectDirective } from './select.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | MzSelectDirective, 9 | MzSelectContainerComponent, 10 | ], 11 | exports: [ 12 | MzSelectDirective, 13 | MzSelectContainerComponent, 14 | ], 15 | }) 16 | export class MzSelectModule { } 17 | -------------------------------------------------------------------------------- /lib/src/shared/handle-prop-changes.ts: -------------------------------------------------------------------------------- 1 | import { OnChanges, SimpleChange, SimpleChanges } from '@angular/core'; 2 | 3 | export abstract class Handlers { 4 | [propertyName: string]: Function; 5 | } 6 | 7 | export class HandlePropChanges implements OnChanges { 8 | handlers: Handlers; 9 | 10 | ngOnChanges(changes: SimpleChanges) { 11 | if (this.handlers) { 12 | this.executePropHandlers(changes); 13 | } 14 | } 15 | 16 | executePropHandlers(props: Handlers | SimpleChanges = this.handlers) { 17 | Object.keys(props).forEach(prop => { 18 | if (this.handlers[prop]) { 19 | const previousValue = (props[prop] as SimpleChange).previousValue; 20 | this.handlers[prop](previousValue); 21 | } 22 | }); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /lib/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './handle-prop-changes'; 2 | export * from './injection/index'; 3 | export * from './remove-component-host/index'; 4 | export * from './remove-component-host/index'; 5 | -------------------------------------------------------------------------------- /lib/src/shared/injection/index.ts: -------------------------------------------------------------------------------- 1 | export * from './injection.module'; 2 | export * from './injection.service'; 3 | -------------------------------------------------------------------------------- /lib/src/shared/injection/injection.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzInjectionService } from './injection.service'; 4 | 5 | @NgModule({ 6 | providers: [MzInjectionService], 7 | }) 8 | export class MzInjectionModule { } 9 | -------------------------------------------------------------------------------- /lib/src/shared/remove-component-host/index.ts: -------------------------------------------------------------------------------- 1 | export * from './remove-component-host'; 2 | -------------------------------------------------------------------------------- /lib/src/shared/remove-component-host/remove-component-host.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | ElementRef, 4 | Inject, 5 | OnDestroy, 6 | } from '@angular/core'; 7 | 8 | export abstract class MzRemoveComponentHost implements AfterViewInit, OnDestroy { 9 | 10 | private childrenElement: HTMLElement[] = []; 11 | private parentElement: HTMLElement; 12 | 13 | constructor( 14 | @Inject(ElementRef) public elementRef: ElementRef, 15 | ) { } 16 | 17 | ngAfterViewInit() { 18 | const hostElement = this.elementRef.nativeElement; 19 | this.parentElement = hostElement.parentElement; 20 | 21 | // move child out of the host element 22 | while (hostElement.firstChild) { 23 | this.childrenElement.push(this.parentElement.insertBefore(hostElement.firstChild, hostElement)); 24 | } 25 | } 26 | 27 | ngOnDestroy() { 28 | // remove moved out element 29 | this.childrenElement.forEach(childElement => this.parentElement.removeChild(childElement)); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /lib/src/shared/test-wrapper/index.ts: -------------------------------------------------------------------------------- 1 | export * from './test-wrapper.builder'; 2 | export * from './test-wrapper.component'; 3 | export * from './test-wrapper.module'; 4 | -------------------------------------------------------------------------------- /lib/src/shared/test-wrapper/mocks/index.ts: -------------------------------------------------------------------------------- 1 | export * from './mock-change-detector-ref'; 2 | export * from './mock-renderer'; 3 | -------------------------------------------------------------------------------- /lib/src/shared/test-wrapper/mocks/mock-change-detector-ref.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectorRef } from '@angular/core'; 2 | 3 | export class MockChangeDetectorRef implements ChangeDetectorRef { 4 | markForCheck(): void { } 5 | detach(): void { } 6 | detectChanges(): void { } 7 | checkNoChanges(): void { } 8 | reattach(): void { } 9 | } 10 | -------------------------------------------------------------------------------- /lib/src/shared/test-wrapper/test-wrapper.builder.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzTestWrapperComponent } from './test-wrapper.component'; 4 | 5 | export function buildComponent( 6 | template: string, 7 | bindings: { [key: string]: any } = {}): Promise> { 8 | 9 | TestBed.overrideComponent(MzTestWrapperComponent, { set: { template, inputs: Object.keys(bindings) } }); 10 | 11 | return TestBed.compileComponents().then(() => { 12 | // Note: we can also use TestComponent.prototype[binding] instead of 13 | // Object.assign; however, using Object.assign more closely matches 14 | // Angular, wherein the inputs are not available on construction. 15 | const fixture = >TestBed.createComponent(MzTestWrapperComponent); 16 | Object.assign(fixture.componentInstance, bindings); 17 | 18 | return fixture; 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /lib/src/shared/test-wrapper/test-wrapper.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-test-wrapper', 5 | template: '
    ', 6 | }) 7 | export class MzTestWrapperComponent { } 8 | -------------------------------------------------------------------------------- /lib/src/shared/test-wrapper/test-wrapper.module.ts: -------------------------------------------------------------------------------- 1 | // Need this module to prevent error 'Cannot determine the module for class TestWrapperComponent' with AoT compiling 2 | import { CommonModule } from '@angular/common'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { MzTestWrapperComponent } from './test-wrapper.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | ], 11 | exports: [MzTestWrapperComponent], 12 | declarations: [MzTestWrapperComponent], 13 | }) 14 | export class TestWrapperModule { } 15 | -------------------------------------------------------------------------------- /lib/src/sidenav/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav.component'; 2 | export * from './sidenav.module'; 3 | export * from './sidenav-collapsible/index'; 4 | export * from './sidenav-divider/index'; 5 | export * from './sidenav-header/index'; 6 | export * from './sidenav-link/index'; 7 | export * from './sidenav-subheader/index'; 8 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav-collapsible-header/index'; 2 | export * from './sidenav-collapsible.component'; 3 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible-header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav-collapsible-header.component'; 2 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible-header/sidenav-collapsible-header.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible-header/sidenav-collapsible-header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/sidenav/sidenav-collapsible/sidenav-collapsible-header/sidenav-collapsible-header.component.scss -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible-header/sidenav-collapsible-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { MzRemoveComponentHost } from '../../../shared/remove-component-host/remove-component-host'; 4 | 5 | @Component({ 6 | selector: 'mz-sidenav-collapsible-header', 7 | templateUrl: './sidenav-collapsible-header.component.html', 8 | styleUrls: ['./sidenav-collapsible-header.component.scss'], 9 | }) 10 | export class MzSidenavCollapsibleHeaderComponent extends MzRemoveComponentHost { } 11 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible-header/sidenav-collapsible-header.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzSidenavCollapsibleHeaderComponent } from './sidenav-collapsible-header.component'; 4 | 5 | describe('MzSidenavCollapsibleHeaderComponent:unit', () => { 6 | let component: MzSidenavCollapsibleHeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzSidenavCollapsibleHeaderComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzSidenavCollapsibleHeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible.component.html: -------------------------------------------------------------------------------- 1 |
  • 2 |
      3 |
    • 4 | 5 |
      6 |
        7 | 8 |
      9 |
      10 |
      • 11 |
    12 |
    • -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-collapsible/sidenav-collapsible.component.scss: -------------------------------------------------------------------------------- 1 | :host #{'/deep/'} { 2 | .collapsible-header { 3 | 4 | padding: 0 32px; 5 | 6 | i { 7 | color: rgba(0,0,0,0.54); 8 | } 9 | } 10 | 11 | .collapsible-body { 12 | li { 13 | a { 14 | font-weight: initial; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-divider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav-divider.component'; 2 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-divider/sidenav-divider.component.html: -------------------------------------------------------------------------------- 1 |
  • 2 |
    3 |
    • -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-divider/sidenav-divider.component.scss: -------------------------------------------------------------------------------- 1 | .divider { 2 | margin-bottom: 8px; 3 | } -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-divider/sidenav-divider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-sidenav-divider', 5 | templateUrl: './sidenav-divider.component.html', 6 | styleUrls: ['./sidenav-divider.component.scss'], 7 | }) 8 | export class MzSidenavDividerComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-divider/sidenav-divider.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzSidenavDividerComponent } from './sidenav-divider.component'; 4 | 5 | describe('MzSidenavDividerComponent:unit', () => { 6 | let component: MzSidenavDividerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzSidenavDividerComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzSidenavDividerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav-header.component'; 2 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-header/sidenav-header.component.html: -------------------------------------------------------------------------------- 1 |
  • 2 | 3 |
    • -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-header/sidenav-header.component.scss: -------------------------------------------------------------------------------- 1 | .sidenav-header { 2 | margin-bottom: 8px; 3 | } -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-header/sidenav-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-sidenav-header', 5 | templateUrl: './sidenav-header.component.html', 6 | styleUrls: ['./sidenav-header.component.scss'], 7 | }) 8 | export class MzSidenavHeaderComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-header/sidenav-header.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzSidenavHeaderComponent } from './sidenav-header.component'; 4 | 5 | describe('MzSidenavHeaderComponent:unit', () => { 6 | let component: MzSidenavHeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzSidenavHeaderComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzSidenavHeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-link/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav-link.component'; 2 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-link/sidenav-link.component.html: -------------------------------------------------------------------------------- 1 |
  • 4 | 5 |
    • 6 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-link/sidenav-link.component.scss: -------------------------------------------------------------------------------- 1 | :host #{'/deep/'} { 2 | a[class*="mdi-"]::before { 3 | color: rgba(0, 0, 0, 0.54); 4 | margin: -1px 32px 0 0; 5 | vertical-align: middle; 6 | } 7 | 8 | a { 9 | i, 10 | i.material-icons, 11 | i[class*="mdi-"] { 12 | margin-top: -1px; 13 | 14 | &::before { 15 | vertical-align: middle; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-link/sidenav-link.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-sidenav-link', 5 | templateUrl: './sidenav-link.component.html', 6 | styleUrls: ['./sidenav-link.component.scss'], 7 | encapsulation: ViewEncapsulation.Emulated, 8 | }) 9 | export class MzSidenavLinkComponent { 10 | @Input() active: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-link/sidenav-link.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzSidenavLinkComponent } from './sidenav-link.component'; 4 | 5 | describe('MzSidenavLinkComponent:unit', () => { 6 | let component: MzSidenavLinkComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzSidenavLinkComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzSidenavLinkComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-subheader/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidenav-subheader.component'; 2 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-subheader/sidenav-subheader.component.html: -------------------------------------------------------------------------------- 1 |
  • 2 | 3 | 4 | 5 |
    • -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-subheader/sidenav-subheader.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/sidenav/sidenav-subheader/sidenav-subheader.component.scss -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-subheader/sidenav-subheader.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-sidenav-subheader', 5 | templateUrl: './sidenav-subheader.component.html', 6 | styleUrls: ['./sidenav-subheader.component.scss'], 7 | }) 8 | export class MzSidenavSubheaderComponent { } 9 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav-subheader/sidenav-subheader.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzSidenavSubheaderComponent } from './sidenav-subheader.component'; 4 | 5 | describe('MzSidenavSubheaderComponent:unit', () => { 6 | let component: MzSidenavSubheaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzSidenavSubheaderComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzSidenavSubheaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/sidenav/sidenav.component.html: -------------------------------------------------------------------------------- 1 |
      4 | 5 |
    -------------------------------------------------------------------------------- /lib/src/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './spinner.component'; 2 | export * from './spinner.module'; 3 | -------------------------------------------------------------------------------- /lib/src/spinner/spinner.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 22 |
    -------------------------------------------------------------------------------- /lib/src/spinner/spinner.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/spinner/spinner.component.scss -------------------------------------------------------------------------------- /lib/src/spinner/spinner.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-spinner', 5 | templateUrl: './spinner.component.html', 6 | styleUrls: ['./spinner.component.scss'], 7 | }) 8 | export class MzSpinnerComponent { 9 | @Input() color: string; 10 | @Input() size: string; // small, medium, big 11 | } 12 | -------------------------------------------------------------------------------- /lib/src/spinner/spinner.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 3 | 4 | import { MzSpinnerComponent } from './spinner.component'; 5 | 6 | describe('MzSpinnerComponent', () => { 7 | let component: MzSpinnerComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [MzSpinnerComponent], 13 | }) 14 | .compileComponents(); 15 | })); 16 | 17 | beforeEach(() => { 18 | fixture = TestBed.createComponent(MzSpinnerComponent); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /lib/src/spinner/spinner.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzSpinnerComponent } from './spinner.component'; 4 | 5 | @NgModule({ 6 | declarations: [MzSpinnerComponent], 7 | exports: [MzSpinnerComponent], 8 | }) 9 | export class MzSpinnerModule { } 10 | -------------------------------------------------------------------------------- /lib/src/switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './switch-container/index'; 2 | export * from './switch.directive'; 3 | export * from './switch.module'; 4 | -------------------------------------------------------------------------------- /lib/src/switch/switch-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './switch-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/switch/switch-container/switch-container.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 8 |
    -------------------------------------------------------------------------------- /lib/src/switch/switch-container/switch-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/switch/switch-container/switch-container.component.scss -------------------------------------------------------------------------------- /lib/src/switch/switch-container/switch-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ContentChild } from '@angular/core'; 2 | 3 | import { MzSwitchDirective } from '../switch.directive'; 4 | 5 | @Component({ 6 | selector: 'mz-switch-container', 7 | templateUrl: './switch-container.component.html', 8 | styleUrls: ['./switch-container.component.scss'], 9 | }) 10 | export class MzSwitchContainerComponent { 11 | @ContentChild(MzSwitchDirective) mzSwitchDirective: MzSwitchDirective; 12 | } 13 | -------------------------------------------------------------------------------- /lib/src/switch/switch.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzSwitchContainerComponent } from './switch-container/index'; 4 | import { MzSwitchDirective } from './switch.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | MzSwitchDirective, 9 | MzSwitchContainerComponent, 10 | ], 11 | exports: [ 12 | MzSwitchDirective, 13 | MzSwitchContainerComponent, 14 | ], 15 | }) 16 | export class MzSwitchModule { } 17 | -------------------------------------------------------------------------------- /lib/src/tab/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tab-item/index'; 2 | export * from './tab.component'; 3 | export * from './tab.module'; 4 | -------------------------------------------------------------------------------- /lib/src/tab/tab-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tab-item.component'; 2 | -------------------------------------------------------------------------------- /lib/src/tab/tab-item/tab-item.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/src/tab/tab-item/tab-item.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/tab/tab-item/tab-item.component.scss -------------------------------------------------------------------------------- /lib/src/tab/tab-item/tab-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-tab-item', 5 | templateUrl: './tab-item.component.html', 6 | styleUrls: ['./tab-item.component.scss'], 7 | }) 8 | export class MzTabItemComponent { 9 | @Input() active: boolean; 10 | @Input() class: string; 11 | @Input() disabled: boolean; 12 | @Input() href: string; 13 | @Input() label: string; 14 | @Input() tabItemId: string; 15 | @Input() target: string; 16 | 17 | tabs: HTMLElement; 18 | liElement: HTMLElement; 19 | 20 | get link(): string { 21 | return this.tabItemId ? this.tabItemId : this.label.replace(/[^a-zA-Z0-9]/g, '').toLowerCase(); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lib/src/tab/tab.component.html: -------------------------------------------------------------------------------- 1 | 11 |
    12 | 13 |
    -------------------------------------------------------------------------------- /lib/src/tab/tab.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/tab/tab.component.scss -------------------------------------------------------------------------------- /lib/src/tab/tab.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, ContentChildren, ElementRef, Input, QueryList, ViewChild } from '@angular/core'; 2 | 3 | import { MzTabItemComponent } from './tab-item/tab-item.component'; 4 | 5 | @Component({ 6 | selector: 'mz-tab', 7 | templateUrl: './tab.component.html', 8 | styleUrls: ['./tab.component.scss'], 9 | }) 10 | export class MzTabComponent implements AfterViewInit { 11 | @Input() fixedTabWidth: boolean; 12 | @Input() onShow: Function; 13 | @Input() responsiveThreshold: number; 14 | @Input() swipeable: boolean; 15 | 16 | @ViewChild('tabs') tabs: ElementRef; 17 | @ContentChildren(MzTabItemComponent) tabItems: QueryList; 18 | 19 | ngAfterViewInit(): void { 20 | this.initTabs(); 21 | } 22 | 23 | initTabs() { 24 | const options: Materialize.TabOptions = { 25 | onShow: this.onShow, 26 | responsiveThreshold: this.responsiveThreshold, 27 | swipeable: this.swipeable, 28 | }; 29 | 30 | $(this.tabs.nativeElement).tabs(options); 31 | } 32 | 33 | selectTab(tabItemId: string) { 34 | $(this.tabs.nativeElement).tabs('select_tab', tabItemId); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /lib/src/tab/tab.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { MzTabItemComponent } from './tab-item/index'; 5 | import { MzTabComponent } from './tab.component'; 6 | 7 | @NgModule({ 8 | imports: [CommonModule], 9 | declarations: [ 10 | MzTabComponent, 11 | MzTabItemComponent, 12 | ], 13 | exports: [ 14 | MzTabComponent, 15 | MzTabItemComponent, 16 | ], 17 | }) 18 | export class MzTabModule { } 19 | -------------------------------------------------------------------------------- /lib/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | 7 | import { getTestBed } from '@angular/core/testing'; 8 | import { 9 | BrowserDynamicTestingModule, 10 | platformBrowserDynamicTesting, 11 | } from '@angular/platform-browser-dynamic/testing'; 12 | 13 | declare const require: any; 14 | 15 | // First, initialize the Angular testing environment. 16 | getTestBed().initTestEnvironment( 17 | BrowserDynamicTestingModule, 18 | platformBrowserDynamicTesting(), 19 | ); 20 | // Then we find all the tests. 21 | const context = require.context('./', true, /\.spec\.ts$/); 22 | // And load the modules. 23 | context.keys().map(context); 24 | -------------------------------------------------------------------------------- /lib/src/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from './textarea-container/index'; 2 | export * from './textarea-prefix/index'; 3 | export * from './textarea.directive'; 4 | export * from './textarea.module'; 5 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './textarea-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea-container/textarea-container.component.html: -------------------------------------------------------------------------------- 1 |
    5 | 6 |
    -------------------------------------------------------------------------------- /lib/src/textarea/textarea-container/textarea-container.component.scss: -------------------------------------------------------------------------------- 1 | :host #{'/deep/'} textarea { 2 | // fix unwanted space under the textarea on chrome 3 | // https://stackoverflow.com/a/6939674/5583283 4 | display: block; 5 | } 6 | 7 | .input-field:not(.inline) { 8 | // fix unwanted space under the input-field when error-message is not shown 9 | display: block; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea-container/textarea-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-textarea-container', 5 | templateUrl: './textarea-container.component.html', 6 | styleUrls: ['./textarea-container.component.scss'], 7 | }) 8 | export class MzTextareaContainerComponent { 9 | @Input() inline: boolean; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea-container/textarea-container.component.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzTextareaContainerComponent } from './textarea-container.component'; 4 | 5 | describe('MzTextareaContainerComponent:unit', () => { 6 | let component: MzTextareaContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [MzTextareaContainerComponent], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzTextareaContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea-prefix/index.ts: -------------------------------------------------------------------------------- 1 | export * from './textarea-prefix.directive'; 2 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea-prefix/textarea-prefix.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, OnInit, Renderer } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'i[mzTextareaPrefix], i[mz-textarea-prefix]', 5 | }) 6 | export class MzTextareaPrefixDirective implements OnInit { 7 | 8 | constructor( 9 | private elementRef: ElementRef, 10 | private renderer: Renderer) { } 11 | 12 | ngOnInit() { 13 | this.renderer.setElementClass(this.elementRef.nativeElement, 'prefix', true); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/src/textarea/textarea.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzTextareaContainerComponent } from './textarea-container/index'; 4 | import { MzTextareaPrefixDirective } from './textarea-prefix/index'; 5 | import { MzTextareaDirective } from './textarea.directive'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | MzTextareaContainerComponent, 10 | MzTextareaDirective, 11 | MzTextareaPrefixDirective, 12 | ], 13 | exports: [ 14 | MzTextareaContainerComponent, 15 | MzTextareaDirective, 16 | MzTextareaPrefixDirective, 17 | ], 18 | }) 19 | export class MzTextareaModule { } 20 | -------------------------------------------------------------------------------- /lib/src/timepicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './timepicker-container/index'; 2 | export * from './timepicker.directive'; 3 | export * from './timepicker.module'; 4 | -------------------------------------------------------------------------------- /lib/src/timepicker/timepicker-container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './timepicker-container.component'; 2 | -------------------------------------------------------------------------------- /lib/src/timepicker/timepicker-container/timepicker-container.component.html: -------------------------------------------------------------------------------- 1 |
    5 | 6 |
    -------------------------------------------------------------------------------- /lib/src/timepicker/timepicker-container/timepicker-container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sherweb/ngx-materialize/0c1be35ee1606e4798c50d296d5737d3f2e5d884/lib/src/timepicker/timepicker-container/timepicker-container.component.scss -------------------------------------------------------------------------------- /lib/src/timepicker/timepicker-container/timepicker-container.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MzTimepickerContainerComponent } from './timepicker-container.component'; 4 | 5 | describe('TimepickerContainerComponent', () => { 6 | let component: MzTimepickerContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MzTimepickerContainerComponent ], 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MzTimepickerContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should be created', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /lib/src/timepicker/timepicker-container/timepicker-container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mz-timepicker-container', 5 | templateUrl: './timepicker-container.component.html', 6 | styleUrls: ['./timepicker-container.component.scss'], 7 | }) 8 | export class MzTimepickerContainerComponent { 9 | @Input() inline: boolean; 10 | } 11 | -------------------------------------------------------------------------------- /lib/src/timepicker/timepicker.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzTimepickerContainerComponent } from './timepicker-container/index'; 4 | import { MzTimepickerDirective } from './timepicker.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | MzTimepickerDirective, 9 | MzTimepickerContainerComponent, 10 | ], 11 | exports: [ 12 | MzTimepickerDirective, 13 | MzTimepickerContainerComponent, 14 | ], 15 | }) 16 | export class MzTimepickerModule { } 17 | -------------------------------------------------------------------------------- /lib/src/toast/index.ts: -------------------------------------------------------------------------------- 1 | export * from './services/index'; 2 | export * from './toast.module'; 3 | -------------------------------------------------------------------------------- /lib/src/toast/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './toast.service'; 2 | -------------------------------------------------------------------------------- /lib/src/toast/services/toast.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class MzToastService { 5 | 6 | show(message: string, displayLength: number, className?: string, completeCallback?: Function) { 7 | Materialize.toast(message, displayLength, className, completeCallback); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /lib/src/toast/services/toast.service.unit.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { MzToastService } from './toast.service'; 4 | 5 | describe('MzToastService:unit', () => { 6 | let toastService: MzToastService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [MzToastService], 11 | }); 12 | }); 13 | 14 | beforeEach(() => { 15 | toastService = TestBed.get(MzToastService); 16 | }); 17 | 18 | describe('show', () => { 19 | 20 | it('should call Materialize.toast correctly', () => { 21 | 22 | const message = 'message-x'; 23 | const displayLength = 9999; 24 | const className = 'class-name-x'; 25 | const completeCallback = () => alert('complete-callback-x'); 26 | 27 | spyOn(Materialize, 'toast'); 28 | 29 | toastService.show(message, displayLength, className, completeCallback); 30 | 31 | expect(Materialize.toast).toHaveBeenCalledWith(message, displayLength, className, completeCallback); 32 | }); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /lib/src/toast/toast.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzToastService } from './services/index'; 4 | 5 | @NgModule({ 6 | providers: [MzToastService], 7 | }) 8 | export class MzToastModule { } 9 | -------------------------------------------------------------------------------- /lib/src/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tooltip.directive'; 2 | export * from './tooltip.module'; 3 | -------------------------------------------------------------------------------- /lib/src/tooltip/tooltip.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MzTooltipDirective } from './tooltip.directive'; 4 | 5 | @NgModule({ 6 | declarations: [MzTooltipDirective], 7 | exports: [MzTooltipDirective], 8 | }) 9 | export class MzTooltipModule { } 10 | -------------------------------------------------------------------------------- /lib/src/validation/error-message/error-message.component.html: -------------------------------------------------------------------------------- 1 |
    {{ errorMessage }}
    -------------------------------------------------------------------------------- /lib/src/validation/error-message/error-message.component.scss: -------------------------------------------------------------------------------- 1 | $error-color: #e30613; 2 | $error-font-size: 0.8rem; 3 | $error-height: 19px; 4 | $error-opacity: 1; 5 | 6 | div.invalid { 7 | color: $error-color; 8 | font-size: $error-font-size; 9 | opacity: $error-opacity; 10 | overflow-wrap: break-word; 11 | } 12 | 13 | input:not([type="checkbox"]) + label + :host, 14 | mz-select-container :host, 15 | textarea + label + :host { 16 | 17 | div.invalid { 18 | margin-top: (-$error-height); 19 | min-height: $error-height 20 | } 21 | } -------------------------------------------------------------------------------- /lib/src/validation/error-message/index.ts: -------------------------------------------------------------------------------- 1 | export * from './error-message.component'; 2 | export * from './models/index'; 3 | -------------------------------------------------------------------------------- /lib/src/validation/error-message/models/error-message.ts: -------------------------------------------------------------------------------- 1 | export abstract class ErrorMessageResource { 2 | maxlength?: string; 3 | minlength?: string; 4 | pattern?: string; 5 | required?: string; 6 | } 7 | -------------------------------------------------------------------------------- /lib/src/validation/error-message/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './error-message'; 2 | -------------------------------------------------------------------------------- /lib/src/validation/index.ts: -------------------------------------------------------------------------------- 1 | export * from './error-message/index'; 2 | export * from './validation.component'; 3 | export * from './validation.module'; 4 | -------------------------------------------------------------------------------- /lib/src/validation/validation.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/src/validation/validation.component.scss: -------------------------------------------------------------------------------- 1 | $error-color: #F44336; 2 | $valid-color: #4CAF50; 3 | 4 | // border-bottom on select element is not apply correctly without this selector 5 | .select-wrapper input.select-dropdown.invalid, 6 | textarea.ng-invalid.ng-touched:focus { 7 | border-bottom: 1px solid $error-color; 8 | box-shadow: 0 1px 0 0 $error-color; 9 | } 10 | 11 | .select-wrapper input.select-dropdown.valid { 12 | border-bottom: 1px solid $valid-color; 13 | box-shadow: 0 1px 0 0 $valid-color; 14 | } 15 | 16 | input:not([type="checkbox"]):focus + label.active, 17 | textarea:focus + label.active { 18 | span.placeholder-required { 19 | color: $error-color; 20 | } 21 | } -------------------------------------------------------------------------------- /lib/src/validation/validation.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { MzErrorMessageComponent } from './error-message/index'; 5 | import { MzValidationComponent } from './validation.component'; 6 | 7 | @NgModule({ 8 | imports: [CommonModule], 9 | declarations: [ 10 | MzErrorMessageComponent, 11 | MzValidationComponent, 12 | ], 13 | entryComponents: [MzErrorMessageComponent], 14 | exports: [ 15 | MzErrorMessageComponent, 16 | MzValidationComponent, 17 | ], 18 | }) 19 | export class MzValidationModule { } 20 | -------------------------------------------------------------------------------- /lib/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [ 15 | "jquery", 16 | "materialize-css" 17 | ], 18 | "lib": [ 19 | "dom", 20 | "es2015" 21 | ] 22 | }, 23 | "angularCompilerOptions": { 24 | "annotateForClosureCompiler": true, 25 | "skipTemplateCodegen": true, 26 | "strictMetadataEmit": true, 27 | "fullTemplateTypeCheck": true, 28 | "strictInjectionParameters": true, 29 | "flatModuleId": "AUTOGENERATED", 30 | "flatModuleOutFile": "AUTOGENERATED" 31 | }, 32 | "exclude": [ 33 | "src/test.ts", 34 | "**/*.spec.ts" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /lib/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "jquery", 8 | "materialize-css", 9 | "node" 10 | ] 11 | }, 12 | "files": [ 13 | "src/test.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /lib/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "mz", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "mz", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/typings.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | readonly $: JQuery; 3 | } -------------------------------------------------------------------------------- /static.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "dist/demo/", 3 | "routes": { 4 | "/**": "/index.html" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2017", 17 | "dom" 18 | ], 19 | "paths": { 20 | "ngx-materialize": [ 21 | "lib/src" 22 | ] 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "highlight.js": "registry:dt/highlight.js#9.1.0+20161227120821" 4 | } 5 | } 6 | --------------------------------------------------------------------------------