├── .bazelignore ├── .bazelrc ├── .circleci ├── bazel.rc └── config.yml ├── .clang-format ├── .firebaserc ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── bug.md │ ├── feature---proposal.md │ ├── feature-proposal.md │ └── feature.md ├── angular-robot.yml └── branch-manager.yml ├── .gitignore ├── .travis.yml ├── BUILD.bazel ├── CHANGELOG.md ├── CODE_REVIEWS.md ├── CODING_STANDARDS.md ├── CONTRIBUTING.md ├── DEV_ENVIRONMENT.md ├── LICENSE ├── README.md ├── WORKSPACE ├── build-config.js ├── e2e ├── components │ ├── block-scroll-strategy-e2e.spec.ts │ ├── button-e2e.spec.ts │ ├── button-toggle-e2e.spec.ts │ ├── card-e2e.spec.ts │ ├── checkbox-e2e.spec.ts │ ├── dialog-e2e.spec.ts │ ├── expansion-e2e.spec.ts │ ├── grid-list-e2e.spec.ts │ ├── icon-e2e.spec.ts │ ├── input-e2e.spec.ts │ ├── list-e2e.spec.ts │ ├── menu-e2e.spec.ts │ ├── progress-bar-e2e.spec.ts │ ├── progress-spinner-e2e.spec.ts │ ├── radio-e2e.spec.ts │ ├── sidenav-e2e.spec.ts │ ├── slide-toggle-e2e.spec.ts │ ├── stepper-e2e.spec.ts │ ├── tabs-e2e.spec.ts │ ├── toolbar-e2e.spec.ts │ └── virtual-scroll-e2e.spec.ts ├── index-e2e.spec.ts ├── tsconfig.json └── util │ ├── actions.ts │ ├── asserts.ts │ ├── index.ts │ └── query.ts ├── firebase.json ├── guides ├── BUILD.bazel ├── bidirectionality.md ├── creating-a-custom-form-field-control.md ├── customizing-component-styles.md ├── elevation.md ├── getting-started.md ├── schematics.md ├── theming-your-components.md ├── theming.md └── typography.md ├── gulpfile.js ├── index.bzl ├── package.json ├── packages.bzl ├── scripts ├── bazel │ ├── build-packages.sh │ └── update-material-metadata-reexports.js ├── browserstack │ ├── start-tunnel.sh │ ├── stop-tunnel.sh │ └── wait-tunnel.sh ├── caretaking │ └── write-presubmit-scheduler.js ├── circleci │ ├── publish-snapshots.sh │ ├── run-browserstack-tests.sh │ ├── run-local-browser-tests.sh │ ├── run-saucelabs-tests.sh │ └── setup-angular-snapshots.js ├── deploy │ ├── deploy-cn.sh │ ├── publish-build-artifacts.sh │ └── publish-docs-content.sh └── saucelabs │ ├── start-tunnel.sh │ ├── stop-tunnel.sh │ └── wait-tunnel.sh ├── src ├── BUILD.bazel ├── README.md ├── a11y-demo │ ├── BUILD.bazel │ ├── a11y-demo-module.ts │ ├── a11y-demo-routes.ts │ ├── a11y-demo.html │ ├── a11y-demo.scss │ ├── a11y-demo.ts │ ├── a11y-material-module.ts │ ├── autocomplete │ │ ├── autocomplete-a11y.html │ │ ├── autocomplete-a11y.scss │ │ └── autocomplete-a11y.ts │ ├── button-toggle │ │ ├── button-toggle-a11y.html │ │ ├── button-toggle-a11y.scss │ │ └── button-toggle-a11y.ts │ ├── button │ │ ├── button-a11y.html │ │ ├── button-a11y.scss │ │ └── button-a11y.ts │ ├── card │ │ ├── assets │ │ │ ├── dachshund-avatar.jpg │ │ │ ├── dachshund.jpg │ │ │ ├── shiba-inu-avatar.jpg │ │ │ └── shiba-inu.jpg │ │ ├── card-a11y.html │ │ ├── card-a11y.scss │ │ └── card-a11y.ts │ ├── checkbox │ │ ├── checkbox-a11y.html │ │ ├── checkbox-a11y.scss │ │ └── checkbox-a11y.ts │ ├── chips │ │ ├── chips-a11y.html │ │ ├── chips-a11y.scss │ │ └── chips-a11y.ts │ ├── datepicker │ │ ├── datepicker-a11y.html │ │ ├── datepicker-a11y.scss │ │ └── datepicker-a11y.ts │ ├── dialog │ │ ├── dialog-a11y.html │ │ ├── dialog-a11y.scss │ │ ├── dialog-a11y.ts │ │ ├── dialog-address-form-a11y.html │ │ ├── dialog-fruit-a11y.html │ │ ├── dialog-neptune-a11y.html │ │ ├── dialog-neptune-iframe-a11y.html │ │ └── dialog-welcome-a11y.html │ ├── expansion │ │ ├── expansion-a11y.html │ │ ├── expansion-a11y.scss │ │ └── expansion-a11y.ts │ ├── grid-list │ │ ├── grid-list-a11y.html │ │ ├── grid-list-a11y.scss │ │ └── grid-list-a11y.ts │ ├── icon │ │ ├── icon-a11y.html │ │ └── icon-a11y.ts │ ├── input │ │ ├── input-a11y.html │ │ └── input-a11y.ts │ ├── list │ │ ├── list-a11y.html │ │ ├── list-a11y.scss │ │ └── list-a11y.ts │ ├── menu │ │ ├── menu-a11y.html │ │ ├── menu-a11y.scss │ │ └── menu-a11y.ts │ ├── progress-bar │ │ ├── progress-bar-a11y.html │ │ └── progress-bar-a11y.ts │ ├── progress-spinner │ │ ├── progress-spinner-a11y.html │ │ └── progress-spinner-a11y.ts │ ├── radio │ │ ├── radio-a11y.html │ │ ├── radio-a11y.scss │ │ └── radio-a11y.ts │ ├── select │ │ ├── select-a11y.html │ │ ├── select-a11y.scss │ │ └── select-a11y.ts │ ├── sidenav │ │ ├── basic-sidenav-a11y.html │ │ ├── basic-sidenav-a11y.ts │ │ ├── dual-sidenav-a11y.html │ │ ├── dual-sidenav-a11y.scss │ │ ├── dual-sidenav-a11y.ts │ │ ├── mobile-sidenav-a11y.html │ │ ├── mobile-sidenav-a11y.scss │ │ ├── mobile-sidenav-a11y.ts │ │ ├── shared.scss │ │ ├── sidenav-a11y.html │ │ └── sidenav-a11y.ts │ ├── slide-toggle │ │ ├── slide-toggle-a11y.html │ │ └── slide-toggle-a11y.ts │ ├── slider │ │ ├── slider-a11y.html │ │ ├── slider-a11y.scss │ │ └── slider-a11y.ts │ ├── snack-bar │ │ ├── snack-bar-a11y.html │ │ └── snack-bar-a11y.ts │ ├── table │ │ ├── table-a11y.html │ │ ├── table-a11y.scss │ │ └── table-a11y.ts │ ├── tabs │ │ ├── routes.ts │ │ ├── tabs-a11y.html │ │ ├── tabs-a11y.scss │ │ └── tabs-a11y.ts │ ├── toolbar │ │ ├── toolbar-a11y.html │ │ ├── toolbar-a11y.scss │ │ └── toolbar-a11y.ts │ └── tooltip │ │ ├── tooltip-a11y.html │ │ └── tooltip-a11y.ts ├── bazel-tsconfig-build.json ├── bazel-tsconfig-test.json ├── cdk-experimental │ ├── BUILD.bazel │ ├── dialog │ │ ├── BUILD.bazel │ │ ├── dialog-config.ts │ │ ├── dialog-container.html │ │ ├── dialog-container.scss │ │ ├── dialog-container.ts │ │ ├── dialog-injectors.ts │ │ ├── dialog-module.ts │ │ ├── dialog-ref.ts │ │ ├── dialog.spec.ts │ │ ├── dialog.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── drag-drop │ │ ├── drag-drop-registry.spec.ts │ │ ├── drag-drop-registry.ts │ │ └── drag-utils.spec.ts │ ├── index.ts │ ├── package.json │ ├── public-api.ts │ ├── scrolling │ │ ├── BUILD.bazel │ │ ├── auto-size-virtual-scroll.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── scrolling-module.ts │ │ ├── scrolling.md │ │ ├── tsconfig-build.json │ │ └── virtual-scroll-viewport.spec.ts │ ├── tsconfig-build.json │ ├── tsconfig-tests.json │ ├── tsconfig.json │ ├── typings.d.ts │ └── version.ts ├── cdk │ ├── BUILD.bazel │ ├── a11y │ │ ├── BUILD.bazel │ │ ├── _a11y.scss │ │ ├── a11y-module.ts │ │ ├── a11y-prebuilt.scss │ │ ├── a11y.md │ │ ├── aria-describer │ │ │ ├── aria-describer.spec.ts │ │ │ ├── aria-describer.ts │ │ │ ├── aria-reference.spec.ts │ │ │ └── aria-reference.ts │ │ ├── fake-mousedown.ts │ │ ├── focus-monitor │ │ │ ├── focus-monitor.spec.ts │ │ │ └── focus-monitor.ts │ │ ├── focus-trap │ │ │ ├── focus-trap.md │ │ │ ├── focus-trap.spec.ts │ │ │ └── focus-trap.ts │ │ ├── index.ts │ │ ├── interactivity-checker │ │ │ ├── interactivity-checker.md │ │ │ ├── interactivity-checker.spec.ts │ │ │ └── interactivity-checker.ts │ │ ├── key-manager │ │ │ ├── activedescendant-key-manager.ts │ │ │ ├── focus-key-manager.md │ │ │ ├── focus-key-manager.ts │ │ │ ├── list-key-manager.md │ │ │ ├── list-key-manager.spec.ts │ │ │ └── list-key-manager.ts │ │ ├── live-announcer │ │ │ ├── live-announcer-token.ts │ │ │ ├── live-announcer.md │ │ │ ├── live-announcer.spec.ts │ │ │ └── live-announcer.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── accordion │ │ ├── BUILD.bazel │ │ ├── accordion-item.spec.ts │ │ ├── accordion-item.ts │ │ ├── accordion-module.ts │ │ ├── accordion.spec.ts │ │ ├── accordion.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── bidi │ │ ├── BUILD.bazel │ │ ├── bidi-module.ts │ │ ├── bidi.md │ │ ├── dir-document-token.ts │ │ ├── dir.ts │ │ ├── directionality.spec.ts │ │ ├── directionality.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── coercion │ │ ├── BUILD.bazel │ │ ├── array.spec.ts │ │ ├── array.ts │ │ ├── boolean-property.spec.ts │ │ ├── boolean-property.ts │ │ ├── coercion.md │ │ ├── css-pixel-value.spec.ts │ │ ├── css-pixel-value.ts │ │ ├── element.spec.ts │ │ ├── element.ts │ │ ├── index.ts │ │ ├── number-property.spec.ts │ │ ├── number-property.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── collections │ │ ├── BUILD.bazel │ │ ├── array-data-source.ts │ │ ├── collection-viewer.ts │ │ ├── collections.md │ │ ├── data-source.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── selection.spec.ts │ │ ├── selection.ts │ │ ├── tree-adapter.ts │ │ ├── tsconfig-build.json │ │ ├── unique-selection-dispatcher.spec.ts │ │ └── unique-selection-dispatcher.ts │ ├── drag-drop │ │ ├── BUILD.bazel │ │ ├── directives │ │ │ ├── drag-handle.ts │ │ │ ├── drag-placeholder.ts │ │ │ ├── drag-preview.ts │ │ │ ├── drag.spec.ts │ │ │ ├── drag.ts │ │ │ ├── drop-list-group.ts │ │ │ └── drop-list.ts │ │ ├── drag-drop-module.ts │ │ ├── drag-drop-registry.spec.ts │ │ ├── drag-drop-registry.ts │ │ ├── drag-drop.md │ │ ├── drag-events.ts │ │ ├── drag-parent.ts │ │ ├── drag-ref.ts │ │ ├── drag-styling.ts │ │ ├── drag-utils.spec.ts │ │ ├── drag-utils.ts │ │ ├── drop-list-container.ts │ │ ├── drop-list-ref.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── transition-duration.ts │ │ └── tsconfig-build.json │ ├── index.ts │ ├── keycodes │ │ ├── BUILD.bazel │ │ ├── index.ts │ │ ├── keycodes.md │ │ ├── keycodes.ts │ │ ├── modifiers.spec.ts │ │ ├── modifiers.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── layout │ │ ├── BUILD.bazel │ │ ├── breakpoints-observer.md │ │ ├── breakpoints-observer.spec.ts │ │ ├── breakpoints-observer.ts │ │ ├── breakpoints.ts │ │ ├── index.ts │ │ ├── layout-module.ts │ │ ├── layout.md │ │ ├── media-matcher.md │ │ ├── media-matcher.spec.ts │ │ ├── media-matcher.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── observers │ │ ├── BUILD.bazel │ │ ├── index.ts │ │ ├── observe-content.spec.ts │ │ ├── observe-content.ts │ │ ├── observers.md │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── overlay │ │ ├── BUILD.bazel │ │ ├── _overlay.scss │ │ ├── fullscreen-overlay-container.spec.ts │ │ ├── fullscreen-overlay-container.ts │ │ ├── index.ts │ │ ├── keyboard │ │ │ ├── overlay-keyboard-dispatcher.spec.ts │ │ │ └── overlay-keyboard-dispatcher.ts │ │ ├── overlay-config.ts │ │ ├── overlay-container.spec.ts │ │ ├── overlay-container.ts │ │ ├── overlay-directives.spec.ts │ │ ├── overlay-directives.ts │ │ ├── overlay-module.ts │ │ ├── overlay-prebuilt.scss │ │ ├── overlay-ref.ts │ │ ├── overlay-reference.ts │ │ ├── overlay.md │ │ ├── overlay.spec.ts │ │ ├── overlay.ts │ │ ├── position │ │ │ ├── connected-position-strategy.spec.ts │ │ │ ├── connected-position-strategy.ts │ │ │ ├── connected-position.ts │ │ │ ├── flexible-connected-position-strategy.spec.ts │ │ │ ├── flexible-connected-position-strategy.ts │ │ │ ├── global-position-strategy.spec.ts │ │ │ ├── global-position-strategy.ts │ │ │ ├── overlay-position-builder.ts │ │ │ ├── position-strategy.ts │ │ │ └── scroll-clip.ts │ │ ├── public-api.ts │ │ ├── scroll │ │ │ ├── block-scroll-strategy.spec.ts │ │ │ ├── block-scroll-strategy.ts │ │ │ ├── close-scroll-strategy.spec.ts │ │ │ ├── close-scroll-strategy.ts │ │ │ ├── index.ts │ │ │ ├── noop-scroll-strategy.ts │ │ │ ├── reposition-scroll-strategy.spec.ts │ │ │ ├── reposition-scroll-strategy.ts │ │ │ ├── scroll-strategy-options.ts │ │ │ ├── scroll-strategy.md │ │ │ └── scroll-strategy.ts │ │ └── tsconfig-build.json │ ├── package.json │ ├── platform │ │ ├── BUILD.bazel │ │ ├── features │ │ │ ├── input-types.ts │ │ │ ├── passive-listeners.ts │ │ │ └── scrolling.ts │ │ ├── index.ts │ │ ├── platform-module.ts │ │ ├── platform.md │ │ ├── platform.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── portal │ │ ├── BUILD.bazel │ │ ├── dom-portal-outlet.ts │ │ ├── index.ts │ │ ├── portal-directives.ts │ │ ├── portal-errors.ts │ │ ├── portal-injector.ts │ │ ├── portal.md │ │ ├── portal.spec.ts │ │ ├── portal.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── public-api.ts │ ├── schematics │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── collection.json │ │ ├── index.ts │ │ ├── migration.json │ │ ├── ng-add │ │ │ ├── index.spec.ts │ │ │ ├── index.ts │ │ │ ├── package-config.ts │ │ │ ├── schema.json │ │ │ └── schema.ts │ │ ├── ng-generate │ │ │ └── drag-drop │ │ │ │ ├── files │ │ │ │ └── __path__ │ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ │ ├── __name@dasherize__.component.__styleext__ │ │ │ │ │ ├── __name@dasherize__.component.html │ │ │ │ │ ├── __name@dasherize__.component.spec.ts │ │ │ │ │ └── __name@dasherize__.component.ts │ │ │ │ ├── index.spec.ts │ │ │ │ ├── index.ts │ │ │ │ ├── schema.json │ │ │ │ └── schema.ts │ │ ├── ng-update │ │ │ ├── data │ │ │ │ ├── attribute-selectors.ts │ │ │ │ ├── class-names.ts │ │ │ │ ├── constructor-checks.ts │ │ │ │ ├── css-selectors.ts │ │ │ │ ├── element-selectors.ts │ │ │ │ ├── index.ts │ │ │ │ ├── input-names.ts │ │ │ │ ├── method-call-checks.ts │ │ │ │ ├── output-names.ts │ │ │ │ └── property-names.ts │ │ │ ├── html-parsing │ │ │ │ ├── angular.ts │ │ │ │ └── elements.ts │ │ │ ├── index.ts │ │ │ ├── public-api.ts │ │ │ ├── target-version.ts │ │ │ ├── test-cases │ │ │ │ ├── index.spec.ts │ │ │ │ ├── misc │ │ │ │ │ ├── method-call-checks.spec.ts │ │ │ │ │ └── method-call-checks_input.ts │ │ │ │ ├── v6-test-cases.spec.ts │ │ │ │ ├── v6 │ │ │ │ │ ├── attribute-selectors_expected_output.ts │ │ │ │ │ ├── attribute-selectors_input.ts │ │ │ │ │ ├── class-names_expected_output.ts │ │ │ │ │ ├── class-names_input.ts │ │ │ │ │ ├── input-names_expected_output.ts │ │ │ │ │ ├── input-names_input.ts │ │ │ │ │ ├── property-names_expected_output.ts │ │ │ │ │ └── property-names_input.ts │ │ │ │ ├── v7-test-cases.spec.ts │ │ │ │ └── v7 │ │ │ │ │ ├── property-names_expected_output.ts │ │ │ │ │ └── property-names_input.ts │ │ │ ├── tslint │ │ │ │ ├── component-file.ts │ │ │ │ ├── component-walker.spec.ts │ │ │ │ ├── component-walker.ts │ │ │ │ └── external-failure-walker.ts │ │ │ ├── typescript │ │ │ │ ├── base-types.ts │ │ │ │ ├── imports.ts │ │ │ │ ├── literal.ts │ │ │ │ └── module-specifiers.ts │ │ │ ├── update-schematic.md │ │ │ ├── upgrade-data.ts │ │ │ └── upgrade-rules │ │ │ │ ├── attribute-selectors │ │ │ │ ├── attributeSelectorsStringLiteralRule.ts │ │ │ │ ├── attributeSelectorsStylesheetRule.ts │ │ │ │ └── attributeSelectorsTemplateRule.ts │ │ │ │ ├── class-inheritance │ │ │ │ └── classInheritanceCheckRule.ts │ │ │ │ ├── class-names │ │ │ │ └── classNamesIdentifierRule.ts │ │ │ │ ├── css-selectors │ │ │ │ ├── cssSelectorsStringLiteralRule.ts │ │ │ │ ├── cssSelectorsStylesheetRule.ts │ │ │ │ └── cssSelectorsTemplateRule.ts │ │ │ │ ├── element-selectors │ │ │ │ ├── elementSelectorsStringLiteralRule.ts │ │ │ │ ├── elementSelectorsStylesheetRule.ts │ │ │ │ └── elementSelectorsTemplateRule.ts │ │ │ │ ├── index.ts │ │ │ │ ├── input-names │ │ │ │ ├── inputNamesStylesheetRule.ts │ │ │ │ └── inputNamesTemplateRule.ts │ │ │ │ ├── misc-checks │ │ │ │ └── checkTemplateMiscRule.ts │ │ │ │ ├── output-names │ │ │ │ └── outputNamesTemplateRule.ts │ │ │ │ ├── project-tsconfig-paths.spec.ts │ │ │ │ ├── project-tsconfig-paths.ts │ │ │ │ ├── property-names │ │ │ │ └── propertyNamesAccessRule.ts │ │ │ │ ├── signature-check │ │ │ │ ├── constructorSignatureCheckRule.ts │ │ │ │ └── methodCallsCheckRule.ts │ │ │ │ └── tslint-config.ts │ │ ├── testing │ │ │ ├── BUILD.bazel │ │ │ ├── file-content.ts │ │ │ ├── index.ts │ │ │ ├── post-scheduled-tasks.ts │ │ │ ├── test-app.ts │ │ │ └── test-case-setup.ts │ │ ├── tsconfig.json │ │ └── utils │ │ │ ├── ast.ts │ │ │ ├── ast │ │ │ └── ng-module-imports.ts │ │ │ ├── build-component.ts │ │ │ ├── get-project.ts │ │ │ ├── html-head-element.ts │ │ │ ├── index.ts │ │ │ ├── parse5-element.ts │ │ │ ├── project-main-file.ts │ │ │ ├── project-style-file.ts │ │ │ ├── project-targets.ts │ │ │ ├── schematic-options.ts │ │ │ └── version-agnostic-typescript.ts │ ├── scrolling │ │ ├── BUILD.bazel │ │ ├── fixed-size-virtual-scroll.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── scroll-dispatcher.spec.ts │ │ ├── scroll-dispatcher.ts │ │ ├── scrollable.spec.ts │ │ ├── scrollable.ts │ │ ├── scrolling-module.ts │ │ ├── scrolling.md │ │ ├── tsconfig-build.json │ │ ├── viewport-ruler.spec.ts │ │ ├── viewport-ruler.ts │ │ ├── virtual-for-of.ts │ │ ├── virtual-scroll-strategy.ts │ │ ├── virtual-scroll-viewport.html │ │ ├── virtual-scroll-viewport.scss │ │ ├── virtual-scroll-viewport.spec.ts │ │ └── virtual-scroll-viewport.ts │ ├── stepper │ │ ├── BUILD.bazel │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── step-header.ts │ │ ├── step-label.ts │ │ ├── stepper-button.ts │ │ ├── stepper-module.ts │ │ ├── stepper.md │ │ ├── stepper.ts │ │ └── tsconfig-build.json │ ├── table │ │ ├── BUILD.bazel │ │ ├── can-stick.ts │ │ ├── cell.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── render-rows.md │ │ ├── row.ts │ │ ├── sticky-styler.ts │ │ ├── table-errors.ts │ │ ├── table-module.ts │ │ ├── table.md │ │ ├── table.spec.ts │ │ ├── table.ts │ │ └── tsconfig-build.json │ ├── testing │ │ ├── BUILD.bazel │ │ ├── dispatch-events.ts │ │ ├── element-focus.ts │ │ ├── event-objects.ts │ │ ├── index.ts │ │ ├── mock-ng-zone.ts │ │ ├── public-api.ts │ │ ├── type-in-element.ts │ │ └── wrapped-error-message.ts │ ├── text-field │ │ ├── BUILD.bazel │ │ ├── _text-field.scss │ │ ├── autofill.spec.ts │ │ ├── autofill.ts │ │ ├── autosize.spec.ts │ │ ├── autosize.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── text-field-module.ts │ │ ├── text-field-prebuilt.scss │ │ ├── text-field.md │ │ └── tsconfig-build.json │ ├── tree │ │ ├── BUILD.bazel │ │ ├── control │ │ │ ├── base-tree-control.ts │ │ │ ├── flat-tree-control.spec.ts │ │ │ ├── flat-tree-control.ts │ │ │ ├── nested-tree-control.spec.ts │ │ │ ├── nested-tree-control.ts │ │ │ └── tree-control.ts │ │ ├── index.ts │ │ ├── nested-node.ts │ │ ├── node.ts │ │ ├── outlet.ts │ │ ├── padding.ts │ │ ├── public-api.ts │ │ ├── toggle.ts │ │ ├── tree-errors.ts │ │ ├── tree-module.ts │ │ ├── tree.md │ │ ├── tree.spec.ts │ │ ├── tree.ts │ │ └── tsconfig-build.json │ ├── tsconfig-build.json │ ├── tsconfig-tests.json │ ├── tsconfig.json │ ├── typings.d.ts │ └── version.ts ├── dev-app │ ├── BUILD.bazel │ ├── autocomplete │ │ ├── autocomplete-demo.html │ │ ├── autocomplete-demo.scss │ │ └── autocomplete-demo.ts │ ├── badge │ │ ├── badge-demo.html │ │ ├── badge-demo.scss │ │ └── badge-demo.ts │ ├── baseline │ │ ├── baseline-demo.html │ │ ├── baseline-demo.scss │ │ └── baseline-demo.ts │ ├── bottom-sheet │ │ ├── bottom-sheet-demo.html │ │ ├── bottom-sheet-demo.scss │ │ └── bottom-sheet-demo.ts │ ├── button-toggle │ │ ├── button-toggle-demo.html │ │ ├── button-toggle-demo.scss │ │ └── button-toggle-demo.ts │ ├── button │ │ ├── button-demo.html │ │ ├── button-demo.scss │ │ └── button-demo.ts │ ├── card │ │ ├── card-demo.html │ │ ├── card-demo.scss │ │ └── card-demo.ts │ ├── checkbox │ │ ├── checkbox-demo.html │ │ ├── checkbox-demo.scss │ │ ├── checkbox-demo.ts │ │ └── nested-checklist.html │ ├── chips │ │ ├── chips-demo.html │ │ ├── chips-demo.scss │ │ └── chips-demo.ts │ ├── connected-overlay │ │ ├── connected-overlay-demo.html │ │ ├── connected-overlay-demo.scss │ │ └── connected-overlay-demo.ts │ ├── dataset │ │ ├── colors.ts │ │ └── names.ts │ ├── datepicker │ │ ├── custom-header.html │ │ ├── custom-header.scss │ │ ├── datepicker-demo.html │ │ ├── datepicker-demo.scss │ │ └── datepicker-demo.ts │ ├── dev-app-module.ts │ ├── dev-app.html │ ├── dev-app.scss │ ├── dev-app.ts │ ├── dialog │ │ ├── dialog-demo.html │ │ ├── dialog-demo.scss │ │ └── dialog-demo.ts │ ├── drag-drop │ │ ├── drag-drop-demo.html │ │ ├── drag-drop-demo.scss │ │ └── drag-drop-demo.ts │ ├── drawer │ │ ├── drawer-demo.html │ │ ├── drawer-demo.scss │ │ └── drawer-demo.ts │ ├── example │ │ ├── example-list.ts │ │ ├── example-module.ts │ │ └── example.ts │ ├── examples-page │ │ └── examples-page.ts │ ├── expansion │ │ ├── expansion-demo.html │ │ ├── expansion-demo.scss │ │ └── expansion-demo.ts │ ├── favicon.ico │ ├── focus-origin │ │ ├── focus-origin-demo.html │ │ ├── focus-origin-demo.scss │ │ └── focus-origin-demo.ts │ ├── gestures │ │ ├── gestures-demo.html │ │ ├── gestures-demo.scss │ │ └── gestures-demo.ts │ ├── grid-list │ │ ├── grid-list-demo.html │ │ ├── grid-list-demo.scss │ │ └── grid-list-demo.ts │ ├── icon │ │ ├── assets │ │ │ ├── core-icon-set.svg │ │ │ ├── search-icon.svg │ │ │ └── thumbup-icon.svg │ │ ├── icon-demo.html │ │ ├── icon-demo.scss │ │ └── icon-demo.ts │ ├── index.html │ ├── input │ │ ├── input-demo.html │ │ ├── input-demo.scss │ │ └── input-demo.ts │ ├── list │ │ ├── list-demo.html │ │ ├── list-demo.scss │ │ └── list-demo.ts │ ├── live-announcer │ │ ├── live-announcer-demo.html │ │ └── live-announcer-demo.ts │ ├── main-aot.ts │ ├── main.ts │ ├── material-module.ts │ ├── menu │ │ ├── menu-demo.html │ │ ├── menu-demo.scss │ │ └── menu-demo.ts │ ├── paginator │ │ ├── paginator-demo.html │ │ ├── paginator-demo.scss │ │ └── paginator-demo.ts │ ├── platform │ │ ├── platform-demo.html │ │ └── platform-demo.ts │ ├── portal │ │ ├── portal-demo.html │ │ ├── portal-demo.scss │ │ └── portal-demo.ts │ ├── progress-bar │ │ ├── progress-bar-demo.html │ │ ├── progress-bar-demo.scss │ │ └── progress-bar-demo.ts │ ├── progress-spinner │ │ ├── progress-spinner-demo.html │ │ ├── progress-spinner-demo.scss │ │ └── progress-spinner-demo.ts │ ├── radio │ │ ├── radio-demo.html │ │ ├── radio-demo.scss │ │ └── radio-demo.ts │ ├── ripple │ │ ├── ripple-demo.html │ │ ├── ripple-demo.scss │ │ └── ripple-demo.ts │ ├── routes.ts │ ├── screen-type │ │ ├── screen-type-demo.html │ │ ├── screen-type-demo.scss │ │ └── screen-type-demo.ts │ ├── select │ │ ├── select-demo.html │ │ ├── select-demo.scss │ │ └── select-demo.ts │ ├── sidenav │ │ ├── sidenav-demo.html │ │ ├── sidenav-demo.scss │ │ └── sidenav-demo.ts │ ├── slide-toggle │ │ ├── slide-toggle-demo.html │ │ ├── slide-toggle-demo.scss │ │ └── slide-toggle-demo.ts │ ├── slider │ │ ├── slider-demo.html │ │ └── slider-demo.ts │ ├── snack-bar │ │ ├── snack-bar-demo.html │ │ ├── snack-bar-demo.scss │ │ └── snack-bar-demo.ts │ ├── stepper │ │ ├── stepper-demo.html │ │ └── stepper-demo.ts │ ├── system-config.ts │ ├── system-rxjs-operators.ts │ ├── table │ │ ├── table-demo-module.ts │ │ └── table-demo.ts │ ├── tabs │ │ ├── tabs-demo.html │ │ └── tabs-demo.ts │ ├── theme.scss │ ├── toolbar │ │ ├── toolbar-demo.html │ │ ├── toolbar-demo.scss │ │ └── toolbar-demo.ts │ ├── tooltip │ │ ├── tooltip-demo.html │ │ └── tooltip-demo.ts │ ├── tree │ │ ├── checklist-tree-demo │ │ │ ├── checklist-database.ts │ │ │ ├── checklist-nested-tree-demo.html │ │ │ ├── checklist-nested-tree-demo.scss │ │ │ ├── checklist-nested-tree-demo.ts │ │ │ ├── checklist-tree-demo.html │ │ │ ├── checklist-tree-demo.scss │ │ │ └── checklist-tree-demo.ts │ │ ├── dynamic-tree-demo │ │ │ ├── dynamic-database.ts │ │ │ ├── dynamic-tree-demo.html │ │ │ ├── dynamic-tree-demo.scss │ │ │ └── dynamic-tree-demo.ts │ │ ├── file-database.ts │ │ ├── loadmore-tree-demo │ │ │ ├── loadmore-database.ts │ │ │ ├── loadmore-tree-demo.html │ │ │ ├── loadmore-tree-demo.scss │ │ │ └── loadmore-tree-demo.ts │ │ ├── tree-demo-module.ts │ │ ├── tree-demo.html │ │ ├── tree-demo.scss │ │ └── tree-demo.ts │ ├── tsconfig-aot.json │ ├── tsconfig-build.json │ ├── tsconfig.json │ ├── typings.d.ts │ ├── typography │ │ ├── typography-demo.html │ │ ├── typography-demo.scss │ │ └── typography-demo.ts │ └── virtual-scroll │ │ ├── virtual-scroll-demo.html │ │ ├── virtual-scroll-demo.scss │ │ └── virtual-scroll-demo.ts ├── e2e-app │ ├── block-scroll-strategy │ │ ├── block-scroll-strategy-e2e.css │ │ ├── block-scroll-strategy-e2e.html │ │ └── block-scroll-strategy-e2e.ts │ ├── button │ │ ├── button-e2e.html │ │ └── button-e2e.ts │ ├── checkbox │ │ ├── checkbox-e2e.html │ │ └── checkbox-e2e.ts │ ├── dialog │ │ ├── dialog-e2e.html │ │ └── dialog-e2e.ts │ ├── e2e-app-module.ts │ ├── e2e-app-types.d.ts │ ├── e2e-app │ │ ├── e2e-app.html │ │ ├── e2e-app.ts │ │ └── routes.ts │ ├── favicon.ico │ ├── grid-list │ │ ├── grid-list-e2e.html │ │ └── grid-list-e2e.ts │ ├── icon │ │ ├── icon-e2e.html │ │ └── icon-e2e.ts │ ├── index.html │ ├── input │ │ ├── input-e2e.html │ │ └── input-e2e.ts │ ├── main.ts │ ├── menu │ │ ├── menu-e2e.html │ │ └── menu-e2e.ts │ ├── progress-bar │ │ ├── progress-bar-e2e.html │ │ └── progress-bar-e2e.ts │ ├── progress-spinner │ │ ├── progress-spinner-e2e.html │ │ └── progress-spinner-e2e.ts │ ├── radio │ │ ├── radio-e2e.html │ │ └── radio-e2e.ts │ ├── sidenav │ │ ├── sidenav-e2e.html │ │ └── sidenav-e2e.ts │ ├── slide-toggle │ │ ├── slide-toggle-e2e.html │ │ └── slide-toggle-e2e.ts │ ├── system-config.ts │ ├── tabs │ │ ├── tabs-e2e.html │ │ └── tabs-e2e.ts │ ├── tsconfig-build.json │ ├── tsconfig.json │ └── virtual-scroll │ │ ├── virtual-scroll-e2e.css │ │ ├── virtual-scroll-e2e.html │ │ └── virtual-scroll-e2e.ts ├── lib │ ├── BUILD.bazel │ ├── autocomplete │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _autocomplete-theme.scss │ │ ├── autocomplete-module.ts │ │ ├── autocomplete-origin.ts │ │ ├── autocomplete-trigger.ts │ │ ├── autocomplete.html │ │ ├── autocomplete.md │ │ ├── autocomplete.scss │ │ ├── autocomplete.spec.ts │ │ ├── autocomplete.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── badge │ │ ├── BUILD.bazel │ │ ├── _badge-theme.scss │ │ ├── badge-module.ts │ │ ├── badge.md │ │ ├── badge.spec.ts │ │ ├── badge.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── bottom-sheet │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _bottom-sheet-theme.scss │ │ ├── bottom-sheet-animations.ts │ │ ├── bottom-sheet-config.ts │ │ ├── bottom-sheet-container.html │ │ ├── bottom-sheet-container.scss │ │ ├── bottom-sheet-container.ts │ │ ├── bottom-sheet-module.ts │ │ ├── bottom-sheet-ref.ts │ │ ├── bottom-sheet.md │ │ ├── bottom-sheet.spec.ts │ │ ├── bottom-sheet.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── button-toggle │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _button-toggle-theme.scss │ │ ├── button-toggle-module.ts │ │ ├── button-toggle.html │ │ ├── button-toggle.md │ │ ├── button-toggle.scss │ │ ├── button-toggle.spec.ts │ │ ├── button-toggle.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── button │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _button-base.scss │ │ ├── _button-theme.scss │ │ ├── button-module.ts │ │ ├── button.html │ │ ├── button.md │ │ ├── button.scss │ │ ├── button.spec.ts │ │ ├── button.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── card │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _card-theme.scss │ │ ├── card-header.html │ │ ├── card-module.ts │ │ ├── card-title-group.html │ │ ├── card.html │ │ ├── card.md │ │ ├── card.scss │ │ ├── card.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── checkbox │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _checkbox-theme.scss │ │ ├── checkbox-config.ts │ │ ├── checkbox-module.ts │ │ ├── checkbox-required-validator.ts │ │ ├── checkbox.html │ │ ├── checkbox.md │ │ ├── checkbox.scss │ │ ├── checkbox.spec.ts │ │ ├── checkbox.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── chips │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _chips-theme.scss │ │ ├── chip-default-options.ts │ │ ├── chip-input.spec.ts │ │ ├── chip-input.ts │ │ ├── chip-list.spec.ts │ │ ├── chip-list.ts │ │ ├── chip-remove.spec.ts │ │ ├── chip-text-control.ts │ │ ├── chip.spec.ts │ │ ├── chip.ts │ │ ├── chips-module.ts │ │ ├── chips.md │ │ ├── chips.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── core │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _core.scss │ │ ├── animation │ │ │ └── animation.ts │ │ ├── common-behaviors │ │ │ ├── color.spec.ts │ │ │ ├── color.ts │ │ │ ├── common-module.ts │ │ │ ├── constructor.ts │ │ │ ├── disable-ripple.spec.ts │ │ │ ├── disable-ripple.ts │ │ │ ├── disabled.spec.ts │ │ │ ├── disabled.ts │ │ │ ├── error-state.ts │ │ │ ├── index.ts │ │ │ ├── initialized.spec.ts │ │ │ ├── initialized.ts │ │ │ ├── tabindex.spec.ts │ │ │ └── tabindex.ts │ │ ├── datetime │ │ │ ├── date-adapter.ts │ │ │ ├── date-formats.ts │ │ │ ├── index.ts │ │ │ ├── native-date-adapter.spec.ts │ │ │ ├── native-date-adapter.ts │ │ │ └── native-date-formats.ts │ │ ├── error │ │ │ └── error-options.ts │ │ ├── gestures │ │ │ ├── gesture-annotations.ts │ │ │ ├── gesture-config.spec.ts │ │ │ └── gesture-config.ts │ │ ├── index.ts │ │ ├── label │ │ │ └── label-options.ts │ │ ├── line │ │ │ └── line.ts │ │ ├── month-constants.ts │ │ ├── option │ │ │ ├── _optgroup-theme.scss │ │ │ ├── _option-theme.scss │ │ │ ├── index.ts │ │ │ ├── optgroup.html │ │ │ ├── optgroup.scss │ │ │ ├── optgroup.ts │ │ │ ├── option.html │ │ │ ├── option.scss │ │ │ ├── option.spec.ts │ │ │ └── option.ts │ │ ├── public-api.ts │ │ ├── ripple │ │ │ ├── _ripple.scss │ │ │ ├── index.ts │ │ │ ├── ripple-ref.ts │ │ │ ├── ripple-renderer.ts │ │ │ ├── ripple.md │ │ │ ├── ripple.spec.ts │ │ │ └── ripple.ts │ │ ├── selection │ │ │ ├── index.ts │ │ │ └── pseudo-checkbox │ │ │ │ ├── _pseudo-checkbox-theme.scss │ │ │ │ ├── pseudo-checkbox.scss │ │ │ │ └── pseudo-checkbox.ts │ │ ├── style │ │ │ ├── _button-common.scss │ │ │ ├── _checkbox-common.scss │ │ │ ├── _elevation.scss │ │ │ ├── _form-common.scss │ │ │ ├── _layout-common.scss │ │ │ ├── _list-common.scss │ │ │ ├── _menu-common.scss │ │ │ ├── _noop-animation.scss │ │ │ ├── _variables.scss │ │ │ └── _vendor-prefixes.scss │ │ ├── theming │ │ │ ├── _all-theme.scss │ │ │ ├── _palette.scss │ │ │ ├── _theming.scss │ │ │ └── prebuilt │ │ │ │ ├── deeppurple-amber.scss │ │ │ │ ├── indigo-pink.scss │ │ │ │ ├── pink-bluegrey.scss │ │ │ │ └── purple-green.scss │ │ ├── tsconfig-build.json │ │ ├── typings.d.ts │ │ └── typography │ │ │ ├── _all-typography.scss │ │ │ ├── _typography-utils.scss │ │ │ └── _typography.scss │ ├── datepicker │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _datepicker-theme.scss │ │ ├── calendar-body.html │ │ ├── calendar-body.scss │ │ ├── calendar-body.spec.ts │ │ ├── calendar-body.ts │ │ ├── calendar-header.html │ │ ├── calendar-header.spec.ts │ │ ├── calendar.html │ │ ├── calendar.scss │ │ ├── calendar.spec.ts │ │ ├── calendar.ts │ │ ├── datepicker-animations.ts │ │ ├── datepicker-content.html │ │ ├── datepicker-content.scss │ │ ├── datepicker-errors.ts │ │ ├── datepicker-input.ts │ │ ├── datepicker-intl.ts │ │ ├── datepicker-module.ts │ │ ├── datepicker-toggle.html │ │ ├── datepicker-toggle.scss │ │ ├── datepicker-toggle.ts │ │ ├── datepicker.md │ │ ├── datepicker.spec.ts │ │ ├── datepicker.ts │ │ ├── index.ts │ │ ├── month-view.html │ │ ├── month-view.spec.ts │ │ ├── month-view.ts │ │ ├── multi-year-view.html │ │ ├── multi-year-view.spec.ts │ │ ├── multi-year-view.ts │ │ ├── public-api.ts │ │ ├── tsconfig-build.json │ │ ├── year-view.html │ │ ├── year-view.spec.ts │ │ └── year-view.ts │ ├── dialog │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _dialog-theme.scss │ │ ├── dialog-animations.ts │ │ ├── dialog-config.ts │ │ ├── dialog-container.html │ │ ├── dialog-container.ts │ │ ├── dialog-content-directives.ts │ │ ├── dialog-module.ts │ │ ├── dialog-ref.ts │ │ ├── dialog.md │ │ ├── dialog.scss │ │ ├── dialog.spec.ts │ │ ├── dialog.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── divider │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _divider-offset.scss │ │ ├── _divider-theme.scss │ │ ├── divider-module.ts │ │ ├── divider.md │ │ ├── divider.scss │ │ ├── divider.spec.ts │ │ ├── divider.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── expansion │ │ ├── BUILD.bazel │ │ ├── _expansion-theme.scss │ │ ├── accordion-base.ts │ │ ├── accordion.spec.ts │ │ ├── accordion.ts │ │ ├── expansion-animations.ts │ │ ├── expansion-module.ts │ │ ├── expansion-panel-content.ts │ │ ├── expansion-panel-header.html │ │ ├── expansion-panel-header.scss │ │ ├── expansion-panel-header.ts │ │ ├── expansion-panel.html │ │ ├── expansion-panel.scss │ │ ├── expansion-panel.ts │ │ ├── expansion.md │ │ ├── expansion.spec.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── form-field │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _form-field-fill-theme.scss │ │ ├── _form-field-legacy-theme.scss │ │ ├── _form-field-outline-theme.scss │ │ ├── _form-field-standard-theme.scss │ │ ├── _form-field-theme.scss │ │ ├── error.ts │ │ ├── form-field-animations.ts │ │ ├── form-field-control.ts │ │ ├── form-field-errors.ts │ │ ├── form-field-fill.scss │ │ ├── form-field-input.scss │ │ ├── form-field-legacy.scss │ │ ├── form-field-module.ts │ │ ├── form-field-outline.scss │ │ ├── form-field-standard.scss │ │ ├── form-field.html │ │ ├── form-field.md │ │ ├── form-field.scss │ │ ├── form-field.ts │ │ ├── hint.ts │ │ ├── index.ts │ │ ├── label.ts │ │ ├── placeholder.ts │ │ ├── prefix.ts │ │ ├── public-api.ts │ │ ├── suffix.ts │ │ └── tsconfig-build.json │ ├── grid-list │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _grid-list-theme.scss │ │ ├── grid-list-base.ts │ │ ├── grid-list-module.ts │ │ ├── grid-list.html │ │ ├── grid-list.md │ │ ├── grid-list.scss │ │ ├── grid-list.spec.ts │ │ ├── grid-list.ts │ │ ├── grid-tile-text.html │ │ ├── grid-tile.html │ │ ├── grid-tile.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── tile-coordinator.ts │ │ ├── tile-styler.ts │ │ └── tsconfig-build.json │ ├── icon │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _icon-theme.scss │ │ ├── fake-svgs.ts │ │ ├── icon-module.ts │ │ ├── icon-registry.ts │ │ ├── icon.md │ │ ├── icon.scss │ │ ├── icon.spec.ts │ │ ├── icon.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── index.ts │ ├── input │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _input-theme.scss │ │ ├── autosize.ts │ │ ├── index.ts │ │ ├── input-errors.ts │ │ ├── input-module.ts │ │ ├── input-value-accessor.ts │ │ ├── input.md │ │ ├── input.spec.ts │ │ ├── input.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── list │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _list-theme.scss │ │ ├── index.ts │ │ ├── list-item.html │ │ ├── list-module.ts │ │ ├── list-option.html │ │ ├── list.html │ │ ├── list.md │ │ ├── list.scss │ │ ├── list.spec.ts │ │ ├── list.ts │ │ ├── public-api.ts │ │ ├── selection-list.spec.ts │ │ ├── selection-list.ts │ │ └── tsconfig-build.json │ ├── menu │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _menu-theme.scss │ │ ├── index.ts │ │ ├── menu-animations.ts │ │ ├── menu-content.ts │ │ ├── menu-directive.ts │ │ ├── menu-errors.ts │ │ ├── menu-item.html │ │ ├── menu-item.ts │ │ ├── menu-module.ts │ │ ├── menu-panel.ts │ │ ├── menu-positions.ts │ │ ├── menu-trigger.ts │ │ ├── menu.html │ │ ├── menu.md │ │ ├── menu.scss │ │ ├── menu.spec.ts │ │ ├── menu.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── package.json │ ├── paginator │ │ ├── BUILD.bazel │ │ ├── _paginator-theme.scss │ │ ├── index.ts │ │ ├── paginator-intl.ts │ │ ├── paginator-module.ts │ │ ├── paginator.html │ │ ├── paginator.md │ │ ├── paginator.scss │ │ ├── paginator.spec.ts │ │ ├── paginator.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── prebuilt-themes │ │ └── BUILD.bazel │ ├── progress-bar │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _progress-bar-theme.scss │ │ ├── index.ts │ │ ├── progress-bar-module.ts │ │ ├── progress-bar.html │ │ ├── progress-bar.md │ │ ├── progress-bar.scss │ │ ├── progress-bar.spec.ts │ │ ├── progress-bar.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── progress-spinner │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _progress-spinner-theme.scss │ │ ├── index.ts │ │ ├── progress-spinner-module.ts │ │ ├── progress-spinner.html │ │ ├── progress-spinner.md │ │ ├── progress-spinner.scss │ │ ├── progress-spinner.spec.ts │ │ ├── progress-spinner.ts │ │ ├── public-api.ts │ │ └── tsconfig-build.json │ ├── public-api.ts │ ├── radio │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _radio-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── radio-module.ts │ │ ├── radio.html │ │ ├── radio.md │ │ ├── radio.scss │ │ ├── radio.spec.ts │ │ ├── radio.ts │ │ └── tsconfig-build.json │ ├── schematics │ │ ├── BUILD.bazel │ │ ├── cdk-shared-logic.png │ │ ├── collection.json │ │ ├── migration.json │ │ ├── ng-add │ │ │ ├── fonts │ │ │ │ ├── material-fonts.ts │ │ │ │ └── project-index-html.ts │ │ │ ├── gestures │ │ │ │ └── hammerjs-import.ts │ │ │ ├── index.spec.ts │ │ │ ├── index.ts │ │ │ ├── package-config.ts │ │ │ ├── schema.json │ │ │ ├── schema.ts │ │ │ ├── setup-project.ts │ │ │ ├── theming │ │ │ │ ├── create-custom-theme.ts │ │ │ │ └── theming.ts │ │ │ └── version-names.ts │ │ ├── ng-generate │ │ │ ├── address-form │ │ │ │ ├── files │ │ │ │ │ └── __path__ │ │ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ │ │ ├── __name@dasherize__.component.__styleext__ │ │ │ │ │ │ ├── __name@dasherize__.component.html │ │ │ │ │ │ ├── __name@dasherize__.component.spec.ts │ │ │ │ │ │ └── __name@dasherize__.component.ts │ │ │ │ ├── index.spec.ts │ │ │ │ ├── index.ts │ │ │ │ ├── schema.json │ │ │ │ └── schema.ts │ │ │ ├── dashboard │ │ │ │ ├── files │ │ │ │ │ └── __path__ │ │ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ │ │ ├── __name@dasherize__.component.__styleext__ │ │ │ │ │ │ ├── __name@dasherize__.component.html │ │ │ │ │ │ ├── __name@dasherize__.component.spec.ts │ │ │ │ │ │ └── __name@dasherize__.component.ts │ │ │ │ ├── index.spec.ts │ │ │ │ ├── index.ts │ │ │ │ ├── schema.json │ │ │ │ └── schema.ts │ │ │ ├── nav │ │ │ │ ├── files │ │ │ │ │ └── __path__ │ │ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ │ │ ├── __name@dasherize__.component.__styleext__ │ │ │ │ │ │ ├── __name@dasherize__.component.html │ │ │ │ │ │ ├── __name@dasherize__.component.spec.ts │ │ │ │ │ │ └── __name@dasherize__.component.ts │ │ │ │ ├── index.spec.ts │ │ │ │ ├── index.ts │ │ │ │ ├── schema.json │ │ │ │ └── schema.ts │ │ │ ├── table │ │ │ │ ├── files │ │ │ │ │ └── __path__ │ │ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ │ │ ├── __name@dasherize__-datasource.ts │ │ │ │ │ │ ├── __name@dasherize__.component.__styleext__ │ │ │ │ │ │ ├── __name@dasherize__.component.html │ │ │ │ │ │ ├── __name@dasherize__.component.spec.ts │ │ │ │ │ │ └── __name@dasherize__.component.ts │ │ │ │ ├── index.spec.ts │ │ │ │ ├── index.ts │ │ │ │ ├── schema.json │ │ │ │ └── schema.ts │ │ │ └── tree │ │ │ │ ├── files │ │ │ │ └── __path__ │ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ │ ├── __name@dasherize__.component.__styleext__ │ │ │ │ │ ├── __name@dasherize__.component.html │ │ │ │ │ ├── __name@dasherize__.component.spec.ts │ │ │ │ │ ├── __name@dasherize__.component.ts │ │ │ │ │ └── example-data.ts │ │ │ │ ├── index.spec.ts │ │ │ │ ├── index.ts │ │ │ │ ├── schema.json │ │ │ │ └── schema.ts │ │ ├── ng-update │ │ │ ├── data │ │ │ │ ├── attribute-selectors.ts │ │ │ │ ├── class-names.ts │ │ │ │ ├── constructor-checks.ts │ │ │ │ ├── css-selectors.ts │ │ │ │ ├── element-selectors.ts │ │ │ │ ├── index.ts │ │ │ │ ├── input-names.ts │ │ │ │ ├── method-call-checks.ts │ │ │ │ ├── output-names.ts │ │ │ │ └── property-names.ts │ │ │ ├── index.ts │ │ │ ├── test-cases │ │ │ │ ├── index.spec.ts │ │ │ │ ├── misc │ │ │ │ │ ├── constructor-checks.spec.ts │ │ │ │ │ ├── constructor-checks_input.ts │ │ │ │ │ ├── import-checks.spec.ts │ │ │ │ │ └── import-checks_input.ts │ │ │ │ ├── v6-test-cases.spec.ts │ │ │ │ ├── v6 │ │ │ │ │ ├── attribute-selectors_expected_output.ts │ │ │ │ │ ├── attribute-selectors_input.ts │ │ │ │ │ ├── class-names_expected_output.ts │ │ │ │ │ ├── class-names_input.ts │ │ │ │ │ ├── css-selectors_expected_output.ts │ │ │ │ │ ├── css-selectors_input.ts │ │ │ │ │ ├── element-selectors_expected_output.ts │ │ │ │ │ ├── element-selectors_input.ts │ │ │ │ │ ├── input-names_expected_output.ts │ │ │ │ │ ├── input-names_input.ts │ │ │ │ │ ├── output-names_expected_output.ts │ │ │ │ │ ├── output-names_input.ts │ │ │ │ │ ├── property-names_expected_output.ts │ │ │ │ │ └── property-names_input.ts │ │ │ │ ├── v7-test-cases.spec.ts │ │ │ │ └── v7 │ │ │ │ │ ├── property-names_expected_output.ts │ │ │ │ │ ├── property-names_input.ts │ │ │ │ │ ├── ripple-speed-factor_expected_output.ts │ │ │ │ │ └── ripple-speed-factor_input.ts │ │ │ ├── typescript │ │ │ │ └── module-specifiers.ts │ │ │ ├── upgrade-data.ts │ │ │ └── upgrade-rules │ │ │ │ ├── misc-checks │ │ │ │ ├── checkClassInheritanceMiscRule.ts │ │ │ │ ├── checkClassNamesMiscRule.ts │ │ │ │ ├── checkImportsMiscRule.ts │ │ │ │ ├── checkPropertyNamesMiscRule.ts │ │ │ │ └── checkTemplateMiscRule.ts │ │ │ │ └── misc-ripples-v7 │ │ │ │ ├── ripple-speed-factor.ts │ │ │ │ ├── rippleSpeedFactorAssignmentRule.ts │ │ │ │ └── rippleSpeedFactorTemplateRule.ts │ │ └── tsconfig.json │ ├── select │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _select-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── select-animations.ts │ │ ├── select-errors.ts │ │ ├── select-module.ts │ │ ├── select.html │ │ ├── select.md │ │ ├── select.scss │ │ ├── select.spec.ts │ │ ├── select.ts │ │ └── tsconfig-build.json │ ├── sidenav │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _sidenav-theme.scss │ │ ├── drawer-animations.ts │ │ ├── drawer-container.html │ │ ├── drawer.html │ │ ├── drawer.scss │ │ ├── drawer.spec.ts │ │ ├── drawer.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── sidenav-container.html │ │ ├── sidenav-module.ts │ │ ├── sidenav.md │ │ ├── sidenav.spec.ts │ │ ├── sidenav.ts │ │ └── tsconfig-build.json │ ├── slide-toggle │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _slide-toggle-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── slide-toggle-config.ts │ │ ├── slide-toggle-module.ts │ │ ├── slide-toggle.html │ │ ├── slide-toggle.md │ │ ├── slide-toggle.scss │ │ ├── slide-toggle.spec.ts │ │ ├── slide-toggle.ts │ │ └── tsconfig-build.json │ ├── slider │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _slider-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── slider-module.ts │ │ ├── slider.html │ │ ├── slider.md │ │ ├── slider.scss │ │ ├── slider.spec.ts │ │ ├── slider.ts │ │ └── tsconfig-build.json │ ├── snack-bar │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _snack-bar-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── simple-snack-bar.html │ │ ├── simple-snack-bar.scss │ │ ├── simple-snack-bar.ts │ │ ├── snack-bar-animations.ts │ │ ├── snack-bar-config.ts │ │ ├── snack-bar-container.html │ │ ├── snack-bar-container.scss │ │ ├── snack-bar-container.ts │ │ ├── snack-bar-module.ts │ │ ├── snack-bar-ref.ts │ │ ├── snack-bar.md │ │ ├── snack-bar.spec.ts │ │ ├── snack-bar.ts │ │ └── tsconfig-build.json │ ├── sort │ │ ├── BUILD.bazel │ │ ├── _sort-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── sort-animations.ts │ │ ├── sort-direction.ts │ │ ├── sort-errors.ts │ │ ├── sort-header-intl.ts │ │ ├── sort-header.html │ │ ├── sort-header.scss │ │ ├── sort-header.ts │ │ ├── sort-module.ts │ │ ├── sort.md │ │ ├── sort.spec.ts │ │ ├── sort.ts │ │ └── tsconfig-build.json │ ├── stepper │ │ ├── BUILD.bazel │ │ ├── _stepper-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── step-header.html │ │ ├── step-header.scss │ │ ├── step-header.ts │ │ ├── step-label.ts │ │ ├── step.html │ │ ├── stepper-animations.ts │ │ ├── stepper-button.ts │ │ ├── stepper-horizontal.html │ │ ├── stepper-icon.ts │ │ ├── stepper-intl.ts │ │ ├── stepper-module.ts │ │ ├── stepper-vertical.html │ │ ├── stepper.md │ │ ├── stepper.scss │ │ ├── stepper.spec.ts │ │ ├── stepper.ts │ │ └── tsconfig-build.json │ ├── table │ │ ├── BUILD.bazel │ │ ├── _table-theme.scss │ │ ├── cell.ts │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── row.ts │ │ ├── table-data-source.ts │ │ ├── table-module.ts │ │ ├── table.md │ │ ├── table.scss │ │ ├── table.spec.ts │ │ ├── table.ts │ │ └── tsconfig-build.json │ ├── tabs │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── Tabs Pagination.png │ │ ├── _tabs-common.scss │ │ ├── _tabs-theme.scss │ │ ├── index.ts │ │ ├── ink-bar.ts │ │ ├── public-api.ts │ │ ├── tab-body.html │ │ ├── tab-body.scss │ │ ├── tab-body.spec.ts │ │ ├── tab-body.ts │ │ ├── tab-content.ts │ │ ├── tab-group.html │ │ ├── tab-group.scss │ │ ├── tab-group.spec.ts │ │ ├── tab-group.ts │ │ ├── tab-header.html │ │ ├── tab-header.scss │ │ ├── tab-header.spec.ts │ │ ├── tab-header.ts │ │ ├── tab-label-wrapper.ts │ │ ├── tab-label.ts │ │ ├── tab-nav-bar │ │ │ ├── index.ts │ │ │ ├── tab-nav-bar.html │ │ │ ├── tab-nav-bar.scss │ │ │ ├── tab-nav-bar.spec.ts │ │ │ └── tab-nav-bar.ts │ │ ├── tab.html │ │ ├── tab.ts │ │ ├── tabs-animations.ts │ │ ├── tabs-module.ts │ │ ├── tabs.md │ │ └── tsconfig-build.json │ ├── testing │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── index.ts │ │ ├── month-constants.ts │ │ └── test-gesture-config.ts │ ├── toolbar │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _toolbar-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── toolbar-module.ts │ │ ├── toolbar.html │ │ ├── toolbar.md │ │ ├── toolbar.scss │ │ ├── toolbar.spec.ts │ │ ├── toolbar.ts │ │ └── tsconfig-build.json │ ├── tooltip │ │ ├── BUILD.bazel │ │ ├── README.md │ │ ├── _tooltip-theme.scss │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── tooltip-animations.ts │ │ ├── tooltip-module.ts │ │ ├── tooltip.html │ │ ├── tooltip.md │ │ ├── tooltip.scss │ │ ├── tooltip.spec.ts │ │ ├── tooltip.ts │ │ └── tsconfig-build.json │ ├── tree │ │ ├── BUILD.bazel │ │ ├── _tree-theme.scss │ │ ├── data-source │ │ │ ├── flat-data-source.ts │ │ │ └── nested-data-source.ts │ │ ├── index.ts │ │ ├── node.ts │ │ ├── outlet.ts │ │ ├── padding.ts │ │ ├── public-api.ts │ │ ├── toggle.ts │ │ ├── tree-module.ts │ │ ├── tree.md │ │ ├── tree.scss │ │ ├── tree.spec.ts │ │ ├── tree.ts │ │ └── tsconfig-build.json │ ├── tsconfig-build.json │ ├── tsconfig-tests.json │ ├── tsconfig.json │ ├── typings.d.ts │ └── version.ts ├── material-examples │ ├── BUILD.bazel │ ├── autocomplete-auto-active-first-option │ │ ├── autocomplete-auto-active-first-option-example.css │ │ ├── autocomplete-auto-active-first-option-example.html │ │ └── autocomplete-auto-active-first-option-example.ts │ ├── autocomplete-display │ │ ├── autocomplete-display-example.css │ │ ├── autocomplete-display-example.html │ │ └── autocomplete-display-example.ts │ ├── autocomplete-filter │ │ ├── autocomplete-filter-example.css │ │ ├── autocomplete-filter-example.html │ │ └── autocomplete-filter-example.ts │ ├── autocomplete-optgroup │ │ ├── autocomplete-optgroup-example.css │ │ ├── autocomplete-optgroup-example.html │ │ └── autocomplete-optgroup-example.ts │ ├── autocomplete-overview │ │ ├── autocomplete-overview-example.css │ │ ├── autocomplete-overview-example.html │ │ └── autocomplete-overview-example.ts │ ├── autocomplete-simple │ │ ├── autocomplete-simple-example.css │ │ ├── autocomplete-simple-example.html │ │ └── autocomplete-simple-example.ts │ ├── badge-overview │ │ ├── badge-overview-example.css │ │ ├── badge-overview-example.html │ │ └── badge-overview-example.ts │ ├── bottom-sheet-overview │ │ ├── bottom-sheet-overview-example-sheet.html │ │ ├── bottom-sheet-overview-example.css │ │ ├── bottom-sheet-overview-example.html │ │ └── bottom-sheet-overview-example.ts │ ├── button-overview │ │ ├── button-overview-example.css │ │ ├── button-overview-example.html │ │ └── button-overview-example.ts │ ├── button-toggle-appearance │ │ ├── button-toggle-appearance-example.css │ │ ├── button-toggle-appearance-example.html │ │ └── button-toggle-appearance-example.ts │ ├── button-toggle-exclusive │ │ ├── button-toggle-exclusive-example.css │ │ ├── button-toggle-exclusive-example.html │ │ └── button-toggle-exclusive-example.ts │ ├── button-toggle-overview │ │ ├── button-toggle-overview-example.css │ │ ├── button-toggle-overview-example.html │ │ └── button-toggle-overview-example.ts │ ├── button-types │ │ ├── button-types-example.css │ │ ├── button-types-example.html │ │ └── button-types-example.ts │ ├── card-fancy │ │ ├── card-fancy-example.css │ │ ├── card-fancy-example.html │ │ └── card-fancy-example.ts │ ├── card-overview │ │ ├── card-overview-example.css │ │ ├── card-overview-example.html │ │ └── card-overview-example.ts │ ├── cdk-drag-drop-axis-lock │ │ ├── cdk-drag-drop-axis-lock-example.css │ │ ├── cdk-drag-drop-axis-lock-example.html │ │ └── cdk-drag-drop-axis-lock-example.ts │ ├── cdk-drag-drop-boundary │ │ ├── cdk-drag-drop-boundary-example.css │ │ ├── cdk-drag-drop-boundary-example.html │ │ └── cdk-drag-drop-boundary-example.ts │ ├── cdk-drag-drop-connected-sorting-group │ │ ├── cdk-drag-drop-connected-sorting-group-example.css │ │ ├── cdk-drag-drop-connected-sorting-group-example.html │ │ └── cdk-drag-drop-connected-sorting-group-example.ts │ ├── cdk-drag-drop-connected-sorting │ │ ├── cdk-drag-drop-connected-sorting-example.css │ │ ├── cdk-drag-drop-connected-sorting-example.html │ │ └── cdk-drag-drop-connected-sorting-example.ts │ ├── cdk-drag-drop-custom-placeholder │ │ ├── cdk-drag-drop-custom-placeholder-example.css │ │ ├── cdk-drag-drop-custom-placeholder-example.html │ │ └── cdk-drag-drop-custom-placeholder-example.ts │ ├── cdk-drag-drop-custom-preview │ │ ├── cdk-drag-drop-custom-preview-example.css │ │ ├── cdk-drag-drop-custom-preview-example.html │ │ └── cdk-drag-drop-custom-preview-example.ts │ ├── cdk-drag-drop-disabled │ │ ├── cdk-drag-drop-disabled-example.css │ │ ├── cdk-drag-drop-disabled-example.html │ │ └── cdk-drag-drop-disabled-example.ts │ ├── cdk-drag-drop-enter-predicate │ │ ├── cdk-drag-drop-enter-predicate-example.css │ │ ├── cdk-drag-drop-enter-predicate-example.html │ │ └── cdk-drag-drop-enter-predicate-example.ts │ ├── cdk-drag-drop-handle │ │ ├── cdk-drag-drop-handle-example.css │ │ ├── cdk-drag-drop-handle-example.html │ │ └── cdk-drag-drop-handle-example.ts │ ├── cdk-drag-drop-horizontal-sorting │ │ ├── cdk-drag-drop-horizontal-sorting-example.css │ │ ├── cdk-drag-drop-horizontal-sorting-example.html │ │ └── cdk-drag-drop-horizontal-sorting-example.ts │ ├── cdk-drag-drop-overview │ │ ├── cdk-drag-drop-overview-example.css │ │ ├── cdk-drag-drop-overview-example.html │ │ └── cdk-drag-drop-overview-example.ts │ ├── cdk-drag-drop-root-element │ │ ├── cdk-drag-drop-root-element-example.css │ │ ├── cdk-drag-drop-root-element-example.html │ │ └── cdk-drag-drop-root-element-example.ts │ ├── cdk-drag-drop-sorting │ │ ├── cdk-drag-drop-sorting-example.css │ │ ├── cdk-drag-drop-sorting-example.html │ │ └── cdk-drag-drop-sorting-example.ts │ ├── cdk-platform-overview │ │ ├── cdk-platform-overview-example.css │ │ ├── cdk-platform-overview-example.html │ │ └── cdk-platform-overview-example.ts │ ├── cdk-table-basic-flex │ │ ├── cdk-table-basic-flex-example.css │ │ ├── cdk-table-basic-flex-example.html │ │ └── cdk-table-basic-flex-example.ts │ ├── cdk-table-basic │ │ ├── cdk-table-basic-example.css │ │ ├── cdk-table-basic-example.html │ │ └── cdk-table-basic-example.ts │ ├── cdk-tree-flat │ │ ├── cdk-tree-flat-example.css │ │ ├── cdk-tree-flat-example.html │ │ └── cdk-tree-flat-example.ts │ ├── cdk-tree-nested │ │ ├── cdk-tree-nested-example.css │ │ ├── cdk-tree-nested-example.html │ │ └── cdk-tree-nested-example.ts │ ├── cdk-virtual-scroll-context │ │ ├── cdk-virtual-scroll-context-example.css │ │ ├── cdk-virtual-scroll-context-example.html │ │ └── cdk-virtual-scroll-context-example.ts │ ├── cdk-virtual-scroll-custom-strategy │ │ ├── cdk-virtual-scroll-custom-strategy-example.css │ │ ├── cdk-virtual-scroll-custom-strategy-example.html │ │ └── cdk-virtual-scroll-custom-strategy-example.ts │ ├── cdk-virtual-scroll-data-source │ │ ├── cdk-virtual-scroll-data-source-example.css │ │ ├── cdk-virtual-scroll-data-source-example.html │ │ └── cdk-virtual-scroll-data-source-example.ts │ ├── cdk-virtual-scroll-dl │ │ ├── cdk-virtual-scroll-dl-example.css │ │ ├── cdk-virtual-scroll-dl-example.html │ │ └── cdk-virtual-scroll-dl-example.ts │ ├── cdk-virtual-scroll-fixed-buffer │ │ ├── cdk-virtual-scroll-fixed-buffer-example.css │ │ ├── cdk-virtual-scroll-fixed-buffer-example.html │ │ └── cdk-virtual-scroll-fixed-buffer-example.ts │ ├── cdk-virtual-scroll-horizontal │ │ ├── cdk-virtual-scroll-horizontal-example.css │ │ ├── cdk-virtual-scroll-horizontal-example.html │ │ └── cdk-virtual-scroll-horizontal-example.ts │ ├── cdk-virtual-scroll-overview │ │ ├── cdk-virtual-scroll-overview-example.css │ │ ├── cdk-virtual-scroll-overview-example.html │ │ └── cdk-virtual-scroll-overview-example.ts │ ├── cdk-virtual-scroll-template-cache │ │ ├── cdk-virtual-scroll-template-cache-example.css │ │ ├── cdk-virtual-scroll-template-cache-example.html │ │ └── cdk-virtual-scroll-template-cache-example.ts │ ├── checkbox-configurable │ │ ├── checkbox-configurable-example.css │ │ ├── checkbox-configurable-example.html │ │ └── checkbox-configurable-example.ts │ ├── checkbox-overview │ │ ├── checkbox-overview-example.css │ │ ├── checkbox-overview-example.html │ │ └── checkbox-overview-example.ts │ ├── chips-autocomplete │ │ ├── chips-autocomplete-example.css │ │ ├── chips-autocomplete-example.html │ │ └── chips-autocomplete-example.ts │ ├── chips-input │ │ ├── chips-input-example.css │ │ ├── chips-input-example.html │ │ └── chips-input-example.ts │ ├── chips-overview │ │ ├── chips-overview-example.css │ │ ├── chips-overview-example.html │ │ └── chips-overview-example.ts │ ├── chips-stacked │ │ ├── chips-stacked-example.css │ │ ├── chips-stacked-example.html │ │ └── chips-stacked-example.ts │ ├── datepicker-api │ │ ├── datepicker-api-example.css │ │ ├── datepicker-api-example.html │ │ └── datepicker-api-example.ts │ ├── datepicker-color │ │ ├── datepicker-color-example.css │ │ ├── datepicker-color-example.html │ │ └── datepicker-color-example.ts │ ├── datepicker-custom-header │ │ ├── datepicker-custom-header-example.css │ │ ├── datepicker-custom-header-example.html │ │ └── datepicker-custom-header-example.ts │ ├── datepicker-custom-icon │ │ ├── datepicker-custom-icon-example.css │ │ ├── datepicker-custom-icon-example.html │ │ └── datepicker-custom-icon-example.ts │ ├── datepicker-date-class │ │ ├── datepicker-date-class-example.css │ │ ├── datepicker-date-class-example.html │ │ └── datepicker-date-class-example.ts │ ├── datepicker-disabled │ │ ├── datepicker-disabled-example.css │ │ ├── datepicker-disabled-example.html │ │ └── datepicker-disabled-example.ts │ ├── datepicker-events │ │ ├── datepicker-events-example.css │ │ ├── datepicker-events-example.html │ │ └── datepicker-events-example.ts │ ├── datepicker-filter │ │ ├── datepicker-filter-example.css │ │ ├── datepicker-filter-example.html │ │ └── datepicker-filter-example.ts │ ├── datepicker-formats │ │ ├── datepicker-formats-example.css │ │ ├── datepicker-formats-example.html │ │ └── datepicker-formats-example.ts │ ├── datepicker-locale │ │ ├── datepicker-locale-example.css │ │ ├── datepicker-locale-example.html │ │ └── datepicker-locale-example.ts │ ├── datepicker-min-max │ │ ├── datepicker-min-max-example.css │ │ ├── datepicker-min-max-example.html │ │ └── datepicker-min-max-example.ts │ ├── datepicker-moment │ │ ├── datepicker-moment-example.css │ │ ├── datepicker-moment-example.html │ │ └── datepicker-moment-example.ts │ ├── datepicker-overview │ │ ├── datepicker-overview-example.css │ │ ├── datepicker-overview-example.html │ │ └── datepicker-overview-example.ts │ ├── datepicker-start-view │ │ ├── datepicker-start-view-example.css │ │ ├── datepicker-start-view-example.html │ │ └── datepicker-start-view-example.ts │ ├── datepicker-touch │ │ ├── datepicker-touch-example.css │ │ ├── datepicker-touch-example.html │ │ └── datepicker-touch-example.ts │ ├── datepicker-value │ │ ├── datepicker-value-example.css │ │ ├── datepicker-value-example.html │ │ └── datepicker-value-example.ts │ ├── datepicker-views-selection │ │ ├── datepicker-views-selection-example.css │ │ ├── datepicker-views-selection-example.html │ │ └── datepicker-views-selection-example.ts │ ├── dialog-content │ │ ├── dialog-content-example-dialog.html │ │ ├── dialog-content-example.css │ │ ├── dialog-content-example.html │ │ └── dialog-content-example.ts │ ├── dialog-data │ │ ├── dialog-data-example-dialog.html │ │ ├── dialog-data-example.css │ │ ├── dialog-data-example.html │ │ └── dialog-data-example.ts │ ├── dialog-elements │ │ ├── dialog-elements-example-dialog.html │ │ ├── dialog-elements-example.css │ │ ├── dialog-elements-example.html │ │ └── dialog-elements-example.ts │ ├── dialog-overview │ │ ├── dialog-overview-example-dialog.html │ │ ├── dialog-overview-example.css │ │ ├── dialog-overview-example.html │ │ └── dialog-overview-example.ts │ ├── divider-overview │ │ ├── divider-overview-example.css │ │ ├── divider-overview-example.html │ │ └── divider-overview-example.ts │ ├── elevation-overview │ │ ├── elevation-overview-example.css │ │ ├── elevation-overview-example.html │ │ └── elevation-overview-example.ts │ ├── example-data.ts │ ├── expansion-expand-collapse-all │ │ ├── expansion-expand-collapse-all-example.css │ │ ├── expansion-expand-collapse-all-example.html │ │ └── expansion-expand-collapse-all-example.ts │ ├── expansion-overview │ │ ├── expansion-overview-example.css │ │ ├── expansion-overview-example.html │ │ └── expansion-overview-example.ts │ ├── expansion-steps │ │ ├── expansion-steps-example.css │ │ ├── expansion-steps-example.html │ │ └── expansion-steps-example.ts │ ├── focus-monitor-directives │ │ ├── focus-monitor-directives-example.css │ │ ├── focus-monitor-directives-example.html │ │ └── focus-monitor-directives-example.ts │ ├── focus-monitor-focus-via │ │ ├── focus-monitor-focus-via-example.css │ │ ├── focus-monitor-focus-via-example.html │ │ └── focus-monitor-focus-via-example.ts │ ├── focus-monitor-overview │ │ ├── focus-monitor-overview-example.css │ │ ├── focus-monitor-overview-example.html │ │ └── focus-monitor-overview-example.ts │ ├── form-field-appearance │ │ ├── form-field-appearance-example.css │ │ ├── form-field-appearance-example.html │ │ └── form-field-appearance-example.ts │ ├── form-field-custom-control │ │ ├── example-tel-input-example.css │ │ ├── example-tel-input-example.html │ │ ├── form-field-custom-control-example.css │ │ ├── form-field-custom-control-example.html │ │ └── form-field-custom-control-example.ts │ ├── form-field-error │ │ ├── form-field-error-example.css │ │ ├── form-field-error-example.html │ │ └── form-field-error-example.ts │ ├── form-field-hint │ │ ├── form-field-hint-example.css │ │ ├── form-field-hint-example.html │ │ └── form-field-hint-example.ts │ ├── form-field-label │ │ ├── form-field-label-example.css │ │ ├── form-field-label-example.html │ │ └── form-field-label-example.ts │ ├── form-field-overview │ │ ├── form-field-overview-example.css │ │ ├── form-field-overview-example.html │ │ └── form-field-overview-example.ts │ ├── form-field-prefix-suffix │ │ ├── form-field-prefix-suffix-example.css │ │ ├── form-field-prefix-suffix-example.html │ │ └── form-field-prefix-suffix-example.ts │ ├── form-field-theming │ │ ├── form-field-theming-example.css │ │ ├── form-field-theming-example.html │ │ └── form-field-theming-example.ts │ ├── grid-list-dynamic │ │ ├── grid-list-dynamic-example.css │ │ ├── grid-list-dynamic-example.html │ │ └── grid-list-dynamic-example.ts │ ├── grid-list-overview │ │ ├── grid-list-overview-example.css │ │ ├── grid-list-overview-example.html │ │ └── grid-list-overview-example.ts │ ├── icon-overview │ │ ├── icon-overview-example.css │ │ ├── icon-overview-example.html │ │ └── icon-overview-example.ts │ ├── icon-svg │ │ ├── icon-svg-example.css │ │ ├── icon-svg-example.html │ │ └── icon-svg-example.ts │ ├── index.ts │ ├── input-clearable │ │ ├── input-clearable-example.css │ │ ├── input-clearable-example.html │ │ └── input-clearable-example.ts │ ├── input-error-state-matcher │ │ ├── input-error-state-matcher-example.css │ │ ├── input-error-state-matcher-example.html │ │ └── input-error-state-matcher-example.ts │ ├── input-errors │ │ ├── input-errors-example.css │ │ ├── input-errors-example.html │ │ └── input-errors-example.ts │ ├── input-form │ │ ├── input-form-example.css │ │ ├── input-form-example.html │ │ └── input-form-example.ts │ ├── input-hint │ │ ├── input-hint-example.css │ │ ├── input-hint-example.html │ │ └── input-hint-example.ts │ ├── input-overview │ │ ├── input-overview-example.css │ │ ├── input-overview-example.html │ │ └── input-overview-example.ts │ ├── input-prefix-suffix │ │ ├── input-prefix-suffix-example.css │ │ ├── input-prefix-suffix-example.html │ │ └── input-prefix-suffix-example.ts │ ├── list-overview │ │ ├── list-overview-example.css │ │ ├── list-overview-example.html │ │ └── list-overview-example.ts │ ├── list-sections │ │ ├── list-sections-example.css │ │ ├── list-sections-example.html │ │ └── list-sections-example.ts │ ├── list-selection │ │ ├── list-selection-example.css │ │ ├── list-selection-example.html │ │ └── list-selection-example.ts │ ├── material-module.ts │ ├── menu-icons │ │ ├── menu-icons-example.css │ │ ├── menu-icons-example.html │ │ └── menu-icons-example.ts │ ├── menu-overview │ │ ├── menu-overview-example.css │ │ ├── menu-overview-example.html │ │ └── menu-overview-example.ts │ ├── nested-menu │ │ ├── nested-menu-example.css │ │ ├── nested-menu-example.html │ │ └── nested-menu-example.ts │ ├── package.json │ ├── paginator-configurable │ │ ├── paginator-configurable-example.css │ │ ├── paginator-configurable-example.html │ │ └── paginator-configurable-example.ts │ ├── paginator-overview │ │ ├── paginator-overview-example.css │ │ ├── paginator-overview-example.html │ │ └── paginator-overview-example.ts │ ├── progress-bar-buffer │ │ ├── progress-bar-buffer-example.css │ │ ├── progress-bar-buffer-example.html │ │ └── progress-bar-buffer-example.ts │ ├── progress-bar-configurable │ │ ├── progress-bar-configurable-example.css │ │ ├── progress-bar-configurable-example.html │ │ └── progress-bar-configurable-example.ts │ ├── progress-bar-determinate │ │ ├── progress-bar-determinate-example.css │ │ ├── progress-bar-determinate-example.html │ │ └── progress-bar-determinate-example.ts │ ├── progress-bar-indeterminate │ │ ├── progress-bar-indeterminate-example.css │ │ ├── progress-bar-indeterminate-example.html │ │ └── progress-bar-indeterminate-example.ts │ ├── progress-bar-query │ │ ├── progress-bar-query-example.css │ │ ├── progress-bar-query-example.html │ │ └── progress-bar-query-example.ts │ ├── progress-spinner-configurable │ │ ├── progress-spinner-configurable-example.css │ │ ├── progress-spinner-configurable-example.html │ │ └── progress-spinner-configurable-example.ts │ ├── progress-spinner-overview │ │ ├── progress-spinner-overview-example.css │ │ ├── progress-spinner-overview-example.html │ │ └── progress-spinner-overview-example.ts │ ├── public-api.ts │ ├── radio-ng-model │ │ ├── radio-ng-model-example.css │ │ ├── radio-ng-model-example.html │ │ └── radio-ng-model-example.ts │ ├── radio-overview │ │ ├── radio-overview-example.css │ │ ├── radio-overview-example.html │ │ └── radio-overview-example.ts │ ├── ripple-overview │ │ ├── ripple-overview-example.css │ │ ├── ripple-overview-example.html │ │ └── ripple-overview-example.ts │ ├── select-custom-trigger │ │ ├── select-custom-trigger-example.css │ │ ├── select-custom-trigger-example.html │ │ └── select-custom-trigger-example.ts │ ├── select-disabled │ │ ├── select-disabled-example.css │ │ ├── select-disabled-example.html │ │ └── select-disabled-example.ts │ ├── select-error-state-matcher │ │ ├── select-error-state-matcher-example.css │ │ ├── select-error-state-matcher-example.html │ │ └── select-error-state-matcher-example.ts │ ├── select-form │ │ ├── select-form-example.css │ │ ├── select-form-example.html │ │ └── select-form-example.ts │ ├── select-hint-error │ │ ├── select-hint-error-example.css │ │ ├── select-hint-error-example.html │ │ └── select-hint-error-example.ts │ ├── select-multiple │ │ ├── select-multiple-example.css │ │ ├── select-multiple-example.html │ │ └── select-multiple-example.ts │ ├── select-no-ripple │ │ ├── select-no-ripple-example.css │ │ ├── select-no-ripple-example.html │ │ └── select-no-ripple-example.ts │ ├── select-optgroup │ │ ├── select-optgroup-example.css │ │ ├── select-optgroup-example.html │ │ └── select-optgroup-example.ts │ ├── select-overview │ │ ├── select-overview-example.css │ │ ├── select-overview-example.html │ │ └── select-overview-example.ts │ ├── select-panel-class │ │ ├── select-panel-class-example.css │ │ ├── select-panel-class-example.html │ │ └── select-panel-class-example.ts │ ├── select-reset │ │ ├── select-reset-example.css │ │ ├── select-reset-example.html │ │ └── select-reset-example.ts │ ├── select-value-binding │ │ ├── select-value-binding-example.css │ │ ├── select-value-binding-example.html │ │ └── select-value-binding-example.ts │ ├── sidenav-autosize │ │ ├── sidenav-autosize-example.css │ │ ├── sidenav-autosize-example.html │ │ └── sidenav-autosize-example.ts │ ├── sidenav-backdrop │ │ ├── sidenav-backdrop-example.css │ │ ├── sidenav-backdrop-example.html │ │ └── sidenav-backdrop-example.ts │ ├── sidenav-disable-close │ │ ├── sidenav-disable-close-example.css │ │ ├── sidenav-disable-close-example.html │ │ └── sidenav-disable-close-example.ts │ ├── sidenav-drawer-overview │ │ ├── sidenav-drawer-overview-example.css │ │ ├── sidenav-drawer-overview-example.html │ │ └── sidenav-drawer-overview-example.ts │ ├── sidenav-fixed │ │ ├── sidenav-fixed-example.css │ │ ├── sidenav-fixed-example.html │ │ └── sidenav-fixed-example.ts │ ├── sidenav-mode │ │ ├── sidenav-mode-example.css │ │ ├── sidenav-mode-example.html │ │ └── sidenav-mode-example.ts │ ├── sidenav-open-close │ │ ├── sidenav-open-close-example.css │ │ ├── sidenav-open-close-example.html │ │ └── sidenav-open-close-example.ts │ ├── sidenav-overview │ │ ├── sidenav-overview-example.css │ │ ├── sidenav-overview-example.html │ │ └── sidenav-overview-example.ts │ ├── sidenav-position │ │ ├── sidenav-position-example.css │ │ ├── sidenav-position-example.html │ │ └── sidenav-position-example.ts │ ├── sidenav-responsive │ │ ├── sidenav-responsive-example.css │ │ ├── sidenav-responsive-example.html │ │ └── sidenav-responsive-example.ts │ ├── slide-toggle-configurable │ │ ├── slide-toggle-configurable-example.css │ │ ├── slide-toggle-configurable-example.html │ │ └── slide-toggle-configurable-example.ts │ ├── slide-toggle-forms │ │ ├── slide-toggle-forms-example.css │ │ ├── slide-toggle-forms-example.html │ │ └── slide-toggle-forms-example.ts │ ├── slide-toggle-overview │ │ ├── slide-toggle-overview-example.css │ │ ├── slide-toggle-overview-example.html │ │ └── slide-toggle-overview-example.ts │ ├── slider-configurable │ │ ├── slider-configurable-example.css │ │ ├── slider-configurable-example.html │ │ └── slider-configurable-example.ts │ ├── slider-formatting │ │ ├── slider-formatting-example.css │ │ ├── slider-formatting-example.html │ │ └── slider-formatting-example.ts │ ├── slider-overview │ │ ├── slider-overview-example.css │ │ ├── slider-overview-example.html │ │ └── slider-overview-example.ts │ ├── snack-bar-component │ │ ├── snack-bar-component-example-snack.html │ │ ├── snack-bar-component-example.html │ │ └── snack-bar-component-example.ts │ ├── snack-bar-overview │ │ ├── snack-bar-overview-example.css │ │ ├── snack-bar-overview-example.html │ │ └── snack-bar-overview-example.ts │ ├── snack-bar-position │ │ ├── snack-bar-position-example.html │ │ └── snack-bar-position-example.ts │ ├── sort-overview │ │ ├── sort-overview-example.css │ │ ├── sort-overview-example.html │ │ └── sort-overview-example.ts │ ├── stepper-editable │ │ ├── stepper-editable-example.css │ │ ├── stepper-editable-example.html │ │ └── stepper-editable-example.ts │ ├── stepper-errors │ │ ├── stepper-errors-example.css │ │ ├── stepper-errors-example.html │ │ └── stepper-errors-example.ts │ ├── stepper-label-position-bottom │ │ ├── stepper-label-position-bottom-example.css │ │ ├── stepper-label-position-bottom-example.html │ │ └── stepper-label-position-bottom-example.ts │ ├── stepper-optional │ │ ├── stepper-optional-example.css │ │ ├── stepper-optional-example.html │ │ └── stepper-optional-example.ts │ ├── stepper-overview │ │ ├── stepper-overview-example.css │ │ ├── stepper-overview-example.html │ │ └── stepper-overview-example.ts │ ├── stepper-states │ │ ├── stepper-states-example.css │ │ ├── stepper-states-example.html │ │ └── stepper-states-example.ts │ ├── stepper-vertical │ │ ├── stepper-vertical-example.css │ │ ├── stepper-vertical-example.html │ │ └── stepper-vertical-example.ts │ ├── tab-group-align │ │ ├── tab-group-align-example.css │ │ ├── tab-group-align-example.html │ │ └── tab-group-align-example.ts │ ├── tab-group-animations │ │ ├── tab-group-animations-example.css │ │ ├── tab-group-animations-example.html │ │ └── tab-group-animations-example.ts │ ├── tab-group-async │ │ ├── tab-group-async-example.css │ │ ├── tab-group-async-example.html │ │ └── tab-group-async-example.ts │ ├── tab-group-basic │ │ ├── tab-group-basic-example.css │ │ ├── tab-group-basic-example.html │ │ └── tab-group-basic-example.ts │ ├── tab-group-custom-label │ │ ├── tab-group-custom-label-example.css │ │ ├── tab-group-custom-label-example.html │ │ └── tab-group-custom-label-example.ts │ ├── tab-group-dynamic-height │ │ ├── tab-group-dynamic-height-example.css │ │ ├── tab-group-dynamic-height-example.html │ │ └── tab-group-dynamic-height-example.ts │ ├── tab-group-dynamic │ │ ├── tab-group-dynamic-example.css │ │ ├── tab-group-dynamic-example.html │ │ └── tab-group-dynamic-example.ts │ ├── tab-group-header-below │ │ ├── tab-group-header-below-example.css │ │ ├── tab-group-header-below-example.html │ │ └── tab-group-header-below-example.ts │ ├── tab-group-lazy-loaded │ │ ├── tab-group-lazy-loaded-example.css │ │ ├── tab-group-lazy-loaded-example.html │ │ └── tab-group-lazy-loaded-example.ts │ ├── tab-group-stretched │ │ ├── tab-group-stretched-example.css │ │ ├── tab-group-stretched-example.html │ │ └── tab-group-stretched-example.ts │ ├── tab-group-theme │ │ ├── tab-group-theme-example.css │ │ ├── tab-group-theme-example.html │ │ └── tab-group-theme-example.ts │ ├── tab-nav-bar-basic │ │ ├── tab-nav-bar-basic-example.css │ │ ├── tab-nav-bar-basic-example.html │ │ └── tab-nav-bar-basic-example.ts │ ├── table-basic-flex │ │ ├── table-basic-flex-example.css │ │ ├── table-basic-flex-example.html │ │ └── table-basic-flex-example.ts │ ├── table-basic │ │ ├── table-basic-example.css │ │ ├── table-basic-example.html │ │ └── table-basic-example.ts │ ├── table-dynamic-columns │ │ ├── table-dynamic-columns-example.css │ │ ├── table-dynamic-columns-example.html │ │ └── table-dynamic-columns-example.ts │ ├── table-expandable-rows │ │ ├── table-expandable-rows-example.css │ │ ├── table-expandable-rows-example.html │ │ └── table-expandable-rows-example.ts │ ├── table-filtering │ │ ├── table-filtering-example.css │ │ ├── table-filtering-example.html │ │ └── table-filtering-example.ts │ ├── table-footer-row │ │ ├── table-footer-row-example.css │ │ ├── table-footer-row-example.html │ │ └── table-footer-row-example.ts │ ├── table-http │ │ ├── table-http-example.css │ │ ├── table-http-example.html │ │ └── table-http-example.ts │ ├── table-multiple-header-footer │ │ ├── table-multiple-header-footer-example.css │ │ ├── table-multiple-header-footer-example.html │ │ └── table-multiple-header-footer-example.ts │ ├── table-overview │ │ ├── table-overview-example.css │ │ ├── table-overview-example.html │ │ └── table-overview-example.ts │ ├── table-pagination │ │ ├── table-pagination-example.css │ │ ├── table-pagination-example.html │ │ └── table-pagination-example.ts │ ├── table-row-context │ │ ├── table-row-context-example.css │ │ ├── table-row-context-example.html │ │ └── table-row-context-example.ts │ ├── table-selection │ │ ├── table-selection-example.css │ │ ├── table-selection-example.html │ │ └── table-selection-example.ts │ ├── table-simple-column │ │ ├── table-simple-column-example.css │ │ ├── table-simple-column-example.html │ │ └── table-simple-column-example.ts │ ├── table-sorting │ │ ├── table-sorting-example.css │ │ ├── table-sorting-example.html │ │ └── table-sorting-example.ts │ ├── table-sticky-columns │ │ ├── table-sticky-columns-example.css │ │ ├── table-sticky-columns-example.html │ │ └── table-sticky-columns-example.ts │ ├── table-sticky-complex-flex │ │ ├── table-sticky-complex-flex-example.css │ │ ├── table-sticky-complex-flex-example.html │ │ └── table-sticky-complex-flex-example.ts │ ├── table-sticky-complex │ │ ├── table-sticky-complex-example.css │ │ ├── table-sticky-complex-example.html │ │ └── table-sticky-complex-example.ts │ ├── table-sticky-footer │ │ ├── table-sticky-footer-example.css │ │ ├── table-sticky-footer-example.html │ │ └── table-sticky-footer-example.ts │ ├── table-sticky-header │ │ ├── table-sticky-header-example.css │ │ ├── table-sticky-header-example.html │ │ └── table-sticky-header-example.ts │ ├── table-wrapped │ │ ├── table-wrapped-example.css │ │ ├── table-wrapped-example.html │ │ ├── table-wrapped-example.ts │ │ └── wrapper-table.html │ ├── text-field-autofill-directive │ │ ├── text-field-autofill-directive-example.css │ │ ├── text-field-autofill-directive-example.html │ │ └── text-field-autofill-directive-example.ts │ ├── text-field-autofill-monitor │ │ ├── text-field-autofill-monitor-example.css │ │ ├── text-field-autofill-monitor-example.html │ │ └── text-field-autofill-monitor-example.ts │ ├── text-field-autosize-textarea │ │ ├── text-field-autosize-textarea-example.css │ │ ├── text-field-autosize-textarea-example.html │ │ └── text-field-autosize-textarea-example.ts │ ├── toolbar-multirow │ │ ├── toolbar-multirow-example.css │ │ ├── toolbar-multirow-example.html │ │ └── toolbar-multirow-example.ts │ ├── toolbar-overview │ │ ├── toolbar-overview-example.css │ │ ├── toolbar-overview-example.html │ │ └── toolbar-overview-example.ts │ ├── tooltip-auto-hide │ │ ├── tooltip-auto-hide-example.css │ │ ├── tooltip-auto-hide-example.html │ │ └── tooltip-auto-hide-example.ts │ ├── tooltip-custom-class │ │ ├── tooltip-custom-class-example.css │ │ ├── tooltip-custom-class-example.html │ │ └── tooltip-custom-class-example.ts │ ├── tooltip-delay │ │ ├── tooltip-delay-example.css │ │ ├── tooltip-delay-example.html │ │ └── tooltip-delay-example.ts │ ├── tooltip-disabled │ │ ├── tooltip-disabled-example.css │ │ ├── tooltip-disabled-example.html │ │ └── tooltip-disabled-example.ts │ ├── tooltip-manual │ │ ├── tooltip-manual-example.css │ │ ├── tooltip-manual-example.html │ │ └── tooltip-manual-example.ts │ ├── tooltip-message │ │ ├── tooltip-message-example.css │ │ ├── tooltip-message-example.html │ │ └── tooltip-message-example.ts │ ├── tooltip-modified-defaults │ │ ├── tooltip-modified-defaults-example.css │ │ ├── tooltip-modified-defaults-example.html │ │ └── tooltip-modified-defaults-example.ts │ ├── tooltip-overview │ │ ├── tooltip-overview-example.css │ │ ├── tooltip-overview-example.html │ │ └── tooltip-overview-example.ts │ ├── tooltip-position │ │ ├── tooltip-position-example.css │ │ ├── tooltip-position-example.html │ │ └── tooltip-position-example.ts │ ├── tree-checklist │ │ ├── tree-checklist-example.css │ │ ├── tree-checklist-example.html │ │ └── tree-checklist-example.ts │ ├── tree-dynamic │ │ ├── tree-dynamic-example.css │ │ ├── tree-dynamic-example.html │ │ └── tree-dynamic-example.ts │ ├── tree-flat-overview │ │ ├── tree-flat-overview-example.css │ │ ├── tree-flat-overview-example.html │ │ └── tree-flat-overview-example.ts │ ├── tree-loadmore │ │ ├── tree-loadmore-example.css │ │ ├── tree-loadmore-example.html │ │ └── tree-loadmore-example.ts │ ├── tree-nested-overview │ │ ├── tree-nested-overview-example.css │ │ ├── tree-nested-overview-example.html │ │ └── tree-nested-overview-example.ts │ ├── tsconfig-build.json │ ├── tsconfig-tests.json │ ├── tsconfig.json │ └── typings.d.ts ├── material-experimental │ ├── BUILD.bazel │ ├── index.ts │ ├── package.json │ ├── public-api.ts │ ├── tsconfig-build.json │ ├── tsconfig-tests.json │ ├── tsconfig.json │ ├── typings.d.ts │ └── version.ts ├── material-moment-adapter │ ├── BUILD.bazel │ ├── adapter │ │ ├── index.ts │ │ ├── moment-date-adapter.spec.ts │ │ ├── moment-date-adapter.ts │ │ └── moment-date-formats.ts │ ├── index.ts │ ├── package.json │ ├── public-api.ts │ ├── tsconfig-build.json │ ├── tsconfig-tests.json │ └── tsconfig.json ├── module-typings.d.ts └── universal-app │ ├── index.html │ ├── kitchen-sink │ ├── kitchen-sink.html │ └── kitchen-sink.ts │ ├── main.ts │ ├── prerender.ts │ ├── theme.scss │ ├── tsconfig-build.json │ ├── tsconfig-prerender.json │ └── tsconfig.json ├── stylelint-config.json ├── test ├── BUILD.bazel ├── angular-test-init-spec.ts ├── browser-providers.js ├── karma-browsers.json ├── karma-system-config.js ├── karma-test-shim.js ├── karma.conf.js └── protractor.conf.js ├── tools ├── BUILD.bazel ├── angular_material_setup_workspace.bzl ├── axe-protractor │ ├── axe-protractor.js │ └── build-message.js ├── bazel-stamp-vars.sh ├── bazel-tools-tsconfig.json ├── defaults.bzl ├── dgeni │ ├── BUILD.bazel │ ├── bazel-bin.ts │ ├── common │ │ ├── compute-api-url.ts │ │ ├── decorators.ts │ │ ├── dgeni-definitions.ts │ │ ├── directive-metadata.ts │ │ ├── normalize-function-parameters.ts │ │ ├── property-bindings.ts │ │ └── sort-members.ts │ ├── index.bzl │ ├── index.ts │ ├── nunjucks-tags │ │ └── highlight.ts │ ├── patch-log-service.ts │ ├── processors │ │ ├── categorizer.ts │ │ ├── docs-private-filter.ts │ │ ├── entry-point-grouper.ts │ │ ├── filter-duplicate-exports.ts │ │ └── merge-inherited-properties.ts │ ├── templates │ │ ├── BUILD.bazel │ │ ├── class.template.html │ │ ├── common.template.html │ │ ├── constant.template.html │ │ ├── entry-point.template.html │ │ ├── interface.template.html │ │ ├── macros.html │ │ ├── method-list.template.html │ │ ├── method.template.html │ │ ├── property-list.template.html │ │ ├── property.template.html │ │ └── type-alias.template.html │ └── tsconfig.json ├── example-module │ ├── BUILD.bazel │ ├── bazel-bin.ts │ ├── example-module.template │ ├── generate-example-module.ts │ ├── parse-example-file.ts │ └── tsconfig.json ├── gulp │ ├── gulpfile.ts │ ├── packages.ts │ ├── tasks │ │ ├── aot.ts │ │ ├── breaking-changes.ts │ │ ├── ci.ts │ │ ├── clean.ts │ │ ├── default.ts │ │ ├── development.ts │ │ ├── docs.ts │ │ ├── e2e.ts │ │ ├── example-module.ts │ │ ├── lint.ts │ │ ├── material-release.ts │ │ ├── unit-test.ts │ │ └── universal.ts │ ├── tsconfig.json │ └── util │ │ ├── task-helpers.ts │ │ └── watch-files-reload.ts ├── highlight-files │ ├── BUILD.bazel │ ├── highlight-code-block.ts │ ├── highlight-files.ts │ ├── index.bzl │ └── tsconfig.json ├── markdown-to-html │ ├── BUILD.bazel │ ├── docs-marked-renderer.ts │ ├── index.bzl │ ├── transform-markdown.ts │ └── tsconfig.json ├── npm-workspace │ ├── @angular │ │ └── bazel │ │ │ ├── BUILD.bazel │ │ │ └── bin │ │ │ └── BUILD.bazel │ ├── @bazel │ │ ├── karma │ │ │ └── bin │ │ │ │ └── BUILD.bazel │ │ └── typescript │ │ │ └── BUILD.bazel │ ├── BUILD.bazel │ └── WORKSPACE ├── npm │ └── check-npm.js ├── package-docs-content │ ├── BUILD.bazel │ ├── index.bzl │ ├── package-docs-content.ts │ └── tsconfig.json ├── package-tools │ ├── build-bundles.ts │ ├── build-config.ts │ ├── build-notes.md │ ├── build-package.ts │ ├── build-release.ts │ ├── compile-entry-point.ts │ ├── copy-files.ts │ ├── entry-point-package-json.ts │ ├── find-build-config.ts │ ├── gulp │ │ ├── build-scss-pipeline.ts │ │ ├── build-tasks-gulp.ts │ │ ├── sequence-task.ts │ │ └── watch-files.ts │ ├── index.ts │ ├── inline-resources.ts │ ├── metadata-inlining.ts │ ├── metadata-reexport.ts │ ├── minify-sources.ts │ ├── package-version-stamp.ts │ ├── rollup-globals.ts │ ├── rollup-remove-licenses.ts │ ├── secondary-entry-points.ts │ ├── sourcemap-remap.ts │ ├── ts-compile.ts │ ├── typescript-transpile.ts │ ├── typings-reexport.ts │ └── version-placeholders.ts ├── public_api_guard │ ├── BUILD.bazel │ ├── cdk │ │ ├── a11y.d.ts │ │ ├── accordion.d.ts │ │ ├── bidi.d.ts │ │ ├── cdk.d.ts │ │ ├── coercion.d.ts │ │ ├── collections.d.ts │ │ ├── drag-drop.d.ts │ │ ├── keycodes.d.ts │ │ ├── layout.d.ts │ │ ├── observers.d.ts │ │ ├── overlay.d.ts │ │ ├── platform.d.ts │ │ ├── scrolling.d.ts │ │ ├── stepper.d.ts │ │ ├── table.d.ts │ │ ├── text-field.d.ts │ │ └── tree.d.ts │ └── generate-guard-tests.bzl ├── release │ ├── base-release-task.ts │ ├── changelog.ts │ ├── extract-release-notes.ts │ ├── git │ │ ├── git-client.ts │ │ └── github-urls.ts │ ├── npm │ │ └── npm-client.ts │ ├── prompt │ │ ├── new-version-prompt.ts │ │ ├── npm-dist-tag-prompt.ts │ │ └── prerelease-labels.ts │ ├── publish-release.ts │ ├── release-output │ │ ├── check-packages.ts │ │ ├── output-validations.ts │ │ └── release-packages.ts │ ├── stage-release.ts │ ├── tsconfig.json │ └── version-name │ │ ├── create-version.ts │ │ ├── parse-version.ts │ │ └── publish-branches.ts ├── sass-bundle.ts ├── sass_bundle.bzl ├── sass_generate_binaries.bzl ├── stylelint │ ├── no-ampersand-beyond-selector-start │ │ └── index.js │ ├── no-concrete-rules │ │ └── index.js │ ├── no-nested-mixin │ │ └── index.js │ ├── no-prefixes │ │ ├── needs-prefix.js │ │ └── no-prefixes.js │ ├── no-top-level-ampersand-in-mixin │ │ └── index.js │ └── selector-no-deep │ │ └── index.js └── tslint-rules │ ├── fileNameCasingScopedRule.ts │ ├── missingRollupGlobalsRule.ts │ ├── noExposedTodoRule.ts │ ├── noHostDecoratorInConcreteRule.ts │ ├── noImportSpacingRule.ts │ ├── noPrivateGettersRule.ts │ ├── noUnescapedHtmlTagRule.ts │ ├── requireBreakingChangeVersionRule.ts │ ├── requireLicenseBannerRule.ts │ ├── rxjsImportsRule.ts │ ├── settersAfterGettersRule.ts │ ├── tsLoaderRule.js │ └── validateDecoratorsRule.ts ├── tsconfig.json ├── tslint.json └── yarn.lock /.bazelignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "staging": "material2-dev" 4 | } 5 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature---proposal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature / Proposal 3 | about: Propose a new feature for Angular Material or CDK 4 | 5 | --- 6 | 7 | #### Please describe the feature you would like to request. 8 | 9 | 10 | #### What is the use-case or motivation for this proposal? 11 | 12 | 13 | #### Is there anything else we should know? 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-proposal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature/Proposal 3 | about: Propose a new feature for Angular Material or CDK 4 | 5 | --- 6 | 7 | #### Please describe the feature you would like to request. 8 | 9 | 10 | #### What is the use-case or motivation for this proposal? 11 | 12 | 13 | #### Is there anything else we should know? 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature 3 | about: Propose a new feature for Angular Material or CDK 4 | 5 | --- 6 | 7 | #### Please describe the feature you would like to request. 8 | 9 | 10 | #### What is the use-case or motivation for this proposal? 11 | 12 | 13 | #### Is there anything else we should know? 14 | -------------------------------------------------------------------------------- /.github/branch-manager.yml: -------------------------------------------------------------------------------- 1 | enabled: true 2 | 3 | branches: 4 | # Temporary disabled until https://github.com/angular/material2/issues/14582 is fixed, and the 5 | # caretaker starts cherry-picking commits into the patch publish branch again. 6 | # - branchName: 7.2.x 7 | # label: "target: patch" 8 | # - branchName: 7.x 9 | # label: "target: minor" 10 | -------------------------------------------------------------------------------- /BUILD.bazel: -------------------------------------------------------------------------------- 1 | package(default_visibility = ["//visibility:public"]) 2 | -------------------------------------------------------------------------------- /e2e/components/button-toggle-e2e.spec.ts: -------------------------------------------------------------------------------- 1 | import {browser, by, element} from 'protractor'; 2 | 3 | describe('button-toggle', () => { 4 | 5 | beforeEach(() => browser.get('/button-toggle')); 6 | 7 | it('should show a button-toggle', async () => { 8 | expect(element(by.tagName('mat-button-toggle'))).toBeDefined(); 9 | }); 10 | 11 | }); 12 | -------------------------------------------------------------------------------- /e2e/components/card-e2e.spec.ts: -------------------------------------------------------------------------------- 1 | import {browser, by, element} from 'protractor'; 2 | 3 | describe('mat-card', () => { 4 | 5 | beforeEach(() => browser.get('/cards')); 6 | 7 | it('should show a card', async () => { 8 | const card = element(by.tagName('mat-card')); 9 | expect(card).toBeDefined(); 10 | }); 11 | 12 | }); 13 | -------------------------------------------------------------------------------- /e2e/components/toolbar-e2e.spec.ts: -------------------------------------------------------------------------------- 1 | import {browser, by, element} from 'protractor'; 2 | 3 | describe('mat-toolbar', () => { 4 | 5 | beforeEach(() => browser.get('/toolbar')); 6 | 7 | it('should show a toolbar', async () => { 8 | expect(element(by.tagName('mat-toolbar'))).toBeDefined(); 9 | }); 10 | 11 | }); 12 | -------------------------------------------------------------------------------- /e2e/index-e2e.spec.ts: -------------------------------------------------------------------------------- 1 | import {browser} from 'protractor'; 2 | 3 | describe('hello, protractor', () => { 4 | describe('index', () => { 5 | browser.get('/'); 6 | it('should have a title', async () => { 7 | expect(await browser.getTitle()).toBe('Angular Material'); 8 | }); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /e2e/util/index.ts: -------------------------------------------------------------------------------- 1 | export * from './actions'; 2 | export * from './asserts'; 3 | export * from './query'; 4 | -------------------------------------------------------------------------------- /guides/BUILD.bazel: -------------------------------------------------------------------------------- 1 | package(default_visibility=["//visibility:public"]) 2 | 3 | load("//tools:defaults.bzl", "markdown_to_html") 4 | 5 | markdown_to_html( 6 | name = "guides", 7 | srcs = glob(["**/*.md"]), 8 | ) 9 | -------------------------------------------------------------------------------- /scripts/deploy/deploy-cn.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -x 4 | set -e 5 | 6 | git clone https://github.com/ng-docs/material.github.io.git 7 | 8 | cd ./material.github.io 9 | 10 | npm i 11 | 12 | ./scripts/ci/deploy-cn.sh 13 | 14 | cd - 15 | 16 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | Angular Material 2 | ======= 3 | 4 | The sources for this package are in the main [Angular Material](https://github.com/angular/material2) repo. Please file issues and pull requests against that repo. 5 | 6 | License: MIT -------------------------------------------------------------------------------- /src/a11y-demo/autocomplete/autocomplete-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/autocomplete/autocomplete-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/button-toggle/button-toggle-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/button-toggle/button-toggle-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/button/button-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-button { 2 | button, a { 3 | margin: 8px; 4 | text-transform: uppercase; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/a11y-demo/card/assets/dachshund-avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/card/assets/dachshund-avatar.jpg -------------------------------------------------------------------------------- /src/a11y-demo/card/assets/dachshund.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/card/assets/dachshund.jpg -------------------------------------------------------------------------------- /src/a11y-demo/card/assets/shiba-inu-avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/card/assets/shiba-inu-avatar.jpg -------------------------------------------------------------------------------- /src/a11y-demo/card/assets/shiba-inu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/card/assets/shiba-inu.jpg -------------------------------------------------------------------------------- /src/a11y-demo/card/card-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-card button { 2 | text-transform: uppercase; 3 | } 4 | 5 | .demo-card { 6 | max-width: 450px; 7 | } 8 | -------------------------------------------------------------------------------- /src/a11y-demo/checkbox/checkbox-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-sub-list { 2 | margin-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /src/a11y-demo/chips/chips-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/chips/chips-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/datepicker/datepicker-a11y.scss: -------------------------------------------------------------------------------- 1 | .mat-form-field { 2 | width: 250px; 3 | } 4 | -------------------------------------------------------------------------------- /src/a11y-demo/dialog/dialog-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/dialog/dialog-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/dialog/dialog-fruit-a11y.html: -------------------------------------------------------------------------------- 1 |

