├── LICENSE ├── README.md ├── _index.scss ├── autocomplete ├── _autocomplete-theme.scss ├── _m2-autocomplete.scss ├── _m3-autocomplete.scss ├── index.d.ts └── testing │ └── index.d.ts ├── badge.d-Cn81aRz4.d.ts ├── badge ├── _badge-theme.scss ├── _m2-badge.scss ├── _m3-badge.scss ├── index.d.ts └── testing │ └── index.d.ts ├── bottom-sheet ├── _bottom-sheet-theme.scss ├── _m2-bottom-sheet.scss ├── _m3-bottom-sheet.scss ├── index.d.ts └── testing │ └── index.d.ts ├── button-toggle.d-B_G01PhW.d.ts ├── button-toggle ├── _button-toggle-theme.scss ├── _m2-button-toggle.scss ├── _m3-button-toggle.scss ├── index.d.ts └── testing │ └── index.d.ts ├── button ├── _button-theme.scss ├── _fab-theme.scss ├── _icon-button-theme.scss ├── _m2-button.scss ├── _m2-fab.scss ├── _m2-icon-button.scss ├── _m3-button.scss ├── _m3-fab.scss ├── _m3-icon-button.scss ├── index.d.ts └── testing │ └── index.d.ts ├── card ├── _card-theme.scss ├── _m2-card.scss ├── _m3-card.scss ├── index.d.ts └── testing │ └── index.d.ts ├── checkbox ├── _checkbox-theme.scss ├── _m2-checkbox.scss ├── _m3-checkbox.scss ├── index.d.ts └── testing │ └── index.d.ts ├── chips ├── _chips-theme.scss ├── _m2-chip.scss ├── _m3-chip.scss ├── index.d.ts └── testing │ └── index.d.ts ├── common-module.d-C8xzHJDr.d.ts ├── core ├── _core-theme.scss ├── _core.scss ├── _m2-app.scss ├── _m3-app.scss ├── color │ └── _all-color.scss ├── density │ └── private │ │ └── _all-density.scss ├── focus-indicators │ └── _private.scss ├── index.d.ts ├── m2 │ ├── _index.scss │ ├── _palette.scss │ ├── _theming.scss │ ├── _typography-utils.scss │ └── _typography.scss ├── option │ ├── _m2-optgroup.scss │ ├── _m2-option.scss │ ├── _m3-optgroup.scss │ ├── _m3-option.scss │ ├── _optgroup-theme.scss │ └── _option-theme.scss ├── ripple │ ├── _m2-ripple.scss │ ├── _m3-ripple.scss │ ├── _ripple-theme.scss │ └── _ripple.scss ├── selection │ └── pseudo-checkbox │ │ ├── _m2-pseudo-checkbox.scss │ │ ├── _m3-pseudo-checkbox.scss │ │ ├── _pseudo-checkbox-common.scss │ │ └── _pseudo-checkbox-theme.scss ├── style │ ├── _checkbox-common.scss │ ├── _elevation.scss │ ├── _layout-common.scss │ ├── _private.scss │ ├── _sass-utils.scss │ ├── _validation.scss │ ├── _variables.scss │ └── _vendor-prefixes.scss ├── testing │ └── index.d.ts ├── theming │ ├── _all-theme.scss │ ├── _color-api-backwards-compatibility.scss │ ├── _config-validation.scss │ ├── _definition.scss │ ├── _inspection.scss │ ├── _m2-inspection.scss │ ├── _palettes.scss │ ├── _theming.scss │ └── _validation.scss ├── tokens │ ├── _format-tokens.scss │ ├── _m2-utils.scss │ ├── _m3-system.scss │ ├── _m3-tokens.scss │ ├── _m3-utils.scss │ ├── _token-utils.scss │ └── m3 │ │ ├── _index.scss │ │ ├── _md-sys-color.scss │ │ ├── _md-sys-elevation.scss │ │ ├── _md-sys-motion.scss │ │ ├── _md-sys-shape.scss │ │ ├── _md-sys-state.scss │ │ ├── _md-sys-typescale.scss │ │ └── _theme.scss └── typography │ ├── _all-typography.scss │ ├── _typography-utils.scss │ ├── _typography.scss │ └── _versioning.scss ├── date-adapter.d-CtKXIxk0.d.ts ├── date-range-input-harness.d-CJ4r85Uf.d.ts ├── datepicker ├── _datepicker-theme.scss ├── _m2-datepicker.scss ├── _m3-datepicker.scss ├── index.d.ts └── testing │ └── index.d.ts ├── dialog.d-hlN3f-Hk.d.ts ├── dialog ├── _dialog-legacy-padding.scss ├── _dialog-theme.scss ├── _m2-dialog.scss ├── _m3-dialog.scss ├── index.d.ts └── testing │ └── index.d.ts ├── divider ├── _divider-theme.scss ├── _m2-divider.scss ├── _m3-divider.scss ├── index.d.ts └── testing │ └── index.d.ts ├── error-options.d-CGdTZUYk.d.ts ├── expansion ├── _expansion-theme.scss ├── _m2-expansion.scss ├── _m3-expansion.scss ├── index.d.ts └── testing │ └── index.d.ts ├── fesm2022 ├── animation-DfMFjxHu.mjs ├── animation-DfMFjxHu.mjs.map ├── autocomplete.mjs ├── autocomplete.mjs.map ├── autocomplete │ ├── testing.mjs │ └── testing.mjs.map ├── badge.mjs ├── badge.mjs.map ├── badge │ ├── testing.mjs │ └── testing.mjs.map ├── bottom-sheet.mjs ├── bottom-sheet.mjs.map ├── bottom-sheet │ ├── testing.mjs │ └── testing.mjs.map ├── button-toggle.mjs ├── button-toggle.mjs.map ├── button-toggle │ ├── testing.mjs │ └── testing.mjs.map ├── button.mjs ├── button.mjs.map ├── button │ ├── testing.mjs │ └── testing.mjs.map ├── card.mjs ├── card.mjs.map ├── card │ ├── testing.mjs │ └── testing.mjs.map ├── checkbox.mjs ├── checkbox.mjs.map ├── checkbox │ ├── testing.mjs │ └── testing.mjs.map ├── chips.mjs ├── chips.mjs.map ├── chips │ ├── testing.mjs │ └── testing.mjs.map ├── common-module-cKSwHniA.mjs ├── common-module-cKSwHniA.mjs.map ├── core.mjs ├── core.mjs.map ├── core │ ├── testing.mjs │ └── testing.mjs.map ├── date-formats-K6TQue-Y.mjs ├── date-formats-K6TQue-Y.mjs.map ├── date-range-input-harness-DEyfkeOs.mjs ├── date-range-input-harness-DEyfkeOs.mjs.map ├── datepicker.mjs ├── datepicker.mjs.map ├── datepicker │ ├── testing.mjs │ └── testing.mjs.map ├── dialog.mjs ├── dialog.mjs.map ├── dialog │ ├── testing.mjs │ └── testing.mjs.map ├── divider.mjs ├── divider.mjs.map ├── divider │ ├── testing.mjs │ └── testing.mjs.map ├── error-options-DCNQlTOA.mjs ├── error-options-DCNQlTOA.mjs.map ├── error-state-Dtb1IHM-.mjs ├── error-state-Dtb1IHM-.mjs.map ├── expansion.mjs ├── expansion.mjs.map ├── expansion │ ├── testing.mjs │ └── testing.mjs.map ├── form-field-C9DZXojn.mjs ├── form-field-C9DZXojn.mjs.map ├── form-field.mjs ├── form-field.mjs.map ├── form-field │ ├── testing.mjs │ ├── testing.mjs.map │ └── testing │ │ ├── control.mjs │ │ └── control.mjs.map ├── grid-list.mjs ├── grid-list.mjs.map ├── grid-list │ ├── testing.mjs │ └── testing.mjs.map ├── icon-button-DxiIc1ex.mjs ├── icon-button-DxiIc1ex.mjs.map ├── icon-registry-CwOTJ7YM.mjs ├── icon-registry-CwOTJ7YM.mjs.map ├── icon.mjs ├── icon.mjs.map ├── icon │ ├── testing.mjs │ └── testing.mjs.map ├── index-BFRo2fUq.mjs ├── index-BFRo2fUq.mjs.map ├── index-DwiL-HGk.mjs ├── index-DwiL-HGk.mjs.map ├── input-harness-C5Msdc4-.mjs ├── input-harness-C5Msdc4-.mjs.map ├── input-value-accessor-D1GvPuqO.mjs ├── input-value-accessor-D1GvPuqO.mjs.map ├── input.mjs ├── input.mjs.map ├── input │ ├── testing.mjs │ └── testing.mjs.map ├── internal-form-field-D5iFxU6d.mjs ├── internal-form-field-D5iFxU6d.mjs.map ├── line-Bz5f9Cyx.mjs ├── line-Bz5f9Cyx.mjs.map ├── list.mjs ├── list.mjs.map ├── list │ ├── testing.mjs │ └── testing.mjs.map ├── material.mjs ├── material.mjs.map ├── menu.mjs ├── menu.mjs.map ├── menu │ ├── testing.mjs │ └── testing.mjs.map ├── module-BDiw_nWS.mjs ├── module-BDiw_nWS.mjs.map ├── module-CWxMD37a.mjs ├── module-CWxMD37a.mjs.map ├── module-Ce6F7TNm.mjs ├── module-Ce6F7TNm.mjs.map ├── module-DzZHEh7B.mjs ├── module-DzZHEh7B.mjs.map ├── option-BzhYL_xC.mjs ├── option-BzhYL_xC.mjs.map ├── option-harness-BFcc-M_4.mjs ├── option-harness-BFcc-M_4.mjs.map ├── paginator.mjs ├── paginator.mjs.map ├── paginator │ ├── testing.mjs │ └── testing.mjs.map ├── progress-bar.mjs ├── progress-bar.mjs.map ├── progress-bar │ ├── testing.mjs │ └── testing.mjs.map ├── progress-spinner.mjs ├── progress-spinner.mjs.map ├── progress-spinner │ ├── testing.mjs │ └── testing.mjs.map ├── pseudo-checkbox-DDmgx3P4.mjs ├── pseudo-checkbox-DDmgx3P4.mjs.map ├── pseudo-checkbox-module-4F8Up4PL.mjs ├── pseudo-checkbox-module-4F8Up4PL.mjs.map ├── public-api-BoO5eSq-.mjs ├── public-api-BoO5eSq-.mjs.map ├── radio.mjs ├── radio.mjs.map ├── radio │ ├── testing.mjs │ └── testing.mjs.map ├── ripple-BYgV4oZC.mjs ├── ripple-BYgV4oZC.mjs.map ├── ripple-loader-BnMiRtmT.mjs ├── ripple-loader-BnMiRtmT.mjs.map ├── select.mjs ├── select.mjs.map ├── select │ ├── testing.mjs │ └── testing.mjs.map ├── sidenav.mjs ├── sidenav.mjs.map ├── sidenav │ ├── testing.mjs │ └── testing.mjs.map ├── slide-toggle.mjs ├── slide-toggle.mjs.map ├── slide-toggle │ ├── testing.mjs │ └── testing.mjs.map ├── slider.mjs ├── slider.mjs.map ├── slider │ ├── testing.mjs │ └── testing.mjs.map ├── snack-bar.mjs ├── snack-bar.mjs.map ├── snack-bar │ ├── testing.mjs │ └── testing.mjs.map ├── sort.mjs ├── sort.mjs.map ├── sort │ ├── testing.mjs │ └── testing.mjs.map ├── stepper.mjs ├── stepper.mjs.map ├── stepper │ ├── testing.mjs │ └── testing.mjs.map ├── structural-styles-CObeNzjn.mjs ├── structural-styles-CObeNzjn.mjs.map ├── table.mjs ├── table.mjs.map ├── table │ ├── testing.mjs │ └── testing.mjs.map ├── tabs.mjs ├── tabs.mjs.map ├── tabs │ ├── testing.mjs │ └── testing.mjs.map ├── timepicker.mjs ├── timepicker.mjs.map ├── timepicker │ ├── testing.mjs │ └── testing.mjs.map ├── toolbar.mjs ├── toolbar.mjs.map ├── toolbar │ ├── testing.mjs │ └── testing.mjs.map ├── tooltip.mjs ├── tooltip.mjs.map ├── tooltip │ ├── testing.mjs │ └── testing.mjs.map ├── tree.mjs ├── tree.mjs.map └── tree │ ├── testing.mjs │ └── testing.mjs.map ├── form-field-control-harness.d-BLvFBy6v.d.ts ├── form-field-control.d-DvB4ZVlf.d.ts ├── form-field.d-C6p5uYjG.d.ts ├── form-field ├── _form-field-theme.scss ├── _m2-form-field.scss ├── _m3-form-field.scss ├── index.d.ts └── testing │ ├── control │ └── index.d.ts │ └── index.d.ts ├── grid-list ├── _grid-list-theme.scss ├── _m2-grid-list.scss ├── _m3-grid-list.scss ├── index.d.ts └── testing │ └── index.d.ts ├── icon-module.d-COXCrhrh.d.ts ├── icon-registry.d-BVwP8t9_.d.ts ├── icon ├── _icon-theme.scss ├── _m2-icon.scss ├── _m3-icon.scss ├── index.d.ts └── testing │ └── index.d.ts ├── index.d-C5neTPvr.d.ts ├── index.d-DAhBYbjm.d.ts ├── index.d.ts ├── input-harness.d-DVI6ttzl.d.ts ├── input ├── _input-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── line.d-C-QdueRc.d.ts ├── list-option-types.d-77dQtwu8.d.ts ├── list ├── _list-theme.scss ├── _m2-list.scss ├── _m3-list.scss ├── index.d.ts └── testing │ └── index.d.ts ├── menu ├── _m2-menu.scss ├── _m3-menu.scss ├── _menu-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── module.d-D1Ym5Wf2.d.ts ├── module.d-bebo7gS5.d.ts ├── module.d-m-qXd3m8.d.ts ├── option-harness.d-IqsW95GR.d.ts ├── option-parent.d-CnYuuMkO.d.ts ├── option.d-BcvS44bt.d.ts ├── package.json ├── paginator.d-DuJ-oYgT.d.ts ├── paginator ├── _m2-paginator.scss ├── _m3-paginator.scss ├── _paginator-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── palette.d-BSSFKjO6.d.ts ├── prebuilt-themes ├── azure-blue.css ├── cyan-orange.css ├── deeppurple-amber.css ├── indigo-pink.css ├── magenta-violet.css ├── pink-bluegrey.css ├── purple-green.css └── rose-red.css ├── progress-bar ├── _m2-progress-bar.scss ├── _m3-progress-bar.scss ├── _progress-bar-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── progress-spinner.d-Lfz4Wh5x.d.ts ├── progress-spinner ├── _m2-progress-spinner.scss ├── _m3-progress-spinner.scss ├── _progress-spinner-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── pseudo-checkbox-module.d-BHmTZ10P.d.ts ├── radio ├── _m2-radio.scss ├── _m3-radio.scss ├── _radio-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── ripple-loader.d-9me-KFSi.d.ts ├── ripple.d-BT30YVLB.d.ts ├── schematics ├── collection.json ├── migration.json ├── ng-add │ ├── fonts │ │ ├── material-fonts.d.ts │ │ ├── material-fonts.js │ │ └── material-fonts.js.map │ ├── index.d.ts │ ├── index.js │ ├── index.js.map │ ├── package-config.d.ts │ ├── package-config.js │ ├── package-config.js.map │ ├── schema.d.ts │ ├── schema.js │ ├── schema.js.map │ ├── schema.json │ ├── setup-project.d.ts │ ├── setup-project.js │ ├── setup-project.js.map │ └── theming │ │ ├── create-custom-theme.d.ts │ │ ├── create-custom-theme.js │ │ ├── create-custom-theme.js.map │ │ ├── theming.d.ts │ │ ├── theming.js │ │ └── theming.js.map ├── ng-generate │ ├── address-form │ │ ├── files │ │ │ └── __path__ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ ├── __name@dasherize__.component.__style__.template │ │ │ │ ├── __name@dasherize__.component.html.template │ │ │ │ ├── __name@dasherize__.component.spec.ts.template │ │ │ │ └── __name@dasherize__.component.ts.template │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.map │ │ ├── schema.d.ts │ │ ├── schema.js │ │ ├── schema.js.map │ │ └── schema.json │ ├── dashboard │ │ ├── files │ │ │ └── __path__ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ ├── __name@dasherize__.component.__style__.template │ │ │ │ ├── __name@dasherize__.component.html.template │ │ │ │ ├── __name@dasherize__.component.spec.ts.template │ │ │ │ └── __name@dasherize__.component.ts.template │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.map │ │ ├── schema.d.ts │ │ ├── schema.js │ │ ├── schema.js.map │ │ └── schema.json │ ├── navigation │ │ ├── files │ │ │ └── __path__ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ ├── __name@dasherize__.component.__style__.template │ │ │ │ ├── __name@dasherize__.component.html.template │ │ │ │ ├── __name@dasherize__.component.spec.ts.template │ │ │ │ └── __name@dasherize__.component.ts.template │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.map │ │ ├── schema.d.ts │ │ ├── schema.js │ │ ├── schema.js.map │ │ └── schema.json │ ├── table │ │ ├── files │ │ │ └── __path__ │ │ │ │ └── __name@dasherize@if-flat__ │ │ │ │ ├── __name@dasherize__-datasource.ts.template │ │ │ │ ├── __name@dasherize__.component.__style__.template │ │ │ │ ├── __name@dasherize__.component.html.template │ │ │ │ ├── __name@dasherize__.component.spec.ts.template │ │ │ │ └── __name@dasherize__.component.ts.template │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.map │ │ ├── schema.d.ts │ │ ├── schema.js │ │ ├── schema.js.map │ │ └── schema.json │ ├── theme-color │ │ ├── index_bundled.js │ │ ├── index_bundled.js.map │ │ └── schema.json │ └── tree │ │ ├── files │ │ └── __path__ │ │ │ └── __name@dasherize@if-flat__ │ │ │ ├── __name@dasherize__.component.__style__.template │ │ │ ├── __name@dasherize__.component.html.template │ │ │ ├── __name@dasherize__.component.spec.ts.template │ │ │ ├── __name@dasherize__.component.ts.template │ │ │ └── example-data.ts.template │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.js.map │ │ ├── schema.d.ts │ │ ├── schema.js │ │ ├── schema.js.map │ │ └── schema.json ├── ng-update │ ├── index_bundled.js │ └── index_bundled.js.map └── package.json ├── select ├── _m2-select.scss ├── _m3-select.scss ├── _select-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── sidenav ├── _m2-sidenav.scss ├── _m3-sidenav.scss ├── _sidenav-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── slide-toggle ├── _m2-slide-toggle.scss ├── _m3-slide-toggle.scss ├── _slide-toggle-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── slider ├── _m2-slider.scss ├── _m3-slider.scss ├── _slider-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── snack-bar ├── _m2-snack-bar.scss ├── _m3-snack-bar.scss ├── _snack-bar-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── sort-direction.d-CF7VUsH-.d.ts ├── sort.d-i-bF_IaU.d.ts ├── sort ├── _m2-sort.scss ├── _m3-sort.scss ├── _sort-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── stepper ├── _m2-stepper.scss ├── _m3-stepper.scss ├── _stepper-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── table ├── _m2-table.scss ├── _m3-table.scss ├── _table-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── tabs ├── _m2-tabs.scss ├── _m3-tabs.scss ├── _tabs-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── timepicker ├── _m2-timepicker.scss ├── _m3-timepicker.scss ├── _timepicker-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── toolbar ├── _m2-toolbar.scss ├── _m3-toolbar.scss ├── _toolbar-theme.scss ├── index.d.ts └── testing │ └── index.d.ts ├── tooltip ├── _m2-tooltip.scss ├── _m3-tooltip.scss ├── _tooltip-theme.scss ├── index.d.ts └── testing │ └── index.d.ts └── tree ├── _m2-tree.scss ├── _m3-tree.scss ├── _tree-theme.scss ├── index.d.ts └── testing └── index.d.ts /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2025 Google LLC. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Angular Material 2 | ======= 3 | 4 | The sources for this package are in the main [Angular Material](https://github.com/angular/components) repo. Please file issues and pull requests against that repo. 5 | 6 | License: MIT 7 | -------------------------------------------------------------------------------- /autocomplete/_m2-autocomplete.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | @use '../core/style/elevation'; 3 | 4 | // Tokens that can't be configured through Angular Material's current theming API, 5 | // but may be in a future version of the theming API. 6 | @function get-unthemable-tokens() { 7 | @return ( 8 | autocomplete-container-shape: 4px, 9 | autocomplete-container-elevation-shadow: elevation.get-box-shadow(8), 10 | ); 11 | } 12 | 13 | // Tokens that can be configured through Angular Material's color theming API. 14 | @function get-color-tokens($theme) { 15 | @return ( 16 | autocomplete-background-color: inspection.get-theme-color($theme, system, surface) 17 | ); 18 | } 19 | 20 | // Tokens that can be configured through Angular Material's typography theming API. 21 | @function get-typography-tokens($theme) { 22 | @return (); 23 | } 24 | 25 | // Tokens that can be configured through Angular Material's density theming API. 26 | @function get-density-tokens($theme) { 27 | @return (); 28 | } 29 | -------------------------------------------------------------------------------- /autocomplete/_m3-autocomplete.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/style/elevation'; 3 | @use '../core/tokens/m3-utils'; 4 | @use '../core/tokens/m3'; 5 | 6 | /// Generates custom tokens for the mat-autocomplete. 7 | /// @param {Map} $systems The MDC system tokens 8 | /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values 9 | /// @param {Map} $token-slots Possible token slots 10 | /// @return {Map} A set of custom tokens for the mat-autocomplete 11 | @function get-tokens($theme: m3.$sys-theme) { 12 | $system: m3-utils.get-system($theme); 13 | $tokens: ( 14 | base: ( 15 | autocomplete-container-shape: map.get($system, corner-extra-small), 16 | autocomplete-container-elevation-shadow: elevation.get-box-shadow(2), 17 | ), 18 | color: ( 19 | autocomplete-background-color: map.get($system, surface-container), 20 | ), 21 | typography: (), 22 | density: (), 23 | ); 24 | 25 | @return $tokens; 26 | } 27 | -------------------------------------------------------------------------------- /badge/_m3-badge.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-badge. 6 | @function get-tokens($theme: m3.$sys-theme, $color-variant: null) { 7 | $system: m3-utils.get-system($theme); 8 | @if $color-variant { 9 | $system: m3-utils.replace-colors-with-variant($system, error, $color-variant); 10 | } 11 | 12 | $tokens: ( 13 | base: ( 14 | badge-container-offset: -12px 0, 15 | badge-container-overlap-offset: -12px, 16 | badge-container-padding: 0 4px, 17 | badge-container-shape: map.get($system, corner-full), 18 | badge-container-size: 16px, 19 | badge-large-size-container-offset: -12px 0, 20 | badge-large-size-container-overlap-offset: -12px, 21 | badge-large-size-container-padding: 0 4px, 22 | badge-large-size-container-size: 16px, 23 | badge-legacy-container-size: unset, 24 | badge-legacy-large-size-container-size: unset, 25 | badge-legacy-small-size-container-size: unset, 26 | badge-small-size-container-offset: -6px 0, 27 | badge-small-size-container-overlap-offset: -6px, 28 | badge-small-size-container-padding: 0, 29 | badge-small-size-container-size: 6px, 30 | ), 31 | color: ( 32 | badge-background-color: map.get($system, error), 33 | badge-disabled-state-background-color: 34 | m3-utils.color-with-opacity(map.get($system, error), 38%), 35 | badge-disabled-state-text-color: map.get($system, on-error), 36 | badge-text-color: map.get($system, on-error), 37 | ), 38 | typography: ( 39 | badge-large-size-line-height: 16px, 40 | badge-large-size-text-size: map.get($system, label-small-size), 41 | badge-line-height: 16px, 42 | badge-small-size-line-height: 6px, 43 | badge-small-size-text-size: 0, 44 | badge-text-font: map.get($system, label-small-font), 45 | badge-text-size: map.get($system, label-small-size), 46 | badge-text-weight: map.get($system, label-small-weight), 47 | ), 48 | density: (), 49 | ); 50 | 51 | @return $tokens; 52 | } 53 | -------------------------------------------------------------------------------- /badge/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import * as i1 from '@angular/cdk/a11y'; 3 | import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js'; 4 | import { M as MatBadge, _ as _MatBadgeStyleLoader } from '../badge.d-Cn81aRz4.js'; 5 | export { a as MatBadgePosition, b as MatBadgeSize } from '../badge.d-Cn81aRz4.js'; 6 | import '@angular/cdk/bidi'; 7 | import '../palette.d-BSSFKjO6.js'; 8 | 9 | declare class MatBadgeModule { 10 | static ɵfac: i0.ɵɵFactoryDeclaration; 11 | static ɵmod: i0.ɵɵNgModuleDeclaration; 12 | static ɵinj: i0.ɵɵInjectorDeclaration; 13 | } 14 | 15 | export { MatBadge, MatBadgeModule }; 16 | -------------------------------------------------------------------------------- /badge/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 2 | import { a as MatBadgePosition, b as MatBadgeSize } from '../../badge.d-Cn81aRz4.js'; 3 | import '@angular/core'; 4 | import '../../palette.d-BSSFKjO6.js'; 5 | 6 | interface BadgeHarnessFilters extends BaseHarnessFilters { 7 | text?: string | RegExp; 8 | } 9 | 10 | /** Harness for interacting with a standard Material badge in tests. */ 11 | declare class MatBadgeHarness extends ComponentHarness { 12 | static hostSelector: string; 13 | /** 14 | * Gets a `HarnessPredicate` that can be used to search for a badge with specific attributes. 15 | * @param options Options for narrowing the search: 16 | * - `text` finds a badge host with a particular text. 17 | * @return a `HarnessPredicate` configured with the given options. 18 | */ 19 | static with(options?: BadgeHarnessFilters): HarnessPredicate; 20 | private _badgeElement; 21 | /** Gets a promise for the badge text. */ 22 | getText(): Promise; 23 | /** Gets whether the badge is overlapping the content. */ 24 | isOverlapping(): Promise; 25 | /** Gets the position of the badge. */ 26 | getPosition(): Promise; 27 | /** Gets the size of the badge. */ 28 | getSize(): Promise; 29 | /** Gets whether the badge is hidden. */ 30 | isHidden(): Promise; 31 | /** Gets whether the badge is disabled. */ 32 | isDisabled(): Promise; 33 | } 34 | 35 | export { MatBadgeHarness }; 36 | export type { BadgeHarnessFilters }; 37 | -------------------------------------------------------------------------------- /bottom-sheet/_m2-bottom-sheet.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | 3 | // Tokens that can't be configured through Angular Material's current theming API, 4 | // but may be in a future version of the theming API. 5 | @function get-unthemable-tokens() { 6 | @return ( 7 | // TODO: will be necessary for M3. 8 | bottom-sheet-container-shape: 4px, 9 | ); 10 | } 11 | 12 | // Tokens that can be configured through Angular Material's color theming API. 13 | @function get-color-tokens($theme) { 14 | @return ( 15 | bottom-sheet-container-text-color: inspection.get-theme-color($theme, system, on-surface), 16 | bottom-sheet-container-background-color: inspection.get-theme-color($theme, system, surface), 17 | ); 18 | } 19 | 20 | // Tokens that can be configured through Angular Material's typography theming API. 21 | @function get-typography-tokens($theme) { 22 | @return ( 23 | bottom-sheet-container-text-font: inspection.get-theme-typography($theme, body-2, font-family), 24 | bottom-sheet-container-text-line-height: 25 | inspection.get-theme-typography($theme, body-2, line-height), 26 | bottom-sheet-container-text-size: inspection.get-theme-typography($theme, body-2, font-size), 27 | bottom-sheet-container-text-tracking: 28 | inspection.get-theme-typography($theme, body-2, letter-spacing), 29 | bottom-sheet-container-text-weight: 30 | inspection.get-theme-typography($theme, body-2, font-weight), 31 | ); 32 | } 33 | 34 | // Tokens that can be configured through Angular Material's density theming API. 35 | @function get-density-tokens($theme) { 36 | @return (); 37 | } 38 | -------------------------------------------------------------------------------- /bottom-sheet/_m3-bottom-sheet.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-bottom-sheet. 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | @return ( 9 | base: ( 10 | bottom-sheet-container-shape: 28px, 11 | ), 12 | color: ( 13 | bottom-sheet-container-text-color: map.get($system, on-surface), 14 | bottom-sheet-container-background-color: map.get($system, surface-container-low), 15 | ), 16 | typography: ( 17 | bottom-sheet-container-text-font: map.get($system, body-large-font), 18 | bottom-sheet-container-text-line-height: map.get($system, body-large-line-height), 19 | bottom-sheet-container-text-size: map.get($system, body-large-size), 20 | bottom-sheet-container-text-tracking: map.get($system, body-large-tracking), 21 | bottom-sheet-container-text-weight: map.get($system, body-large-weight), 22 | ), 23 | density: (), 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /bottom-sheet/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | interface BottomSheetHarnessFilters extends BaseHarnessFilters { 4 | } 5 | 6 | /** Harness for interacting with a standard MatBottomSheet in tests. */ 7 | declare class MatBottomSheetHarness extends ContentContainerComponentHarness { 8 | static hostSelector: string; 9 | /** 10 | * Gets a `HarnessPredicate` that can be used to search for a bottom sheet with 11 | * specific attributes. 12 | * @param options Options for narrowing the search. 13 | * @return a `HarnessPredicate` configured with the given options. 14 | */ 15 | static with(options?: BottomSheetHarnessFilters): HarnessPredicate; 16 | /** Gets the value of the bottom sheet's "aria-label" attribute. */ 17 | getAriaLabel(): Promise; 18 | /** 19 | * Dismisses the bottom sheet by pressing escape. Note that this method cannot 20 | * be used if "disableClose" has been set to true via the config. 21 | */ 22 | dismiss(): Promise; 23 | } 24 | 25 | export { MatBottomSheetHarness }; 26 | export type { BottomSheetHarnessFilters }; 27 | -------------------------------------------------------------------------------- /button-toggle/index.d.ts: -------------------------------------------------------------------------------- 1 | import { M as MatButtonToggleGroup, a as MatButtonToggle } from '../button-toggle.d-B_G01PhW.js'; 2 | export { d as MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, f as MAT_BUTTON_TOGGLE_GROUP, e as MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, g as MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, b as MatButtonToggleAppearance, h as MatButtonToggleChange, c as MatButtonToggleDefaultOptions, T as ToggleType } from '../button-toggle.d-B_G01PhW.js'; 3 | import * as i0 from '@angular/core'; 4 | import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js'; 5 | import { M as MatRippleModule } from '../index.d-C5neTPvr.js'; 6 | import '@angular/cdk/bidi'; 7 | import '@angular/forms'; 8 | import '../ripple.d-BT30YVLB.js'; 9 | import '@angular/cdk/platform'; 10 | 11 | declare class MatButtonToggleModule { 12 | static ɵfac: i0.ɵɵFactoryDeclaration; 13 | static ɵmod: i0.ɵɵNgModuleDeclaration; 14 | static ɵinj: i0.ɵɵInjectorDeclaration; 15 | } 16 | 17 | export { MatButtonToggle, MatButtonToggleGroup, MatButtonToggleModule }; 18 | -------------------------------------------------------------------------------- /card/_m3-card.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/style/elevation'; 4 | @use '../core/tokens/m3'; 5 | 6 | // The prefix used to generate the fully qualified name for tokens in this file. 7 | $prefix: (mat, card); 8 | 9 | /// Generates custom tokens for the mat-card. 10 | @function get-tokens($theme: m3.$sys-theme) { 11 | $system: m3-utils.get-system($theme); 12 | @return ( 13 | base: ( 14 | card-elevated-container-shape: map.get($system, corner-medium), 15 | card-filled-container-shape: map.get($system, corner-medium), 16 | card-outlined-container-shape: map.get($system, corner-medium), 17 | card-outlined-outline-width: 1px, 18 | ), 19 | color: ( 20 | card-elevated-container-color: map.get($system, surface-container-low), 21 | card-elevated-container-elevation: elevation.get-box-shadow(map.get($system, level1)), 22 | card-filled-container-color: map.get($system, surface-container-highest), 23 | card-filled-container-elevation: elevation.get-box-shadow(map.get($system, level0)), 24 | card-outlined-container-color: map.get($system, surface), 25 | card-outlined-container-elevation: elevation.get-box-shadow(map.get($system, level0)), 26 | card-outlined-outline-color: map.get($system, outline-variant), 27 | card-subtitle-text-color: map.get($system, on-surface), 28 | ), 29 | typography: ( 30 | card-subtitle-text-font: map.get($system, title-medium-font), 31 | card-subtitle-text-line-height: map.get($system, title-medium-line-height), 32 | card-subtitle-text-size: map.get($system, title-medium-size), 33 | card-subtitle-text-tracking: map.get($system, title-medium-tracking), 34 | card-subtitle-text-weight: map.get($system, title-medium-weight), 35 | card-title-text-font: map.get($system, title-large-font), 36 | card-title-text-line-height: map.get($system, title-large-line-height), 37 | card-title-text-size: map.get($system, title-large-size), 38 | card-title-text-tracking: map.get($system, title-large-tracking), 39 | card-title-text-weight: map.get($system, title-large-weight), 40 | ), 41 | density: (), 42 | ); 43 | } 44 | 45 | -------------------------------------------------------------------------------- /card/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ContentContainerComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | /** A set of criteria that can be used to filter a list of `MatCardHarness` instances. */ 4 | interface CardHarnessFilters extends BaseHarnessFilters { 5 | /** Only find instances whose text matches the given value. */ 6 | text?: string | RegExp; 7 | /** Only find instances whose title matches the given value. */ 8 | title?: string | RegExp; 9 | /** Only find instances whose subtitle matches the given value. */ 10 | subtitle?: string | RegExp; 11 | } 12 | 13 | /** Selectors for different sections of the mat-card that can container user content. */ 14 | declare enum MatCardSection { 15 | HEADER = ".mat-mdc-card-header", 16 | CONTENT = ".mat-mdc-card-content", 17 | ACTIONS = ".mat-mdc-card-actions", 18 | FOOTER = ".mat-mdc-card-footer" 19 | } 20 | /** Harness for interacting with a mat-card in tests. */ 21 | declare class MatCardHarness extends ContentContainerComponentHarness { 22 | /** The selector for the host element of a `MatCard` instance. */ 23 | static hostSelector: string; 24 | /** 25 | * Gets a `HarnessPredicate` that can be used to search for a card with specific attributes. 26 | * @param options Options for filtering which card instances are considered a match. 27 | * @return a `HarnessPredicate` configured with the given options. 28 | */ 29 | static with(this: ComponentHarnessConstructor, options?: CardHarnessFilters): HarnessPredicate; 30 | private _title; 31 | private _subtitle; 32 | /** Gets all of the card's content as text. */ 33 | getText(): Promise; 34 | /** Gets the cards's title text. */ 35 | getTitleText(): Promise; 36 | /** Gets the cards's subtitle text. */ 37 | getSubtitleText(): Promise; 38 | } 39 | 40 | export { MatCardHarness, MatCardSection }; 41 | export type { CardHarnessFilters }; 42 | -------------------------------------------------------------------------------- /common-module.d-C8xzHJDr.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { InjectionToken } from '@angular/core'; 3 | import * as i1 from '@angular/cdk/bidi'; 4 | 5 | /** 6 | * Injection token that configures whether the Material sanity checks are enabled. 7 | * @deprecated No longer used and will be removed. 8 | * @breaking-change 21.0.0 9 | */ 10 | declare const MATERIAL_SANITY_CHECKS: InjectionToken; 11 | /** 12 | * Possible sanity checks that can be enabled. If set to 13 | * true/false, all checks will be enabled/disabled. 14 | * @deprecated No longer used and will be removed. 15 | * @breaking-change 21.0.0 16 | */ 17 | type SanityChecks = boolean | GranularSanityChecks; 18 | /** 19 | * Object that can be used to configure the sanity checks granularly. 20 | * @deprecated No longer used and will be removed. 21 | * @breaking-change 21.0.0 22 | */ 23 | interface GranularSanityChecks { 24 | doctype: boolean; 25 | theme: boolean; 26 | version: boolean; 27 | } 28 | /** 29 | * Module that captures anything that should be loaded and/or run for *all* Angular Material 30 | * components. This includes Bidi, etc. 31 | * 32 | * This module should be imported to each top-level component module (e.g., MatTabsModule). 33 | * @deprecated No longer used and will be removed. 34 | * @breaking-change 21.0.0 35 | */ 36 | declare class MatCommonModule { 37 | constructor(...args: any[]); 38 | static ɵfac: i0.ɵɵFactoryDeclaration; 39 | static ɵmod: i0.ɵɵNgModuleDeclaration; 40 | static ɵinj: i0.ɵɵInjectorDeclaration; 41 | } 42 | 43 | export { MatCommonModule as M, MATERIAL_SANITY_CHECKS as a }; 44 | export type { GranularSanityChecks as G, SanityChecks as S }; 45 | -------------------------------------------------------------------------------- /core/_m2-app.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use './style/elevation'; 3 | @use '../core/tokens/m2-utils'; 4 | 5 | // Tokens that can't be configured through Angular Material's current theming API, 6 | // but may be in a future version of the theming API. 7 | @function get-unthemable-tokens() { 8 | @return (); 9 | } 10 | 11 | // Tokens that can be configured through Angular Material's color theming API. 12 | @function get-color-tokens($theme) { 13 | $system: m2-utils.get-system($theme); 14 | 15 | $tokens: ( 16 | app-background-color: map.get($system, background), 17 | app-text-color: map.get($system, on-surface), 18 | ); 19 | 20 | @for $zValue from 0 through 24 { 21 | $shadow: elevation.get-box-shadow($zValue, map.get($system, shadow)); 22 | $tokens: map.set($tokens, 'app-elevation-shadow-level-#{$zValue}', $shadow); 23 | } 24 | 25 | @return $tokens; 26 | } 27 | 28 | // Tokens that can be configured through Angular Material's typography theming API. 29 | @function get-typography-tokens($theme) { 30 | @return (); 31 | } 32 | 33 | // Tokens that can be configured through Angular Material's density theming API. 34 | @function get-density-tokens($theme) { 35 | @return (); 36 | } 37 | -------------------------------------------------------------------------------- /core/color/_all-color.scss: -------------------------------------------------------------------------------- 1 | @use '../theming/all-theme'; 2 | @use '../theming/inspection'; 3 | 4 | // Includes all of the color styles. 5 | @mixin all-component-colors($theme) { 6 | @if not inspection.theme-has($theme, color) { 7 | @error 'No color configuration specified.'; 8 | } 9 | 10 | @include all-theme.all-component-colors( 11 | inspection.theme-remove($theme, base, typography, density)); 12 | } 13 | 14 | // @deprecated Use `all-component-colors`. 15 | @mixin angular-material-color($theme) { 16 | @include all-component-colors($theme); 17 | } 18 | -------------------------------------------------------------------------------- /core/m2/_index.scss: -------------------------------------------------------------------------------- 1 | // M2-specific theming APIs which are separated out into this file so they 2 | // can be renamed conditionally depending on whether we're in 1P or 3P. 3 | @forward './theming' show 4 | define-light-theme, 5 | define-dark-theme, 6 | define-palette, 7 | get-contrast-color-from-palette, 8 | get-color-from-palette, 9 | get-color-config, 10 | get-typography-config, 11 | get-density-config; 12 | 13 | @forward './palette' show 14 | $red-palette, 15 | $pink-palette, 16 | $indigo-palette, 17 | $purple-palette, 18 | $deep-purple-palette, 19 | $blue-palette, 20 | $light-blue-palette, 21 | $cyan-palette, 22 | $teal-palette, 23 | $green-palette, 24 | $light-green-palette, 25 | $lime-palette, 26 | $yellow-palette, 27 | $amber-palette, 28 | $orange-palette, 29 | $deep-orange-palette, 30 | $brown-palette, 31 | $grey-palette, 32 | $gray-palette, 33 | $blue-grey-palette, 34 | $blue-gray-palette, 35 | $light-theme-background-palette, 36 | $dark-theme-background-palette, 37 | $light-theme-foreground-palette, 38 | $dark-theme-foreground-palette; 39 | 40 | @forward './typography' show 41 | define-typography-level, 42 | define-rem-typography-config, 43 | define-typography-config, 44 | define-legacy-typography-config; 45 | 46 | @forward './typography-utils' show 47 | typography-level, 48 | font-size, 49 | line-height, 50 | font-weight, 51 | letter-spacing, 52 | font-family; 53 | -------------------------------------------------------------------------------- /core/option/_m2-optgroup.scss: -------------------------------------------------------------------------------- 1 | @use '../theming/inspection'; 2 | 3 | // Tokens that can't be configured through Angular Material's current theming API, 4 | // but may be in a future version of the theming API. 5 | @function get-unthemable-tokens() { 6 | @return (); 7 | } 8 | 9 | // Tokens that can be configured through Angular Material's color theming API. 10 | @function get-color-tokens($theme) { 11 | @return ( 12 | optgroup-label-text-color: inspection.get-theme-color($theme, system, on-surface), 13 | ); 14 | } 15 | 16 | // Tokens that can be configured through Angular Material's typography theming API. 17 | @function get-typography-tokens($theme) { 18 | @return ( 19 | optgroup-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), 20 | optgroup-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), 21 | optgroup-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), 22 | optgroup-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), 23 | optgroup-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight) 24 | ); 25 | } 26 | 27 | // Tokens that can be configured through Angular Material's density theming API. 28 | @function get-density-tokens($theme) { 29 | @return (); 30 | } 31 | -------------------------------------------------------------------------------- /core/option/_m2-option.scss: -------------------------------------------------------------------------------- 1 | @use '../theming/inspection'; 2 | @use 'sass:map'; 3 | @use '../tokens/m2-utils'; 4 | @use '../tokens/m3-utils'; 5 | 6 | // Tokens that can't be configured through Angular Material's current theming API, 7 | // but may be in a future version of the theming API. 8 | @function get-unthemable-tokens() { 9 | @return (); 10 | } 11 | 12 | // Tokens that can be configured through Angular Material's color theming API. 13 | @function get-color-tokens($theme, $color-variant) { 14 | $is-dark: inspection.get-theme-type($theme) == dark; 15 | $system: m2-utils.get-system($theme); 16 | $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); 17 | 18 | @return ( 19 | option-selected-state-label-text-color: map.get($system, primary), 20 | option-label-text-color: inspection.get-theme-color($theme, system, on-surface), 21 | option-hover-state-layer-color: m3-utils.color-with-opacity( 22 | map.get($system, on-surface), map.get($system, hover-state-layer-opacity)), 23 | option-focus-state-layer-color: m3-utils.color-with-opacity( 24 | map.get($system, on-surface), map.get($system, focus-state-layer-opacity)), 25 | option-selected-state-layer-color: m3-utils.color-with-opacity( 26 | map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), 27 | ); 28 | } 29 | 30 | // Tokens that can be configured through Angular Material's typography theming API. 31 | @function get-typography-tokens($theme) { 32 | @return ( 33 | option-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), 34 | option-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), 35 | option-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), 36 | option-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), 37 | option-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight) 38 | ); 39 | } 40 | 41 | // Tokens that can be configured through Angular Material's density theming API. 42 | @function get-density-tokens($theme) { 43 | @return (); 44 | } 45 | -------------------------------------------------------------------------------- /core/option/_m3-optgroup.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../tokens/m3-utils'; 3 | @use '../tokens/m3'; 4 | 5 | // The prefix used to generate the fully qualified name for tokens in this file. 6 | $prefix: (mat, optgroup); 7 | 8 | /// Generates custom tokens for the mat-optgroup. 9 | @function get-tokens($theme: m3.$sys-theme) { 10 | $system: m3-utils.get-system($theme); 11 | @return ( 12 | base: (), 13 | color: ( 14 | optgroup-label-text-color: map.get($system, on-surface-variant), 15 | ), 16 | typography: ( 17 | optgroup-label-text-font: map.get($system, title-small-font), 18 | optgroup-label-text-line-height: map.get($system, title-small-line-height), 19 | optgroup-label-text-size: map.get($system, title-small-size), 20 | optgroup-label-text-tracking: map.get($system, title-small-tracking), 21 | optgroup-label-text-weight: map.get($system, title-small-weight), 22 | ), 23 | density: (), 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /core/option/_m3-option.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../tokens/m3-utils'; 3 | @use '../tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-option. 6 | @function get-tokens($theme: m3.$sys-theme, $color-variant: null) { 7 | $system: m3-utils.get-system($theme); 8 | @if $color-variant { 9 | $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant); 10 | } 11 | 12 | // According to the spec the options have to be `label-large` in all typography 13 | // dimensions, however this is inconsistent with the designs and with MDC's 14 | // own implementation. This appears to be a bug in the spec, because MDC overrides 15 | // the font size and weight to be `body-large` (see b/261838263). We make the same 16 | // override here so the label looks correct. 17 | @return ( 18 | base: (), 19 | color: ( 20 | option-focus-state-layer-color: m3-utils.color-with-opacity( 21 | map.get($system, on-surface), map.get($system, focus-state-layer-opacity)), 22 | option-hover-state-layer-color: m3-utils.color-with-opacity( 23 | map.get($system, on-surface), map.get($system, hover-state-layer-opacity)), 24 | option-label-text-color: map.get($system, on-surface), 25 | option-selected-state-label-text-color: map.get($system, on-secondary-container), 26 | option-selected-state-layer-color: map.get($system, secondary-container), 27 | ), 28 | typography: ( 29 | option-label-text-size: map.get($system, body-large-size), 30 | option-label-text-weight: map.get($system, body-large-weight), 31 | option-label-text-font: map.get($system, label-large-font), 32 | option-label-text-line-height: map.get($system, label-large-line-height), 33 | option-label-text-tracking: map.get($system, label-large-tracking), 34 | ), 35 | density: (), 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /core/ripple/_m2-ripple.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../tokens/m2-utils'; 3 | @use '../tokens/m3-utils'; 4 | 5 | // Tokens that can't be configured through Angular Material's current theming API, 6 | // but may be in a future version of the theming API. 7 | @function get-unthemable-tokens() { 8 | @return (); 9 | } 10 | 11 | // Tokens that can be configured through Angular Material's color theming API. 12 | @function get-color-tokens($theme) { 13 | $system: m2-utils.get-system($theme); 14 | 15 | @return ( 16 | ripple-color: m3-utils.color-with-opacity( 17 | map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), 18 | ); 19 | } 20 | 21 | // Tokens that can be configured through Angular Material's typography theming API. 22 | @function get-typography-tokens($theme) { 23 | @return (); 24 | } 25 | 26 | // Tokens that can be configured through Angular Material's density theming API. 27 | @function get-density-tokens($theme) { 28 | @return (); 29 | } 30 | -------------------------------------------------------------------------------- /core/ripple/_m3-ripple.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../tokens/m3-utils'; 3 | @use '../tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-ripple. 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | 9 | @return ( 10 | base: (), 11 | color: ( 12 | ripple-color: m3-utils.color-with-opacity(map.get($system, on-surface), 10%), 13 | ), 14 | typography: (), 15 | density: (), 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss: -------------------------------------------------------------------------------- 1 | @use '../../theming/inspection'; 2 | @use 'sass:map'; 3 | @use '../../tokens/m2-utils'; 4 | @use '../../tokens/m3-utils'; 5 | 6 | // Tokens that can't be configured through Angular Material's current theming API, 7 | // but may be in a future version of the theming API. 8 | @function get-unthemable-tokens() { 9 | @return (); 10 | } 11 | 12 | // Tokens that can be configured through Angular Material's color theming API. 13 | @function get-color-tokens($theme, $color-variant) { 14 | $is-dark: inspection.get-theme-type($theme) == dark; 15 | $disabled-color: if($is-dark, #686868, #b0b0b0); 16 | $checkmark-color: inspection.get-theme-color($theme, system, background); 17 | $system: m2-utils.get-system($theme); 18 | $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant); 19 | 20 | @return ( 21 | pseudo-checkbox-full-selected-icon-color: map.get($system, secondary), 22 | pseudo-checkbox-full-selected-checkmark-color: $checkmark-color, 23 | pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant), 24 | pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color, 25 | pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color, 26 | pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color, 27 | pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary), 28 | pseudo-checkbox-minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0), 29 | ); 30 | } 31 | 32 | // Tokens that can be configured through Angular Material's typography theming API. 33 | @function get-typography-tokens($theme) { 34 | @return (); 35 | } 36 | 37 | // Tokens that can be configured through Angular Material's density theming API. 38 | @function get-density-tokens($theme) { 39 | @return (); 40 | } 41 | -------------------------------------------------------------------------------- /core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../../tokens/m3-utils'; 3 | @use '../../tokens/m3'; 4 | 5 | /// Generates custom tokens for the full variant of mat-pseudo-checkbox. 6 | /// @param {String} $color-variant The color variant to use for the component (M3 only) 7 | @function get-tokens($theme: m3.$sys-theme, $color-variant: null) { 8 | $system: m3-utils.get-system($theme); 9 | @if $color-variant { 10 | $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); 11 | } 12 | 13 | @return ( 14 | base: (), 15 | color: ( 16 | pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, surface), 17 | pseudo-checkbox-full-disabled-selected-icon-color: 18 | m3-utils.color-with-opacity(map.get($system, on-surface), 38%), 19 | pseudo-checkbox-full-disabled-unselected-icon-color: 20 | m3-utils.color-with-opacity(map.get($system, on-surface), 38%), 21 | pseudo-checkbox-full-selected-checkmark-color: map.get($system, on-primary), 22 | pseudo-checkbox-full-selected-icon-color: map.get($system, primary), 23 | pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant), 24 | pseudo-checkbox-minimal-disabled-selected-checkmark-color: 25 | m3-utils.color-with-opacity(map.get($system, on-surface), 38%), 26 | pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, primary), 27 | ), 28 | typography: (), 29 | density: (), 30 | ); 31 | 32 | $tokens: ( 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /core/style/_checkbox-common.scss: -------------------------------------------------------------------------------- 1 | // The width/height of the checkbox element. 2 | $size: 18px !default; 3 | 4 | // The width/height of the legacy-checkbox element. 5 | $legacy-size: 16px !default; 6 | 7 | // The width of the checkbox border shown when the checkbox is unchecked. 8 | $border-width: 2px; 9 | 10 | // The base duration used for the majority of transitions for the checkbox. 11 | $transition-duration: 90ms; 12 | -------------------------------------------------------------------------------- /core/style/_layout-common.scss: -------------------------------------------------------------------------------- 1 | // This mixin ensures an element spans to fill the nearest ancestor with defined positioning. 2 | @mixin fill { 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | position: absolute; 8 | } 9 | -------------------------------------------------------------------------------- /core/style/_private.scss: -------------------------------------------------------------------------------- 1 | @use './elevation'; 2 | @use '../tokens/m2-utils'; 3 | @use 'sass:map'; 4 | 5 | @mixin private-theme-elevation($zValue, $theme) { 6 | $system: m2-utils.get-system($theme); 7 | @include elevation.elevation($zValue, map.get($system, shadow)); 8 | } 9 | 10 | @mixin private-theme-overridable-elevation($zValue, $theme) { 11 | $system: m2-utils.get-system($theme); 12 | @include elevation.overridable-elevation($zValue, map.get($system, shadow)); 13 | } 14 | 15 | // If the mat-animation-noop class is present on the components root element, 16 | // prevent non css animations from running. 17 | // NOTE: Currently this mixin should only be used with components that do not 18 | // have any projected content. 19 | @mixin private-animation-noop() { 20 | &._mat-animation-noopable { 21 | // Use !important here since we don't know what context this mixin will 22 | // be included in and MDC can have some really specific selectors. 23 | transition: none !important; 24 | animation: none !important; 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /core/style/_validation.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:list'; 2 | @use 'sass:meta'; 3 | 4 | /// Validates that the object's type matches any of the expected types. 5 | /// @param {any} $obj The object to test 6 | /// @param {List} $types The expected types 7 | /// @return {String} null if no error, else the unexpected type. 8 | @function validate-type($obj, $types...) { 9 | $result: meta.type-of($obj); 10 | // A zero-length list is the same as a zero-length map. 11 | @if ($result == list and list.index($types, map) and list.length($obj) == 0) { 12 | @return null; 13 | } 14 | @return if(list.index($types, $result), null, $result); 15 | } 16 | 17 | /// Validates that a list contains only values from the allowed list of values. 18 | /// @param {List} $list The list to test 19 | /// @param {List} $allowed The allowed values 20 | /// @return {List} null if no error, else the list of non-allowed values. 21 | @function validate-allowed-values($list, $allowed...) { 22 | $invalid: (); 23 | @each $element in $list { 24 | @if not list.index($allowed, $element) { 25 | $invalid: list.append($invalid, $element); 26 | } 27 | } 28 | @return if(list.length($invalid) > 0, $invalid, null); 29 | } 30 | 31 | /// Validates that a list contains all values from the required list of values. 32 | /// @param {List} $list The list to test 33 | /// @param {List} $required The required values 34 | /// @return {List} null if no error, else the list of missing values. 35 | @function validate-required-values($list, $required...) { 36 | $invalid: (); 37 | @each $element in $required { 38 | @if not list.index($list, $element) { 39 | $invalid: list.append($invalid, $element); 40 | } 41 | } 42 | @return if(list.length($invalid) > 0, $invalid, null); 43 | } 44 | -------------------------------------------------------------------------------- /core/style/_variables.scss: -------------------------------------------------------------------------------- 1 | // Media queries 2 | // TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver, 3 | $xsmall: 'max-width: 599px'; 4 | $small: 'max-width: 959px'; 5 | 6 | // TODO: Revisit all z-indices before beta 7 | // z-index main list 8 | 9 | $z-index-fab: 20 !default; 10 | $z-index-drawer: 100 !default; 11 | 12 | // Global constants 13 | $pi: 3.14159265; 14 | 15 | // Padding between input toggles and their labels 16 | $toggle-padding: 8px !default; 17 | // Width and height of input toggles 18 | $toggle-size: 20px !default; 19 | 20 | // Easing Curves 21 | // TODO(jelbourn): all of these need to be revisited 22 | 23 | // The default animation curves used by material design. 24 | $linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default; 25 | $fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default; 26 | $fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default; 27 | 28 | $ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default; 29 | 30 | $swift-ease-out-duration: 400ms !default; 31 | $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; 32 | $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default; 33 | 34 | $swift-ease-in-duration: 300ms !default; 35 | $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default; 36 | $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default; 37 | 38 | $swift-ease-in-out-duration: 500ms !default; 39 | $swift-ease-in-out-timing-function: $ease-in-out-curve-function !default; 40 | $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default; 41 | 42 | $swift-linear-duration: 80ms !default; 43 | $swift-linear-timing-function: linear !default; 44 | $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default; 45 | -------------------------------------------------------------------------------- /core/style/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable material/no-prefixes 2 | @mixin user-select($value) { 3 | -webkit-user-select: $value; 4 | user-select: $value; 5 | } 6 | 7 | @mixin input-placeholder { 8 | &::placeholder { 9 | @content; 10 | } 11 | 12 | &::-moz-placeholder { 13 | @content; 14 | } 15 | 16 | &::-webkit-input-placeholder { 17 | @content; 18 | } 19 | 20 | // Note: this isn't necessary anymore since we don't support 21 | // IE, but it caused some presubmit failures in #23416. 22 | &:-ms-input-placeholder { 23 | @content; 24 | } 25 | } 26 | 27 | @mixin backface-visibility($value) { 28 | -webkit-backface-visibility: $value; 29 | backface-visibility: $value; 30 | } 31 | 32 | @mixin color-adjust($value) { 33 | -webkit-print-color-adjust: $value; 34 | color-adjust: $value; 35 | } 36 | 37 | @mixin private-background-clip($value) { 38 | -webkit-background-clip: $value; 39 | background-clip: $value; 40 | } 41 | 42 | @mixin clip-path($value) { 43 | -webkit-clip-path: $value; 44 | clip-path: $value; 45 | } 46 | 47 | @mixin smooth-font { 48 | -moz-osx-font-smoothing: grayscale; 49 | -webkit-font-smoothing: antialiased; 50 | } 51 | 52 | @mixin mask-image($value) { 53 | -webkit-mask-image: $value; 54 | mask-image: $value; 55 | } 56 | // stylelint-enable 57 | -------------------------------------------------------------------------------- /core/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { O as OptionHarnessFilters, M as MatOptionHarness } from '../../option-harness.d-IqsW95GR.js'; 2 | import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing'; 3 | 4 | interface OptgroupHarnessFilters extends BaseHarnessFilters { 5 | labelText?: string | RegExp; 6 | } 7 | 8 | /** Harness for interacting with a `mat-optgroup` in tests. */ 9 | declare class MatOptgroupHarness extends ComponentHarness { 10 | /** Selector used to locate option group instances. */ 11 | static hostSelector: string; 12 | private _label; 13 | /** 14 | * Gets a `HarnessPredicate` that can be used to search for a option group with specific 15 | * attributes. 16 | * @param options Options for filtering which option instances are considered a match. 17 | * @return a `HarnessPredicate` configured with the given options. 18 | */ 19 | static with(this: ComponentHarnessConstructor, options?: OptgroupHarnessFilters): HarnessPredicate; 20 | /** Gets the option group's label text. */ 21 | getLabelText(): Promise; 22 | /** Gets whether the option group is disabled. */ 23 | isDisabled(): Promise; 24 | /** 25 | * Gets the options that are inside the group. 26 | * @param filter Optionally filters which options are included. 27 | */ 28 | getOptions(filter?: OptionHarnessFilters): Promise; 29 | } 30 | 31 | export { MatOptgroupHarness, MatOptionHarness, OptionHarnessFilters }; 32 | export type { OptgroupHarnessFilters }; 33 | -------------------------------------------------------------------------------- /core/theming/_validation.scss: -------------------------------------------------------------------------------- 1 | @mixin selector-defined($msg) { 2 | @if #{&} == '' { 3 | @error $msg; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /core/tokens/_format-tokens.scss: -------------------------------------------------------------------------------- 1 | // DO NOT REMOVE 2 | // This function is used internally. 3 | @function private-format-tokens($systems) { 4 | @return $systems; 5 | } 6 | -------------------------------------------------------------------------------- /core/tokens/m3/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './md-sys-color'; 2 | @forward './md-sys-elevation'; 3 | @forward './md-sys-motion'; 4 | @forward './md-sys-shape'; 5 | @forward './md-sys-state'; 6 | @forward './md-sys-typescale'; 7 | @forward './theme'; 8 | -------------------------------------------------------------------------------- /core/tokens/m3/_md-sys-elevation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Design system display name: Material 3 3 | // Design system version: v0.161 4 | // 5 | 6 | @function md-sys-elevation-values() { 7 | @return ( 8 | level0: 0, 9 | level1: 1, 10 | level2: 3, 11 | level3: 6, 12 | level4: 8, 13 | level5: 12 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /core/tokens/m3/_md-sys-motion.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Design system display name: Material 3 3 | // Design system version: v0.161 4 | // 5 | 6 | @function md-sys-motion-values() { 7 | @return ( 8 | duration-extra-long1: 700ms, 9 | duration-extra-long2: 800ms, 10 | duration-extra-long3: 900ms, 11 | duration-extra-long4: 1000ms, 12 | duration-long1: 450ms, 13 | duration-long2: 500ms, 14 | duration-long3: 550ms, 15 | duration-long4: 600ms, 16 | duration-medium1: 250ms, 17 | duration-medium2: 300ms, 18 | duration-medium3: 350ms, 19 | duration-medium4: 400ms, 20 | duration-short1: 50ms, 21 | duration-short2: 100ms, 22 | duration-short3: 150ms, 23 | duration-short4: 200ms, 24 | easing-emphasized: cubic-bezier(0.2, 0, 0, 1), 25 | easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15), 26 | easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1), 27 | easing-legacy: cubic-bezier(0.4, 0, 0.2, 1), 28 | easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1), 29 | easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1), 30 | easing-linear: cubic-bezier(0, 0, 1, 1), 31 | easing-standard: cubic-bezier(0.2, 0, 0, 1), 32 | easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1), 33 | easing-standard-decelerate: cubic-bezier(0, 0, 0, 1) 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /core/tokens/m3/_md-sys-shape.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Design system display name: Material 3 3 | // Design system version: v0.161 4 | // 5 | 6 | @function md-sys-shape-values() { 7 | @return ( 8 | corner-extra-large: 28px, 9 | corner-extra-large-top: (28px 28px 0 0), 10 | corner-extra-small: 4px, 11 | corner-extra-small-top: (4px 4px 0 0), 12 | corner-full: 9999px, 13 | corner-large: 16px, 14 | corner-large-end: (0 16px 16px 0), 15 | corner-large-start: (16px 0 0 16px), 16 | corner-large-top: (16px 16px 0 0), 17 | corner-medium: 12px, 18 | corner-none: 0, 19 | corner-small: 8px 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /core/tokens/m3/_md-sys-state.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Design system display name: Material 3 3 | // Design system version: v0.161 4 | // 5 | 6 | @function md-sys-state-values($exclude-hardcoded-values: false) { 7 | @return ( 8 | dragged-state-layer-opacity: 0.16, 9 | focus-state-layer-opacity: 0.12, 10 | hover-state-layer-opacity: 0.08, 11 | pressed-state-layer-opacity: 0.12 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /core/tokens/m3/_theme.scss: -------------------------------------------------------------------------------- 1 | @use '../../theming/palettes'; 2 | @use './md-sys-color'; 3 | @use './md-sys-elevation'; 4 | @use './md-sys-shape'; 5 | @use './md-sys-state'; 6 | @use './md-sys-typescale'; 7 | @use 'sass:map'; 8 | 9 | // Return a new map where the values are the same as the provided map's 10 | // keys, prefixed with "--mat-sys-". For example: 11 | // (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2) 12 | @function _create-system-app-vars-map($map) { 13 | $new-map: (); 14 | @each $key, $value in $map { 15 | $new-map: map.set($new-map, $key, --mat-sys-#{$key}); 16 | } 17 | @return $new-map; 18 | } 19 | 20 | /// Map key used to store internals of theme config. 21 | $internals: _mat-theming-internals-do-not-access; 22 | 23 | $placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette); 24 | $placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette); 25 | $app-vars: ( 26 | 'md-sys-color': _create-system-app-vars-map( 27 | md-sys-color.md-sys-color-values-light($placeholder-palettes)), 28 | 'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values(( 29 | brand: (Roboto), 30 | plain: (Roboto), 31 | bold: 700, 32 | medium: 500, 33 | regular: 400 34 | ))), 35 | 'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()), 36 | 'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()), 37 | 'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()), 38 | // Add a subset of palette-specific colors used by components instead of system values 39 | 'md-ref-palette': _create-system-app-vars-map( 40 | ( 41 | neutral10: '', // Form field native select option text color 42 | neutral-variant20: '', // Sidenav scrim (container background shadow when opened), 43 | ) 44 | ), 45 | ); 46 | 47 | $sys-theme: ($internals: $app-vars); 48 | -------------------------------------------------------------------------------- /core/typography/_typography-utils.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:list'; 2 | 3 | /// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to 4 | /// the individual properties if a value that isn't allowed in the shorthand is passed in. 5 | /// @param {String} $font-size The font-size value. 6 | /// @param {String | Number} $font-weight The font-weight value. 7 | /// @param {String | Number} $line-height The line-height value. 8 | /// @param {String} $font-family The font-family value. 9 | /// @returns {String} The `font` shorthand value combining the given parts. 10 | @mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) { 11 | // If any of the values are set to `inherit`, we can't use the shorthand 12 | // so we fall back to passing in the individual properties. 13 | @if ($font-size == inherit or 14 | $font-weight == inherit or 15 | $line-height == inherit or 16 | $font-family == inherit or 17 | $font-size == null or 18 | $font-weight == null or 19 | $line-height == null or 20 | $font-family == null) { 21 | 22 | font-size: $font-size; 23 | font-weight: $font-weight; 24 | line-height: $line-height; 25 | font-family: $font-family; 26 | } 27 | @else { 28 | // Otherwise use the shorthand `font`, because it's the least amount of bytes. 29 | font: $font-weight list.slash($font-size, $line-height) $font-family; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /datepicker/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { D as DatepickerTriggerHarnessBase, a as DatepickerToggleHarnessFilters } from '../../date-range-input-harness.d-CJ4r85Uf.js'; 2 | export { c as CalendarCellHarnessFilters, C as CalendarHarnessFilters, h as CalendarView, d as DateRangeInputHarnessFilters, b as DatepickerInputHarnessFilters, j as MatCalendarCellHarness, i as MatCalendarHarness, g as MatDateRangeInputHarness, M as MatDatepickerInputHarness, f as MatEndDateHarness, e as MatStartDateHarness } from '../../date-range-input-harness.d-CJ4r85Uf.js'; 3 | import { HarnessPredicate } from '@angular/cdk/testing'; 4 | import '@angular/material/form-field/testing/control'; 5 | 6 | /** Harness for interacting with a standard Material datepicker toggle in tests. */ 7 | declare class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase { 8 | static hostSelector: string; 9 | /** The clickable button inside the toggle. */ 10 | private _button; 11 | /** 12 | * Gets a `HarnessPredicate` that can be used to search for a `MatDatepickerToggleHarness` that 13 | * meets certain criteria. 14 | * @param options Options for filtering which datepicker toggle instances are considered a match. 15 | * @return a `HarnessPredicate` configured with the given options. 16 | */ 17 | static with(options?: DatepickerToggleHarnessFilters): HarnessPredicate; 18 | /** Gets whether the calendar associated with the toggle is open. */ 19 | isCalendarOpen(): Promise; 20 | /** Whether the toggle is disabled. */ 21 | isDisabled(): Promise; 22 | protected _openCalendar(): Promise; 23 | } 24 | 25 | export { DatepickerToggleHarnessFilters, MatDatepickerToggleHarness }; 26 | -------------------------------------------------------------------------------- /dialog/_dialog-legacy-padding.scss: -------------------------------------------------------------------------------- 1 | // Legacy padding for the dialog. Copied from the non-MDC dialog styles. 2 | $legacy-padding: 24px !default; 3 | 4 | /// Mixin that applies creates styles for MDC-based dialog's to have legacy outer 5 | /// padding. By default, the dialog does not have any padding. The individual directives 6 | /// such as `matDialogContent`, `matDialogActions` or `matDialogTitle` set the padding. 7 | @mixin legacy-padding() { 8 | // Sets the outer padding for the projected dialog user-content. 9 | .mat-mdc-dialog-surface { 10 | padding: $legacy-padding; 11 | } 12 | 13 | // Updates the MDC title, content and action elements to account for the legacy outer 14 | // padding. The elements will be shifted so that they behave as if there is no margin. 15 | // This allows us to still rely on MDC's dialog spacing while maintaining a default outer 16 | // padding for backwards compatibility. 17 | .mat-mdc-dialog-container { 18 | .mat-mdc-dialog-title { 19 | margin-top: -$legacy-padding; 20 | } 21 | 22 | .mat-mdc-dialog-actions { 23 | margin-bottom: -$legacy-padding; 24 | } 25 | 26 | .mat-mdc-dialog-title, .mat-mdc-dialog-content, .mat-mdc-dialog-actions { 27 | margin-left: -$legacy-padding; 28 | margin-right: -$legacy-padding; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /divider/_m2-divider.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | 3 | // Tokens that can't be configured through Angular Material's current theming API, 4 | // but may be in a future version of the theming API. 5 | @function get-unthemable-tokens() { 6 | @return ( 7 | divider-width: 1px 8 | ); 9 | } 10 | 11 | // Tokens that can be configured through Angular Material's color theming API. 12 | @function get-color-tokens($theme) { 13 | @return ( 14 | divider-color: inspection.get-theme-color($theme, system, outline) 15 | ); 16 | } 17 | 18 | // Tokens that can be configured through Angular Material's typography theming API. 19 | @function get-typography-tokens($theme) { 20 | @return (); 21 | } 22 | 23 | // Tokens that can be configured through Angular Material's density theming API. 24 | @function get-density-tokens($theme) { 25 | @return (); 26 | } 27 | -------------------------------------------------------------------------------- /divider/_m3-divider.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-divider. 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | 9 | @return ( 10 | base: ( 11 | divider-width: 1px, 12 | ), 13 | color: ( 14 | divider-color: map.get($system, outline), 15 | ), 16 | typography: (), 17 | density: (), 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /divider/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BooleanInput } from '@angular/cdk/coercion'; 2 | import * as i0 from '@angular/core'; 3 | import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js'; 4 | import '@angular/cdk/bidi'; 5 | 6 | declare class MatDivider { 7 | /** Whether the divider is vertically aligned. */ 8 | get vertical(): boolean; 9 | set vertical(value: BooleanInput); 10 | private _vertical; 11 | /** Whether the divider is an inset divider. */ 12 | get inset(): boolean; 13 | set inset(value: BooleanInput); 14 | private _inset; 15 | static ɵfac: i0.ɵɵFactoryDeclaration; 16 | static ɵcmp: i0.ɵɵComponentDeclaration; 17 | } 18 | 19 | declare class MatDividerModule { 20 | static ɵfac: i0.ɵɵFactoryDeclaration; 21 | static ɵmod: i0.ɵɵNgModuleDeclaration; 22 | static ɵinj: i0.ɵɵInjectorDeclaration; 23 | } 24 | 25 | export { MatDivider, MatDividerModule }; 26 | -------------------------------------------------------------------------------- /divider/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | interface DividerHarnessFilters extends BaseHarnessFilters { 4 | } 5 | 6 | /** Harness for interacting with a `mat-divider`. */ 7 | declare class MatDividerHarness extends ComponentHarness { 8 | static hostSelector: string; 9 | static with(options?: DividerHarnessFilters): HarnessPredicate; 10 | getOrientation(): Promise<'horizontal' | 'vertical'>; 11 | isInset(): Promise; 12 | } 13 | 14 | export { MatDividerHarness }; 15 | export type { DividerHarnessFilters }; 16 | -------------------------------------------------------------------------------- /error-options.d-CGdTZUYk.d.ts: -------------------------------------------------------------------------------- 1 | import { AbstractControl, FormGroupDirective, NgForm } from '@angular/forms'; 2 | import * as i0 from '@angular/core'; 3 | 4 | /** Error state matcher that matches when a control is invalid and dirty. */ 5 | declare class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher { 6 | isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean; 7 | static ɵfac: i0.ɵɵFactoryDeclaration; 8 | static ɵprov: i0.ɵɵInjectableDeclaration; 9 | } 10 | /** Provider that defines how form controls behave with regards to displaying error messages. */ 11 | declare class ErrorStateMatcher { 12 | isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean; 13 | static ɵfac: i0.ɵɵFactoryDeclaration; 14 | static ɵprov: i0.ɵɵInjectableDeclaration; 15 | } 16 | 17 | export { ErrorStateMatcher as E, ShowOnDirtyErrorStateMatcher as S }; 18 | -------------------------------------------------------------------------------- /fesm2022/animation-DfMFjxHu.mjs: -------------------------------------------------------------------------------- 1 | import { MediaMatcher } from '@angular/cdk/layout'; 2 | import { InjectionToken, inject, ANIMATION_MODULE_TYPE } from '@angular/core'; 3 | 4 | /** Injection token used to configure the animations in Angular Material. */ 5 | const MATERIAL_ANIMATIONS = new InjectionToken('MATERIAL_ANIMATIONS'); 6 | /** 7 | * @deprecated No longer used, will be removed. 8 | * @breaking-change 21.0.0 9 | * @docs-private 10 | */ 11 | class AnimationCurves { 12 | static STANDARD_CURVE = 'cubic-bezier(0.4,0.0,0.2,1)'; 13 | static DECELERATION_CURVE = 'cubic-bezier(0.0,0.0,0.2,1)'; 14 | static ACCELERATION_CURVE = 'cubic-bezier(0.4,0.0,1,1)'; 15 | static SHARP_CURVE = 'cubic-bezier(0.4,0.0,0.6,1)'; 16 | } 17 | /** 18 | * @deprecated No longer used, will be removed. 19 | * @breaking-change 21.0.0 20 | * @docs-private 21 | */ 22 | class AnimationDurations { 23 | static COMPLEX = '375ms'; 24 | static ENTERING = '225ms'; 25 | static EXITING = '195ms'; 26 | } 27 | /** 28 | * Returns whether animations have been disabled by DI. Must be called in a DI context. 29 | * @docs-private 30 | */ 31 | function _animationsDisabled() { 32 | if (inject(MATERIAL_ANIMATIONS, { optional: true })?.animationsDisabled || 33 | inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations') { 34 | return true; 35 | } 36 | const mediaMatcher = inject(MediaMatcher); 37 | return mediaMatcher.matchMedia('(prefers-reduced-motion)').matches; 38 | } 39 | 40 | export { AnimationCurves as A, MATERIAL_ANIMATIONS as M, _animationsDisabled as _, AnimationDurations as a }; 41 | //# sourceMappingURL=animation-DfMFjxHu.mjs.map 42 | -------------------------------------------------------------------------------- /fesm2022/bottom-sheet/testing.mjs: -------------------------------------------------------------------------------- 1 | import { ContentContainerComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing'; 2 | 3 | /** Harness for interacting with a standard MatBottomSheet in tests. */ 4 | class MatBottomSheetHarness extends ContentContainerComponentHarness { 5 | // Developers can provide a custom component or template for the 6 | // bottom sheet. The canonical parent is the ".mat-bottom-sheet-container". 7 | static hostSelector = '.mat-bottom-sheet-container:not([mat-exit])'; 8 | /** 9 | * Gets a `HarnessPredicate` that can be used to search for a bottom sheet with 10 | * specific attributes. 11 | * @param options Options for narrowing the search. 12 | * @return a `HarnessPredicate` configured with the given options. 13 | */ 14 | static with(options = {}) { 15 | return new HarnessPredicate(MatBottomSheetHarness, options); 16 | } 17 | /** Gets the value of the bottom sheet's "aria-label" attribute. */ 18 | async getAriaLabel() { 19 | return (await this.host()).getAttribute('aria-label'); 20 | } 21 | /** 22 | * Dismisses the bottom sheet by pressing escape. Note that this method cannot 23 | * be used if "disableClose" has been set to true via the config. 24 | */ 25 | async dismiss() { 26 | await (await this.host()).sendKeys(TestKey.ESCAPE); 27 | } 28 | } 29 | 30 | export { MatBottomSheetHarness }; 31 | //# sourceMappingURL=testing.mjs.map 32 | -------------------------------------------------------------------------------- /fesm2022/common-module-cKSwHniA.mjs: -------------------------------------------------------------------------------- 1 | import { HighContrastModeDetector } from '@angular/cdk/a11y'; 2 | import { BidiModule } from '@angular/cdk/bidi'; 3 | import * as i0 from '@angular/core'; 4 | import { InjectionToken, inject, NgModule } from '@angular/core'; 5 | 6 | /** 7 | * Injection token that configures whether the Material sanity checks are enabled. 8 | * @deprecated No longer used and will be removed. 9 | * @breaking-change 21.0.0 10 | */ 11 | const MATERIAL_SANITY_CHECKS = new InjectionToken('mat-sanity-checks', { 12 | providedIn: 'root', 13 | factory: () => true, 14 | }); 15 | /** 16 | * Module that captures anything that should be loaded and/or run for *all* Angular Material 17 | * components. This includes Bidi, etc. 18 | * 19 | * This module should be imported to each top-level component module (e.g., MatTabsModule). 20 | * @deprecated No longer used and will be removed. 21 | * @breaking-change 21.0.0 22 | */ 23 | class MatCommonModule { 24 | constructor() { 25 | // While A11yModule also does this, we repeat it here to avoid importing A11yModule 26 | // in MatCommonModule. 27 | inject(HighContrastModeDetector)._applyBodyHighContrastModeCssClasses(); 28 | } 29 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); 30 | static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: MatCommonModule, imports: [BidiModule], exports: [BidiModule] }); 31 | static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatCommonModule, imports: [BidiModule, BidiModule] }); 32 | } 33 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatCommonModule, decorators: [{ 34 | type: NgModule, 35 | args: [{ 36 | imports: [BidiModule], 37 | exports: [BidiModule], 38 | }] 39 | }], ctorParameters: () => [] }); 40 | 41 | export { MatCommonModule as M, MATERIAL_SANITY_CHECKS as a }; 42 | //# sourceMappingURL=common-module-cKSwHniA.mjs.map 43 | -------------------------------------------------------------------------------- /fesm2022/core/testing.mjs: -------------------------------------------------------------------------------- 1 | import { M as MatOptionHarness } from '../option-harness-BFcc-M_4.mjs'; 2 | import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 3 | 4 | /** Harness for interacting with a `mat-optgroup` in tests. */ 5 | class MatOptgroupHarness extends ComponentHarness { 6 | /** Selector used to locate option group instances. */ 7 | static hostSelector = '.mat-mdc-optgroup'; 8 | _label = this.locatorFor('.mat-mdc-optgroup-label'); 9 | /** 10 | * Gets a `HarnessPredicate` that can be used to search for a option group with specific 11 | * attributes. 12 | * @param options Options for filtering which option instances are considered a match. 13 | * @return a `HarnessPredicate` configured with the given options. 14 | */ 15 | static with(options = {}) { 16 | return new HarnessPredicate(this, options).addOption('labelText', options.labelText, async (harness, title) => HarnessPredicate.stringMatches(await harness.getLabelText(), title)); 17 | } 18 | /** Gets the option group's label text. */ 19 | async getLabelText() { 20 | return (await this._label()).text(); 21 | } 22 | /** Gets whether the option group is disabled. */ 23 | async isDisabled() { 24 | return (await (await this.host()).getAttribute('aria-disabled')) === 'true'; 25 | } 26 | /** 27 | * Gets the options that are inside the group. 28 | * @param filter Optionally filters which options are included. 29 | */ 30 | async getOptions(filter = {}) { 31 | return this.locatorForAll(MatOptionHarness.with(filter))(); 32 | } 33 | } 34 | 35 | export { MatOptgroupHarness, MatOptionHarness }; 36 | //# sourceMappingURL=testing.mjs.map 37 | -------------------------------------------------------------------------------- /fesm2022/datepicker/testing.mjs: -------------------------------------------------------------------------------- 1 | import { D as DatepickerTriggerHarnessBase } from '../date-range-input-harness-DEyfkeOs.mjs'; 2 | export { C as CalendarView, e as MatCalendarCellHarness, d as MatCalendarHarness, c as MatDateRangeInputHarness, M as MatDatepickerInputHarness, b as MatEndDateHarness, a as MatStartDateHarness } from '../date-range-input-harness-DEyfkeOs.mjs'; 3 | import { HarnessPredicate } from '@angular/cdk/testing'; 4 | import { coerceBooleanProperty } from '@angular/cdk/coercion'; 5 | import '@angular/material/form-field/testing/control'; 6 | 7 | /** Harness for interacting with a standard Material datepicker toggle in tests. */ 8 | class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase { 9 | static hostSelector = '.mat-datepicker-toggle'; 10 | /** The clickable button inside the toggle. */ 11 | _button = this.locatorFor('button'); 12 | /** 13 | * Gets a `HarnessPredicate` that can be used to search for a `MatDatepickerToggleHarness` that 14 | * meets certain criteria. 15 | * @param options Options for filtering which datepicker toggle instances are considered a match. 16 | * @return a `HarnessPredicate` configured with the given options. 17 | */ 18 | static with(options = {}) { 19 | return new HarnessPredicate(MatDatepickerToggleHarness, options); 20 | } 21 | /** Gets whether the calendar associated with the toggle is open. */ 22 | async isCalendarOpen() { 23 | return (await this.host()).hasClass('mat-datepicker-toggle-active'); 24 | } 25 | /** Whether the toggle is disabled. */ 26 | async isDisabled() { 27 | const button = await this._button(); 28 | return coerceBooleanProperty(await button.getAttribute('disabled')); 29 | } 30 | async _openCalendar() { 31 | return (await this._button()).click(); 32 | } 33 | } 34 | 35 | export { MatDatepickerToggleHarness }; 36 | //# sourceMappingURL=testing.mjs.map 37 | -------------------------------------------------------------------------------- /fesm2022/divider/testing.mjs: -------------------------------------------------------------------------------- 1 | import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | /** Harness for interacting with a `mat-divider`. */ 4 | class MatDividerHarness extends ComponentHarness { 5 | static hostSelector = '.mat-divider'; 6 | static with(options = {}) { 7 | return new HarnessPredicate(MatDividerHarness, options); 8 | } 9 | async getOrientation() { 10 | return (await this.host()).getAttribute('aria-orientation'); 11 | } 12 | async isInset() { 13 | return (await this.host()).hasClass('mat-divider-inset'); 14 | } 15 | } 16 | 17 | export { MatDividerHarness }; 18 | //# sourceMappingURL=testing.mjs.map 19 | -------------------------------------------------------------------------------- /fesm2022/divider/testing.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"testing.mjs","sources":["../../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/divider/testing/divider-harness.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';\nimport {DividerHarnessFilters} from './divider-harness-filters';\n\n/** Harness for interacting with a `mat-divider`. */\nexport class MatDividerHarness extends ComponentHarness {\n static hostSelector = '.mat-divider';\n\n static with(options: DividerHarnessFilters = {}) {\n return new HarnessPredicate(MatDividerHarness, options);\n }\n\n async getOrientation(): Promise<'horizontal' | 'vertical'> {\n return (await this.host()).getAttribute('aria-orientation') as Promise<\n 'horizontal' | 'vertical'\n >;\n }\n\n async isInset(): Promise {\n return (await this.host()).hasClass('mat-divider-inset');\n }\n}\n"],"names":[],"mappings":";;AAWA;AACM,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AACrD,IAAA,OAAO,YAAY,GAAG,cAAc;AAEpC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAiC,EAAE,EAAA;AAC7C,QAAA,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC;;AAGzD,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,YAAY,CAAC,kBAAkB,CAEzD;;AAGH,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,mBAAmB,CAAC;;;;;;"} -------------------------------------------------------------------------------- /fesm2022/error-options-DCNQlTOA.mjs: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | /** Error state matcher that matches when a control is invalid and dirty. */ 5 | class ShowOnDirtyErrorStateMatcher { 6 | isErrorState(control, form) { 7 | return !!(control && control.invalid && (control.dirty || (form && form.submitted))); 8 | } 9 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); 10 | static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowOnDirtyErrorStateMatcher }); 11 | } 12 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, decorators: [{ 13 | type: Injectable 14 | }] }); 15 | /** Provider that defines how form controls behave with regards to displaying error messages. */ 16 | class ErrorStateMatcher { 17 | isErrorState(control, form) { 18 | return !!(control && control.invalid && (control.touched || (form && form.submitted))); 19 | } 20 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); 21 | static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); 22 | } 23 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorStateMatcher, decorators: [{ 24 | type: Injectable, 25 | args: [{ providedIn: 'root' }] 26 | }] }); 27 | 28 | export { ErrorStateMatcher as E, ShowOnDirtyErrorStateMatcher as S }; 29 | //# sourceMappingURL=error-options-DCNQlTOA.mjs.map 30 | -------------------------------------------------------------------------------- /fesm2022/error-options-DCNQlTOA.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"error-options-DCNQlTOA.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/core/error/error-options.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Injectable} from '@angular/core';\nimport {FormGroupDirective, NgForm, AbstractControl} from '@angular/forms';\n\n/** Error state matcher that matches when a control is invalid and dirty. */\n@Injectable()\nexport class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {\n isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {\n return !!(control && control.invalid && (control.dirty || (form && form.submitted)));\n }\n}\n\n/** Provider that defines how form controls behave with regards to displaying error messages. */\n@Injectable({providedIn: 'root'})\nexport class ErrorStateMatcher {\n isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {\n return !!(control && control.invalid && (control.touched || (form && form.submitted)));\n }\n}\n"],"names":[],"mappings":";;;AAWA;MAEa,4BAA4B,CAAA;IACvC,YAAY,CAAC,OAA+B,EAAE,IAAwC,EAAA;QACpF,OAAO,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;uGAF3E,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAA5B,4BAA4B,EAAA,CAAA;;2FAA5B,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBADxC;;AAOD;MAEa,iBAAiB,CAAA;IAC5B,YAAY,CAAC,OAA+B,EAAE,IAAwC,EAAA;QACpF,OAAO,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;uGAF7E,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,cADL,MAAM,EAAA,CAAA;;2FAClB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,UAAU;mBAAC,EAAC,UAAU,EAAE,MAAM,EAAC;;;;;"} -------------------------------------------------------------------------------- /fesm2022/error-state-Dtb1IHM-.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * Class that tracks the error state of a component. 3 | * @docs-private 4 | */ 5 | class _ErrorStateTracker { 6 | _defaultMatcher; 7 | ngControl; 8 | _parentFormGroup; 9 | _parentForm; 10 | _stateChanges; 11 | /** Whether the tracker is currently in an error state. */ 12 | errorState = false; 13 | /** User-defined matcher for the error state. */ 14 | matcher; 15 | constructor(_defaultMatcher, ngControl, _parentFormGroup, _parentForm, _stateChanges) { 16 | this._defaultMatcher = _defaultMatcher; 17 | this.ngControl = ngControl; 18 | this._parentFormGroup = _parentFormGroup; 19 | this._parentForm = _parentForm; 20 | this._stateChanges = _stateChanges; 21 | } 22 | /** Updates the error state based on the provided error state matcher. */ 23 | updateErrorState() { 24 | const oldState = this.errorState; 25 | const parent = this._parentFormGroup || this._parentForm; 26 | const matcher = this.matcher || this._defaultMatcher; 27 | const control = this.ngControl ? this.ngControl.control : null; 28 | const newState = matcher?.isErrorState(control, parent) ?? false; 29 | if (newState !== oldState) { 30 | this.errorState = newState; 31 | this._stateChanges.next(); 32 | } 33 | } 34 | } 35 | 36 | export { _ErrorStateTracker as _ }; 37 | //# sourceMappingURL=error-state-Dtb1IHM-.mjs.map 38 | -------------------------------------------------------------------------------- /fesm2022/form-field/testing/control.mjs: -------------------------------------------------------------------------------- 1 | import { ComponentHarness } from '@angular/cdk/testing'; 2 | 3 | /** 4 | * Base class for custom form-field control harnesses. Harnesses for 5 | * custom controls with form-fields need to implement this interface. 6 | */ 7 | class MatFormFieldControlHarness extends ComponentHarness { 8 | } 9 | /** 10 | * Shared behavior for `MatFormFieldControlHarness` implementations 11 | */ 12 | class MatFormFieldControlHarnessBase extends MatFormFieldControlHarness { 13 | _floatingLabelSelector = '.mdc-floating-label'; 14 | /** Gets the text content of the floating label, if it exists. */ 15 | async getLabel() { 16 | const documentRootLocator = this.documentRootLocatorFactory(); 17 | const labelId = await (await this.host()).getAttribute('aria-labelledby'); 18 | const hostId = await (await this.host()).getAttribute('id'); 19 | if (labelId) { 20 | // First option, try to fetch the label using the `aria-labelledby` 21 | // attribute. 22 | const labelEl = await documentRootLocator.locatorForOptional(`${this._floatingLabelSelector}[id="${labelId}"]`)(); 23 | return labelEl ? labelEl.text() : null; 24 | } 25 | else if (hostId) { 26 | // Fallback option, try to match the id of the input with the `for` 27 | // attribute of the label. 28 | const labelEl = await documentRootLocator.locatorForOptional(`${this._floatingLabelSelector}[for="${hostId}"]`)(); 29 | return labelEl ? labelEl.text() : null; 30 | } 31 | return null; 32 | } 33 | } 34 | 35 | export { MatFormFieldControlHarness, MatFormFieldControlHarnessBase }; 36 | //# sourceMappingURL=control.mjs.map 37 | -------------------------------------------------------------------------------- /fesm2022/index-BFRo2fUq.mjs: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { NgModule } from '@angular/core'; 3 | import { M as MatCommonModule } from './common-module-cKSwHniA.mjs'; 4 | import { M as MatRipple } from './ripple-BYgV4oZC.mjs'; 5 | 6 | class MatRippleModule { 7 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); 8 | static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: MatRippleModule, imports: [MatCommonModule, MatRipple], exports: [MatRipple, MatCommonModule] }); 9 | static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatRippleModule, imports: [MatCommonModule, MatCommonModule] }); 10 | } 11 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatRippleModule, decorators: [{ 12 | type: NgModule, 13 | args: [{ 14 | imports: [MatCommonModule, MatRipple], 15 | exports: [MatRipple, MatCommonModule], 16 | }] 17 | }] }); 18 | 19 | export { MatRippleModule as M }; 20 | //# sourceMappingURL=index-BFRo2fUq.mjs.map 21 | -------------------------------------------------------------------------------- /fesm2022/index-BFRo2fUq.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index-BFRo2fUq.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/core/ripple/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {MatCommonModule} from '../common-behaviors/common-module';\nimport {MatRipple} from './ripple';\n\nexport * from './ripple';\nexport * from './ripple-ref';\nexport {RippleRenderer, RippleTarget, defaultRippleAnimationConfig} from './ripple-renderer';\n\n@NgModule({\n imports: [MatCommonModule, MatRipple],\n exports: [MatRipple, MatCommonModule],\n})\nexport class MatRippleModule {}\n"],"names":[],"mappings":";;;;;MAoBa,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAHhB,eAAe,EAAE,SAAS,CAC1B,EAAA,OAAA,EAAA,CAAA,SAAS,EAAE,eAAe,CAAA,EAAA,CAAA;wGAEzB,eAAe,EAAA,OAAA,EAAA,CAHhB,eAAe,EACJ,eAAe,CAAA,EAAA,CAAA;;2FAEzB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC;AACtC,iBAAA;;;;;"} -------------------------------------------------------------------------------- /fesm2022/index-DwiL-HGk.mjs: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { NgModule } from '@angular/core'; 3 | import { M as MatRippleModule } from './index-BFRo2fUq.mjs'; 4 | import { M as MatCommonModule } from './common-module-cKSwHniA.mjs'; 5 | import { M as MatOption, a as MatOptgroup } from './option-BzhYL_xC.mjs'; 6 | import { M as MatPseudoCheckboxModule } from './pseudo-checkbox-module-4F8Up4PL.mjs'; 7 | 8 | class MatOptionModule { 9 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); 10 | static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: MatOptionModule, imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, MatOption, MatOptgroup], exports: [MatOption, MatOptgroup] }); 11 | static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatOptionModule, imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, MatOption] }); 12 | } 13 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatOptionModule, decorators: [{ 14 | type: NgModule, 15 | args: [{ 16 | imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, MatOption, MatOptgroup], 17 | exports: [MatOption, MatOptgroup], 18 | }] 19 | }] }); 20 | 21 | export { MatOptionModule as M }; 22 | //# sourceMappingURL=index-DwiL-HGk.mjs.map 23 | -------------------------------------------------------------------------------- /fesm2022/index-DwiL-HGk.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index-DwiL-HGk.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/core/option/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {MatRippleModule} from '../ripple/index';\nimport {MatPseudoCheckboxModule} from '../selection/index';\nimport {MatCommonModule} from '../common-behaviors/common-module';\nimport {MatOption} from './option';\nimport {MatOptgroup} from './optgroup';\n\n@NgModule({\n imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, MatOption, MatOptgroup],\n exports: [MatOption, MatOptgroup],\n})\nexport class MatOptionModule {}\n\nexport * from './option';\nexport * from './optgroup';\nexport * from './option-parent';\n"],"names":[],"mappings":";;;;;;;MAmBa,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EAHhB,OAAA,EAAA,CAAA,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,SAAS,EAAE,WAAW,CACjF,EAAA,OAAA,EAAA,CAAA,SAAS,EAAE,WAAW,CAAA,EAAA,CAAA;AAErB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAHhB,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,SAAS,CAAA,EAAA,CAAA;;2FAGnE,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,SAAS,EAAE,WAAW,CAAC;AAC5F,oBAAA,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;AAClC,iBAAA;;;;;"} -------------------------------------------------------------------------------- /fesm2022/input-value-accessor-D1GvPuqO.mjs: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | /** 4 | * This token is used to inject the object whose value should be set into `MatInput`. If none is 5 | * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide 6 | * themselves for this token, in order to make `MatInput` delegate the getting and setting of the 7 | * value to them. 8 | */ 9 | const MAT_INPUT_VALUE_ACCESSOR = new InjectionToken('MAT_INPUT_VALUE_ACCESSOR'); 10 | 11 | export { MAT_INPUT_VALUE_ACCESSOR as M }; 12 | //# sourceMappingURL=input-value-accessor-D1GvPuqO.mjs.map 13 | -------------------------------------------------------------------------------- /fesm2022/input-value-accessor-D1GvPuqO.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"input-value-accessor-D1GvPuqO.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/input/input-value-accessor.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {InjectionToken, WritableSignal} from '@angular/core';\n\n/**\n * This token is used to inject the object whose value should be set into `MatInput`. If none is\n * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide\n * themselves for this token, in order to make `MatInput` delegate the getting and setting of the\n * value to them.\n */\nexport const MAT_INPUT_VALUE_ACCESSOR = new InjectionToken<{value: any | WritableSignal}>(\n 'MAT_INPUT_VALUE_ACCESSOR',\n);\n"],"names":[],"mappings":";;AAUA;;;;;AAKG;MACU,wBAAwB,GAAG,IAAI,cAAc,CACxD,0BAA0B;;;;"} -------------------------------------------------------------------------------- /fesm2022/internal-form-field-D5iFxU6d.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"internal-form-field-D5iFxU6d.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/core/internal-form-field/internal-form-field.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';\n\n/**\n * Internal shared component used as a container in form field controls.\n * Not to be confused with `mat-form-field` which MDC calls a \"text field\".\n * @docs-private\n */\n@Component({\n // Use a `div` selector to match the old markup closer.\n selector: 'div[mat-internal-form-field]',\n template: '',\n styleUrl: 'internal-form-field.css',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'mdc-form-field mat-internal-form-field',\n '[class.mdc-form-field--align-end]': 'labelPosition === \"before\"',\n },\n})\nexport class _MatInternalFormField {\n /** Position of the label relative to the content. */\n @Input({required: true}) labelPosition: 'before' | 'after';\n}\n"],"names":[],"mappings":";;;AAUA;;;;AAIG;MAaU,qBAAqB,CAAA;;AAEP,IAAA,aAAa;uGAF3B,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,2RATtB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mmBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAS1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAZjC,SAAS;+BAEE,8BAA8B,EAAA,QAAA,EAC9B,2BAA2B,EAAA,aAAA,EAEtB,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA;AACJ,wBAAA,OAAO,EAAE,wCAAwC;AACjD,wBAAA,mCAAmC,EAAE,4BAA4B;AAClE,qBAAA,EAAA,MAAA,EAAA,CAAA,mmBAAA,CAAA,EAAA;8BAIwB,aAAa,EAAA,CAAA;sBAArC,KAAK;uBAAC,EAAC,QAAQ,EAAE,IAAI,EAAC;;;;;"} -------------------------------------------------------------------------------- /fesm2022/material.mjs: -------------------------------------------------------------------------------- 1 | // primary entry-point which is empty as of version 9. All components should 2 | // be imported through their individual entry-points. This file is needed to 3 | // satisfy the "ng_package" bazel rule which also requires a primary entry-point. 4 | // Workaround for: https://github.com/microsoft/rushstack/issues/2806. 5 | // This is a private export that can be removed at any time. 6 | const ɵɵtsModuleIndicatorApiExtractorWorkaround = true; 7 | 8 | export { ɵɵtsModuleIndicatorApiExtractorWorkaround }; 9 | //# sourceMappingURL=material.mjs.map 10 | -------------------------------------------------------------------------------- /fesm2022/material.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"material.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\n// primary entry-point which is empty as of version 9. All components should\n// be imported through their individual entry-points. This file is needed to\n// satisfy the \"ng_package\" bazel rule which also requires a primary entry-point.\n\n// Workaround for: https://github.com/microsoft/rushstack/issues/2806.\n// This is a private export that can be removed at any time.\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n"],"names":[],"mappings":"AAQA;AACA;AACA;AAEA;AACA;AACO,MAAM,yCAAyC,GAAG;;;;"} -------------------------------------------------------------------------------- /fesm2022/module-DzZHEh7B.mjs: -------------------------------------------------------------------------------- 1 | import { ObserversModule } from '@angular/cdk/observers'; 2 | import * as i0 from '@angular/core'; 3 | import { NgModule } from '@angular/core'; 4 | import { j as MatFormField, M as MatLabel, b as MatError, c as MatHint, e as MatPrefix, g as MatSuffix } from './form-field-C9DZXojn.mjs'; 5 | import { M as MatCommonModule } from './common-module-cKSwHniA.mjs'; 6 | 7 | class MatFormFieldModule { 8 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); 9 | static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: MatFormFieldModule, imports: [MatCommonModule, 10 | ObserversModule, 11 | MatFormField, 12 | MatLabel, 13 | MatError, 14 | MatHint, 15 | MatPrefix, 16 | MatSuffix], exports: [MatFormField, MatLabel, MatHint, MatError, MatPrefix, MatSuffix, MatCommonModule] }); 17 | static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatFormFieldModule, imports: [MatCommonModule, 18 | ObserversModule, 19 | MatFormField, MatCommonModule] }); 20 | } 21 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatFormFieldModule, decorators: [{ 22 | type: NgModule, 23 | args: [{ 24 | imports: [ 25 | MatCommonModule, 26 | ObserversModule, 27 | MatFormField, 28 | MatLabel, 29 | MatError, 30 | MatHint, 31 | MatPrefix, 32 | MatSuffix, 33 | ], 34 | exports: [MatFormField, MatLabel, MatHint, MatError, MatPrefix, MatSuffix, MatCommonModule], 35 | }] 36 | }] }); 37 | 38 | export { MatFormFieldModule as M }; 39 | //# sourceMappingURL=module-DzZHEh7B.mjs.map 40 | -------------------------------------------------------------------------------- /fesm2022/module-DzZHEh7B.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"module-DzZHEh7B.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/module.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {ObserversModule} from '@angular/cdk/observers';\nimport {NgModule} from '@angular/core';\nimport {MatCommonModule} from '../core';\nimport {MatError} from './directives/error';\nimport {MatHint} from './directives/hint';\nimport {MatLabel} from './directives/label';\nimport {MatPrefix} from './directives/prefix';\nimport {MatSuffix} from './directives/suffix';\nimport {MatFormField} from './form-field';\n\n@NgModule({\n imports: [\n MatCommonModule,\n ObserversModule,\n MatFormField,\n MatLabel,\n MatError,\n MatHint,\n MatPrefix,\n MatSuffix,\n ],\n exports: [MatFormField, MatLabel, MatHint, MatError, MatPrefix, MatSuffix, MatCommonModule],\n})\nexport class MatFormFieldModule {}\n"],"names":[],"mappings":";;;;;;MA+Ba,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAX3B,eAAe;YACf,eAAe;YACf,YAAY;YACZ,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,SAAS;AACT,YAAA,SAAS,CAED,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,CAAA,EAAA,CAAA;AAE/E,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAX3B,eAAe;YACf,eAAe;AACf,YAAA,YAAY,EAO6D,eAAe,CAAA,EAAA,CAAA;;2FAE/E,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAb9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,eAAe;wBACf,eAAe;wBACf,YAAY;wBACZ,QAAQ;wBACR,QAAQ;wBACR,OAAO;wBACP,SAAS;wBACT,SAAS;AACV,qBAAA;AACD,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC;AAC5F,iBAAA;;;;;"} -------------------------------------------------------------------------------- /fesm2022/option-harness-BFcc-M_4.mjs: -------------------------------------------------------------------------------- 1 | import { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | /** Harness for interacting with a `mat-option` in tests. */ 4 | class MatOptionHarness extends ContentContainerComponentHarness { 5 | /** Selector used to locate option instances. */ 6 | static hostSelector = '.mat-mdc-option'; 7 | /** Element containing the option's text. */ 8 | _text = this.locatorFor('.mdc-list-item__primary-text'); 9 | /** 10 | * Gets a `HarnessPredicate` that can be used to search for an option with specific attributes. 11 | * @param options Options for filtering which option instances are considered a match. 12 | * @return a `HarnessPredicate` configured with the given options. 13 | */ 14 | static with(options = {}) { 15 | return new HarnessPredicate(this, options) 16 | .addOption('text', options.text, async (harness, title) => HarnessPredicate.stringMatches(await harness.getText(), title)) 17 | .addOption('isSelected', options.isSelected, async (harness, isSelected) => (await harness.isSelected()) === isSelected); 18 | } 19 | /** Clicks the option. */ 20 | async click() { 21 | return (await this.host()).click(); 22 | } 23 | /** Gets the option's label text. */ 24 | async getText() { 25 | return (await this._text()).text(); 26 | } 27 | /** Gets whether the option is disabled. */ 28 | async isDisabled() { 29 | return (await this.host()).hasClass('mdc-list-item--disabled'); 30 | } 31 | /** Gets whether the option is selected. */ 32 | async isSelected() { 33 | return (await this.host()).hasClass('mdc-list-item--selected'); 34 | } 35 | /** Gets whether the option is active. */ 36 | async isActive() { 37 | return (await this.host()).hasClass('mat-mdc-option-active'); 38 | } 39 | /** Gets whether the option is in multiple selection mode. */ 40 | async isMultiple() { 41 | return (await this.host()).hasClass('mat-mdc-option-multiple'); 42 | } 43 | } 44 | 45 | export { MatOptionHarness as M }; 46 | //# sourceMappingURL=option-harness-BFcc-M_4.mjs.map 47 | -------------------------------------------------------------------------------- /fesm2022/progress-bar/testing.mjs: -------------------------------------------------------------------------------- 1 | import { coerceNumberProperty } from '@angular/cdk/coercion'; 2 | import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 3 | 4 | /** Harness for interacting with a `mat-progress-bar` in tests. */ 5 | class MatProgressBarHarness extends ComponentHarness { 6 | static hostSelector = '.mat-mdc-progress-bar'; 7 | /** 8 | * Gets a `HarnessPredicate` that can be used to search for a progress bar with specific 9 | * attributes. 10 | * @param options Options for filtering which progress bar instances are considered a match. 11 | * @return a `HarnessPredicate` configured with the given options. 12 | */ 13 | static with(options = {}) { 14 | return new HarnessPredicate(this, options); 15 | } 16 | /** Gets a promise for the progress bar's value. */ 17 | async getValue() { 18 | const host = await this.host(); 19 | const ariaValue = await host.getAttribute('aria-valuenow'); 20 | return ariaValue ? coerceNumberProperty(ariaValue) : null; 21 | } 22 | /** Gets a promise for the progress bar's mode. */ 23 | async getMode() { 24 | return (await this.host()).getAttribute('mode'); 25 | } 26 | } 27 | 28 | export { MatProgressBarHarness }; 29 | //# sourceMappingURL=testing.mjs.map 30 | -------------------------------------------------------------------------------- /fesm2022/progress-spinner/testing.mjs: -------------------------------------------------------------------------------- 1 | import { coerceNumberProperty } from '@angular/cdk/coercion'; 2 | import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 3 | 4 | /** Harness for interacting with a MDC based mat-progress-spinner in tests. */ 5 | class MatProgressSpinnerHarness extends ComponentHarness { 6 | /** The selector for the host element of a `MatProgressSpinner` instance. */ 7 | static hostSelector = '.mat-mdc-progress-spinner'; 8 | /** 9 | * Gets a `HarnessPredicate` that can be used to search for a progress spinnner with specific 10 | * attributes. 11 | * @param options Options for filtering which progress spinner instances are considered a match. 12 | * @return a `HarnessPredicate` configured with the given options. 13 | */ 14 | static with(options = {}) { 15 | return new HarnessPredicate(this, options); 16 | } 17 | /** Gets the progress spinner's value. */ 18 | async getValue() { 19 | const host = await this.host(); 20 | const ariaValue = await host.getAttribute('aria-valuenow'); 21 | return ariaValue ? coerceNumberProperty(ariaValue) : null; 22 | } 23 | /** Gets the progress spinner's mode. */ 24 | async getMode() { 25 | const modeAttr = (await this.host()).getAttribute('mode'); 26 | return (await modeAttr); 27 | } 28 | } 29 | 30 | export { MatProgressSpinnerHarness }; 31 | //# sourceMappingURL=testing.mjs.map 32 | -------------------------------------------------------------------------------- /fesm2022/pseudo-checkbox-module-4F8Up4PL.mjs: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { NgModule } from '@angular/core'; 3 | import { M as MatPseudoCheckbox } from './pseudo-checkbox-DDmgx3P4.mjs'; 4 | import { M as MatCommonModule } from './common-module-cKSwHniA.mjs'; 5 | 6 | class MatPseudoCheckboxModule { 7 | static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); 8 | static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: MatPseudoCheckboxModule, imports: [MatCommonModule, MatPseudoCheckbox], exports: [MatPseudoCheckbox] }); 9 | static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatPseudoCheckboxModule, imports: [MatCommonModule] }); 10 | } 11 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatPseudoCheckboxModule, decorators: [{ 12 | type: NgModule, 13 | args: [{ 14 | imports: [MatCommonModule, MatPseudoCheckbox], 15 | exports: [MatPseudoCheckbox], 16 | }] 17 | }] }); 18 | 19 | export { MatPseudoCheckboxModule as M }; 20 | //# sourceMappingURL=pseudo-checkbox-module-4F8Up4PL.mjs.map 21 | -------------------------------------------------------------------------------- /fesm2022/pseudo-checkbox-module-4F8Up4PL.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"pseudo-checkbox-module-4F8Up4PL.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/core/selection/pseudo-checkbox/pseudo-checkbox-module.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {MatPseudoCheckbox} from './pseudo-checkbox';\nimport {MatCommonModule} from '../../common-behaviors/common-module';\n\n@NgModule({\n imports: [MatCommonModule, MatPseudoCheckbox],\n exports: [MatPseudoCheckbox],\n})\nexport class MatPseudoCheckboxModule {}\n"],"names":[],"mappings":";;;;;MAgBa,uBAAuB,CAAA;uGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,EAHxB,OAAA,EAAA,CAAA,eAAe,EAAE,iBAAiB,aAClC,iBAAiB,CAAA,EAAA,CAAA;AAEhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,YAHxB,eAAe,CAAA,EAAA,CAAA;;2FAGd,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,eAAe,EAAE,iBAAiB,CAAC;oBAC7C,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA;;;;;"} -------------------------------------------------------------------------------- /fesm2022/structural-styles-CObeNzjn.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"structural-styles-CObeNzjn.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/core/focus-indicators/structural-styles.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';\n\n/**\n * Component used to load structural styles for focus indicators.\n * @docs-private\n */\n@Component({\n selector: 'structural-styles',\n styleUrl: 'structural-styles.css',\n encapsulation: ViewEncapsulation.None,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class _StructuralStylesLoader {}\n"],"names":[],"mappings":";;;AAUA;;;AAGG;MAQU,uBAAuB,CAAA;uGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,6EAHxB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,gkBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAGD,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;+BACE,mBAAmB,EAAA,aAAA,EAEd,iBAAiB,CAAC,IAAI,YAC3B,EAAE,EAAA,eAAA,EACK,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,gkBAAA,CAAA,EAAA;;;;;"} -------------------------------------------------------------------------------- /fesm2022/toolbar/testing.mjs: -------------------------------------------------------------------------------- 1 | import { ContentContainerComponentHarness, HarnessPredicate, parallel } from '@angular/cdk/testing'; 2 | 3 | /** Selectors for different sections of the mat-toolbar that contain user content. */ 4 | var MatToolbarSection; 5 | (function (MatToolbarSection) { 6 | MatToolbarSection["ROW"] = ".mat-toolbar-row"; 7 | })(MatToolbarSection || (MatToolbarSection = {})); 8 | /** Harness for interacting with a standard mat-toolbar in tests. */ 9 | class MatToolbarHarness extends ContentContainerComponentHarness { 10 | static hostSelector = '.mat-toolbar'; 11 | _getRows = this.locatorForAll(MatToolbarSection.ROW); 12 | /** 13 | * Gets a `HarnessPredicate` that can be used to search for a `MatToolbarHarness` that meets 14 | * certain criteria. 15 | * @param options Options for filtering which card instances are considered a match. 16 | * @return a `HarnessPredicate` configured with the given options. 17 | */ 18 | static with(options = {}) { 19 | return new HarnessPredicate(MatToolbarHarness, options).addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness._getText(), text)); 20 | } 21 | /** Whether the toolbar has multiple rows. */ 22 | async hasMultipleRows() { 23 | return (await this.host()).hasClass('mat-toolbar-multiple-rows'); 24 | } 25 | /** Gets all of the toolbar's content as text. */ 26 | async _getText() { 27 | return (await this.host()).text(); 28 | } 29 | /** Gets the text of each row in the toolbar. */ 30 | async getRowsAsText() { 31 | const rows = await this._getRows(); 32 | return parallel(() => (rows.length ? rows.map(r => r.text()) : [this._getText()])); 33 | } 34 | } 35 | 36 | export { MatToolbarHarness, MatToolbarSection }; 37 | //# sourceMappingURL=testing.mjs.map 38 | -------------------------------------------------------------------------------- /form-field-control-harness.d-BLvFBy6v.d.ts: -------------------------------------------------------------------------------- 1 | import { ComponentHarness } from '@angular/cdk/testing'; 2 | 3 | /** 4 | * Base class for custom form-field control harnesses. Harnesses for 5 | * custom controls with form-fields need to implement this interface. 6 | */ 7 | declare abstract class MatFormFieldControlHarness extends ComponentHarness { 8 | } 9 | /** 10 | * Shared behavior for `MatFormFieldControlHarness` implementations 11 | */ 12 | declare abstract class MatFormFieldControlHarnessBase extends MatFormFieldControlHarness { 13 | private readonly _floatingLabelSelector; 14 | /** Gets the text content of the floating label, if it exists. */ 15 | getLabel(): Promise; 16 | } 17 | 18 | export { MatFormFieldControlHarness as M, MatFormFieldControlHarnessBase as a }; 19 | -------------------------------------------------------------------------------- /form-field/index.d.ts: -------------------------------------------------------------------------------- 1 | export { a as MatFormFieldModule, M as MatLabel } from '../module.d-D1Ym5Wf2.js'; 2 | export { F as FloatLabelType, e as MAT_ERROR, j as MAT_FORM_FIELD, k as MAT_FORM_FIELD_DEFAULT_OPTIONS, f as MAT_PREFIX, g as MAT_SUFFIX, b as MatError, M as MatFormField, h as MatFormFieldAppearance, i as MatFormFieldDefaultOptions, a as MatHint, c as MatPrefix, d as MatSuffix, S as SubscriptSizing } from '../form-field.d-C6p5uYjG.js'; 3 | export { M as MatFormFieldControl } from '../form-field-control.d-DvB4ZVlf.js'; 4 | import '@angular/core'; 5 | import '../common-module.d-C8xzHJDr.js'; 6 | import '@angular/cdk/bidi'; 7 | import '@angular/cdk/observers'; 8 | import '@angular/cdk/coercion'; 9 | import '@angular/forms'; 10 | import '../palette.d-BSSFKjO6.js'; 11 | import 'rxjs'; 12 | 13 | /** @docs-private */ 14 | declare function getMatFormFieldPlaceholderConflictError(): Error; 15 | /** @docs-private */ 16 | declare function getMatFormFieldDuplicatedHintError(align: string): Error; 17 | /** @docs-private */ 18 | declare function getMatFormFieldMissingControlError(): Error; 19 | 20 | /** 21 | * Animations used by the MatFormField. 22 | * @docs-private 23 | * @deprecated No longer used, will be removed. 24 | * @breaking-change 21.0.0 25 | */ 26 | declare const matFormFieldAnimations: { 27 | readonly transitionMessages: any; 28 | }; 29 | 30 | export { getMatFormFieldDuplicatedHintError, getMatFormFieldMissingControlError, getMatFormFieldPlaceholderConflictError, matFormFieldAnimations }; 31 | -------------------------------------------------------------------------------- /form-field/testing/control/index.d.ts: -------------------------------------------------------------------------------- 1 | export { M as MatFormFieldControlHarness, a as MatFormFieldControlHarnessBase } from '../../../form-field-control-harness.d-BLvFBy6v.js'; 2 | import { BaseHarnessFilters } from '@angular/cdk/testing'; 3 | 4 | /** 5 | * A set of criteria shared by any class derived from `MatFormFieldControlHarness`, that can be 6 | * used to filter a list of those components. 7 | */ 8 | interface MatFormFieldControlHarnessFilters extends BaseHarnessFilters { 9 | /** Filters based on the text of the form field's floating label. */ 10 | label?: string | RegExp; 11 | } 12 | 13 | export type { MatFormFieldControlHarnessFilters }; 14 | -------------------------------------------------------------------------------- /grid-list/_m2-grid-list.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | 3 | // Tokens that can't be configured through Angular Material's current theming API, 4 | // but may be in a future version of the theming API. 5 | @function get-unthemable-tokens() { 6 | @return (); 7 | } 8 | 9 | // Tokens that can be configured through Angular Material's color theming API. 10 | @function get-color-tokens($theme) { 11 | @return (); 12 | } 13 | 14 | // Tokens that can be configured through Angular Material's typography theming API. 15 | @function get-typography-tokens($theme) { 16 | @return ( 17 | // TODO(crisbeto): other components have tokens for all typography dimensions. 18 | // Here we only set the font size to maintain the same appearance as the pre-tokens 19 | // theming API. Consider adding more tokens for letter spacing, font weight etc. 20 | grid-list-tile-header-primary-text-size: 21 | inspection.get-theme-typography($theme, body-2, font-size), 22 | grid-list-tile-header-secondary-text-size: 23 | inspection.get-theme-typography($theme, caption, font-size), 24 | grid-list-tile-footer-primary-text-size: 25 | inspection.get-theme-typography($theme, body-2, font-size), 26 | grid-list-tile-footer-secondary-text-size: 27 | inspection.get-theme-typography($theme, caption, font-size), 28 | ); 29 | } 30 | 31 | // Tokens that can be configured through Angular Material's density theming API. 32 | @function get-density-tokens($theme) { 33 | @return (); 34 | } 35 | -------------------------------------------------------------------------------- /grid-list/_m3-grid-list.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-grid-list. 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | 9 | @return ( 10 | base: (), 11 | color: (), 12 | typography: ( 13 | grid-list-tile-header-primary-text-size: map.get($system, body-large), 14 | grid-list-tile-header-secondary-text-size: map.get($system, body-medium), 15 | grid-list-tile-footer-primary-text-size: map.get($system, body-large), 16 | grid-list-tile-footer-secondary-text-size: map.get($system, body-medium), 17 | ), 18 | density: (), 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /icon/_m2-icon.scss: -------------------------------------------------------------------------------- 1 | 2 | // Tokens that can't be configured through Angular Material's current theming API, 3 | // but may be in a future version of the theming API. 4 | @function get-unthemable-tokens() { 5 | @return (); 6 | } 7 | 8 | // Tokens that can be configured through Angular Material's color theming API. 9 | @function get-color-tokens($theme) { 10 | // Default the icon to `inherit` so it matches the text around it. 11 | @return private-get-icon-color-tokens(inherit); 12 | } 13 | 14 | // Tokens that can be configured through Angular Material's typography theming API. 15 | @function get-typography-tokens($theme) { 16 | @return (); 17 | } 18 | 19 | // Tokens that can be configured through Angular Material's density theming API. 20 | @function get-density-tokens($theme) { 21 | @return (); 22 | } 23 | 24 | // Mixin used to set a specific color on an icon. 25 | @function private-get-icon-color-tokens($color) { 26 | @return ( 27 | icon-color: $color, 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /icon/_m3-icon.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-icon. 6 | @function get-tokens($theme: m3.$sys-theme, $color-variant: null) { 7 | $system: m3-utils.get-system($theme); 8 | $color: inherit; 9 | @if $color-variant { 10 | $color: map.get($system, $color-variant); 11 | } 12 | 13 | @return ( 14 | base: (), 15 | color: ( 16 | icon-color: $color, 17 | ), 18 | typography: (), 19 | density: (), 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /icon/index.d.ts: -------------------------------------------------------------------------------- 1 | export { b as MAT_ICON_DEFAULT_OPTIONS, c as MAT_ICON_LOCATION, e as MAT_ICON_LOCATION_FACTORY, f as MatIcon, a as MatIconDefaultOptions, d as MatIconLocation, M as MatIconModule } from '../icon-module.d-COXCrhrh.js'; 2 | export { f as ICON_REGISTRY_PROVIDER, e as ICON_REGISTRY_PROVIDER_FACTORY, I as IconOptions, d as IconResolver, M as MatIconRegistry, S as SafeResourceUrlWithIconOptions, c as getMatIconFailedToSanitizeLiteralError, b as getMatIconFailedToSanitizeUrlError, g as getMatIconNameNotFoundError, a as getMatIconNoHttpProviderError } from '../icon-registry.d-BVwP8t9_.js'; 3 | import '@angular/core'; 4 | import '../common-module.d-C8xzHJDr.js'; 5 | import '@angular/cdk/bidi'; 6 | import '../palette.d-BSSFKjO6.js'; 7 | import '@angular/common/http'; 8 | import '@angular/platform-browser'; 9 | import 'rxjs'; 10 | -------------------------------------------------------------------------------- /index.d-C5neTPvr.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { M as MatCommonModule } from './common-module.d-C8xzHJDr.js'; 3 | import { M as MatRipple } from './ripple.d-BT30YVLB.js'; 4 | 5 | declare class MatRippleModule { 6 | static ɵfac: i0.ɵɵFactoryDeclaration; 7 | static ɵmod: i0.ɵɵNgModuleDeclaration; 8 | static ɵinj: i0.ɵɵInjectorDeclaration; 9 | } 10 | 11 | export { MatRippleModule as M }; 12 | -------------------------------------------------------------------------------- /index.d-DAhBYbjm.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { M as MatRippleModule } from './index.d-C5neTPvr.js'; 3 | import { M as MatCommonModule } from './common-module.d-C8xzHJDr.js'; 4 | import { M as MatPseudoCheckboxModule } from './pseudo-checkbox-module.d-BHmTZ10P.js'; 5 | import { M as MatOption, a as MatOptgroup } from './option.d-BcvS44bt.js'; 6 | 7 | declare class MatOptionModule { 8 | static ɵfac: i0.ɵɵFactoryDeclaration; 9 | static ɵmod: i0.ɵɵNgModuleDeclaration; 10 | static ɵinj: i0.ɵɵInjectorDeclaration; 11 | } 12 | 13 | export { MatOptionModule as M }; 14 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare const ɵɵtsModuleIndicatorApiExtractorWorkaround = true; 2 | 3 | export { ɵɵtsModuleIndicatorApiExtractorWorkaround }; 4 | -------------------------------------------------------------------------------- /input/_input-theme.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/theming'; 2 | @use '../core/typography/typography'; 3 | @use '../core/tokens/token-utils'; 4 | 5 | @mixin base($theme) { 6 | // No-op 7 | } 8 | 9 | @mixin color($theme) { 10 | // No-op 11 | } 12 | 13 | @mixin typography($theme) { 14 | // No-op 15 | } 16 | 17 | @mixin density($theme) { 18 | // No-op 19 | } 20 | 21 | /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. 22 | @function _define-overrides() { 23 | @return ( 24 | ( 25 | namespace: '', 26 | tokens: token-utils.get-overrides((base: (), color: (), typography: (), density: ()), input), 27 | ), 28 | ); 29 | } 30 | 31 | @mixin overrides($tokens: ()) { 32 | @include token-utils.batch-create-token-values($tokens, _define-overrides()); 33 | } 34 | 35 | @mixin theme($theme) { 36 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') { 37 | // No-op 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /line.d-C-QdueRc.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { QueryList, ElementRef } from '@angular/core'; 3 | import { M as MatCommonModule } from './common-module.d-C8xzHJDr.js'; 4 | 5 | /** 6 | * Shared directive to count lines inside a text area, such as a list item. 7 | * Line elements can be extracted with a @ContentChildren(MatLine) query, then 8 | * counted by checking the query list's length. 9 | */ 10 | declare class MatLine { 11 | static ɵfac: i0.ɵɵFactoryDeclaration; 12 | static ɵdir: i0.ɵɵDirectiveDeclaration; 13 | } 14 | /** 15 | * Helper that takes a query list of lines and sets the correct class on the host. 16 | * @docs-private 17 | */ 18 | declare function setLines(lines: QueryList, element: ElementRef, prefix?: string): void; 19 | declare class MatLineModule { 20 | static ɵfac: i0.ɵɵFactoryDeclaration; 21 | static ɵmod: i0.ɵɵNgModuleDeclaration; 22 | static ɵinj: i0.ɵɵInjectorDeclaration; 23 | } 24 | 25 | export { MatLine as M, MatLineModule as a, setLines as s }; 26 | -------------------------------------------------------------------------------- /list-option-types.d-77dQtwu8.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Type describing possible positions of a checkbox or radio in a list option 3 | * with respect to the list item's text. 4 | */ 5 | type MatListOptionTogglePosition = 'before' | 'after'; 6 | /** 7 | * Interface describing a list option. This is used to avoid circular 8 | * dependencies between the list-option and the styler directives. 9 | * @docs-private 10 | */ 11 | interface ListOption { 12 | _getTogglePosition(): MatListOptionTogglePosition; 13 | } 14 | 15 | export type { ListOption as L, MatListOptionTogglePosition as M }; 16 | -------------------------------------------------------------------------------- /menu/_m3-menu.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/style/elevation'; 4 | @use '../core/tokens/m3'; 5 | 6 | /// Generates custom tokens for the mat-menu. 7 | @function get-tokens($theme: m3.$sys-theme) { 8 | $system: m3-utils.get-system($theme); 9 | 10 | @return ( 11 | base: ( 12 | menu-divider-bottom-spacing: 8px, 13 | menu-divider-top-spacing: 8px, 14 | menu-item-icon-size: 24px, 15 | menu-item-spacing: 12px, 16 | menu-item-leading-spacing: 12px, 17 | menu-item-trailing-spacing: 12px, 18 | menu-item-with-icon-leading-spacing: 12px, 19 | menu-item-with-icon-trailing-spacing: 12px, 20 | ), 21 | color: ( 22 | menu-container-shape: map.get($system, corner-extra-small), 23 | menu-divider-color: map.get($system, surface-variant), 24 | menu-item-label-text-color: map.get($system, on-surface), 25 | menu-item-icon-color: map.get($system, on-surface-variant), 26 | menu-item-hover-state-layer-color: m3-utils.color-with-opacity( 27 | map.get($system, on-surface), map.get($system, hover-state-layer-opacity)), 28 | menu-item-focus-state-layer-color: m3-utils.color-with-opacity( 29 | map.get($system, on-surface), map.get($system, focus-state-layer-opacity)), 30 | menu-container-color: map.get($system, surface-container), 31 | menu-container-elevation-shadow: elevation.get-box-shadow(2), 32 | ), 33 | typography: ( 34 | menu-item-label-text-font: map.get($system, label-large-font), 35 | menu-item-label-text-line-height: map.get($system, label-large-line-height), 36 | menu-item-label-text-size: map.get($system, label-large-size), 37 | menu-item-label-text-tracking: map.get($system, label-large-tracking), 38 | menu-item-label-text-weight: map.get($system, label-large-weight), 39 | ), 40 | density: (), 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /module.d-D1Ym5Wf2.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { M as MatCommonModule } from './common-module.d-C8xzHJDr.js'; 3 | import * as i2 from '@angular/cdk/observers'; 4 | import { M as MatFormField, b as MatError, a as MatHint, c as MatPrefix, d as MatSuffix } from './form-field.d-C6p5uYjG.js'; 5 | 6 | /** The floating label for a `mat-form-field`. */ 7 | declare class MatLabel { 8 | static ɵfac: i0.ɵɵFactoryDeclaration; 9 | static ɵdir: i0.ɵɵDirectiveDeclaration; 10 | } 11 | 12 | declare class MatFormFieldModule { 13 | static ɵfac: i0.ɵɵFactoryDeclaration; 14 | static ɵmod: i0.ɵɵNgModuleDeclaration; 15 | static ɵinj: i0.ɵɵInjectorDeclaration; 16 | } 17 | 18 | export { MatLabel as M, MatFormFieldModule as a }; 19 | -------------------------------------------------------------------------------- /option-harness.d-IqsW95GR.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ContentContainerComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | interface OptionHarnessFilters extends BaseHarnessFilters { 4 | text?: string | RegExp; 5 | isSelected?: boolean; 6 | } 7 | 8 | /** Harness for interacting with a `mat-option` in tests. */ 9 | declare class MatOptionHarness extends ContentContainerComponentHarness { 10 | /** Selector used to locate option instances. */ 11 | static hostSelector: string; 12 | /** Element containing the option's text. */ 13 | private _text; 14 | /** 15 | * Gets a `HarnessPredicate` that can be used to search for an option with specific attributes. 16 | * @param options Options for filtering which option instances are considered a match. 17 | * @return a `HarnessPredicate` configured with the given options. 18 | */ 19 | static with(this: ComponentHarnessConstructor, options?: OptionHarnessFilters): HarnessPredicate; 20 | /** Clicks the option. */ 21 | click(): Promise; 22 | /** Gets the option's label text. */ 23 | getText(): Promise; 24 | /** Gets whether the option is disabled. */ 25 | isDisabled(): Promise; 26 | /** Gets whether the option is selected. */ 27 | isSelected(): Promise; 28 | /** Gets whether the option is active. */ 29 | isActive(): Promise; 30 | /** Gets whether the option is in multiple selection mode. */ 31 | isMultiple(): Promise; 32 | } 33 | 34 | export { MatOptionHarness as M }; 35 | export type { OptionHarnessFilters as O }; 36 | -------------------------------------------------------------------------------- /option-parent.d-CnYuuMkO.d.ts: -------------------------------------------------------------------------------- 1 | import { Signal, InjectionToken } from '@angular/core'; 2 | 3 | /** 4 | * Describes a parent component that manages a list of options. 5 | * Contains properties that the options can inherit. 6 | * @docs-private 7 | */ 8 | interface MatOptionParentComponent { 9 | disableRipple?: boolean | Signal; 10 | multiple?: boolean; 11 | inertGroups?: boolean; 12 | hideSingleSelectionIndicator?: boolean; 13 | } 14 | /** 15 | * Injection token used to provide the parent component to options. 16 | */ 17 | declare const MAT_OPTION_PARENT_COMPONENT: InjectionToken; 18 | 19 | export { MAT_OPTION_PARENT_COMPONENT as a }; 20 | export type { MatOptionParentComponent as M }; 21 | -------------------------------------------------------------------------------- /paginator/_m3-paginator.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use 'sass:list'; 3 | @use '../core/tokens/m3-utils'; 4 | @use '../core/theming/theming'; 5 | @use '../core/theming/inspection'; 6 | @use '../core/tokens/m3'; 7 | 8 | /// Generates custom tokens for the mat-paginator. 9 | @function get-tokens($theme: m3.$sys-theme) { 10 | $system: m3-utils.get-system($theme); 11 | 12 | @return ( 13 | base: (), 14 | color: ( 15 | paginator-container-text-color: map.get($system, on-surface), 16 | paginator-container-background-color: map.get($system, surface), 17 | paginator-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), 18 | paginator-enabled-icon-color: map.get($system, on-surface-variant), 19 | ), 20 | typography: ( 21 | paginator-container-text-font: map.get($system, body-small-font), 22 | paginator-container-text-line-height: map.get($system, body-small-line-height), 23 | paginator-container-text-size: map.get($system, body-small-size), 24 | paginator-container-text-tracking: map.get($system, body-small-tracking), 25 | paginator-container-text-weight: map.get($system, body-small-weight), 26 | paginator-select-trigger-text-size: map.get($system, body-small-size), 27 | ), 28 | density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)), 29 | ); 30 | } 31 | 32 | // Tokens that can be configured through Angular Material's density theming API. 33 | @function get-density-tokens($scale) { 34 | $scale: theming.clamp-density($scale, -5); 35 | $index: ($scale * -1) + 1; 36 | 37 | @return ( 38 | paginator-container-size: list.nth((56px, 52px, 48px, 40px, 40px, 40px), $index), 39 | paginator-form-field-container-height: list.nth((40px, 40px, 40px, 40px, 40px, 36px), $index), 40 | paginator-form-field-container-vertical-padding: 41 | list.nth((8px, 8px, 8px, 8px, 8px, 6px), $index), 42 | paginator-touch-target-display: list.nth((block, block, none, none, none, none), $index), 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /paginator/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { MatButtonModule } from '../button/index.js'; 3 | import { M as MatSelectModule } from '../module.d-bebo7gS5.js'; 4 | import { M as MatTooltipModule } from '../module.d-m-qXd3m8.js'; 5 | import { M as MatPaginator } from '../paginator.d-DuJ-oYgT.js'; 6 | export { c as MAT_PAGINATOR_DEFAULT_OPTIONS, f as MAT_PAGINATOR_INTL_PROVIDER, e as MAT_PAGINATOR_INTL_PROVIDER_FACTORY, b as MatPaginatorDefaultOptions, d as MatPaginatorIntl, a as MatPaginatorSelectConfig, P as PageEvent } from '../paginator.d-DuJ-oYgT.js'; 7 | import '@angular/cdk/a11y'; 8 | import '../palette.d-BSSFKjO6.js'; 9 | import '../ripple-loader.d-9me-KFSi.js'; 10 | import '../common-module.d-C8xzHJDr.js'; 11 | import '@angular/cdk/bidi'; 12 | import '../index.d-C5neTPvr.js'; 13 | import '../ripple.d-BT30YVLB.js'; 14 | import '@angular/cdk/platform'; 15 | import '@angular/cdk/overlay'; 16 | import '../index.d-DAhBYbjm.js'; 17 | import '../pseudo-checkbox-module.d-BHmTZ10P.js'; 18 | import '../option.d-BcvS44bt.js'; 19 | import 'rxjs'; 20 | import '@angular/cdk/collections'; 21 | import '@angular/cdk/scrolling'; 22 | import '@angular/forms'; 23 | import '../error-options.d-CGdTZUYk.js'; 24 | import '../form-field.d-C6p5uYjG.js'; 25 | import '@angular/cdk/coercion'; 26 | import '../form-field-control.d-DvB4ZVlf.js'; 27 | import '../module.d-D1Ym5Wf2.js'; 28 | import '@angular/cdk/observers'; 29 | 30 | declare class MatPaginatorModule { 31 | static ɵfac: i0.ɵɵFactoryDeclaration; 32 | static ɵmod: i0.ɵɵNgModuleDeclaration; 33 | static ɵinj: i0.ɵɵInjectorDeclaration; 34 | } 35 | 36 | export { MatPaginator, MatPaginatorModule }; 37 | -------------------------------------------------------------------------------- /palette.d-BSSFKjO6.d.ts: -------------------------------------------------------------------------------- 1 | /** Possible color palette values. */ 2 | type ThemePalette = 'primary' | 'accent' | 'warn' | undefined; 3 | 4 | export type { ThemePalette as T }; 5 | -------------------------------------------------------------------------------- /progress-bar/_m2-progress-bar.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:color'; 2 | @use 'sass:meta'; 3 | @use 'sass:map'; 4 | @use '../core/tokens/m2-utils'; 5 | @use '../core/tokens/m3-utils'; 6 | 7 | // Tokens that can't be configured through Angular Material's current theming API, 8 | // but may be in a future version of the theming API. 9 | // 10 | // Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. 11 | // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in 12 | // our CSS. 13 | @function get-unthemable-tokens() { 14 | $height: 4px; 15 | 16 | @return ( 17 | // The height of the progress bar. `active-indicator-height` applies to the 18 | // bar and `track-height` applies to the track. 19 | progress-bar-active-indicator-height: $height, 20 | progress-bar-track-height: $height, 21 | progress-bar-track-shape: 0, 22 | ); 23 | } 24 | 25 | // Tokens that can be configured through Angular Material's color theming API. 26 | @function get-color-tokens($theme, $color-variant) { 27 | $system: m2-utils.get-system($theme); 28 | $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); 29 | 30 | @return ( 31 | progress-bar-active-indicator-color: map.get($system, primary), 32 | progress-bar-track-color: if( 33 | meta.type-of(map.get($system, primary)) == color, 34 | color.adjust(map.get($system, primary), $alpha: -0.75), 35 | map.get($system, primary) 36 | ) 37 | ); 38 | } 39 | 40 | // Tokens that can be configured through Angular Material's typography theming API. 41 | @function get-typography-tokens($theme) { 42 | @return (); 43 | } 44 | 45 | // Tokens that can be configured through Angular Material's density theming API. 46 | @function get-density-tokens($theme) { 47 | @return (); 48 | } 49 | -------------------------------------------------------------------------------- /progress-bar/_m3-progress-bar.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | // The prefix used to generate the fully qualified name for tokens in this file. 6 | $prefix: (mat, progress-bar); 7 | 8 | /// Generates the tokens for MDC linear-progress 9 | /// @param {String} $color-variant The color variant to use for the component 10 | @function get-tokens($theme: m3.$sys-theme, $color-variant: null) { 11 | $system: m3-utils.get-system($theme); 12 | @if $color-variant { 13 | $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); 14 | } 15 | 16 | @return ( 17 | base: ( 18 | progress-bar-active-indicator-height: 4px, 19 | progress-bar-track-height: 4px, 20 | progress-bar-track-shape: map.get($system, corner-none) 21 | ), 22 | color: ( 23 | progress-bar-active-indicator-color: map.get($system, primary), 24 | progress-bar-track-color: map.get($system, surface-variant), 25 | ), 26 | typography: (), 27 | density: (), 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /progress-bar/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | /** A set of criteria that can be used to filter a list of `MatProgressBarHarness` instances. */ 4 | interface ProgressBarHarnessFilters extends BaseHarnessFilters { 5 | } 6 | 7 | /** Harness for interacting with a `mat-progress-bar` in tests. */ 8 | declare class MatProgressBarHarness extends ComponentHarness { 9 | static hostSelector: string; 10 | /** 11 | * Gets a `HarnessPredicate` that can be used to search for a progress bar with specific 12 | * attributes. 13 | * @param options Options for filtering which progress bar instances are considered a match. 14 | * @return a `HarnessPredicate` configured with the given options. 15 | */ 16 | static with(this: ComponentHarnessConstructor, options?: ProgressBarHarnessFilters): HarnessPredicate; 17 | /** Gets a promise for the progress bar's value. */ 18 | getValue(): Promise; 19 | /** Gets a promise for the progress bar's mode. */ 20 | getMode(): Promise; 21 | } 22 | 23 | export { MatProgressBarHarness }; 24 | export type { ProgressBarHarnessFilters }; 25 | -------------------------------------------------------------------------------- /progress-spinner/_m2-progress-spinner.scss: -------------------------------------------------------------------------------- 1 | @use '../core/tokens/m2-utils'; 2 | @use '../core/tokens/m3-utils'; 3 | @use 'sass:map'; 4 | 5 | // Tokens that can't be configured through Angular Material's current theming API, 6 | // but may be in a future version of the theming API. 7 | // 8 | // Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. 9 | // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in 10 | // our CSS. 11 | @function get-unthemable-tokens() { 12 | @return ( 13 | progress-spinner-active-indicator-width: 4px, 14 | progress-spinner-size: 48px, 15 | ); 16 | } 17 | 18 | // Tokens that can be configured through Angular Material's color theming API. 19 | @function get-color-tokens($theme, $color-variant) { 20 | $system: m2-utils.get-system($theme); 21 | $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); 22 | 23 | @return ( 24 | progress-spinner-active-indicator-color: map.get($system, primary) 25 | ); 26 | } 27 | 28 | // Tokens that can be configured through Angular Material's typography theming API. 29 | @function get-typography-tokens($theme) { 30 | @return (); 31 | } 32 | 33 | // Tokens that can be configured through Angular Material's density theming API. 34 | @function get-density-tokens($theme) { 35 | @return (); 36 | } 37 | -------------------------------------------------------------------------------- /progress-spinner/_m3-progress-spinner.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | // The prefix used to generate the fully qualified name for tokens in this file. 6 | $prefix: (mat, progress-spinner); 7 | 8 | /// Generates the tokens for MDC circular-progress 9 | /// @param {String} $color-variant The color variant to use for the component 10 | @function get-tokens($theme: m3.$sys-theme, $color-variant: null) { 11 | $system: m3-utils.get-system($theme); 12 | @if $color-variant { 13 | $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); 14 | } 15 | 16 | @return ( 17 | base: ( 18 | progress-spinner-size: 48px, 19 | progress-spinner-active-indicator-width: 4px, 20 | ), 21 | color: ( 22 | progress-spinner-active-indicator-color: map.get($system, primary), 23 | ), 24 | typography: (), 25 | density: (), 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /progress-spinner/index.d.ts: -------------------------------------------------------------------------------- 1 | import { M as MatProgressSpinner } from '../progress-spinner.d-Lfz4Wh5x.js'; 2 | export { b as MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS, c as MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, a as MatProgressSpinnerDefaultOptions, d as MatSpinner, P as ProgressSpinnerMode } from '../progress-spinner.d-Lfz4Wh5x.js'; 3 | import * as i0 from '@angular/core'; 4 | import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js'; 5 | import '../palette.d-BSSFKjO6.js'; 6 | import '@angular/cdk/bidi'; 7 | 8 | declare class MatProgressSpinnerModule { 9 | static ɵfac: i0.ɵɵFactoryDeclaration; 10 | static ɵmod: i0.ɵɵNgModuleDeclaration; 11 | static ɵinj: i0.ɵɵInjectorDeclaration; 12 | } 13 | 14 | export { MatProgressSpinner, MatProgressSpinnerModule }; 15 | -------------------------------------------------------------------------------- /progress-spinner/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing'; 2 | import { P as ProgressSpinnerMode } from '../../progress-spinner.d-Lfz4Wh5x.js'; 3 | import '@angular/core'; 4 | import '../../palette.d-BSSFKjO6.js'; 5 | 6 | /** A set of criteria that can be used to filter a list of `MatProgressSpinnerHarness` instances. */ 7 | interface ProgressSpinnerHarnessFilters extends BaseHarnessFilters { 8 | } 9 | 10 | /** Harness for interacting with a MDC based mat-progress-spinner in tests. */ 11 | declare class MatProgressSpinnerHarness extends ComponentHarness { 12 | /** The selector for the host element of a `MatProgressSpinner` instance. */ 13 | static hostSelector: string; 14 | /** 15 | * Gets a `HarnessPredicate` that can be used to search for a progress spinnner with specific 16 | * attributes. 17 | * @param options Options for filtering which progress spinner instances are considered a match. 18 | * @return a `HarnessPredicate` configured with the given options. 19 | */ 20 | static with(this: ComponentHarnessConstructor, options?: ProgressSpinnerHarnessFilters): HarnessPredicate; 21 | /** Gets the progress spinner's value. */ 22 | getValue(): Promise; 23 | /** Gets the progress spinner's mode. */ 24 | getMode(): Promise; 25 | } 26 | 27 | export { MatProgressSpinnerHarness }; 28 | export type { ProgressSpinnerHarnessFilters }; 29 | -------------------------------------------------------------------------------- /ripple-loader.d-9me-KFSi.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from '@angular/core'; 2 | import { OnDestroy } from '@angular/core'; 3 | 4 | /** 5 | * Handles attaching ripples on demand. 6 | * 7 | * This service allows us to avoid eagerly creating & attaching MatRipples. 8 | * It works by creating & attaching a ripple only when a component is first interacted with. 9 | * 10 | * @docs-private 11 | */ 12 | declare class MatRippleLoader implements OnDestroy { 13 | private _document; 14 | private _animationsDisabled; 15 | private _globalRippleOptions; 16 | private _platform; 17 | private _ngZone; 18 | private _injector; 19 | private _eventCleanups; 20 | private _hosts; 21 | constructor(); 22 | ngOnDestroy(): void; 23 | /** 24 | * Configures the ripple that will be rendered by the ripple loader. 25 | * 26 | * Stores the given information about how the ripple should be configured on the host 27 | * element so that it can later be retrived & used when the ripple is actually created. 28 | */ 29 | configureRipple(host: HTMLElement, config: { 30 | className?: string; 31 | centered?: boolean; 32 | disabled?: boolean; 33 | }): void; 34 | /** Sets the disabled state on the ripple instance corresponding to the given host element. */ 35 | setDisabled(host: HTMLElement, disabled: boolean): void; 36 | /** 37 | * Handles creating and attaching component internals 38 | * when a component is initially interacted with. 39 | */ 40 | private _onInteraction; 41 | /** Creates a MatRipple and appends it to the given element. */ 42 | private _createRipple; 43 | destroyRipple(host: HTMLElement): void; 44 | static ɵfac: i0.ɵɵFactoryDeclaration; 45 | static ɵprov: i0.ɵɵInjectableDeclaration; 46 | } 47 | 48 | export { MatRippleLoader as M }; 49 | -------------------------------------------------------------------------------- /schematics/migration.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "migration-v20": { 5 | "version": "20.0.0-0", 6 | "description": "Updates Angular Material to v20", 7 | "factory": "./ng-update/index_bundled#updateToV20" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /schematics/ng-add/fonts/material-fonts.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from '../schema'; 10 | /** Adds the Material Design fonts to the index HTML file. */ 11 | export declare function addFontsToIndex(options: Schema): Rule; 12 | -------------------------------------------------------------------------------- /schematics/ng-add/fonts/material-fonts.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.addFontsToIndex = addFontsToIndex; 11 | const schematics_1 = require("@angular-devkit/schematics"); 12 | const schematics_2 = require("@angular/cdk/schematics"); 13 | const utility_1 = require("@schematics/angular/utility"); 14 | /** Adds the Material Design fonts to the index HTML file. */ 15 | function addFontsToIndex(options) { 16 | return async (host) => { 17 | const workspace = await (0, utility_1.readWorkspace)(host); 18 | const project = (0, schematics_2.getProjectFromWorkspace)(workspace, options.project); 19 | const projectIndexFiles = (0, schematics_2.getProjectIndexFiles)(project); 20 | if (!projectIndexFiles.length) { 21 | throw new schematics_1.SchematicsException('No project index HTML file could be found.'); 22 | } 23 | const fonts = [ 24 | 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap', 25 | 'https://fonts.googleapis.com/icon?family=Material+Icons', 26 | ]; 27 | projectIndexFiles.forEach(indexFilePath => { 28 | fonts.forEach(font => { 29 | (0, schematics_2.appendHtmlElementToHead)(host, indexFilePath, ``); 30 | }); 31 | }); 32 | }; 33 | } 34 | //# sourceMappingURL=material-fonts.js.map -------------------------------------------------------------------------------- /schematics/ng-add/fonts/material-fonts.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"material-fonts.js","sourceRoot":"","sources":["material-fonts.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAYH,0CAqBC;AA/BD,2DAA2E;AAC3E,wDAIiC;AACjC,yDAA0D;AAG1D,6DAA6D;AAC7D,SAAgB,eAAe,CAAC,OAAe;IAC7C,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,SAAS,GAAG,MAAM,IAAA,uBAAa,EAAC,IAAI,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAA,oCAAuB,EAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QACpE,MAAM,iBAAiB,GAAG,IAAA,iCAAoB,EAAC,OAAO,CAAC,CAAC;QAExD,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;YAC9B,MAAM,IAAI,gCAAmB,CAAC,4CAA4C,CAAC,CAAC;QAC9E,CAAC;QAED,MAAM,KAAK,GAAG;YACZ,+EAA+E;YAC/E,yDAAyD;SAC1D,CAAC;QAEF,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;YACxC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnB,IAAA,oCAAuB,EAAC,IAAI,EAAE,aAAa,EAAE,eAAe,IAAI,qBAAqB,CAAC,CAAC;YACzF,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-add/index.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be 12 | * automatically executed if developers run `ng add @angular/material`. 13 | * 14 | * Since the Angular Material schematics depend on the schematic utility functions from the CDK, 15 | * we need to install the CDK before loading the schematic files that import from the CDK. 16 | */ 17 | export default function (options: Schema): Rule; 18 | -------------------------------------------------------------------------------- /schematics/ng-add/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAyBH,4BA+BC;AArDD,4DAA0F;AAC1F,qDAA2F;AAG3F;;;;;;;;GAQG;AACH,MAAM,4BAA4B,GAAG,oBAAoB,CAAC;AAE1D;;;;;;GAMG;AACH,mBAAyB,OAAe;IACtC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,6FAA6F;QAC7F,2FAA2F;QAC3F,yCAAyC;QACzC,MAAM,gBAAgB,GAAG,IAAA,iDAAgC,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;QACjF,MAAM,oBAAoB,GAAG,IAAA,iDAAgC,EAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QACzF,MAAM,wBAAwB,GAAG,gBAAgB,IAAI,UAAU,CAAC;QAEhE,0FAA0F;QAC1F,6FAA6F;QAC7F,6FAA6F;QAC7F,yFAAyF;QACzF,gFAAgF;QAChF,IAAI,oBAAoB,KAAK,IAAI,EAAE,CAAC;YAClC,IAAA,wCAAuB,EAAC,IAAI,EAAE,mBAAmB,EAAE,4BAA4B,CAAC,CAAC;QACnF,CAAC;QAED,IAAA,wCAAuB,EACrB,IAAI,EACJ,cAAc,EACd,oBAAoB,IAAI,4BAA4B,CACrD,CAAC;QACF,IAAA,wCAAuB,EAAC,IAAI,EAAE,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;QAE1E,2FAA2F;QAC3F,+FAA+F;QAC/F,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAEpE,OAAO,CAAC,OAAO,CAAC,IAAI,wBAAgB,CAAC,sBAAsB,EAAE,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1F,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-add/package-config.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.dev/license 7 | */ 8 | import { Tree } from '@angular-devkit/schematics'; 9 | /** Adds a package to the package.json in the given host tree. */ 10 | export declare function addPackageToPackageJson(host: Tree, pkg: string, version: string): Tree; 11 | /** Gets the version of the specified package by looking at the package.json in the given tree. */ 12 | export declare function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null; 13 | -------------------------------------------------------------------------------- /schematics/ng-add/package-config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.addPackageToPackageJson = addPackageToPackageJson; 11 | exports.getPackageVersionFromPackageJson = getPackageVersionFromPackageJson; 12 | /** 13 | * Sorts the keys of the given object. 14 | * @returns A new object instance with sorted keys 15 | */ 16 | function sortObjectByKeys(obj) { 17 | return Object.keys(obj) 18 | .sort() 19 | .reduce((result, key) => { 20 | result[key] = obj[key]; 21 | return result; 22 | }, {}); 23 | } 24 | /** Adds a package to the package.json in the given host tree. */ 25 | function addPackageToPackageJson(host, pkg, version) { 26 | if (host.exists('package.json')) { 27 | const sourceText = host.read('package.json').toString('utf-8'); 28 | const json = JSON.parse(sourceText); 29 | if (!json.dependencies) { 30 | json.dependencies = {}; 31 | } 32 | if (!json.dependencies[pkg]) { 33 | json.dependencies[pkg] = version; 34 | json.dependencies = sortObjectByKeys(json.dependencies); 35 | } 36 | host.overwrite('package.json', JSON.stringify(json, null, 2)); 37 | } 38 | return host; 39 | } 40 | /** Gets the version of the specified package by looking at the package.json in the given tree. */ 41 | function getPackageVersionFromPackageJson(tree, name) { 42 | if (!tree.exists('package.json')) { 43 | return null; 44 | } 45 | const packageJson = JSON.parse(tree.read('package.json').toString('utf8')); 46 | if (packageJson.dependencies && packageJson.dependencies[name]) { 47 | return packageJson.dependencies[name]; 48 | } 49 | return null; 50 | } 51 | //# sourceMappingURL=package-config.js.map -------------------------------------------------------------------------------- /schematics/ng-add/package-config.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"package-config.js","sourceRoot":"","sources":["package-config.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAyBH,0DAkBC;AAGD,4EAYC;AAlDD;;;GAGG;AACH,SAAS,gBAAgB,CAAC,GAA2B;IACnD,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;SACpB,IAAI,EAAE;SACN,MAAM,CACL,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;QACd,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,EAA4B,CAC7B,CAAC;AACN,CAAC;AAED,iEAAiE;AACjE,SAAgB,uBAAuB,CAAC,IAAU,EAAE,GAAW,EAAE,OAAe;IAC9E,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAgB,CAAC;QAEnD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;YACjC,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,kGAAkG;AAClG,SAAgB,gCAAgC,CAAC,IAAU,EAAE,IAAY;IACvE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAgB,CAAC;IAE3F,IAAI,WAAW,CAAC,YAAY,IAAI,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAC/D,OAAO,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-add/schema.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.dev/license 7 | */ 8 | export interface Schema { 9 | /** Name of the project. */ 10 | project: string; 11 | /** Name of pre-built theme to install. */ 12 | theme: 'azure-blue' | 'rose-red' | 'magenta-violet' | 'cyan-orange' | 'custom'; 13 | /** Whether to set up global typography styles. */ 14 | typography: boolean; 15 | } 16 | -------------------------------------------------------------------------------- /schematics/ng-add/schema.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | //# sourceMappingURL=schema.js.map -------------------------------------------------------------------------------- /schematics/ng-add/schema.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"} -------------------------------------------------------------------------------- /schematics/ng-add/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/draft-07/schema", 3 | "$id": "angular-material-ng-add", 4 | "title": "Angular Material ng-add schematic", 5 | "type": "object", 6 | "properties": { 7 | "project": { 8 | "type": "string", 9 | "description": "Name of the project.", 10 | "$default": { 11 | "$source": "projectName" 12 | } 13 | }, 14 | "theme": { 15 | "description": "The theme to apply", 16 | "type": "string", 17 | "default": "azure-blue", 18 | "x-prompt": { 19 | "message": "Choose a prebuilt theme name, or \"custom\" for a custom theme:", 20 | "type": "list", 21 | "items": [ 22 | { 23 | "value": "azure-blue", 24 | "label": "Azure/Blue [Preview: https://material.angular.dev?theme=azure-blue]" 25 | }, 26 | { 27 | "value": "rose-red", 28 | "label": "Rose/Red [Preview: https://material.angular.dev?theme=rose-red]" 29 | }, 30 | { 31 | "value": "magenta-violet", 32 | "label": "Magenta/Violet [Preview: https://material.angular.dev?theme=magenta-violet]" 33 | }, 34 | { 35 | "value": "cyan-orange", 36 | "label": "Cyan/Orange [Preview: https://material.angular.dev?theme=cyan-orange]" 37 | }, 38 | {"value": "custom", "label": "Custom"} 39 | ] 40 | } 41 | }, 42 | "typography": { 43 | "type": "boolean", 44 | "default": false, 45 | "description": "Whether to set up global typography styles.", 46 | "x-prompt": "Set up global Angular Material typography styles?" 47 | } 48 | }, 49 | "required": [] 50 | } 51 | -------------------------------------------------------------------------------- /schematics/ng-add/setup-project.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Scaffolds the basics of a Angular Material application, this includes: 12 | * - Add Packages to package.json 13 | * - Adds pre-built themes to styles.ext 14 | */ 15 | export default function (options: Schema): Rule; 16 | -------------------------------------------------------------------------------- /schematics/ng-add/setup-project.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"setup-project.js","sourceRoot":"","sources":["setup-project.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAeH,4BAqBC;AAlCD,2DAAqF;AACrF,wDAAqF;AACrF,yDAA0D;AAC1D,mFAAyE;AACzE,2DAAuD;AAEvD,+CAA0E;AAE1E;;;;GAIG;AACH,mBAAyB,OAAe;IACtC,OAAO,KAAK,EAAE,IAAU,EAAE,OAAyB,EAAE,EAAE;QACrD,MAAM,SAAS,GAAG,MAAM,IAAA,uBAAa,EAAC,IAAI,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAA,oCAAuB,EAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QAEpE,IAAI,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,8BAAW,CAAC,WAAW,EAAE,CAAC;YAClE,OAAO,IAAA,kBAAK,EAAC;gBACX,IAAA,6BAAmB,EAAC,OAAO,CAAC;gBAC5B,IAAA,gCAAe,EAAC,OAAO,CAAC;gBACxB,oBAAoB,CAAC,OAAO,CAAC;gBAC7B,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,4BAAkB,EAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE;aAC1D,CAAC,CAAC;QACL,CAAC;QACD,OAAO,CAAC,MAAM,CAAC,IAAI,CACjB,mFAAmF;YACjF,sEAAsE;YACtE,oFAAoF;YACpF,SAAS,CACZ,CAAC;QACF,OAAO;IACT,CAAC,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,oBAAoB,CAAC,OAAe;IAC3C,OAAO,KAAK,EAAE,IAAU,EAAE,OAAyB,EAAE,EAAE;QACrD,MAAM,SAAS,GAAG,MAAM,IAAA,uBAAa,EAAC,IAAI,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAA,oCAAuB,EAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QACpE,MAAM,aAAa,GAAG,IAAA,gCAAmB,EAAC,OAAO,CAAC,CAAC;QACnD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;QAE9B,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,MAAM,CAAC,KAAK,CAAC,yDAAyD,CAAC,CAAC;YACxE,MAAM,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAC;YACrE,MAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;YAC5E,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAExC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,CAAC,KAAK,CACV,2DAA2D,GAAG,IAAI,aAAa,GAAG,CACnF,CAAC;YACF,MAAM,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;YACpE,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;QACtC,MAAM,SAAS,GACb,IAAI;YACJ,gCAAgC;YAChC,0EAA0E,CAAC;QAE7E,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAEjD,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACnD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-add/theming/create-custom-theme.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.dev/license 7 | */ 8 | /** Create custom theme for the given application configuration. */ 9 | export declare function createCustomTheme(name?: string): string; 10 | -------------------------------------------------------------------------------- /schematics/ng-add/theming/create-custom-theme.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.createCustomTheme = createCustomTheme; 11 | /** Create custom theme for the given application configuration. */ 12 | function createCustomTheme(name = 'app') { 13 | return ` 14 | // Custom Theming for Angular Material 15 | // For more information: https://material.angular.dev/guide/theming 16 | @use '@angular/material' as mat; 17 | 18 | html { 19 | @include mat.theme(( 20 | color: ( 21 | theme-type: light, 22 | primary: mat.$azure-palette, 23 | tertiary: mat.$blue-palette, 24 | ), 25 | typography: Roboto, 26 | density: 0, 27 | )); 28 | }`; 29 | } 30 | //# sourceMappingURL=create-custom-theme.js.map -------------------------------------------------------------------------------- /schematics/ng-add/theming/create-custom-theme.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"create-custom-theme.js","sourceRoot":"","sources":["create-custom-theme.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAGH,8CAiBC;AAlBD,mEAAmE;AACnE,SAAgB,iBAAiB,CAAC,OAAe,KAAK;IACpD,OAAO;;;;;;;;;;;;;;;EAeP,CAAC;AACH,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-add/theming/theming.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from '../schema'; 10 | /** Add pre-built styles to the main project style file. */ 11 | export declare function addThemeToAppStyles(options: Schema): Rule; 12 | /** Adds the global typography class to the body element. */ 13 | export declare function addTypographyClass(options: Schema): Rule; 14 | -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template: -------------------------------------------------------------------------------- 1 | .full-width { 2 | width: 100%; 3 | } 4 | 5 | .shipping-card { 6 | min-width: 120px; 7 | margin: 20px auto; 8 | } 9 | 10 | .mat-radio-button { 11 | display: block; 12 | margin: 5px 0; 13 | } 14 | 15 | .row { 16 | display: flex; 17 | flex-direction: row; 18 | } 19 | 20 | .col { 21 | flex: 1; 22 | margin-right: 20px; 23 | } 24 | 25 | .col:last-child { 26 | margin-right: 0; 27 | } 28 | -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template: -------------------------------------------------------------------------------- 1 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %> 2 | import { ReactiveFormsModule } from '@angular/forms'; 3 | import { MatButtonModule } from '@angular/material/button'; 4 | import { MatCardModule } from '@angular/material/card'; 5 | import { MatInputModule } from '@angular/material/input'; 6 | import { MatRadioModule } from '@angular/material/radio'; 7 | import { MatSelectModule } from '@angular/material/select';<% } %> 8 | 9 | import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; 10 | 11 | describe('<%= classify(name) %>Component', () => { 12 | let component: <%= classify(name) %>Component; 13 | let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %> 14 | 15 | beforeEach(waitForAsync(() => { 16 | TestBed.configureTestingModule({ 17 | declarations: [<%= classify(name) %>Component], 18 | imports: [ 19 | ReactiveFormsModule, 20 | MatButtonModule, 21 | MatCardModule, 22 | MatInputModule, 23 | MatRadioModule, 24 | MatSelectModule, 25 | ] 26 | }); 27 | }));<% } %> 28 | 29 | beforeEach(() => { 30 | fixture = TestBed.createComponent(<%= classify(name) %>Component); 31 | component = fixture.componentInstance; 32 | fixture.detectChanges(); 33 | }); 34 | 35 | it('should compile', () => { 36 | expect(component).toBeTruthy(); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/index.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Scaffolds a new table component. 12 | * Internally it bootstraps the base component schematic 13 | */ 14 | export default function (options: Schema): Rule; 15 | -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAeH,4BAaC;AA1BD,2DAAmE;AACnE,wDAKiC;AAGjC;;;GAGG;AACH,mBAAyB,OAAe;IACtC,OAAO,IAAA,kBAAK,EAAC;QACX,IAAA,2BAAc,EACZ,EAAC,GAAG,OAAO,EAAC,EACZ;YACE,QAAQ,EACN,kFAAkF;YACpF,UAAU,EACR,uFAAuF;SAC1F,CACF;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC;KAC9D,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,sBAAsB,CAAC,OAAe;IAC7C,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,MAAM,UAAU,GAAG,CAAC,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAE,CAAC;YACjE,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC;YACvF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,EAAE,0BAA0B,CAAC,CAAC;YACzF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,EAAE,0BAA0B,CAAC,CAAC;YACzF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC;YACvF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;QACrF,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/schema.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.dev/license 7 | */ 8 | import { Schema as ComponentSchema } from '@schematics/angular/component/schema'; 9 | export interface Schema extends ComponentSchema { 10 | } 11 | -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/schema.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | //# sourceMappingURL=schema.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/address-form/schema.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"} -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | margin: 20px; 3 | } 4 | 5 | .dashboard-card { 6 | position: absolute; 7 | top: 15px; 8 | left: 15px; 9 | right: 15px; 10 | bottom: 15px; 11 | } 12 | 13 | .more-button { 14 | position: absolute; 15 | top: 5px; 16 | right: 10px; 17 | } 18 | 19 | .dashboard-card-content { 20 | text-align: center; 21 | } 22 | -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template: -------------------------------------------------------------------------------- 1 |
2 |

Dashboard

3 | 4 | @for (card of cards | async; track card) { 5 | 6 | 7 | 8 | 9 | {{card.title}} 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
Card Content Here
21 | 22 | 23 | 24 | } 25 | 26 |
27 | -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template: -------------------------------------------------------------------------------- 1 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %> 2 | import { MatButtonModule } from '@angular/material/button'; 3 | import { MatCardModule } from '@angular/material/card'; 4 | import { MatGridListModule } from '@angular/material/grid-list'; 5 | import { MatIconModule } from '@angular/material/icon'; 6 | import { MatMenuModule } from '@angular/material/menu';<% } %> 7 | 8 | import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; 9 | 10 | describe('<%= classify(name) %>Component', () => { 11 | let component: <%= classify(name) %>Component; 12 | let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %> 13 | 14 | beforeEach(waitForAsync(() => { 15 | TestBed.configureTestingModule({ 16 | declarations: [<%= classify(name) %>Component], 17 | imports: [ 18 | MatButtonModule, 19 | MatCardModule, 20 | MatGridListModule, 21 | MatIconModule, 22 | MatMenuModule, 23 | ] 24 | }); 25 | }));<% } %> 26 | 27 | beforeEach(() => { 28 | fixture = TestBed.createComponent(<%= classify(name) %>Component); 29 | component = fixture.componentInstance; 30 | fixture.detectChanges(); 31 | }); 32 | 33 | it('should compile', () => { 34 | expect(component).toBeTruthy(); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/index.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Scaffolds a new dashboard component. 12 | * Internally it bootstraps the base component schematic 13 | */ 14 | export default function (options: Schema): Rule; 15 | -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.default = default_1; 11 | const schematics_1 = require("@angular-devkit/schematics"); 12 | const schematics_2 = require("@angular/cdk/schematics"); 13 | /** 14 | * Scaffolds a new dashboard component. 15 | * Internally it bootstraps the base component schematic 16 | */ 17 | function default_1(options) { 18 | return (0, schematics_1.chain)([ 19 | (0, schematics_2.buildComponent)({ ...options }, { 20 | template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template', 21 | stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template', 22 | }), 23 | options.skipImport ? (0, schematics_1.noop)() : addNavModulesToModule(options), 24 | ]); 25 | } 26 | /** 27 | * Adds the required modules to the relative module. 28 | */ 29 | function addNavModulesToModule(options) { 30 | return async (host) => { 31 | const isStandalone = await (0, schematics_2.isStandaloneSchematic)(host, options); 32 | if (!isStandalone) { 33 | const modulePath = (await (0, schematics_2.findModuleFromOptions)(host, options)); 34 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatGridListModule', '@angular/material/grid-list'); 35 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatCardModule', '@angular/material/card'); 36 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatMenuModule', '@angular/material/menu'); 37 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatIconModule', '@angular/material/icon'); 38 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatButtonModule', '@angular/material/button'); 39 | } 40 | }; 41 | } 42 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAeH,4BAaC;AA1BD,2DAAmE;AACnE,wDAKiC;AAGjC;;;GAGG;AACH,mBAAyB,OAAe;IACtC,OAAO,IAAA,kBAAK,EAAC;QACX,IAAA,2BAAc,EACZ,EAAC,GAAG,OAAO,EAAC,EACZ;YACE,QAAQ,EACN,kFAAkF;YACpF,UAAU,EACR,uFAAuF;SAC1F,CACF;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,OAAO,CAAC;KAC7D,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,qBAAqB,CAAC,OAAe;IAC5C,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,MAAM,UAAU,GAAG,CAAC,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAE,CAAC;YACjE,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,mBAAmB,EAAE,6BAA6B,CAAC,CAAC;YAC9F,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,EAAE,0BAA0B,CAAC,CAAC;QAC3F,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/schema.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.dev/license 7 | */ 8 | import { Schema as ComponentSchema } from '@schematics/angular/component/schema'; 9 | export interface Schema extends ComponentSchema { 10 | } 11 | -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/schema.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | //# sourceMappingURL=schema.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/dashboard/schema.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"} -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template: -------------------------------------------------------------------------------- 1 | 2 | 6 | Menu 7 | 8 | >Link 1 9 | >Link 2 10 | >Link 3 11 | 12 | 13 | 14 | 15 | @if (isHandset$ | async) { 16 | 23 | } 24 | <%= project %> 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template: -------------------------------------------------------------------------------- 1 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %> 2 | import { MatButtonModule } from '@angular/material/button'; 3 | import { MatIconModule } from '@angular/material/icon'; 4 | import { MatListModule } from '@angular/material/list'; 5 | import { MatSidenavModule } from '@angular/material/sidenav'; 6 | import { MatToolbarModule } from '@angular/material/toolbar';<% } %> 7 | 8 | import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; 9 | 10 | describe('<%= classify(name) %>Component', () => { 11 | let component: <%= classify(name) %>Component; 12 | let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(standalone) { %> 13 | 14 | beforeEach(waitForAsync(() => { 15 | TestBed.configureTestingModule({ 16 | declarations: [<%= classify(name) %>Component], 17 | imports: [ 18 | MatButtonModule, 19 | MatIconModule, 20 | MatListModule, 21 | MatSidenavModule, 22 | MatToolbarModule, 23 | ] 24 | }); 25 | }));<% } %> 26 | 27 | beforeEach(() => { 28 | fixture = TestBed.createComponent(<%= classify(name) %>Component); 29 | component = fixture.componentInstance; 30 | fixture.detectChanges(); 31 | }); 32 | 33 | it('should compile', () => { 34 | expect(component).toBeTruthy(); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template: -------------------------------------------------------------------------------- 1 | import { Component, inject<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; 2 | import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';<% if(standalone) { %> 3 | import { AsyncPipe } from '@angular/common'; 4 | import { MatToolbarModule } from '@angular/material/toolbar'; 5 | import { MatButtonModule } from '@angular/material/button'; 6 | import { MatSidenavModule } from '@angular/material/sidenav'; 7 | import { MatListModule } from '@angular/material/list'; 8 | import { MatIconModule } from '@angular/material/icon';<% } %> 9 | import { Observable } from 'rxjs'; 10 | import { map, shareReplay } from 'rxjs/operators'; 11 | 12 | @Component({ 13 | selector: '<%= selector %>',<% if(inlineTemplate) { %> 14 | template: ` 15 | <%= indentTextContent(resolvedFiles.template, 4) %> 16 | `,<% } else { %> 17 | templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %> 18 | styles: ` 19 | <%= indentTextContent(resolvedFiles.stylesheet, 4) %> 20 | `<% } else { %> 21 | styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>, 22 | encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, 23 | changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>, 24 | imports: [ 25 | MatToolbarModule, 26 | MatButtonModule, 27 | MatSidenavModule, 28 | MatListModule, 29 | MatIconModule, 30 | AsyncPipe, 31 | ]<% } else { %>, 32 | standalone: false<% } %> 33 | }) 34 | export class <%= classify(name) %>Component { 35 | private breakpointObserver = inject(BreakpointObserver); 36 | 37 | isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) 38 | .pipe( 39 | map(result => result.matches), 40 | shareReplay() 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/index.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Scaffolds a new navigation component. 12 | * Internally it bootstraps the base component schematic 13 | */ 14 | export default function (options: Schema): Rule; 15 | -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.default = default_1; 11 | const schematics_1 = require("@angular-devkit/schematics"); 12 | const schematics_2 = require("@angular/cdk/schematics"); 13 | /** 14 | * Scaffolds a new navigation component. 15 | * Internally it bootstraps the base component schematic 16 | */ 17 | function default_1(options) { 18 | return (0, schematics_1.chain)([ 19 | (0, schematics_2.buildComponent)({ ...options }, { 20 | template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template', 21 | stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template', 22 | }), 23 | options.skipImport ? (0, schematics_1.noop)() : addNavModulesToModule(options), 24 | ]); 25 | } 26 | /** 27 | * Adds the required modules to the relative module. 28 | */ 29 | function addNavModulesToModule(options) { 30 | return async (host) => { 31 | const isStandalone = await (0, schematics_2.isStandaloneSchematic)(host, options); 32 | if (!isStandalone) { 33 | const modulePath = (await (0, schematics_2.findModuleFromOptions)(host, options)); 34 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatToolbarModule', '@angular/material/toolbar'); 35 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatButtonModule', '@angular/material/button'); 36 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatSidenavModule', '@angular/material/sidenav'); 37 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatIconModule', '@angular/material/icon'); 38 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatListModule', '@angular/material/list'); 39 | } 40 | }; 41 | } 42 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAeH,4BAaC;AA1BD,2DAAmE;AACnE,wDAKiC;AAGjC;;;GAGG;AACH,mBAAyB,OAAe;IACtC,OAAO,IAAA,kBAAK,EAAC;QACX,IAAA,2BAAc,EACZ,EAAC,GAAG,OAAO,EAAC,EACZ;YACE,QAAQ,EACN,kFAAkF;YACpF,UAAU,EACR,uFAAuF;SAC1F,CACF;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,OAAO,CAAC;KAC7D,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,qBAAqB,CAAC,OAAe;IAC5C,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,MAAM,UAAU,GAAG,CAAC,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAE,CAAC;YACjE,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,kBAAkB,EAAE,2BAA2B,CAAC,CAAC;YAC3F,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,EAAE,0BAA0B,CAAC,CAAC;YACzF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,kBAAkB,EAAE,2BAA2B,CAAC,CAAC;YAC3F,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/schema.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.dev/license 7 | */ 8 | import { Schema as ComponentSchema } from '@schematics/angular/component/schema'; 9 | export interface Schema extends ComponentSchema { 10 | } 11 | -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/schema.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | //# sourceMappingURL=schema.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/navigation/schema.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"} -------------------------------------------------------------------------------- /schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template: -------------------------------------------------------------------------------- 1 | .full-width-table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
Id{{row.id}}Name{{row.name}}
18 | 19 | 25 | 26 |
27 | -------------------------------------------------------------------------------- /schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template: -------------------------------------------------------------------------------- 1 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %> 2 | import { MatPaginatorModule } from '@angular/material/paginator'; 3 | import { MatSortModule } from '@angular/material/sort'; 4 | import { MatTableModule } from '@angular/material/table';<% } %> 5 | 6 | import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; 7 | 8 | describe('<%= classify(name) %>Component', () => { 9 | let component: <%= classify(name) %>Component; 10 | let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %> 11 | 12 | beforeEach(waitForAsync(() => { 13 | TestBed.configureTestingModule({ 14 | declarations: [<%= classify(name) %>Component], 15 | imports: [ 16 | MatPaginatorModule, 17 | MatSortModule, 18 | MatTableModule, 19 | ] 20 | }); 21 | }));<% } %> 22 | 23 | beforeEach(() => { 24 | fixture = TestBed.createComponent(<%= classify(name) %>Component); 25 | component = fixture.componentInstance; 26 | fixture.detectChanges(); 27 | }); 28 | 29 | it('should compile', () => { 30 | expect(component).toBeTruthy(); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; 2 | import { <% if(standalone) { %>MatTableModule, <% } %>MatTable } from '@angular/material/table'; 3 | import { <% if(standalone) { %>MatPaginatorModule, <% } %>MatPaginator } from '@angular/material/paginator'; 4 | import { <% if(standalone) { %>MatSortModule, <% } %>MatSort } from '@angular/material/sort'; 5 | import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%= dasherize(name) %>-datasource'; 6 | 7 | @Component({ 8 | selector: '<%= selector %>',<% if(inlineTemplate) { %> 9 | template: ` 10 | <%= indentTextContent(resolvedFiles.template, 4) %> 11 | `,<% } else { %> 12 | templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %> 13 | styles: ` 14 | <%= indentTextContent(resolvedFiles.stylesheet, 4) %> 15 | `<% } else { %> 16 | styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>, 17 | encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, 18 | changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>, 19 | imports: [MatTableModule, MatPaginatorModule, MatSortModule]<% } else { %>, 20 | standalone: false<% } %> 21 | }) 22 | export class <%= classify(name) %>Component implements AfterViewInit { 23 | @ViewChild(MatPaginator) paginator!: MatPaginator; 24 | @ViewChild(MatSort) sort!: MatSort; 25 | @ViewChild(MatTable) table!: MatTable<<%= classify(name) %>Item>; 26 | dataSource = new <%= classify(name) %>DataSource(); 27 | 28 | /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ 29 | displayedColumns = ['id', 'name']; 30 | 31 | ngAfterViewInit(): void { 32 | this.dataSource.sort = this.sort; 33 | this.dataSource.paginator = this.paginator; 34 | this.table.dataSource = this.dataSource; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /schematics/ng-generate/table/index.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Scaffolds a new table component. 12 | * Internally it bootstraps the base component schematic 13 | */ 14 | export default function (options: Schema): Rule; 15 | -------------------------------------------------------------------------------- /schematics/ng-generate/table/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.default = default_1; 11 | const schematics_1 = require("@angular-devkit/schematics"); 12 | const schematics_2 = require("@angular/cdk/schematics"); 13 | /** 14 | * Scaffolds a new table component. 15 | * Internally it bootstraps the base component schematic 16 | */ 17 | function default_1(options) { 18 | return (0, schematics_1.chain)([ 19 | (0, schematics_2.buildComponent)({ ...options }, { 20 | template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template', 21 | stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template', 22 | }), 23 | options.skipImport ? (0, schematics_1.noop)() : addTableModulesToModule(options), 24 | ]); 25 | } 26 | /** 27 | * Adds the required modules to the relative module. 28 | */ 29 | function addTableModulesToModule(options) { 30 | return async (host) => { 31 | const isStandalone = await (0, schematics_2.isStandaloneSchematic)(host, options); 32 | if (!isStandalone) { 33 | const modulePath = (await (0, schematics_2.findModuleFromOptions)(host, options)); 34 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatTableModule', '@angular/material/table'); 35 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatPaginatorModule', '@angular/material/paginator'); 36 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatSortModule', '@angular/material/sort'); 37 | } 38 | }; 39 | } 40 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/table/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAeH,4BAaC;AA1BD,2DAAmE;AACnE,wDAKiC;AAGjC;;;GAGG;AACH,mBAAyB,OAAe;IACtC,OAAO,IAAA,kBAAK,EAAC;QACX,IAAA,2BAAc,EACZ,EAAC,GAAG,OAAO,EAAC,EACZ;YACE,QAAQ,EACN,kFAAkF;YACpF,UAAU,EACR,uFAAuF;SAC1F,CACF;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE,CAAC,CAAC,CAAC,uBAAuB,CAAC,OAAO,CAAC;KAC/D,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,uBAAuB,CAAC,OAAe;IAC9C,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,MAAM,UAAU,GAAG,CAAC,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAE,CAAC;YACjE,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC;YACvF,IAAA,oCAAuB,EACrB,IAAI,EACJ,UAAU,EACV,oBAAoB,EACpB,6BAA6B,CAC9B,CAAC;YACF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-generate/table/schema.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.dev/license 7 | */ 8 | import { Schema as ComponentSchema } from '@schematics/angular/component/schema'; 9 | export interface Schema extends ComponentSchema { 10 | } 11 | -------------------------------------------------------------------------------- /schematics/ng-generate/table/schema.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | //# sourceMappingURL=schema.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/table/schema.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"} -------------------------------------------------------------------------------- /schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template: -------------------------------------------------------------------------------- 1 | .type-icon { 2 | color: #757575; 3 | margin-right: 5px; 4 | } 5 | -------------------------------------------------------------------------------- /schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ node.type === 'file' ? 'description' : 'folder' }} 6 | 7 | {{node.name}} 8 | 9 | 10 | 11 | 17 | 18 | {{ node.type ==='file' ? 'description' : 'folder' }} 19 | 20 | {{node.name}} 21 | 22 | 23 | -------------------------------------------------------------------------------- /schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template: -------------------------------------------------------------------------------- 1 | import { <% if(!standalone) { %>waitForAsync, <% } %>ComponentFixture, TestBed } from '@angular/core/testing';<% if(!standalone) { %> 2 | import { MatButtonModule } from '@angular/material/button'; 3 | import { MatIconModule } from '@angular/material/icon'; 4 | import { MatTreeModule } from '@angular/material/tree';<% } %> 5 | 6 | import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; 7 | 8 | describe('<%= classify(name) %>Component', () => { 9 | let component: <%= classify(name) %>Component; 10 | let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %> 11 | 12 | beforeEach(waitForAsync(() => { 13 | TestBed.configureTestingModule({ 14 | declarations: [<%= classify(name) %>Component], 15 | imports: [ 16 | MatButtonModule, 17 | MatIconModule, 18 | MatTreeModule, 19 | ] 20 | }); 21 | }));<% } %> 22 | 23 | beforeEach(() => { 24 | fixture = TestBed.createComponent(<%= classify(name) %>Component); 25 | component = fixture.componentInstance; 26 | fixture.detectChanges(); 27 | }); 28 | 29 | it('should compile', () => { 30 | expect(component).toBeTruthy(); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/example-data.ts.template: -------------------------------------------------------------------------------- 1 | /** Example file/folder data. */ 2 | export const files = [ 3 | { 4 | name: 'components', 5 | type: 'folder', 6 | children: [ 7 | { 8 | name: 'src', 9 | type: 'folder', 10 | children: [ 11 | { 12 | name: 'cdk', 13 | type: 'folder', 14 | children: [ 15 | { name: 'package.json', type: 'file' }, 16 | { name: 'BUILD.bazel', type: 'file' }, 17 | ] 18 | }, 19 | { name: 'material', type: 'folder' } 20 | ] 21 | } 22 | ] 23 | }, 24 | { 25 | name: 'angular', 26 | type: 'folder', 27 | children: [ 28 | { 29 | name: 'packages', 30 | type: 'folder', 31 | children: [ 32 | { name: '.travis.yml', type: 'file' }, 33 | { name: 'firebase.json', type: 'file' } 34 | ] 35 | }, 36 | { name: 'package.json', type: 'file' } 37 | ] 38 | }, 39 | { 40 | name: 'angularjs', 41 | type: 'folder', 42 | children: [ 43 | { name: 'gulpfile.js', type: 'file' }, 44 | { name: 'README.md', type: 'file' } 45 | ] 46 | } 47 | ]; 48 | -------------------------------------------------------------------------------- /schematics/ng-generate/tree/index.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.dev/license 7 | */ 8 | import { Rule } from '@angular-devkit/schematics'; 9 | import { Schema } from './schema'; 10 | /** 11 | * Scaffolds a new tree component. 12 | * Internally it bootstraps the base component schematic 13 | */ 14 | export default function (options: Schema): Rule; 15 | -------------------------------------------------------------------------------- /schematics/ng-generate/tree/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | exports.default = default_1; 11 | const schematics_1 = require("@angular-devkit/schematics"); 12 | const schematics_2 = require("@angular/cdk/schematics"); 13 | /** 14 | * Scaffolds a new tree component. 15 | * Internally it bootstraps the base component schematic 16 | */ 17 | function default_1(options) { 18 | return (0, schematics_1.chain)([ 19 | (0, schematics_2.buildComponent)({ ...options }, { 20 | template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template', 21 | stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template', 22 | }), 23 | options.skipImport ? (0, schematics_1.noop)() : addTreeModulesToModule(options), 24 | ]); 25 | } 26 | /** 27 | * Adds the required modules to the relative module. 28 | */ 29 | function addTreeModulesToModule(options) { 30 | return async (host) => { 31 | const isStandalone = await (0, schematics_2.isStandaloneSchematic)(host, options); 32 | if (!isStandalone) { 33 | const modulePath = (await (0, schematics_2.findModuleFromOptions)(host, options)); 34 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatTreeModule', '@angular/material/tree'); 35 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatIconModule', '@angular/material/icon'); 36 | (0, schematics_2.addModuleImportToModule)(host, modulePath, 'MatButtonModule', '@angular/material/button'); 37 | } 38 | }; 39 | } 40 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/tree/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAeH,4BAaC;AA1BD,2DAAmE;AACnE,wDAKiC;AAGjC;;;GAGG;AACH,mBAAyB,OAAe;IACtC,OAAO,IAAA,kBAAK,EAAC;QACX,IAAA,2BAAc,EACZ,EAAC,GAAG,OAAO,EAAC,EACZ;YACE,QAAQ,EACN,kFAAkF;YACpF,UAAU,EACR,uFAAuF;SAC1F,CACF;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,iBAAI,GAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC;KAC9D,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,sBAAsB,CAAC,OAAe;IAC7C,OAAO,KAAK,EAAE,IAAU,EAAE,EAAE;QAC1B,MAAM,YAAY,GAAG,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEhE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,MAAM,UAAU,GAAG,CAAC,MAAM,IAAA,kCAAqB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAE,CAAC;YACjE,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,wBAAwB,CAAC,CAAC;YACrF,IAAA,oCAAuB,EAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,EAAE,0BAA0B,CAAC,CAAC;QAC3F,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"} -------------------------------------------------------------------------------- /schematics/ng-generate/tree/schema.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.dev/license 7 | */ 8 | import { Schema as ComponentSchema } from '@schematics/angular/component/schema'; 9 | export interface Schema extends ComponentSchema { 10 | } 11 | -------------------------------------------------------------------------------- /schematics/ng-generate/tree/schema.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * @license 4 | * Copyright Google LLC All Rights Reserved. 5 | * 6 | * Use of this source code is governed by an MIT-style license that can be 7 | * found in the LICENSE file at https://angular.dev/license 8 | */ 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | //# sourceMappingURL=schema.js.map -------------------------------------------------------------------------------- /schematics/ng-generate/tree/schema.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"} -------------------------------------------------------------------------------- /schematics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /select/index.d.ts: -------------------------------------------------------------------------------- 1 | export { d as MAT_SELECT_CONFIG, a as MAT_SELECT_SCROLL_STRATEGY, e as MAT_SELECT_SCROLL_STRATEGY_PROVIDER, b as MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, f as MAT_SELECT_TRIGGER, h as MatSelect, g as MatSelectChange, c as MatSelectConfig, M as MatSelectModule, i as MatSelectTrigger } from '../module.d-bebo7gS5.js'; 2 | export { a as MatOptgroup, M as MatOption } from '../option.d-BcvS44bt.js'; 3 | export { M as MatLabel } from '../module.d-D1Ym5Wf2.js'; 4 | export { b as MatError, M as MatFormField, a as MatHint, c as MatPrefix, d as MatSuffix } from '../form-field.d-C6p5uYjG.js'; 5 | import '@angular/core'; 6 | import '@angular/cdk/overlay'; 7 | import '../index.d-DAhBYbjm.js'; 8 | import '../index.d-C5neTPvr.js'; 9 | import '../common-module.d-C8xzHJDr.js'; 10 | import '@angular/cdk/bidi'; 11 | import '../ripple.d-BT30YVLB.js'; 12 | import '@angular/cdk/platform'; 13 | import '../pseudo-checkbox-module.d-BHmTZ10P.js'; 14 | import '@angular/cdk/a11y'; 15 | import '@angular/cdk/collections'; 16 | import '@angular/cdk/scrolling'; 17 | import '@angular/forms'; 18 | import 'rxjs'; 19 | import '../error-options.d-CGdTZUYk.js'; 20 | import '../form-field-control.d-DvB4ZVlf.js'; 21 | import '@angular/cdk/observers'; 22 | import '@angular/cdk/coercion'; 23 | import '../palette.d-BSSFKjO6.js'; 24 | 25 | /** 26 | * The following are all the animations for the mat-select component, with each 27 | * const containing the metadata for one animation. 28 | * 29 | * The values below match the implementation of the AngularJS Material mat-select animation. 30 | * @docs-private 31 | * @deprecated No longer used, will be removed. 32 | * @breaking-change 21.0.0 33 | */ 34 | declare const matSelectAnimations: { 35 | readonly transformPanel: any; 36 | }; 37 | 38 | export { matSelectAnimations }; 39 | -------------------------------------------------------------------------------- /sidenav/_m3-sidenav.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-sidenav. 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | 9 | @return ( 10 | base: ( 11 | sidenav-container-shape: map.get($system, corner-large), 12 | sidenav-container-elevation-shadow: none, 13 | sidenav-container-width: 360px, 14 | sidenav-container-divider-color: transparent, 15 | ), 16 | color: ( 17 | sidenav-container-background-color: map.get($system, surface), 18 | sidenav-container-text-color: map.get($system, on-surface-variant), 19 | sidenav-content-background-color: map.get($system, background), 20 | sidenav-content-text-color: map.get($system, on-background), 21 | sidenav-scrim-color: m3-utils.color-with-opacity(map.get($system, neutral-variant20), 40%), 22 | ), 23 | typography: (), 24 | density: (), 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /snack-bar/_m2-snack-bar.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | @use '../core/tokens/m2-utils'; 3 | @use 'sass:map'; 4 | 5 | // Tokens that can't be configured through Angular Material's current theming API, 6 | // but may be in a future version of the theming API. 7 | @function get-unthemable-tokens() { 8 | @return ( 9 | snack-bar-container-shape: 4px, 10 | ); 11 | } 12 | 13 | // Tokens that can be configured through Angular Material's color theming API. 14 | @function get-color-tokens($theme) { 15 | $is-dark: inspection.get-theme-type($theme) == dark; 16 | $system: m2-utils.get-system($theme); 17 | $surface: inspection.get-theme-color($theme, system, surface); 18 | 19 | @return ( 20 | snack-bar-container-color: map.get($system, inverse-surface), 21 | snack-bar-supporting-text-color: map.get($system, inverse-on-surface), 22 | snack-bar-button-color: 23 | if( 24 | $is-dark, 25 | inspection.get-theme-color($theme, primary, 500), 26 | inspection.get-theme-color($theme, primary, 100) 27 | ) 28 | ); 29 | } 30 | 31 | // Tokens that can be configured through Angular Material's typography theming API. 32 | @function get-typography-tokens($theme) { 33 | @return ( 34 | snack-bar-supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family), 35 | snack-bar-supporting-text-line-height: 36 | inspection.get-theme-typography($theme, body-2, line-height), 37 | snack-bar-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size), 38 | snack-bar-supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), 39 | ); 40 | } 41 | 42 | // Tokens that can be configured through Angular Material's density theming API. 43 | @function get-density-tokens($theme) { 44 | @return (); 45 | } 46 | -------------------------------------------------------------------------------- /snack-bar/_m3-snack-bar.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates custom tokens for the mat-snack-bar. 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | 9 | @return ( 10 | base: ( 11 | snack-bar-container-shape: map.get($system, corner-extra-small), 12 | ), 13 | color: ( 14 | snack-bar-button-color: map.get($system, inverse-primary), 15 | snack-bar-container-color: map.get($system, inverse-surface), 16 | snack-bar-supporting-text-color: map.get($system, inverse-on-surface), 17 | ), 18 | typography: ( 19 | snack-bar-supporting-text-font: map.get($system, body-medium-font), 20 | snack-bar-supporting-text-line-height: map.get($system, body-medium-line-height), 21 | snack-bar-supporting-text-size: map.get($system, body-medium-size), 22 | snack-bar-supporting-text-weight: map.get($system, body-medium-weight), 23 | ), 24 | density: (), 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /sort-direction.d-CF7VUsH-.d.ts: -------------------------------------------------------------------------------- 1 | type SortDirection = 'asc' | 'desc' | ''; 2 | 3 | export type { SortDirection as S }; 4 | -------------------------------------------------------------------------------- /sort/_m2-sort.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | 3 | // Tokens that can't be configured through Angular Material's current theming API, 4 | // but may be in a future version of the theming API. 5 | @function get-unthemable-tokens() { 6 | @return (); 7 | } 8 | 9 | // Tokens that can be configured through Angular Material's color theming API. 10 | @function get-color-tokens($theme) { 11 | @return ( 12 | sort-arrow-color: inspection.get-theme-color($theme, system, on-surface), 13 | ); 14 | } 15 | 16 | // Tokens that can be configured through Angular Material's typography theming API. 17 | @function get-typography-tokens($theme) { 18 | @return (); 19 | } 20 | 21 | // Tokens that can be configured through Angular Material's density theming API. 22 | @function get-density-tokens($theme) { 23 | @return (); 24 | } 25 | -------------------------------------------------------------------------------- /sort/_m3-sort.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/tokens/m3-utils'; 3 | @use '../core/tokens/m3'; 4 | 5 | // The prefix used to generate the fully qualified name for tokens in this file. 6 | $prefix: (mat, sort); 7 | 8 | /// Generates custom tokens for the mat-sort. 9 | @function get-tokens($theme: m3.$sys-theme) { 10 | $system: m3-utils.get-system($theme); 11 | 12 | @return ( 13 | base: (), 14 | color: ( 15 | sort-arrow-color: map.get($system, on-surface), 16 | ), 17 | typography: (), 18 | density: (), 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /timepicker/_m2-timepicker.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | @use '../core/style/elevation'; 3 | 4 | // Tokens that can't be configured through Angular Material's current theming API, 5 | // but may be in a future version of the theming API. 6 | @function get-unthemable-tokens() { 7 | @return ( 8 | timepicker-container-shape: 4px, 9 | timepicker-container-elevation-shadow: elevation.get-box-shadow(8), 10 | ); 11 | } 12 | 13 | // Tokens that can be configured through Angular Material's color theming API. 14 | @function get-color-tokens($theme) { 15 | @return ( 16 | timepicker-container-background-color: inspection.get-theme-color($theme, system, surface) 17 | ); 18 | } 19 | 20 | // Tokens that can be configured through Angular Material's typography theming API. 21 | @function get-typography-tokens($theme) { 22 | @return (); 23 | } 24 | 25 | // Tokens that can be configured through Angular Material's density theming API. 26 | @function get-density-tokens($theme) { 27 | @return (); 28 | } 29 | -------------------------------------------------------------------------------- /timepicker/_m3-timepicker.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/style/elevation'; 3 | @use '../core/tokens/m3-utils'; 4 | @use '../core/tokens/m3'; 5 | 6 | /// Generates custom tokens for the mat-timepicker. 7 | @function get-tokens($theme: m3.$sys-theme) { 8 | $system: m3-utils.get-system($theme); 9 | 10 | @return ( 11 | base: ( 12 | timepicker-container-shape: map.get($system, corner-extra-small), 13 | ), 14 | color: ( 15 | timepicker-container-background-color: map.get($system, surface-container), 16 | timepicker-container-elevation-shadow: elevation.get-box-shadow(2), 17 | ), 18 | typography: (), 19 | density: (), 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /toolbar/_m3-toolbar.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use 'sass:list'; 3 | @use '../core/tokens/m3-utils'; 4 | @use '../core/theming/theming'; 5 | @use '../core/theming/inspection'; 6 | @use '../core/tokens/m3'; 7 | 8 | /// Generates custom tokens for the mat-toolbar. 9 | /// @param {Map} $systems The MDC system tokens 10 | /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values 11 | /// @param {Map} $token-slots Possible token slots 12 | /// @return {Map} A set of custom tokens for the mat-toolbar 13 | @function get-tokens($theme: m3.$sys-theme) { 14 | $system: m3-utils.get-system($theme); 15 | 16 | @return ( 17 | base: (), 18 | color: ( 19 | toolbar-container-background-color: map.get($system, surface), 20 | toolbar-container-text-color: map.get($system, on-surface), 21 | ), 22 | typography: ( 23 | toolbar-title-text-font: map.get($system, title-large-font), 24 | toolbar-title-text-line-height: map.get($system, title-large-line-height), 25 | toolbar-title-text-size: map.get($system, title-large-size), 26 | toolbar-title-text-tracking: map.get($system, title-large-tracking), 27 | toolbar-title-text-weight: map.get($system, title-large-weight), 28 | ), 29 | density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)), 30 | ); 31 | } 32 | 33 | // Tokens that can be configured through Angular Material's density theming API. 34 | @function get-density-tokens($scale) { 35 | $scale: theming.clamp-density($scale, -3); 36 | $index: ($scale * -1) + 1; 37 | 38 | @return ( 39 | toolbar-standard-height: list.nth((64px, 60px, 56px, 52px), $index), 40 | toolbar-mobile-height: list.nth((56px, 52px, 48px, 44px), $index), 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /toolbar/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | /** A set of criteria that can be used to filter a list of `MatToolbarHarness` instances. */ 4 | interface ToolbarHarnessFilters extends BaseHarnessFilters { 5 | /** Only find instances whose text matches the given value. */ 6 | text?: string | RegExp; 7 | } 8 | 9 | /** Selectors for different sections of the mat-toolbar that contain user content. */ 10 | declare enum MatToolbarSection { 11 | ROW = ".mat-toolbar-row" 12 | } 13 | /** Harness for interacting with a standard mat-toolbar in tests. */ 14 | declare class MatToolbarHarness extends ContentContainerComponentHarness { 15 | static hostSelector: string; 16 | private _getRows; 17 | /** 18 | * Gets a `HarnessPredicate` that can be used to search for a `MatToolbarHarness` that meets 19 | * certain criteria. 20 | * @param options Options for filtering which card instances are considered a match. 21 | * @return a `HarnessPredicate` configured with the given options. 22 | */ 23 | static with(options?: ToolbarHarnessFilters): HarnessPredicate; 24 | /** Whether the toolbar has multiple rows. */ 25 | hasMultipleRows(): Promise; 26 | /** Gets all of the toolbar's content as text. */ 27 | private _getText; 28 | /** Gets the text of each row in the toolbar. */ 29 | getRowsAsText(): Promise; 30 | } 31 | 32 | export { MatToolbarHarness, MatToolbarSection }; 33 | export type { ToolbarHarnessFilters }; 34 | -------------------------------------------------------------------------------- /tooltip/_m2-tooltip.scss: -------------------------------------------------------------------------------- 1 | @use '../core/theming/inspection'; 2 | @use '../core/tokens/m2-utils'; 3 | @use 'sass:map'; 4 | 5 | // Tokens that can't be configured through Angular Material's current theming API, 6 | // but may be in a future version of the theming API. 7 | // 8 | // Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. 9 | // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in 10 | // our CSS. 11 | @function get-unthemable-tokens() { 12 | @return ( 13 | tooltip-container-shape: 4px, 14 | tooltip-supporting-text-line-height: 16px, 15 | ); 16 | } 17 | 18 | // Tokens that can be configured through Angular Material's color theming API. 19 | @function get-color-tokens($theme) { 20 | $system: m2-utils.get-system($theme); 21 | 22 | @return ( 23 | tooltip-container-color: map.get($system, inverse-surface), 24 | tooltip-supporting-text-color: map.get($system, inverse-on-surface), 25 | ); 26 | } 27 | 28 | // Tokens that can be configured through Angular Material's typography theming API. 29 | @function get-typography-tokens($theme) { 30 | @return ( 31 | tooltip-supporting-text-font: inspection.get-theme-typography($theme, caption, font-family), 32 | tooltip-supporting-text-size: inspection.get-theme-typography($theme, caption, font-size), 33 | tooltip-supporting-text-weight: inspection.get-theme-typography($theme, caption, font-weight), 34 | tooltip-supporting-text-tracking: 35 | inspection.get-theme-typography($theme, caption, letter-spacing), 36 | ); 37 | } 38 | 39 | // Tokens that can be configured through Angular Material's density theming API. 40 | @function get-density-tokens($theme) { 41 | @return (); 42 | } 43 | -------------------------------------------------------------------------------- /tooltip/_m3-tooltip.scss: -------------------------------------------------------------------------------- 1 | @use '../core/tokens/m3-utils'; 2 | @use 'sass:map'; 3 | @use '../core/tokens/m3'; 4 | 5 | /// Generates the tokens for MDC plain-tooltip 6 | @function get-tokens($theme: m3.$sys-theme) { 7 | $system: m3-utils.get-system($theme); 8 | 9 | @return ( 10 | base: (), 11 | color: ( 12 | tooltip-container-color: map.get($system, inverse-surface), 13 | tooltip-container-shape: map.get($system, corner-extra-small), 14 | tooltip-supporting-text-color: map.get($system, inverse-on-surface), 15 | ), 16 | typography: ( 17 | tooltip-supporting-text-font: map.get($system, body-small-font), 18 | tooltip-supporting-text-line-height: map.get($system, body-small-line-height), 19 | tooltip-supporting-text-size: map.get($system, body-small-size), 20 | tooltip-supporting-text-tracking: map.get($system, body-small-tracking), 21 | tooltip-supporting-text-weight: map.get($system, body-small-weight) 22 | ), 23 | density: (), 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /tooltip/index.d.ts: -------------------------------------------------------------------------------- 1 | export { h as MAT_TOOLTIP_DEFAULT_OPTIONS, f as MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY, c as MAT_TOOLTIP_SCROLL_STRATEGY, d as MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY, e as MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, k as MatTooltip, i as MatTooltipDefaultOptions, M as MatTooltipModule, S as SCROLL_THROTTLE_MS, j as TOOLTIP_PANEL_CLASS, l as TooltipComponent, T as TooltipPosition, a as TooltipTouchGestures, b as TooltipVisibility, g as getMatTooltipInvalidPositionError } from '../module.d-m-qXd3m8.js'; 2 | import '@angular/core'; 3 | import '@angular/cdk/a11y'; 4 | import '@angular/cdk/overlay'; 5 | import '../common-module.d-C8xzHJDr.js'; 6 | import '@angular/cdk/bidi'; 7 | import '@angular/cdk/coercion'; 8 | import 'rxjs'; 9 | import '@angular/cdk/scrolling'; 10 | 11 | /** 12 | * Animations used by MatTooltip. 13 | * @docs-private 14 | * @deprecated No longer being used, to be removed. 15 | * @breaking-change 21.0.0 16 | */ 17 | declare const matTooltipAnimations: { 18 | readonly tooltipState: any; 19 | }; 20 | 21 | export { matTooltipAnimations }; 22 | -------------------------------------------------------------------------------- /tooltip/testing/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing'; 2 | 3 | /** A set of criteria that can be used to filter a list of `MatTooltipHarness` instances. */ 4 | interface TooltipHarnessFilters extends BaseHarnessFilters { 5 | } 6 | 7 | /** Harness for interacting with a mat-tooltip in tests. */ 8 | declare class MatTooltipHarness extends ComponentHarness { 9 | static hostSelector: string; 10 | private _optionalPanel; 11 | private _hiddenClass; 12 | private _disabledClass; 13 | private _showAnimationName; 14 | private _hideAnimationName; 15 | /** 16 | * Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific 17 | * attributes. 18 | * @param options Options for narrowing the search. 19 | * @return a `HarnessPredicate` configured with the given options. 20 | */ 21 | static with(this: ComponentHarnessConstructor, options?: TooltipHarnessFilters): HarnessPredicate; 22 | /** Shows the tooltip. */ 23 | show(): Promise; 24 | /** Hides the tooltip. */ 25 | hide(): Promise; 26 | /** Gets whether the tooltip is open. */ 27 | isOpen(): Promise; 28 | /** Gets whether the tooltip is disabled */ 29 | isDisabled(): Promise; 30 | /** Gets a promise for the tooltip panel's text. */ 31 | getTooltipText(): Promise; 32 | } 33 | 34 | export { MatTooltipHarness }; 35 | export type { TooltipHarnessFilters }; 36 | -------------------------------------------------------------------------------- /tree/_m2-tree.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '../core/theming/theming'; 3 | @use '../core/theming/inspection'; 4 | 5 | // Tokens that can't be configured through Angular Material's current theming API, 6 | // but may be in a future version of the theming API. 7 | @function get-unthemable-tokens() { 8 | @return (); 9 | } 10 | 11 | // Tokens that can be configured through Angular Material's color theming API. 12 | @function get-color-tokens($theme) { 13 | @return ( 14 | tree-container-background-color: inspection.get-theme-color($theme, system, surface), 15 | tree-node-text-color: inspection.get-theme-color($theme, system, on-surface), 16 | ); 17 | } 18 | 19 | // Tokens that can be configured through Angular Material's typography theming API. 20 | @function get-typography-tokens($theme) { 21 | @return ( 22 | tree-node-text-font: inspection.get-theme-typography($theme, body-2, font-family), 23 | tree-node-text-size: inspection.get-theme-typography($theme, body-2, font-size), 24 | tree-node-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), 25 | 26 | // TODO(crisbeto): provide tokens for line height and letter spacing to match other components. 27 | ); 28 | } 29 | 30 | // Tokens that can be configured through Angular Material's density theming API. 31 | @function get-density-tokens($theme) { 32 | $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4); 33 | $min-height-scale: ( 34 | 0: 48px, 35 | -1: 44px, 36 | -2: 40px, 37 | -3: 36px, 38 | -4: 28px, 39 | ); 40 | 41 | @return ( 42 | tree-node-min-height: map.get($min-height-scale, $density-scale) 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /tree/_m3-tree.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use 'sass:list'; 3 | @use '../core/tokens/m3-utils'; 4 | @use '../core/theming/theming'; 5 | @use '../core/theming/inspection'; 6 | @use '../core/tokens/m3'; 7 | 8 | // The prefix used to generate the fully qualified name for tokens in this file. 9 | $prefix: (mat, tree); 10 | 11 | /// Generates custom tokens for the mat-tree. 12 | @function get-tokens($theme: m3.$sys-theme) { 13 | $system: m3-utils.get-system($theme); 14 | 15 | @return ( 16 | base: (), 17 | color: ( 18 | tree-container-background-color: map.get($system, surface), 19 | tree-node-text-color: map.get($system, on-surface), 20 | ), 21 | typography: ( 22 | tree-node-text-font: map.get($system, body-large-font), 23 | tree-node-text-size: map.get($system, body-large-size), 24 | tree-node-text-weight: map.get($system, body-large-weight), 25 | ), 26 | density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)), 27 | ); 28 | } 29 | 30 | // Tokens that can be configured through Angular Material's density theming API. 31 | @function get-density-tokens($scale) { 32 | $scale: theming.clamp-density($scale, -4); 33 | $index: ($scale * -1) + 1; 34 | 35 | @return ( 36 | tree-node-min-height: list.nth((48px, 44px, 40px, 36px, 28px), $index), 37 | ); 38 | } 39 | --------------------------------------------------------------------------------