Fruit

2 |
Which would you like to choose?
3 |
4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/a11y-demo/dialog/dialog-neptune-iframe-a11y.html: -------------------------------------------------------------------------------- 1 |

Neptune

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/a11y-demo/expansion/expansion-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-expansion { 2 | button, a { 3 | margin: 8px; 4 | text-transform: uppercase; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/a11y-demo/grid-list/grid-list-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/grid-list/grid-list-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/list/list-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-list { 2 | .mat-list, .mat-nav-list { 3 | border: 1px solid rgba(0, 0, 0, 0.12); 4 | max-width: 350px; 5 | margin: 20px 20px 0 0; 6 | } 7 | 8 | .demo-secondary-text { 9 | color: rgba(0, 0, 0, 0.54); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/a11y-demo/menu/menu-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-menu { 2 | section { 3 | display: flex; 4 | align-items: center; 5 | margin: 8px; 6 | } 7 | 8 | p { 9 | padding: 5px 15px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/a11y-demo/radio/radio-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/radio/radio-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/select/select-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-select-a11y-spacer { 2 | margin-bottom: 10px; 3 | } 4 | -------------------------------------------------------------------------------- /src/a11y-demo/sidenav/dual-sidenav-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-a11y-sidenav-spacer { 2 | flex: 1; 3 | } 4 | 5 | mat-sidenav.demo-a11y-sidenav-playlist { 6 | display: flex; 7 | flex-direction: column; 8 | width: 200px; 9 | } 10 | 11 | .demo-a11y-sidenav-playlist-header { 12 | text-align: center; 13 | } 14 | -------------------------------------------------------------------------------- /src/a11y-demo/sidenav/mobile-sidenav-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-a11y-sidenav-header-fixed { 2 | position: fixed; 3 | z-index: 2; 4 | } 5 | -------------------------------------------------------------------------------- /src/a11y-demo/table/table-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/table/table-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/tabs/tabs-a11y.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/a11y-demo/tabs/tabs-a11y.scss -------------------------------------------------------------------------------- /src/a11y-demo/toolbar/toolbar-a11y.scss: -------------------------------------------------------------------------------- 1 | .demo-button { 2 | button, a { 3 | margin: 8px; 4 | text-transform: uppercase; 5 | } 6 | 7 | section { 8 | display: flex; 9 | align-items: center; 10 | margin: 8px; 11 | } 12 | 13 | p { 14 | padding: 5px 15px; 15 | } 16 | } 17 | 18 | .demo-spacer { 19 | flex: 1 1 auto; 20 | } 21 | -------------------------------------------------------------------------------- /src/cdk-experimental/dialog/dialog-container.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/cdk-experimental/dialog/dialog-container.scss: -------------------------------------------------------------------------------- 1 | cdk-dialog-container { 2 | background: white; 3 | border-radius: 5px; 4 | display: block; 5 | padding: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /src/cdk-experimental/dialog/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk-experimental/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk-experimental/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './version'; 10 | -------------------------------------------------------------------------------- /src/cdk-experimental/scrolling/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk-experimental/scrolling/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './auto-size-virtual-scroll'; 10 | export * from './scrolling-module'; 11 | -------------------------------------------------------------------------------- /src/cdk-experimental/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@angular/cdk/*": ["../cdk/*"], 9 | "@angular/cdk-experimental/*": ["../cdk-experimental/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /src/cdk-experimental/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var module: {id: string}; 2 | -------------------------------------------------------------------------------- /src/cdk/a11y/a11y-prebuilt.scss: -------------------------------------------------------------------------------- 1 | @import './a11y'; 2 | 3 | @include cdk-a11y(); 4 | -------------------------------------------------------------------------------- /src/cdk/a11y/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/a11y/key-manager/focus-key-manager.md: -------------------------------------------------------------------------------- 1 | ### FocusKeyManager 2 | 3 | `ListKeyManager` manages the focus of an item based on keyboard interaction. 4 | 5 | `ListKeyManager` 会基于键盘的交互来管理条目的焦点。 6 | 7 | -------------------------------------------------------------------------------- /src/cdk/accordion/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/accordion/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export {CdkAccordionItem} from './accordion-item'; 10 | export {CdkAccordion} from './accordion'; 11 | export * from './accordion-module'; 12 | -------------------------------------------------------------------------------- /src/cdk/bidi/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/coercion/coercion.md: -------------------------------------------------------------------------------- 1 | ### Coercion 2 | 3 | ### 强制转换 4 | 5 | Utility functions for coercing `@Input`s into specific types. 6 | 7 | 用于将 `@Input` 强制转换为特定类型的实用函数。 8 | -------------------------------------------------------------------------------- /src/cdk/coercion/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/collections/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/drag-drop/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/keycodes/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/keycodes/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './keycodes'; 10 | export * from './modifiers'; 11 | -------------------------------------------------------------------------------- /src/cdk/layout/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | export * from './public-api'; 9 | -------------------------------------------------------------------------------- /src/cdk/layout/layout-module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | import {NgModule} from '@angular/core'; 9 | 10 | 11 | @NgModule({}) 12 | export class LayoutModule {} 13 | -------------------------------------------------------------------------------- /src/cdk/observers/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/observers/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './observe-content'; 10 | -------------------------------------------------------------------------------- /src/cdk/overlay/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/overlay/overlay-prebuilt.scss: -------------------------------------------------------------------------------- 1 | @import './overlay'; 2 | 3 | @include cdk-overlay(); 4 | -------------------------------------------------------------------------------- /src/cdk/platform/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/platform/platform-module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | import {NgModule} from '@angular/core'; 10 | 11 | 12 | @NgModule({}) 13 | export class PlatformModule {} 14 | -------------------------------------------------------------------------------- /src/cdk/platform/platform.md: -------------------------------------------------------------------------------- 1 | ### Platform 2 | 3 | ### 平台 4 | 5 | A set of utilities that gather information about the current 6 | platform and the different features it supports. 7 | 8 | 一组用于采集当前平台信息,及其所支持的各种特性的实用工具。 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/cdk/portal/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | 10 | 11 | export * from './public-api'; 12 | -------------------------------------------------------------------------------- /src/cdk/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './version'; 10 | -------------------------------------------------------------------------------- /src/cdk/schematics/README.md: -------------------------------------------------------------------------------- 1 | ## CDK schematics 2 | 3 | ## CDK 原理图(schematic) 4 | 5 | The sources of this directory are only used internally and should not be considered 6 | as part of the public API 7 | 8 | 该目录下的源代码只供内部使用,不应该作为公共 API 的一部分。 9 | -------------------------------------------------------------------------------- /src/cdk/schematics/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './utils'; 10 | export * from './ng-update/public-api'; 11 | -------------------------------------------------------------------------------- /src/cdk/schematics/ng-add/schema.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export interface Schema { 10 | 11 | /** Name of the project to target. */ 12 | project: string; 13 | } 14 | -------------------------------------------------------------------------------- /src/cdk/schematics/ng-update/test-cases/index.spec.ts: -------------------------------------------------------------------------------- 1 | /** Path to the schematic collection that includes the migrations. */ 2 | export const migrationCollection = require.resolve('../../migration.json'); 3 | -------------------------------------------------------------------------------- /src/cdk/schematics/ng-update/test-cases/v6/class-names_expected_output.ts: -------------------------------------------------------------------------------- 1 | import {CdkConnectedOverlay, CdkOverlayOrigin} from '@angular/cdk/overlay'; 2 | import {CdkObserveContent} from '@angular/cdk/observers'; 3 | import {CdkTrapFocus} from '@angular/cdk/a11y'; 4 | 5 | const a = new CdkConnectedOverlay(); 6 | const b = new CdkOverlayOrigin(); 7 | const c = new CdkObserveContent(); 8 | const d = new CdkTrapFocus(); 9 | -------------------------------------------------------------------------------- /src/cdk/schematics/ng-update/test-cases/v6/class-names_input.ts: -------------------------------------------------------------------------------- 1 | import {ConnectedOverlayDirective, OverlayOrigin} from '@angular/cdk/overlay'; 2 | import {ObserveContent} from '@angular/cdk/observers'; 3 | import {FocusTrapDirective} from '@angular/cdk/a11y'; 4 | 5 | const a = new ConnectedOverlayDirective(); 6 | const b = new OverlayOrigin(); 7 | const c = new ObserveContent(); 8 | const d = new FocusTrapDirective(); 9 | -------------------------------------------------------------------------------- /src/cdk/scrolling/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/stepper/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/table/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | 10 | 11 | export * from './public-api'; 12 | -------------------------------------------------------------------------------- /src/cdk/testing/BUILD.bazel: -------------------------------------------------------------------------------- 1 | package(default_visibility=["//visibility:public"]) 2 | 3 | load("//tools:defaults.bzl", "ng_module") 4 | 5 | ng_module( 6 | name = "testing", 7 | srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]), 8 | module_name = "@angular/cdk/testing", 9 | deps = [ 10 | "@angular//packages/core", 11 | ], 12 | ) 13 | -------------------------------------------------------------------------------- /src/cdk/testing/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/text-field/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/cdk/text-field/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './autofill'; 10 | export * from './autosize'; 11 | export * from './text-field-module'; 12 | -------------------------------------------------------------------------------- /src/cdk/text-field/text-field-prebuilt.scss: -------------------------------------------------------------------------------- 1 | @import 'text-field'; 2 | 3 | @include cdk-text-field(); 4 | -------------------------------------------------------------------------------- /src/cdk/tree/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | 10 | export * from './public-api'; 11 | -------------------------------------------------------------------------------- /src/cdk/tree/tsconfig-build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig-build", 3 | "files": [ 4 | "public-api.ts", 5 | "../typings.d.ts" 6 | ], 7 | "angularCompilerOptions": { 8 | "annotateForClosureCompiler": true, 9 | "strictMetadataEmit": true, 10 | "flatModuleOutFile": "index.js", 11 | "flatModuleId": "@angular/cdk/tree", 12 | "skipTemplateCodegen": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/cdk/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@angular/cdk/*": ["./*"] 9 | } 10 | }, 11 | "include": ["./**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /src/cdk/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var module: {id: string}; 2 | -------------------------------------------------------------------------------- /src/dev-app/badge/badge-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-badge { 2 | margin-bottom: 25px; 3 | } 4 | 5 | .mat-badge { 6 | margin-right: 22px; 7 | 8 | [dir='rtl'] & { 9 | margin-right: 0; 10 | margin-left: 22px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/dev-app/baseline/baseline-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-basic { 2 | padding: 0; 3 | } 4 | 5 | .demo-basic .mat-card-content { 6 | padding: 16px; 7 | } 8 | 9 | .demo-full-width { 10 | width: 100%; 11 | } 12 | 13 | .demo-card { 14 | margin: 16px; 15 | } 16 | -------------------------------------------------------------------------------- /src/dev-app/bottom-sheet/bottom-sheet-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-dialog-card { 2 | max-width: 405px; 3 | margin: 20px 0; 4 | } 5 | 6 | .mat-raised-button { 7 | margin-right: 5px; 8 | } 9 | -------------------------------------------------------------------------------- /src/dev-app/button-toggle/button-toggle-demo.scss: -------------------------------------------------------------------------------- 1 | section { 2 | margin-bottom: 16px; 3 | } 4 | -------------------------------------------------------------------------------- /src/dev-app/checkbox/checkbox-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-checkbox { 2 | margin: 8px 0; 3 | } 4 | -------------------------------------------------------------------------------- /src/dev-app/datepicker/custom-header.scss: -------------------------------------------------------------------------------- 1 | .demo-calendar-header { 2 | display: flex; 3 | align-items: center; 4 | padding: 0.5em; 5 | } 6 | 7 | .demo-calendar-header-label { 8 | flex: 1; 9 | height: 1em; 10 | font-weight: bold; 11 | text-align: center; 12 | } 13 | 14 | .demo-double-arrow .mat-icon { 15 | margin: -22%; 16 | } 17 | -------------------------------------------------------------------------------- /src/dev-app/datepicker/datepicker-demo.scss: -------------------------------------------------------------------------------- 1 | mat-calendar { 2 | width: 300px; 3 | } 4 | 5 | -------------------------------------------------------------------------------- /src/dev-app/dialog/dialog-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-dialog-card { 2 | max-width: 405px; 3 | margin: 20px 0; 4 | } 5 | 6 | button { 7 | margin-right: 8px; 8 | 9 | [dir='rtl'] & { 10 | margin-left: 8px; 11 | margin-right: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/dev-app/drawer/drawer-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-drawer-container { 2 | border: 3px solid black; 3 | } 4 | 5 | .demo-drawer-content { 6 | padding: 15px; 7 | } 8 | -------------------------------------------------------------------------------- /src/dev-app/expansion/expansion-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-expansion-width { 2 | width: 600px; 3 | display: block; 4 | } 5 | 6 | .demo-expansion-code { 7 | background: #d3d3d3; 8 | display: block; 9 | height: 10em; 10 | overflow: auto; 11 | padding: 0 5px; 12 | width: 400px; 13 | 14 | pre { 15 | margin: 0.25em 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/dev-app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/dev-app/favicon.ico -------------------------------------------------------------------------------- /src/dev-app/gestures/gestures-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-gestures div { 2 | height: 100px; 3 | width: 200px; 4 | background: gray; 5 | padding: 15px; 6 | color: white; 7 | } 8 | -------------------------------------------------------------------------------- /src/dev-app/grid-list/grid-list-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-grid-list { 2 | width: 1100px; 3 | 4 | .mat-card { 5 | margin: 16px 0; 6 | } 7 | 8 | p { 9 | margin: 16px; 10 | } 11 | 12 | .demo-basic-list .mat-grid-tile { 13 | background: rgba(0, 0, 0, 0.32); 14 | } 15 | 16 | img { 17 | width: 350px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/dev-app/icon/assets/search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/dev-app/icon/assets/thumbup-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/dev-app/icon/icon-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-icon .mat-icon.demo-icon-green { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /src/dev-app/live-announcer/live-announcer-demo.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/dev-app/menu/menu-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-menu { 2 | display: flex; 3 | flex-flow: row wrap; 4 | 5 | .demo-menu-section { 6 | width: 300px; 7 | margin: 20px; 8 | } 9 | 10 | .demo-end-icon { 11 | justify-content: flex-end; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/dev-app/paginator/paginator-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-section { 2 | max-width: 500px; 3 | margin-bottom: 24px; 4 | background: #efefef !important; 5 | 6 | & > * { 7 | margin: 32px 0; 8 | } 9 | } 10 | 11 | .demo-options { 12 | display: flex; 13 | flex-direction: column; 14 | max-width: 300px; 15 | } 16 | -------------------------------------------------------------------------------- /src/dev-app/portal/portal-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-portal-outlet { 2 | margin-bottom: 10px; 3 | padding: 10px; 4 | border: 1px dashed black; 5 | width: 500px; 6 | height: 100px; 7 | } 8 | -------------------------------------------------------------------------------- /src/dev-app/progress-bar/progress-bar-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-progress-bar-container { 2 | width: 100%; 3 | 4 | mat-progress-bar { 5 | margin: 20px 0; 6 | } 7 | } 8 | 9 | .demo-progress-bar-spacer { 10 | display: inline-block; 11 | width: 50px; 12 | } 13 | 14 | .demo-progress-bar-controls { 15 | margin: 10px 0; 16 | } 17 | -------------------------------------------------------------------------------- /src/dev-app/progress-spinner/progress-spinner-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-progress-spinner { 2 | width: 100%; 3 | 4 | .mat-progress-spinner, 5 | .mat-spinner { 6 | display: inline-block; 7 | } 8 | 9 | } 10 | 11 | .demo-progress-spinner-controls { 12 | margin: 10px 0; 13 | } 14 | -------------------------------------------------------------------------------- /src/dev-app/radio/radio-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-button { 2 | margin: 8px; 3 | text-transform: uppercase; 4 | } 5 | 6 | .demo-section { 7 | margin: 8px; 8 | padding: 16px; 9 | 10 | .mat-radio-button { 11 | margin: 8px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/dev-app/ripple/ripple-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-ripple { 2 | button, a { 3 | margin: 8px; 4 | text-transform: uppercase; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/dev-app/select/select-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-select { 2 | display: flex; 3 | flex-flow: row wrap; 4 | 5 | .mat-card { 6 | width: 450px; 7 | margin: 24px; 8 | } 9 | 10 | .demo-drink-icon { 11 | vertical-align: bottom; 12 | padding-right: 0.25em; 13 | } 14 | } 15 | 16 | .demo-card { 17 | margin-bottom: 30px; 18 | } 19 | -------------------------------------------------------------------------------- /src/dev-app/slide-toggle/slide-toggle-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-slide-toggle { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: flex-start; 5 | 6 | mat-slide-toggle { 7 | margin: 6px 0; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/dev-app/tabs/tabs-demo.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/dev-app/toolbar/toolbar-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-toolbar { 2 | padding: 6px; 3 | 4 | .demo-toolbar-icon { 5 | padding: 0 14px; 6 | } 7 | 8 | .demo-fill-remaining { 9 | flex: 1 1 auto; 10 | } 11 | 12 | button { 13 | margin: 0 4px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/dev-app/tooltip/tooltip-demo.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-tree-node-invisible { 2 | display: none; 3 | } 4 | 5 | .demo-tree-node-nested { 6 | padding-left: 40px; 7 | } 8 | -------------------------------------------------------------------------------- /src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-tree-node-invisible { 2 | display: none; 3 | } 4 | 5 | .demo-tree-node-nested { 6 | padding-left: 40px; 7 | } 8 | -------------------------------------------------------------------------------- /src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss: -------------------------------------------------------------------------------- 1 | .demo-tree-progress-bar { 2 | margin-left: 30px; 3 | } 4 | -------------------------------------------------------------------------------- /src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.scss -------------------------------------------------------------------------------- /src/dev-app/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | declare var module: {id: string}; 10 | -------------------------------------------------------------------------------- /src/dev-app/typography/typography-demo.scss: -------------------------------------------------------------------------------- 1 | .mat-body { 2 | max-width: 800px; 3 | } 4 | -------------------------------------------------------------------------------- /src/e2e-app/button/button-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'button-e2e', 6 | templateUrl: 'button-e2e.html', 7 | }) 8 | export class ButtonE2E { 9 | isDisabled: boolean = false; 10 | clickCounter: number = 0; 11 | } 12 | -------------------------------------------------------------------------------- /src/e2e-app/checkbox/checkbox-e2e.html: -------------------------------------------------------------------------------- 1 | Check this button 2 | -------------------------------------------------------------------------------- /src/e2e-app/checkbox/checkbox-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'checkbox-e2e', 6 | templateUrl: 'checkbox-e2e.html', 7 | }) 8 | export class SimpleCheckboxes {} 9 | -------------------------------------------------------------------------------- /src/e2e-app/dialog/dialog-e2e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
my template dialog
6 | -------------------------------------------------------------------------------- /src/e2e-app/e2e-app-types.d.ts: -------------------------------------------------------------------------------- 1 | declare var module: { id: string }; 2 | -------------------------------------------------------------------------------- /src/e2e-app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/e2e-app/favicon.ico -------------------------------------------------------------------------------- /src/e2e-app/grid-list/grid-list-e2e.html: -------------------------------------------------------------------------------- 1 | 2 | One 3 | Two 4 | Three 5 | Four 6 | 7 | -------------------------------------------------------------------------------- /src/e2e-app/grid-list/grid-list-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'grid-list-e2e', 6 | templateUrl: 'grid-list-e2e.html', 7 | }) 8 | export class GridListE2E {} 9 | -------------------------------------------------------------------------------- /src/e2e-app/icon/icon-e2e.html: -------------------------------------------------------------------------------- 1 |
2 | favorite 3 |
4 | -------------------------------------------------------------------------------- /src/e2e-app/icon/icon-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | selector: 'icon-e2e', 7 | templateUrl: 'icon-e2e.html', 8 | }) 9 | export class IconE2E {} 10 | -------------------------------------------------------------------------------- /src/e2e-app/input/input-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | selector: 'input-e2e', 7 | templateUrl: 'input-e2e.html', 8 | }) 9 | export class InputE2E {} 10 | -------------------------------------------------------------------------------- /src/e2e-app/main.ts: -------------------------------------------------------------------------------- 1 | import {platformBrowser} from '@angular/platform-browser'; 2 | import {E2eAppModuleNgFactory} from './e2e-app-module.ngfactory'; 3 | import {enableProdMode} from '@angular/core'; 4 | 5 | enableProdMode(); 6 | 7 | platformBrowser().bootstrapModuleFactory(E2eAppModuleNgFactory); 8 | -------------------------------------------------------------------------------- /src/e2e-app/progress-bar/progress-bar-e2e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/e2e-app/progress-spinner/progress-spinner-e2e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/e2e-app/progress-spinner/progress-spinner-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'progress-spinner-e2e', 6 | templateUrl: 'progress-spinner-e2e.html', 7 | }) 8 | export class ProgressSpinnerE2E { } 9 | -------------------------------------------------------------------------------- /src/e2e-app/radio/radio-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'radio-e2e', 6 | templateUrl: 'radio-e2e.html', 7 | }) 8 | export class SimpleRadioButtons { 9 | isGroupDisabled: boolean = false; 10 | groupValue: string; 11 | } 12 | -------------------------------------------------------------------------------- /src/e2e-app/sidenav/sidenav-e2e.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Drawer content 4 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /src/e2e-app/sidenav/sidenav-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | selector: 'sidenav-e2e', 7 | templateUrl: 'sidenav-e2e.html', 8 | }) 9 | export class SidenavE2E { 10 | } 11 | -------------------------------------------------------------------------------- /src/e2e-app/slide-toggle/slide-toggle-e2e.html: -------------------------------------------------------------------------------- 1 | Slide Toggle 2 | Disabled Slide Toggle -------------------------------------------------------------------------------- /src/e2e-app/slide-toggle/slide-toggle-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'slide-toggle-e2e', 6 | templateUrl: 'slide-toggle-e2e.html', 7 | }) 8 | export class SlideToggleE2E { } 9 | -------------------------------------------------------------------------------- /src/e2e-app/tabs/tabs-e2e.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'tabs-e2e', 6 | templateUrl: 'tabs-e2e.html', 7 | }) 8 | export class BasicTabs {} 9 | -------------------------------------------------------------------------------- /src/e2e-app/virtual-scroll/virtual-scroll-e2e.css: -------------------------------------------------------------------------------- 1 | .demo-viewport { 2 | height: 300px; 3 | width: 300px; 4 | box-shadow: 0 0 0 1px black; 5 | } 6 | 7 | .demo-item { 8 | background: magenta; 9 | } 10 | 11 | .demo-odd { 12 | background: cyan; 13 | } 14 | -------------------------------------------------------------------------------- /src/lib/autocomplete/README.md: -------------------------------------------------------------------------------- 1 | See documentation on [material.angular.io](https://material.angular.io/). -------------------------------------------------------------------------------- /src/lib/autocomplete/autocomplete.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 |
6 | -------------------------------------------------------------------------------- /src/lib/autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/autocomplete/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './autocomplete'; 10 | export * from './autocomplete-module'; 11 | export * from './autocomplete-trigger'; 12 | 13 | -------------------------------------------------------------------------------- /src/lib/badge/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/badge/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './badge-module'; 10 | export * from './badge'; 11 | -------------------------------------------------------------------------------- /src/lib/bottom-sheet/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/bottom-sheet 2 | -------------------------------------------------------------------------------- /src/lib/bottom-sheet/bottom-sheet-container.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/bottom-sheet/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/button-toggle/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/button-toggle -------------------------------------------------------------------------------- /src/lib/button-toggle/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/button-toggle/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './button-toggle'; 10 | export * from './button-toggle-module'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/button/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/button -------------------------------------------------------------------------------- /src/lib/button/button.html: -------------------------------------------------------------------------------- 1 | 2 |
7 |
8 | -------------------------------------------------------------------------------- /src/lib/button/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/button/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './button-module'; 10 | export * from './button'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/card/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/card -------------------------------------------------------------------------------- /src/lib/card/card-header.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /src/lib/card/card-title-group.html: -------------------------------------------------------------------------------- 1 |
2 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /src/lib/card/card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/lib/card/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/card/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './card'; 10 | export * from './card-module'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/checkbox/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/checkbox -------------------------------------------------------------------------------- /src/lib/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/chips/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/chips -------------------------------------------------------------------------------- /src/lib/chips/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/core/README.md: -------------------------------------------------------------------------------- 1 | Core library code for other `@angular/material` components. 2 | -------------------------------------------------------------------------------- /src/lib/core/common-behaviors/constructor.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | /** @docs-private */ 10 | export type Constructor = new(...args: any[]) => T; 11 | -------------------------------------------------------------------------------- /src/lib/core/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/core/option/optgroup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/lib/core/option/optgroup.scss: -------------------------------------------------------------------------------- 1 | @import '../style/menu-common'; 2 | @import '../style/vendor-prefixes'; 3 | 4 | .mat-optgroup-label { 5 | @include mat-menu-item-base(); 6 | @include user-select(none); 7 | cursor: default; 8 | } 9 | -------------------------------------------------------------------------------- /src/lib/core/style/_checkbox-common.scss: -------------------------------------------------------------------------------- 1 | @import './variables'; 2 | 3 | // The width/height of the checkbox element. 4 | $mat-checkbox-size: 16px !default; 5 | 6 | // The width of the checkbox border shown when the checkbox is unchecked. 7 | $mat-checkbox-border-width: 2px; 8 | 9 | // The base duration used for the majority of transitions for the checkbox. 10 | $mat-checkbox-transition-duration: 90ms; 11 | -------------------------------------------------------------------------------- /src/lib/core/style/_layout-common.scss: -------------------------------------------------------------------------------- 1 | // This mixin ensures an element spans to fill the nearest ancestor with defined positioning. 2 | @mixin mat-fill { 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | position: absolute; 8 | } 9 | -------------------------------------------------------------------------------- /src/lib/core/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var module: {id: string}; 2 | -------------------------------------------------------------------------------- /src/lib/datepicker/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/datepicker 2 | -------------------------------------------------------------------------------- /src/lib/datepicker/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/dialog/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/dialog 2 | -------------------------------------------------------------------------------- /src/lib/dialog/dialog-container.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/dialog/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/divider/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/divider -------------------------------------------------------------------------------- /src/lib/divider/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/divider/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './divider'; 10 | export * from './divider-module'; 11 | -------------------------------------------------------------------------------- /src/lib/expansion/expansion-panel-header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | -------------------------------------------------------------------------------- /src/lib/expansion/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/form-field/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/form-field 2 | -------------------------------------------------------------------------------- /src/lib/form-field/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/grid-list/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/grid-list -------------------------------------------------------------------------------- /src/lib/grid-list/grid-list.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /src/lib/grid-list/grid-tile-text.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | -------------------------------------------------------------------------------- /src/lib/grid-list/grid-tile.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
-------------------------------------------------------------------------------- /src/lib/grid-list/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/grid-list/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './grid-list-module'; 10 | export * from './grid-list'; 11 | export * from './grid-tile'; 12 | 13 | -------------------------------------------------------------------------------- /src/lib/icon/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/icon 2 | -------------------------------------------------------------------------------- /src/lib/icon/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/icon/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './icon-module'; 10 | export * from './icon'; 11 | export * from './icon-registry'; 12 | 13 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/input/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/input 2 | -------------------------------------------------------------------------------- /src/lib/input/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/list/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/list -------------------------------------------------------------------------------- /src/lib/list/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/list/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/lib/list/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './list-module'; 10 | export * from './list'; 11 | export * from './selection-list'; 12 | 13 | -------------------------------------------------------------------------------- /src/lib/menu/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/menu 2 | -------------------------------------------------------------------------------- /src/lib/menu/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/menu/menu-item.html: -------------------------------------------------------------------------------- 1 | 2 |
5 |
6 | -------------------------------------------------------------------------------- /src/lib/menu/menu-positions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export type MenuPositionX = 'before' | 'after'; 10 | 11 | export type MenuPositionY = 'above' | 'below'; 12 | -------------------------------------------------------------------------------- /src/lib/paginator/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/paginator/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './paginator-module'; 10 | export * from './paginator'; 11 | export * from './paginator-intl'; 12 | 13 | -------------------------------------------------------------------------------- /src/lib/progress-bar/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/progress-bar -------------------------------------------------------------------------------- /src/lib/progress-bar/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/progress-bar/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './progress-bar-module'; 10 | export * from './progress-bar'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/progress-spinner/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/progress-spinner -------------------------------------------------------------------------------- /src/lib/progress-spinner/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/progress-spinner/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './progress-spinner-module'; 10 | export * from './progress-spinner'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/radio/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/radio -------------------------------------------------------------------------------- /src/lib/radio/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/radio/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './radio-module'; 10 | export * from './radio'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/schematics/cdk-shared-logic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/lib/schematics/cdk-shared-logic.png -------------------------------------------------------------------------------- /src/lib/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__: -------------------------------------------------------------------------------- 1 | .sidenav-container { 2 | height: 100%; 3 | } 4 | 5 | .sidenav { 6 | width: 200px; 7 | } 8 | 9 | .sidenav .mat-toolbar { 10 | background: inherit; 11 | } 12 | 13 | .mat-toolbar.mat-primary { 14 | position: sticky; 15 | top: 0; 16 | z-index: 1; 17 | } 18 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__: -------------------------------------------------------------------------------- 1 | .full-width-table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__: -------------------------------------------------------------------------------- 1 | .type-icon { 2 | color: #757575; 3 | margin-right: 5px; 4 | } 5 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/index.spec.ts: -------------------------------------------------------------------------------- 1 | /** Path to the schematic collection that includes the Angular Material migrations. */ 2 | export const migrationCollection = require.resolve('../../migration.json'); 3 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/misc/import-checks_input.ts: -------------------------------------------------------------------------------- 1 | import {SHOW_ANIMATION, HIDE_ANIMATION} from '@angular/material'; 2 | 3 | console.log(SHOW_ANIMATION, HIDE_ANIMATION); 4 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/v6/attribute-selectors_expected_output.ts: -------------------------------------------------------------------------------- 1 | // No upgrade data for Material 2 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/v6/attribute-selectors_input.ts: -------------------------------------------------------------------------------- 1 | // No upgrade data for Material 2 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/v6/class-names_expected_output.ts: -------------------------------------------------------------------------------- 1 | import {FloatLabelType, LabelOptions, MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material'; 2 | 3 | const a: FloatLabelType = 'test'; 4 | const b: LabelOptions = 'opt2'; 5 | 6 | const c = {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: 'test-options'}; 7 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/v6/class-names_input.ts: -------------------------------------------------------------------------------- 1 | import {FloatPlaceholderType, PlaceholderOptions, MAT_PLACEHOLDER_GLOBAL_OPTIONS} from '@angular/material'; 2 | 3 | const a: FloatPlaceholderType = 'test'; 4 | const b: PlaceholderOptions = 'opt2'; 5 | 6 | const c = {provide: MAT_PLACEHOLDER_GLOBAL_OPTIONS, useValue: 'test-options'}; 7 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/v7/property-names_expected_output.ts: -------------------------------------------------------------------------------- 1 | // No upgrade data for Material 2 | -------------------------------------------------------------------------------- /src/lib/schematics/ng-update/test-cases/v7/property-names_input.ts: -------------------------------------------------------------------------------- 1 | // No upgrade data for Material 2 | -------------------------------------------------------------------------------- /src/lib/select/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/select -------------------------------------------------------------------------------- /src/lib/select/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/select/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './select-module'; 10 | export * from './select'; 11 | export * from './select-animations'; 12 | -------------------------------------------------------------------------------- /src/lib/sidenav/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/sidenav 2 | -------------------------------------------------------------------------------- /src/lib/sidenav/drawer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/lib/sidenav/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/sidenav/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './sidenav-module'; 10 | export * from './drawer'; 11 | export * from './sidenav'; 12 | export * from './drawer-animations'; 13 | -------------------------------------------------------------------------------- /src/lib/slide-toggle/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/slide-toggle -------------------------------------------------------------------------------- /src/lib/slide-toggle/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/slide-toggle/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './slide-toggle-module'; 10 | export * from './slide-toggle'; 11 | export * from './slide-toggle-config'; 12 | -------------------------------------------------------------------------------- /src/lib/slider/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/slider -------------------------------------------------------------------------------- /src/lib/slider/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/slider/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './slider-module'; 10 | export * from './slider'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/snack-bar/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/snack-bar 2 | -------------------------------------------------------------------------------- /src/lib/snack-bar/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/snack-bar/simple-snack-bar.html: -------------------------------------------------------------------------------- 1 | {{data.message}} 2 |
3 | 4 |
5 | -------------------------------------------------------------------------------- /src/lib/snack-bar/snack-bar-container.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/sort/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/sort/sort-direction.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export type SortDirection = 'asc' | 'desc' | ''; 10 | -------------------------------------------------------------------------------- /src/lib/stepper/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/stepper/step.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/table/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/tabs/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/tabs -------------------------------------------------------------------------------- /src/lib/tabs/Tabs Pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/lib/tabs/Tabs Pagination.png -------------------------------------------------------------------------------- /src/lib/tabs/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/tabs/tab-body.html: -------------------------------------------------------------------------------- 1 |
8 | 9 |
10 | -------------------------------------------------------------------------------- /src/lib/tabs/tab-body.scss: -------------------------------------------------------------------------------- 1 | @import '../core/style/vendor-prefixes'; 2 | 3 | .mat-tab-body-content { 4 | height: 100%; 5 | overflow: auto; 6 | 7 | .mat-tab-group-dynamic-height & { 8 | overflow: hidden; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/lib/tabs/tab-nav-bar/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './tab-nav-bar'; 10 | -------------------------------------------------------------------------------- /src/lib/tabs/tab-nav-bar/tab-nav-bar.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/tabs/tab.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/lib/testing/BUILD.bazel: -------------------------------------------------------------------------------- 1 | package(default_visibility=["//visibility:public"]) 2 | 3 | load("//tools:defaults.bzl", "ng_module") 4 | 5 | ng_module( 6 | name = "testing", 7 | module_name = "@angular/material/testing", 8 | srcs = glob(["**/*.ts"]), 9 | deps = [ 10 | "@angular//packages/core", 11 | "//src/lib/core", 12 | ], 13 | ) 14 | -------------------------------------------------------------------------------- /src/lib/testing/README.md: -------------------------------------------------------------------------------- 1 | Note that this is not an entry-point. This directory is just used to share testing logic 2 | that is specific to Angular Material. 3 | -------------------------------------------------------------------------------- /src/lib/testing/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './month-constants'; 10 | export * from './test-gesture-config'; 11 | -------------------------------------------------------------------------------- /src/lib/toolbar/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/toolbar -------------------------------------------------------------------------------- /src/lib/toolbar/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/toolbar/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './toolbar-module'; 10 | export * from './toolbar'; 11 | 12 | -------------------------------------------------------------------------------- /src/lib/toolbar/toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/lib/tooltip/README.md: -------------------------------------------------------------------------------- 1 | Please see the official documentation at https://material.angular.io/components/component/tooltip -------------------------------------------------------------------------------- /src/lib/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/tooltip/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './tooltip-module'; 10 | export * from './tooltip'; 11 | export * from './tooltip-animations'; 12 | -------------------------------------------------------------------------------- /src/lib/tooltip/tooltip.html: -------------------------------------------------------------------------------- 1 |
{{message}}
7 | -------------------------------------------------------------------------------- /src/lib/tree/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/lib/tree/tree.scss: -------------------------------------------------------------------------------- 1 | $mat-node-height: 48px; 2 | 3 | .mat-tree { 4 | display: block; 5 | } 6 | 7 | .mat-tree-node { 8 | display: flex; 9 | align-items: center; 10 | min-height: $mat-node-height; 11 | flex: 1; 12 | overflow: hidden; 13 | word-wrap: break-word; 14 | } 15 | 16 | .mat-nested-tree-ndoe { 17 | border-bottom-width: 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/lib/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@angular/cdk/*": ["../cdk/*"], 9 | "@angular/material/*": ["./*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /src/lib/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var module: {id: string}; 2 | -------------------------------------------------------------------------------- /src/lib/version.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | import {Version} from '@angular/core'; 10 | 11 | /** Current version of Angular Material. */ 12 | export const VERSION = new Version('0.0.0-PLACEHOLDER'); 13 | -------------------------------------------------------------------------------- /src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/autocomplete-display/autocomplete-display-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/autocomplete-filter/autocomplete-filter-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/autocomplete-simple/autocomplete-simple-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/badge-overview/badge-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/badge-overview/badge-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Badge overview 5 | */ 6 | @Component({ 7 | selector: 'badge-overview-example', 8 | templateUrl: 'badge-overview-example.html', 9 | styleUrls: ['badge-overview-example.css'], 10 | }) 11 | export class BadgeOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html: -------------------------------------------------------------------------------- 1 |

You have received a file called "cat-picture.jpeg".

2 | 3 | 4 | -------------------------------------------------------------------------------- /src/material-examples/button-overview/button-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/button-overview/button-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/button-overview/button-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic buttons 5 | */ 6 | @Component({ 7 | selector: 'button-overview-example', 8 | templateUrl: 'button-overview-example.html', 9 | styleUrls: ['button-overview-example.css'], 10 | }) 11 | export class ButtonOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/button-toggle-appearance/button-toggle-appearance-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css: -------------------------------------------------------------------------------- 1 | .example-selected-value { 2 | margin: 15px 0; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/button-toggle-overview/button-toggle-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/button-toggle-overview/button-toggle-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | Bold 3 | Italic 4 | Underline 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/button-types/button-types-example.css: -------------------------------------------------------------------------------- 1 | .example-button-row button, 2 | .example-button-row a { 3 | margin-right: 8px; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/button-types/button-types-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Button varieties 5 | */ 6 | @Component({ 7 | selector: 'button-types-example', 8 | templateUrl: 'button-types-example.html', 9 | styleUrls: ['button-types-example.css'], 10 | }) 11 | export class ButtonTypesExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/card-fancy/card-fancy-example.css: -------------------------------------------------------------------------------- 1 | .example-card { 2 | max-width: 400px; 3 | } 4 | 5 | .example-header-image { 6 | background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); 7 | background-size: cover; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/card-fancy/card-fancy-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Card with multiple sections 5 | */ 6 | @Component({ 7 | selector: 'card-fancy-example', 8 | templateUrl: 'card-fancy-example.html', 9 | styleUrls: ['card-fancy-example.css'], 10 | }) 11 | export class CardFancyExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/card-overview/card-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/card-overview/card-overview-example.html: -------------------------------------------------------------------------------- 1 | Simple card 2 | -------------------------------------------------------------------------------- /src/material-examples/card-overview/card-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic cards 5 | */ 6 | @Component({ 7 | selector: 'card-overview-example', 8 | templateUrl: 'card-overview-example.html', 9 | styleUrls: ['card-overview-example.css'], 10 | }) 11 | export class CardOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.html: -------------------------------------------------------------------------------- 1 |
2 | I can only be dragged up/down 3 |
4 | 5 |
6 | I can only be dragged left/right 7 |
8 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | I can only be dragged within the dotted container 4 |
5 |
6 | 7 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{movie}} 5 |
6 |
7 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{movie.title}} 4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html: -------------------------------------------------------------------------------- 1 |
2 |
{{item.value}}
7 |
8 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Drag&Drop with a handle 5 | */ 6 | @Component({ 7 | selector: 'cdk-drag-drop-handle-example', 8 | templateUrl: 'cdk-drag-drop-handle-example.html', 9 | styleUrls: ['cdk-drag-drop-handle-example.css'], 10 | }) 11 | export class CdkDragDropHandleExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html: -------------------------------------------------------------------------------- 1 |
2 |
{{timePeriod}}
3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.html: -------------------------------------------------------------------------------- 1 |
2 | Drag me around 3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic Drag&Drop 5 | */ 6 | @Component({ 7 | selector: 'cdk-drag-drop-overview-example', 8 | templateUrl: 'cdk-drag-drop-overview-example.html', 9 | styleUrls: ['cdk-drag-drop-overview-example.css'], 10 | }) 11 | export class CdkDragDropOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | Drag the dialog around! 6 |
7 |
8 | -------------------------------------------------------------------------------- /src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html: -------------------------------------------------------------------------------- 1 |
2 |
{{movie}}
3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/cdk-platform-overview/cdk-platform-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Add basic flex styling so that the cells evenly space themselves in the row. 3 | */ 4 | cdk-row, cdk-header-row, cdk-footer-row { 5 | display: flex; 6 | } 7 | 8 | cdk-cell, cdk-header-cell, cdk-footer-cell { 9 | flex: 1; 10 | } 11 | -------------------------------------------------------------------------------- /src/material-examples/cdk-table-basic/cdk-table-basic-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | th { 6 | text-align: left; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/cdk-tree-flat/cdk-tree-flat-example.css: -------------------------------------------------------------------------------- 1 | .example-tree-node { 2 | display: flex; 3 | align-items: center; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/cdk-tree-nested/cdk-tree-nested-example.css: -------------------------------------------------------------------------------- 1 | .example-tree-invisible { 2 | display: none; 3 | } 4 | 5 | .example-tree ul, 6 | .example-tree li { 7 | margin-top: 0; 8 | margin-bottom: 0; 9 | list-style-type: none; 10 | } 11 | 12 | .example-tree-node { 13 | display: block; 14 | padding-left: 40px; 15 | } 16 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-context/cdk-virtual-scroll-context-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-item-detail { 8 | height: 18px; 9 | } 10 | 11 | .example-alternate { 12 | background: rgba(127, 127, 127, 0.3); 13 | } 14 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-custom-strategy/cdk-virtual-scroll-custom-strategy-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-item { 8 | height: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-custom-strategy/cdk-virtual-scroll-custom-strategy-example.html: -------------------------------------------------------------------------------- 1 | 2 |
{{item}}
3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-data-source/cdk-virtual-scroll-data-source-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-item { 8 | height: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-data-source/cdk-virtual-scroll-data-source-example.html: -------------------------------------------------------------------------------- 1 | 2 |
{{item || 'Loading...'}}
3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-dl/cdk-virtual-scroll-dl-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-dt { 8 | height: 30px; 9 | font-weight: bold; 10 | } 11 | 12 | .example-dd { 13 | height: 30px; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-dl/cdk-virtual-scroll-dl-example.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
{{state.name}}
5 |
{{state.capital}}
6 |
7 |
8 |
9 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-fixed-buffer/cdk-virtual-scroll-fixed-buffer-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-item { 8 | height: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-fixed-buffer/cdk-virtual-scroll-fixed-buffer-example.html: -------------------------------------------------------------------------------- 1 | 3 |
{{item}}
4 |
5 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-horizontal/cdk-virtual-scroll-horizontal-example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
{{item}}
4 |
5 |
6 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-overview/cdk-virtual-scroll-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-item { 8 | height: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-overview/cdk-virtual-scroll-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 |
{{item}}
3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example.css: -------------------------------------------------------------------------------- 1 | .example-viewport { 2 | height: 200px; 3 | width: 200px; 4 | border: 1px solid black; 5 | } 6 | 7 | .example-item { 8 | height: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example.html: -------------------------------------------------------------------------------- 1 | 2 |
{{item}}
3 |
4 | -------------------------------------------------------------------------------- /src/material-examples/checkbox-configurable/checkbox-configurable-example.css: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/checkbox-overview/checkbox-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/checkbox-overview/checkbox-overview-example.html: -------------------------------------------------------------------------------- 1 | Check me! 2 | -------------------------------------------------------------------------------- /src/material-examples/checkbox-overview/checkbox-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic checkboxes 5 | */ 6 | @Component({ 7 | selector: 'checkbox-overview-example', 8 | templateUrl: 'checkbox-overview-example.html', 9 | styleUrls: ['checkbox-overview-example.css'], 10 | }) 11 | export class CheckboxOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/chips-autocomplete/chips-autocomplete-example.css: -------------------------------------------------------------------------------- 1 | .example-chip-list { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/chips-input/chips-input-example.css: -------------------------------------------------------------------------------- 1 | .example-chip-list { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/chips-overview/chips-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/chips-overview/chips-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | One fish 3 | Two fish 4 | Primary fish 5 | Accent fish 6 | 7 | -------------------------------------------------------------------------------- /src/material-examples/chips-overview/chips-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic chips 5 | */ 6 | @Component({ 7 | selector: 'chips-overview-example', 8 | templateUrl: 'chips-overview-example.html', 9 | styleUrls: ['chips-overview-example.css'], 10 | }) 11 | export class ChipsOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/chips-stacked/chips-stacked-example.css: -------------------------------------------------------------------------------- 1 | mat-chip { 2 | max-width: 200px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/chips-stacked/chips-stacked-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{chip.name}} 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-api/datepicker-api-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-api/datepicker-api-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-api/datepicker-api-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Datepicker open method */ 4 | @Component({ 5 | selector: 'datepicker-api-example', 6 | templateUrl: 'datepicker-api-example.html', 7 | styleUrls: ['datepicker-api-example.css'], 8 | }) 9 | export class DatepickerApiExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-color/datepicker-color-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-color/datepicker-color-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Datepicker palette colors */ 4 | @Component({ 5 | selector: 'datepicker-color-example', 6 | templateUrl: 'datepicker-color-example.html', 7 | styleUrls: ['datepicker-color-example.css'], 8 | }) 9 | export class DatepickerColorExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-custom-header/datepicker-custom-header-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-custom-header/datepicker-custom-header-example.html: -------------------------------------------------------------------------------- 1 | 2 | Custom calendar header 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-custom-icon/datepicker-custom-icon-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-custom-icon/datepicker-custom-icon-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Datepicker with custom icon */ 4 | @Component({ 5 | selector: 'datepicker-custom-icon-example', 6 | templateUrl: 'datepicker-custom-icon-example.html', 7 | styleUrls: ['datepicker-custom-icon-example.css'], 8 | }) 9 | export class DatepickerCustomIconExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-date-class/datepicker-date-class-example.css: -------------------------------------------------------------------------------- 1 | .example-custom-date-class { 2 | background: orange; 3 | border-radius: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-date-class/datepicker-date-class-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-disabled/datepicker-disabled-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-disabled/datepicker-disabled-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Disabled datepicker */ 4 | @Component({ 5 | selector: 'datepicker-disabled-example', 6 | templateUrl: 'datepicker-disabled-example.html', 7 | styleUrls: ['datepicker-disabled-example.css'], 8 | }) 9 | export class DatepickerDisabledExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-events/datepicker-events-example.css: -------------------------------------------------------------------------------- 1 | .example-events { 2 | width: 400px; 3 | height: 200px; 4 | border: 1px solid #555; 5 | overflow: auto; 6 | } 7 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-filter/datepicker-filter-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-filter/datepicker-filter-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-formats/datepicker-formats-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-formats/datepicker-formats-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-locale/datepicker-locale-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-locale/datepicker-locale-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-min-max/datepicker-min-max-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-min-max/datepicker-min-max-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-moment/datepicker-moment-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-moment/datepicker-moment-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-overview/datepicker-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-overview/datepicker-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-overview/datepicker-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Basic datepicker */ 4 | @Component({ 5 | selector: 'datepicker-overview-example', 6 | templateUrl: 'datepicker-overview-example.html', 7 | styleUrls: ['datepicker-overview-example.css'], 8 | }) 9 | export class DatepickerOverviewExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-start-view/datepicker-start-view-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-start-view/datepicker-start-view-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-touch/datepicker-touch-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-touch/datepicker-touch-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-touch/datepicker-touch-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Datepicker touch UI */ 4 | @Component({ 5 | selector: 'datepicker-touch-example', 6 | templateUrl: 'datepicker-touch-example.html', 7 | styleUrls: ['datepicker-touch-example.css'], 8 | }) 9 | export class DatepickerTouchExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-value/datepicker-value-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/datepicker-views-selection/datepicker-views-selection-example.css: -------------------------------------------------------------------------------- 1 | .example-month-picker .mat-calendar-period-button { 2 | pointer-events: none; 3 | } 4 | 5 | .example-month-picker .mat-calendar-arrow { 6 | display: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/dialog-content/dialog-content-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/dialog-content/dialog-content-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/dialog-data/dialog-data-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/dialog-data/dialog-data-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/dialog-elements/dialog-elements-example-dialog.html: -------------------------------------------------------------------------------- 1 |

Dialog with elements

2 |
This dialog showcases the title, close, content and actions elements.
3 |
4 | 5 |
6 | -------------------------------------------------------------------------------- /src/material-examples/dialog-elements/dialog-elements-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/dialog-elements/dialog-elements-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/dialog-overview/dialog-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/divider-overview/divider-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/divider-overview/divider-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | Item 1 3 | 4 | Item 2 5 | 6 | Item 3 7 | 8 | -------------------------------------------------------------------------------- /src/material-examples/divider-overview/divider-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic divider 5 | */ 6 | @Component({ 7 | selector: 'divider-overview-example', 8 | templateUrl: 'divider-overview-example.html', 9 | styleUrls: ['divider-overview-example.css'], 10 | }) 11 | export class DividerOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/elevation-overview/elevation-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | padding: 16px; 3 | margin-bottom: 16px; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/elevation-overview/elevation-overview-example.html: -------------------------------------------------------------------------------- 1 |
4 | Example 5 |
6 | 7 | 8 | -------------------------------------------------------------------------------- /src/material-examples/expansion-overview/expansion-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/expansion-steps/expansion-steps-example.css: -------------------------------------------------------------------------------- 1 | .example-headers-align .mat-expansion-panel-header-title, 2 | .example-headers-align .mat-expansion-panel-header-description { 3 | flex-basis: 0; 4 | } 5 | 6 | .example-headers-align .mat-expansion-panel-header-description { 7 | justify-content: space-between; 8 | align-items: center; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/form-field-appearance/form-field-appearance-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/form-field-appearance/form-field-appearance-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Form field appearance variants */ 4 | @Component({ 5 | selector: 'form-field-appearance-example', 6 | templateUrl: 'form-field-appearance-example.html', 7 | styleUrls: ['form-field-appearance-example.css'], 8 | }) 9 | export class FormFieldAppearanceExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/form-field-custom-control/form-field-custom-control-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/form-field-custom-control/form-field-custom-control-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | phone 4 | Include area code 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/form-field-error/form-field-error-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .example-container > * { 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/form-field-error/form-field-error-example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{getErrorMessage()}} 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/material-examples/form-field-hint/form-field-hint-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .example-container > * { 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/form-field-hint/form-field-hint-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Form field with hints */ 4 | @Component({ 5 | selector: 'form-field-hint-example', 6 | templateUrl: 'form-field-hint-example.html', 7 | styleUrls: ['form-field-hint-example.css'], 8 | }) 9 | export class FormFieldHintExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/form-field-overview/form-field-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .example-container > * { 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/form-field-overview/form-field-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Simple form field */ 4 | @Component({ 5 | selector: 'form-field-overview-example', 6 | templateUrl: 'form-field-overview-example.html', 7 | styleUrls: ['form-field-overview-example.css'], 8 | }) 9 | export class FormFieldOverviewExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/form-field-theming/form-field-theming-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .example-container > * { 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/grid-list-dynamic/grid-list-dynamic-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/grid-list-dynamic/grid-list-dynamic-example.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | {{tile.text}} 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/material-examples/grid-list-overview/grid-list-overview-example.css: -------------------------------------------------------------------------------- 1 | mat-grid-tile { 2 | background: lightblue; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/grid-list-overview/grid-list-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | 1 3 | 2 4 | 3 5 | 4 6 | 7 | -------------------------------------------------------------------------------- /src/material-examples/grid-list-overview/grid-list-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic grid-list 5 | */ 6 | @Component({ 7 | selector: 'grid-list-overview-example', 8 | styleUrls: ['grid-list-overview-example.css'], 9 | templateUrl: 'grid-list-overview-example.html', 10 | }) 11 | export class GridListOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/icon-overview/icon-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/icon-overview/icon-overview-example.html: -------------------------------------------------------------------------------- 1 | home 2 | -------------------------------------------------------------------------------- /src/material-examples/icon-overview/icon-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic icons 5 | */ 6 | @Component({ 7 | selector: 'icon-overview-example', 8 | templateUrl: 'icon-overview-example.html', 9 | styleUrls: ['icon-overview-example.css'], 10 | }) 11 | export class IconOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/icon-svg/icon-svg-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/icon-svg/icon-svg-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/material-examples/input-clearable/input-clearable-example.css: -------------------------------------------------------------------------------- 1 | .example-form-field { 2 | width: 200px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/input-clearable/input-clearable-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/material-examples/input-error-state-matcher/input-error-state-matcher-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/input-errors/input-errors-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/input-form/input-form-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/input-form/input-form-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Inputs in a form 5 | */ 6 | @Component({ 7 | selector: 'input-form-example', 8 | templateUrl: 'input-form-example.html', 9 | styleUrls: ['input-form-example.css'], 10 | }) 11 | export class InputFormExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/input-hint/input-hint-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/input-hint/input-hint-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Input with hints 5 | */ 6 | @Component({ 7 | selector: 'input-hint-example', 8 | templateUrl: 'input-hint-example.html', 9 | styleUrls: ['input-hint-example.css'], 10 | }) 11 | export class InputHintExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/input-overview/input-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/input-overview/input-overview-example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /src/material-examples/input-overview/input-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic Inputs 5 | */ 6 | @Component({ 7 | selector: 'input-overview-example', 8 | styleUrls: ['input-overview-example.css'], 9 | templateUrl: 'input-overview-example.html', 10 | }) 11 | export class InputOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/input-prefix-suffix/input-prefix-suffix-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | +1   5 | 6 | mode_edit 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /src/material-examples/input-prefix-suffix/input-prefix-suffix-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Inputs with prefixes and suffixes 5 | */ 6 | @Component({ 7 | selector: 'input-prefix-suffix-example', 8 | templateUrl: 'input-prefix-suffix-example.html', 9 | styleUrls: ['input-prefix-suffix-example.css'], 10 | }) 11 | export class InputPrefixSuffixExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/list-overview/list-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/list-overview/list-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | Item 1 3 | Item 2 4 | Item 3 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/list-overview/list-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic list 5 | */ 6 | @Component({ 7 | selector: 'list-overview-example', 8 | templateUrl: 'list-overview-example.html', 9 | styleUrls: ['list-overview-example.css'], 10 | }) 11 | export class ListOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/list-sections/list-sections-example.css: -------------------------------------------------------------------------------- 1 | .mat-list-icon { 2 | color: rgba(0, 0, 0, 0.54); 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/list-selection/list-selection-example.css: -------------------------------------------------------------------------------- 1 | /** No styles for this example. */ 2 | -------------------------------------------------------------------------------- /src/material-examples/list-selection/list-selection-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{shoe}} 4 | 5 | 6 | 7 |

8 | Options selected: {{shoes.selectedOptions.selected.length}} 9 |

10 | -------------------------------------------------------------------------------- /src/material-examples/menu-icons/menu-icons-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/menu-icons/menu-icons-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Menu with icons 5 | */ 6 | @Component({ 7 | selector: 'menu-icons-example', 8 | templateUrl: 'menu-icons-example.html', 9 | styleUrls: ['menu-icons-example.css'], 10 | }) 11 | export class MenuIconsExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/menu-overview/menu-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/menu-overview/menu-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/menu-overview/menu-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic menu 5 | */ 6 | @Component({ 7 | selector: 'menu-overview-example', 8 | templateUrl: 'menu-overview-example.html', 9 | styleUrls: ['menu-overview-example.css'], 10 | }) 11 | export class MenuOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/nested-menu/nested-menu-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/nested-menu/nested-menu-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Nested menu 5 | */ 6 | @Component({ 7 | selector: 'nested-menu-example', 8 | templateUrl: 'nested-menu-example.html', 9 | styleUrls: ['nested-menu-example.css'], 10 | }) 11 | export class NestedMenuExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/paginator-configurable/paginator-configurable-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/paginator-overview/paginator-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/paginator-overview/paginator-overview-example.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/material-examples/paginator-overview/paginator-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Paginator 5 | */ 6 | @Component({ 7 | selector: 'paginator-overview-example', 8 | templateUrl: 'paginator-overview-example.html', 9 | styleUrls: ['paginator-overview-example.css'], 10 | }) 11 | export class PaginatorOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-buffer/progress-bar-buffer-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-buffer/progress-bar-buffer-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-buffer/progress-bar-buffer-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Buffer progress-bar 5 | */ 6 | @Component({ 7 | selector: 'progress-bar-buffer-example', 8 | templateUrl: 'progress-bar-buffer-example.html', 9 | styleUrls: ['progress-bar-buffer-example.css'], 10 | }) 11 | export class ProgressBarBufferExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-configurable/progress-bar-configurable-example.css: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-determinate/progress-bar-determinate-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-determinate/progress-bar-determinate-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-query/progress-bar-query-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-query/progress-bar-query-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-bar-query/progress-bar-query-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Query progress-bar 5 | */ 6 | @Component({ 7 | selector: 'progress-bar-query-example', 8 | templateUrl: 'progress-bar-query-example.html', 9 | styleUrls: ['progress-bar-query-example.css'], 10 | }) 11 | export class ProgressBarQueryExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 0 10px; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/progress-spinner-overview/progress-spinner-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/progress-spinner-overview/progress-spinner-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/radio-ng-model/radio-ng-model-example.css: -------------------------------------------------------------------------------- 1 | .example-radio-group { 2 | display: inline-flex; 3 | flex-direction: column; 4 | } 5 | 6 | .example-radio-button { 7 | margin: 5px; 8 | } 9 | 10 | .example-selected-value { 11 | margin: 15px 0; 12 | } 13 | -------------------------------------------------------------------------------- /src/material-examples/radio-ng-model/radio-ng-model-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{season}} 4 | 5 | 6 |
Your favorite season is: {{favoriteSeason}}
7 | -------------------------------------------------------------------------------- /src/material-examples/radio-overview/radio-overview-example.css: -------------------------------------------------------------------------------- 1 | .mat-radio-button ~ .mat-radio-button { 2 | padding-right: 16px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/radio-overview/radio-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | Option 1 3 | Option 2 4 | 5 | -------------------------------------------------------------------------------- /src/material-examples/radio-overview/radio-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic radios 5 | */ 6 | @Component({ 7 | selector: 'radio-overview-example', 8 | templateUrl: 'radio-overview-example.html', 9 | styleUrls: ['radio-overview-example.css'], 10 | }) 11 | export class RadioOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/select-custom-trigger/select-custom-trigger-example.css: -------------------------------------------------------------------------------- 1 | .example-additional-selection { 2 | opacity: 0.75; 3 | font-size: 0.75em; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/select-disabled/select-disabled-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-error-state-matcher/select-error-state-matcher-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-form/select-form-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-hint-error/select-hint-error-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-multiple/select-multiple-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-multiple/select-multiple-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{topping}} 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/select-no-ripple/select-no-ripple-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-no-ripple/select-no-ripple-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Option 1 4 | Option 2 5 | Option 3 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/material-examples/select-no-ripple/select-no-ripple-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Select with no option ripple */ 4 | @Component({ 5 | selector: 'select-no-ripple-example', 6 | templateUrl: 'select-no-ripple-example.html', 7 | styleUrls: ['select-no-ripple-example.css'], 8 | }) 9 | export class SelectNoRippleExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/select-optgroup/select-optgroup-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-overview/select-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-panel-class/select-panel-class-example.css: -------------------------------------------------------------------------------- 1 | .example-panel-red.mat-select-panel { 2 | background: rgba(255, 0, 0, 0.5); 3 | } 4 | 5 | .example-panel-green.mat-select-panel { 6 | background: rgba(0, 255, 0, 0.5); 7 | } 8 | 9 | .example-panel-blue.mat-select-panel { 10 | background: rgba(0, 0, 255, 0.5); 11 | } 12 | -------------------------------------------------------------------------------- /src/material-examples/select-reset/select-reset-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/select-value-binding/select-value-binding-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-autosize/sidenav-autosize-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | width: 500px; 3 | height: 300px; 4 | border: 1px solid rgba(0, 0, 0, 0.5); 5 | } 6 | 7 | .example-sidenav-content { 8 | display: flex; 9 | height: 100%; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .example-sidenav { 15 | padding: 20px; 16 | } 17 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-autosize/sidenav-autosize-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Autosize sidenav 5 | */ 6 | @Component({ 7 | selector: 'sidenav-autosize-example', 8 | templateUrl: 'sidenav-autosize-example.html', 9 | styleUrls: ['sidenav-autosize-example.css'], 10 | }) 11 | export class SidenavAutosizeExample { 12 | showFiller = false; 13 | } 14 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | width: 400px; 3 | height: 200px; 4 | margin: 10px; 5 | border: 1px solid #555; 6 | } 7 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-backdrop/sidenav-backdrop-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Drawer with explicit backdrop setting */ 4 | @Component({ 5 | selector: 'sidenav-backdrop-example', 6 | templateUrl: 'sidenav-backdrop-example.html', 7 | styleUrls: ['sidenav-backdrop-example.css'], 8 | }) 9 | export class SidenavBackdropExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-disable-close/sidenav-disable-close-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | position: absolute; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | width: 400px; 3 | height: 200px; 4 | margin: 10px; 5 | border: 1px solid #555; 6 | } 7 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | Drawer content 3 | Main content 4 | 5 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** @title Basic drawer */ 4 | @Component({ 5 | selector: 'sidenav-drawer-overview-example', 6 | templateUrl: 'sidenav-drawer-overview-example.html', 7 | styleUrls: ['sidenav-drawer-overview-example.css'], 8 | }) 9 | export class SidenavDrawerOverviewExample {} 10 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-mode/sidenav-mode-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | position: absolute; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | } 8 | 9 | .example-radio-group { 10 | display: block; 11 | border: 1px solid #555; 12 | margin: 20px; 13 | padding: 10px; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-open-close/sidenav-open-close-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | position: absolute; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | } 8 | 9 | .example-events { 10 | width: 300px; 11 | height: 200px; 12 | overflow: auto; 13 | border: 1px solid #555; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-overview/sidenav-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | position: absolute; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | background: #eee; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-overview/sidenav-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | Sidenav content 3 | Main content 4 | 5 | 6 |
Please open on Stackblitz to see result
7 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-position/sidenav-position-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | position: absolute; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/sidenav-position/sidenav-position-example.html: -------------------------------------------------------------------------------- 1 | 2 | Start content 3 | End content 4 | Implicit main content 5 | 6 | 7 |
Please open on Stackblitz to see result
8 | -------------------------------------------------------------------------------- /src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css: -------------------------------------------------------------------------------- 1 | .example-h2 { 2 | margin: 10px; 3 | } 4 | 5 | .example-section { 6 | display: flex; 7 | align-content: center; 8 | align-items: center; 9 | height: 60px; 10 | } 11 | 12 | .example-margin { 13 | margin: 10px; 14 | } 15 | -------------------------------------------------------------------------------- /src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css: -------------------------------------------------------------------------------- 1 | .example-form mat-slide-toggle { 2 | margin: 8px 0; 3 | display: block; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/slide-toggle-overview/slide-toggle-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/slide-toggle-overview/slide-toggle-overview-example.html: -------------------------------------------------------------------------------- 1 | Slide me! 2 | -------------------------------------------------------------------------------- /src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic slide-toggles 5 | */ 6 | @Component({ 7 | selector: 'slide-toggle-overview-example', 8 | templateUrl: 'slide-toggle-overview-example.html', 9 | styleUrls: ['slide-toggle-overview-example.css'], 10 | }) 11 | export class SlideToggleOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/slider-formatting/slider-formatting-example.css: -------------------------------------------------------------------------------- 1 | mat-slider { 2 | width: 300px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/slider-formatting/slider-formatting-example.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/material-examples/slider-overview/slider-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | mat-slider { 3 | width: 300px; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/slider-overview/slider-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/material-examples/slider-overview/slider-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic slider 5 | */ 6 | @Component({ 7 | selector: 'slider-overview-example', 8 | templateUrl: 'slider-overview-example.html', 9 | styleUrls: ['slider-overview-example.css'], 10 | }) 11 | export class SliderOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/snack-bar-component/snack-bar-component-example-snack.html: -------------------------------------------------------------------------------- 1 | 2 | Pizza party!!! 🍕 3 | 4 | -------------------------------------------------------------------------------- /src/material-examples/snack-bar-component/snack-bar-component-example.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/material-examples/snack-bar-overview/snack-bar-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/snack-bar-overview/snack-bar-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/material-examples/sort-overview/sort-overview-example.css: -------------------------------------------------------------------------------- 1 | .mat-sort-header-container { 2 | align-items: center; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/stepper-editable/stepper-editable-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/stepper-errors/stepper-errors-example.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/material-examples/stepper-errors/stepper-errors-example.css -------------------------------------------------------------------------------- /src/material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/stepper-optional/stepper-optional-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/stepper-overview/stepper-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/stepper-states/stepper-states-example.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/material-examples/stepper-states/stepper-states-example.css -------------------------------------------------------------------------------- /src/material-examples/stepper-vertical/stepper-vertical-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-align/tab-group-align-example.css: -------------------------------------------------------------------------------- 1 | .mat-tab-group { 2 | margin-bottom: 48px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-align/tab-group-align-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Tab group with aligned labels 5 | */ 6 | @Component({ 7 | selector: 'tab-group-align-example', 8 | templateUrl: 'tab-group-align-example.html', 9 | styleUrls: ['tab-group-align-example.css'], 10 | }) 11 | export class TabGroupAlignExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-animations/tab-group-animations-example.css: -------------------------------------------------------------------------------- 1 | .mat-tab-group { 2 | margin-bottom: 48px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-animations/tab-group-animations-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Tab group animations 5 | */ 6 | @Component({ 7 | selector: 'tab-group-animations-example', 8 | templateUrl: 'tab-group-animations-example.html', 9 | styleUrls: ['tab-group-animations-example.css'], 10 | }) 11 | export class TabGroupAnimationsExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-async/tab-group-async-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-async/tab-group-async-example.html: -------------------------------------------------------------------------------- 1 | 2 | Loading tabs... 3 | 4 | 5 | 6 | 7 | {{tab.label}} 8 | {{tab.content}} 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-basic/tab-group-basic-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-basic/tab-group-basic-example.html: -------------------------------------------------------------------------------- 1 | 2 | Content 1 3 | Content 2 4 | Content 3 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-basic/tab-group-basic-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic use of the tab group 5 | */ 6 | @Component({ 7 | selector: 'tab-group-basic-example', 8 | templateUrl: 'tab-group-basic-example.html', 9 | styleUrls: ['tab-group-basic-example.css'], 10 | }) 11 | export class TabGroupBasicExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-custom-label/tab-group-custom-label-example.css: -------------------------------------------------------------------------------- 1 | .example-tab-icon { 2 | margin-right: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-dynamic/tab-group-dynamic-example.css: -------------------------------------------------------------------------------- 1 | .example-input-label, 2 | .example-add-tab-button, 3 | .example-delete-tab-button { 4 | margin: 8px; 5 | } 6 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-header-below/tab-group-header-below-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-header-below/tab-group-header-below-example.html: -------------------------------------------------------------------------------- 1 | 2 | Content 1 3 | Content 2 4 | Content 3 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-stretched/tab-group-stretched-example.css: -------------------------------------------------------------------------------- 1 | .example-stretched-tabs { 2 | max-width: 800px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-stretched/tab-group-stretched-example.html: -------------------------------------------------------------------------------- 1 | 2 | Content 1 3 | Content 2 4 | Content 3 5 | 6 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-stretched/tab-group-stretched-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Tab group with stretched labels 5 | */ 6 | @Component({ 7 | selector: 'tab-group-stretched-example', 8 | templateUrl: 'tab-group-stretched-example.html', 9 | styleUrls: ['tab-group-stretched-example.css'], 10 | }) 11 | export class TabGroupStretchedExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-theme/tab-group-theme-example.css: -------------------------------------------------------------------------------- 1 | .example-button-toggle-label { 2 | display: inline-block; 3 | margin: 16px; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/tab-group-theme/tab-group-theme-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Customizing the theme options on the tab group 5 | */ 6 | @Component({ 7 | selector: 'tab-group-theme-example', 8 | templateUrl: 'tab-group-theme-example.html', 9 | styleUrls: ['tab-group-theme-example.css'], 10 | }) 11 | export class TabGroupThemeExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css: -------------------------------------------------------------------------------- 1 | .example-action-button { 2 | margin-bottom: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-basic-flex/table-basic-flex-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-basic/table-basic-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-dynamic-columns/table-dynamic-columns-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | button { 6 | margin: 16px 8px; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/table-filtering/table-filtering-example.css: -------------------------------------------------------------------------------- 1 | /* Structure */ 2 | table { 3 | width: 100%; 4 | } 5 | 6 | .mat-form-field { 7 | font-size: 14px; 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/material-examples/table-footer-row/table-footer-row-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | tr.mat-footer-row { 6 | font-weight: bold; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/table-overview/table-overview-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | .mat-form-field { 6 | font-size: 14px; 7 | width: 100%; 8 | } 9 | 10 | td, th { 11 | width: 25%; 12 | } 13 | -------------------------------------------------------------------------------- /src/material-examples/table-pagination/table-pagination-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-row-context/table-row-context-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-selection/table-selection-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-simple-column/table-simple-column-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/table-sorting/table-sorting-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | th.mat-sort-header-sorted { 6 | color: black; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/table-sticky-footer/table-sticky-footer-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | height: 270px; 3 | overflow: auto; 4 | } 5 | 6 | table { 7 | width: 100%; 8 | } 9 | 10 | tr.mat-footer-row { 11 | font-weight: bold; 12 | } 13 | 14 | .mat-table-sticky { 15 | border-top: 1px solid #e0e0e0; 16 | } 17 | -------------------------------------------------------------------------------- /src/material-examples/table-sticky-header/table-sticky-header-example.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | height: 400px; 3 | overflow: auto; 4 | } 5 | 6 | table { 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/material-examples/table-wrapped/table-wrapped-example.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/toolbar-multirow/toolbar-multirow-example.css: -------------------------------------------------------------------------------- 1 | .example-icon { 2 | padding: 0 14px; 3 | } 4 | 5 | .example-spacer { 6 | flex: 1 1 auto; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/toolbar-multirow/toolbar-multirow-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Multi-row toolbar 5 | */ 6 | @Component({ 7 | selector: 'toolbar-multirow-example', 8 | templateUrl: 'toolbar-multirow-example.html', 9 | styleUrls: ['toolbar-multirow-example.css'], 10 | }) 11 | export class ToolbarMultirowExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/toolbar-overview/toolbar-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/toolbar-overview/toolbar-overview-example.html: -------------------------------------------------------------------------------- 1 | My App 2 | -------------------------------------------------------------------------------- /src/material-examples/toolbar-overview/toolbar-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic toolbar 5 | */ 6 | @Component({ 7 | selector: 'toolbar-overview-example', 8 | templateUrl: 'toolbar-overview-example.html', 9 | styleUrls: ['toolbar-overview-example.css'], 10 | }) 11 | export class ToolbarOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css: -------------------------------------------------------------------------------- 1 | .example-button { 2 | display: block; 3 | margin: 80px auto 400px; 4 | } 5 | 6 | .example-container { 7 | height: 200px; 8 | overflow: auto; 9 | border: 1px solid #ccc; 10 | } 11 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-custom-class/tooltip-custom-class-example.css: -------------------------------------------------------------------------------- 1 | .example-button { 2 | margin-top: 16px; 3 | } 4 | 5 | .example-tooltip-red { 6 | background: #b71c1c; 7 | } 8 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-custom-class/tooltip-custom-class-example.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-delay/tooltip-delay-example.css: -------------------------------------------------------------------------------- 1 | .example-user-input { 2 | display: block; 3 | width: 150px; 4 | } 5 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-disabled/tooltip-disabled-example.css: -------------------------------------------------------------------------------- 1 | .example-disabled-checkbox { 2 | margin-left: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-manual/tooltip-manual-example.css: -------------------------------------------------------------------------------- 1 | .example-action-button { 2 | margin-top: 16px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-manual/tooltip-manual-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Tooltip that can be manually shown/hidden. 5 | */ 6 | @Component({ 7 | selector: 'tooltip-manual-example', 8 | templateUrl: 'tooltip-manual-example.html', 9 | styleUrls: ['tooltip-manual-example.css'], 10 | }) 11 | export class TooltipManualExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-message/tooltip-message-example.css: -------------------------------------------------------------------------------- 1 | .example-user-input { 2 | margin-right: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-message/tooltip-message-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-overview/tooltip-overview-example.css: -------------------------------------------------------------------------------- 1 | /** No CSS for this example */ 2 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-overview/tooltip-overview-example.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-overview/tooltip-overview-example.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | /** 4 | * @title Basic tooltip 5 | */ 6 | @Component({ 7 | selector: 'tooltip-overview-example', 8 | templateUrl: 'tooltip-overview-example.html', 9 | styleUrls: ['tooltip-overview-example.css'], 10 | }) 11 | export class TooltipOverviewExample {} 12 | -------------------------------------------------------------------------------- /src/material-examples/tooltip-position/tooltip-position-example.css: -------------------------------------------------------------------------------- 1 | .example-user-input { 2 | margin-right: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tree-checklist/tree-checklist-example.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/material-examples/tree-checklist/tree-checklist-example.css -------------------------------------------------------------------------------- /src/material-examples/tree-dynamic/tree-dynamic-example.css: -------------------------------------------------------------------------------- 1 | .example-tree-progress-bar { 2 | margin-left: 30px; 3 | } 4 | -------------------------------------------------------------------------------- /src/material-examples/tree-flat-overview/tree-flat-overview-example.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/material-examples/tree-flat-overview/tree-flat-overview-example.css -------------------------------------------------------------------------------- /src/material-examples/tree-loadmore/tree-loadmore-example.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-docs/material2/8afd76ae0c3f8fa37b8019b870e15085f8d6cea5/src/material-examples/tree-loadmore/tree-loadmore-example.css -------------------------------------------------------------------------------- /src/material-examples/tree-nested-overview/tree-nested-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-tree-invisible { 2 | display: none; 3 | } 4 | 5 | .example-tree ul, 6 | .example-tree li { 7 | margin-top: 0; 8 | margin-bottom: 0; 9 | list-style-type: none; 10 | } 11 | -------------------------------------------------------------------------------- /src/material-examples/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare const module: {id: string}; 2 | -------------------------------------------------------------------------------- /src/material-experimental/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/material-experimental/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './version'; 10 | -------------------------------------------------------------------------------- /src/material-experimental/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var module: {id: string}; 2 | -------------------------------------------------------------------------------- /src/material-moment-adapter/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './public-api'; 10 | -------------------------------------------------------------------------------- /src/material-moment-adapter/public-api.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export * from './adapter/index'; 10 | -------------------------------------------------------------------------------- /src/universal-app/main.ts: -------------------------------------------------------------------------------- 1 | export * from './kitchen-sink/kitchen-sink'; 2 | -------------------------------------------------------------------------------- /src/universal-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@angular/cdk/*": ["../cdk/*"], 9 | "@angular/material/*": ["../lib/*"], 10 | "@angular/material": ["../lib/public_api"] 11 | } 12 | }, 13 | "include": ["./**/*.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /tools/bazel-tools-tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015"], 4 | "types": ["node"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /tools/dgeni/templates/BUILD.bazel: -------------------------------------------------------------------------------- 1 | package(default_visibility = ["//visibility:public"]) 2 | 3 | filegroup( 4 | name = "templates", 5 | srcs = glob(["*.html"]) 6 | ) -------------------------------------------------------------------------------- /tools/dgeni/templates/common.template.html: -------------------------------------------------------------------------------- 1 | ## {$ doc.name $} ({$ doc.docType $}) -------------------------------------------------------------------------------- /tools/dgeni/templates/macros.html: -------------------------------------------------------------------------------- 1 | {% macro deprecationTitle(doc) %} 2 | {%- if doc.breakingChange -%} 3 | title="Will be deleted in v{$ doc.breakingChange $}" 4 | {%- endif -%} 5 | {% endmacro %} 6 | -------------------------------------------------------------------------------- /tools/dgeni/templates/method-list.template.html: -------------------------------------------------------------------------------- 1 | {%- if methodList.length -%} 2 |
Methods
3 | {% for m in methodList %} 4 | {$ method(m) $} 5 | {% endfor %} 6 | {%- endif -%} 7 | -------------------------------------------------------------------------------- /tools/example-module/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015"], 4 | "module": "commonjs", 5 | "target": "es5", 6 | "sourceMap": true, 7 | "types": ["node"] 8 | }, 9 | "bazelOptions": { 10 | "suppressTsconfigOverrideWarnings": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tools/gulp/tasks/clean.ts: -------------------------------------------------------------------------------- 1 | import {task} from 'gulp'; 2 | import {cleanTask} from '../util/task-helpers'; 3 | import {buildConfig} from 'material2-build-tools'; 4 | 5 | 6 | /** Deletes the dist/ directory. */ 7 | task('clean', cleanTask(buildConfig.outputDir)); 8 | -------------------------------------------------------------------------------- /tools/gulp/tasks/default.ts: -------------------------------------------------------------------------------- 1 | import {task} from 'gulp'; 2 | import {yellow} from 'chalk'; 3 | 4 | task('default', ['help']); 5 | 6 | task('help', function() { 7 | console.log(); 8 | console.log('Please specify a gulp task you want to run.'); 9 | console.log(`You're probably looking for ${yellow('test')} or ${yellow('serve:devapp')}.`); 10 | console.log(); 11 | }); 12 | 13 | -------------------------------------------------------------------------------- /tools/highlight-files/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015"], 4 | "module": "commonjs", 5 | "target": "es5", 6 | "sourceMap": true, 7 | "types": ["node"] 8 | }, 9 | "bazelOptions": { 10 | "suppressTsconfigOverrideWarnings": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tools/markdown-to-html/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015"], 4 | "module": "commonjs", 5 | "target": "es5", 6 | "sourceMap": true, 7 | "types": ["node"] 8 | }, 9 | "bazelOptions": { 10 | "suppressTsconfigOverrideWarnings": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tools/npm-workspace/BUILD.bazel: -------------------------------------------------------------------------------- 1 | # Empty build file that marks this directory as a Bazel package. 2 | -------------------------------------------------------------------------------- /tools/npm-workspace/WORKSPACE: -------------------------------------------------------------------------------- 1 | workspace(name = "npm") 2 | -------------------------------------------------------------------------------- /tools/package-docs-content/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015"], 4 | "module": "commonjs", 5 | "target": "es5", 6 | "sourceMap": true, 7 | "types": ["node"] 8 | }, 9 | "bazelOptions": { 10 | "suppressTsconfigOverrideWarnings": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tools/package-tools/gulp/sequence-task.ts: -------------------------------------------------------------------------------- 1 | // This import does not have any type definitions. 2 | const gulpRunSequence = require('run-sequence'); 3 | 4 | /** Create a task that's a sequence of other tasks. */ 5 | export function sequenceTask(...args: any[]) { 6 | return (done: any) => { 7 | gulpRunSequence( 8 | ...args, 9 | done 10 | ); 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /tools/package-tools/gulp/watch-files.ts: -------------------------------------------------------------------------------- 1 | import {watch, WatchCallback} from 'gulp'; 2 | 3 | /** Function that watches a set of file globs and runs given Gulp tasks if a given file changes. */ 4 | export function watchFiles(fileGlob: string | string[], tasks: (string|WatchCallback)[], 5 | debounceDelay = 700) { 6 | watch(fileGlob, {debounceDelay}, tasks); 7 | } 8 | -------------------------------------------------------------------------------- /tools/public_api_guard/cdk/cdk.d.ts: -------------------------------------------------------------------------------- 1 | export declare const VERSION: Version; 2 | -------------------------------------------------------------------------------- /tools/release/release-output/release-packages.ts: -------------------------------------------------------------------------------- 1 | /** Packages that will be published to NPM by the publish release task. */ 2 | export const releasePackages = [ 3 | 'cdk', 4 | 'material', 5 | 'cdk-experimental', 6 | 'material-experimental', 7 | 'material-moment-adapter' 8 | ]; 9 | -------------------------------------------------------------------------------- /tools/release/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2016"], 4 | "types": ["node"] 5 | } 6 | } 7 | --------------------------------------------------------------------------------