diff --git a/LICENSE b/LICENSE index 7da427f850..0f2b89697e 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License -Copyright (c) 2024 Google LLC. +Copyright (c) 2025 Google LLC. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/docs-content/api-docs/cdk-menu.html b/docs-content/api-docs/cdk-menu.html index 3181681659..8eedef51be 100755 --- a/docs-content/api-docs/cdk-menu.html +++ b/docs-content/api-docs/cdk-menu.html @@ -142,7 +142,7 @@
- id: `${nextId++}`
+ id: inject(_IdGenerator).getId('cdk-menu-stack-')
The ID of this menu stack.
@@ -638,7 +638,7 @@
- id: `cdk-menu-${nextId++}`
+ id: string
The id of the menu's host element.
@@ -828,7 +828,7 @@
- id: `cdk-menu-${nextId++}`
+ id: string
The id of the menu's host element.
@@ -1024,7 +1024,7 @@
- id: `cdk-menu-${nextId++}`
+ id: string
The id of the menu's host element.
diff --git a/docs-content/api-docs/material-autocomplete.html b/docs-content/api-docs/material-autocomplete.html index c67e2a4793..d422e3d803 100755 --- a/docs-content/api-docs/material-autocomplete.html +++ b/docs-content/api-docs/material-autocomplete.html @@ -724,7 +724,7 @@Wheter icon indicators should be hidden for single-selection.
+Whether icon indicators should be hidden for single-selection.
Theme color of the badge. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+ height: string
+
Height for the bottom sheet.
+
+ maxHeight: number | string
+
Maximum height for the bottom sheet. If a number is provided, assumes pixel units.
+
+ minHeight: number | string
+
Minimum height for the bottom sheet. If a number is provided, assumes pixel units.
+
panelClass: string | string[]
diff --git a/docs-content/api-docs/material-button-toggle.html b/docs-content/api-docs/material-button-toggle.html
index c0bab07634..acd162bbdd 100755
--- a/docs-content/api-docs/material-button-toggle.html
+++ b/docs-content/api-docs/material-button-toggle.html
@@ -615,7 +615,7 @@
Whetehr icon indicators should be hidden for single-selection button toggle groups.
+Whether icon indicators should be hidden for single-selection button toggle groups.
Theme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants @@ -746,9 +746,9 @@Theme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants @@ -1082,9 +1082,9 @@Theme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the button. This API is supported in M2 themes only, it has -no effect in M3 themes.
+no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsDefault theme color of the button. This API is supported in M2 themes -only, it has no effect in M3 themes.
+only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants. diff --git a/docs-content/api-docs/material-checkbox.html b/docs-content/api-docs/material-checkbox.html index 82e1a2e34b..527acbe881 100755 --- a/docs-content/api-docs/material-checkbox.html +++ b/docs-content/api-docs/material-checkbox.html @@ -155,9 +155,9 @@Theme color of the checkbox. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsDefault theme color of the checkbox. This API is supported in M2 themes -only, it has no effect in M3 themes.
+only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants diff --git a/docs-content/api-docs/material-chips.html b/docs-content/api-docs/material-chips.html index a180826937..9ad24ff4ae 100755 --- a/docs-content/api-docs/material-chips.html +++ b/docs-content/api-docs/material-chips.html @@ -92,9 +92,9 @@Theme color of the chip. This API is supported in M2 themes only, it has no -effect in M3 themes.
+effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the chip. This API is supported in M2 themes only, it has no -effect in M3 themes.
+effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the chip. This API is supported in M2 themes only, it has no -effect in M3 themes.
+effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsWheter icon indicators should be hidden for single-selection.
+Whether icon indicators should be hidden for single-selection.
+ comparisonDateLabel: 'Comparison range'
+
A label for the Comparison date of a range of dates (used by screen readers).
+
nextMonthLabel: 'Next month'
@@ -848,9 +861,9 @@
Theme color of the datepicker's calendar. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the datepicker's calendar. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
- id: `mat-date-range-input-${nextUniqueId++}`
+ id: string
Unique ID for the group.
@@ -4017,9 +4030,9 @@Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the form field. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsDefault theme color of the form field. This API is supported in M2 themes only, it has no -effect in M3 themes.
+effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants diff --git a/docs-content/api-docs/material-icon.html b/docs-content/api-docs/material-icon.html index ad74158de6..3238d143c2 100755 --- a/docs-content/api-docs/material-icon.html +++ b/docs-content/api-docs/material-icon.html @@ -1102,9 +1102,9 @@Theme color of the icon. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the icon. This API is supported in M2 themes only, it -has no effect in M3 themes.
+has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants diff --git a/docs-content/api-docs/material-list.html b/docs-content/api-docs/material-list.html index 8e06da266c..18ccfda24b 100755 --- a/docs-content/api-docs/material-list.html +++ b/docs-content/api-docs/material-list.html @@ -56,9 +56,10 @@Theme color of the list option. This sets the color of the checkbox/radio. -This API is supported in M2 themes only, it has no effect in M3 themes.
+This API is supported in M2 themes only, it has no effect in M3 themes. For color customization +in M3, see https://material.angular.io/components/list/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variantsTheme color of the selection list. This sets the checkbox color for all list options. This API is supported in M2 themes only, it has no effect in -M3 themes.
+M3 themes. For color customization in M3, see https://material.angular.io/components/list/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants.
+https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants @@ -930,7 +931,7 @@Wheter icon indicators should be hidden for single-selection.
+Whether icon indicators should be hidden for single-selection.
- panelId: `mat-menu-panel-${menuPanelUid++}`
+ panelId: string
setElevation + |
+ Deprecated
+ setElevation
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
- Sets the menu panel elevation. - - |
- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Parameters | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- depth + _depthnumber
|
- Number of parent menus that come before the menu. - + |
Theme color of the underlying form controls. This API is supported in M2 -themes only,it has no effect in M3 themes. +themes only,it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/paginator/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
diff --git a/docs-content/api-docs/material-progress-bar.html b/docs-content/api-docs/material-progress-bar.html
index 7889f38050..5138dd3af9 100755
--- a/docs-content/api-docs/material-progress-bar.html
+++ b/docs-content/api-docs/material-progress-bar.html
@@ -70,9 +70,9 @@ Theme color of the progress bar. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -191,9 +191,9 @@ Theme color of the radio buttons in the group. This API is supported in M2 -themes only, it has no effect in M3 themes. +themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -275,9 +275,9 @@ Theme color of the radio button. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -570,9 +570,9 @@ ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
@Input({ transform: booleanAttribute })
+
+ |
+ By default selecting an option with a |
+||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
@Input() @@ -703,6 +720,20 @@
+
+ Whether nullable options can be selected by default.
+See | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Wheter icon indicators should be hidden for single-selection. + | Whether icon indicators should be hidden for single-selection. |
Theme color of the slide toggle. This API is supported in M2 themes only, -it has no effect in M3 themes. +it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slide-toggle/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -674,9 +674,9 @@ Theme color of the slider. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slider/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
diff --git a/docs-content/api-docs/material-stepper.html b/docs-content/api-docs/material-stepper.html
index 3a839a4cd7..d3a57e0e15 100755
--- a/docs-content/api-docs/material-stepper.html
+++ b/docs-content/api-docs/material-stepper.html
@@ -216,9 +216,9 @@ Theme color for the particular step. This API is supported in M2 themes -only, it has no effect in M3 themes. +only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -549,9 +549,9 @@ Theme color for all of the steps in stepper. This API is supported in M2 -themes only, it has no effect in M3 themes. +themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -916,9 +916,9 @@ Theme color of the step header. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
diff --git a/docs-content/api-docs/material-tabs.html b/docs-content/api-docs/material-tabs.html
index b31664a06d..549883bb24 100755
--- a/docs-content/api-docs/material-tabs.html
+++ b/docs-content/api-docs/material-tabs.html
@@ -546,9 +546,9 @@ Theme color of the tab group. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -754,9 +754,9 @@ Theme color of the background of the tab group. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -887,9 +887,9 @@ Theme color of the background of the tab nav. This API is supported in M2 themes only, it -has no effect in M3 themes. +has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -904,9 +904,9 @@ Theme color of the nav bar. This API is supported in M2 themes only, it has -no effect in M3 themes. +no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@@ -1124,7 +1124,7 @@
@Input()
- |
Unique id for the tab panel. @@ -1224,7 +1224,7 @@
@Input()
- Unique id for the tab. diff --git a/docs-content/api-docs/material-timepicker.html b/docs-content/api-docs/material-timepicker.html index 62f02a4cc0..062f469d0f 100755 --- a/docs-content/api-docs/material-timepicker.html +++ b/docs-content/api-docs/material-timepicker.html @@ -116,6 +116,19 @@
+ |
+
+ |
+Whether the timepicker is currently disabled. + |
- Unique ID of the timepicker's panel @@ -308,19 +321,6 @@
-
- Whether the input should be disabled through the template. - |
|
Theme color of the toolbar. This API is supported in M2 themes only, it has -no effect in M3 themes. +no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/toolbar/styling.For information on applying color variants in M3, see -https://material.angular.io/guide/theming#using-component-color-variants. +https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
Argument | -Description | -
---|---|
$theme |
-The M3 theme to read from. | -
$palette |
-The name of the palette to read from. This can be any of the standard M3 palettes:
|
-
$hue |
-The hue number to read within the palette. This can be any of the standard hues:
|
-
To read a color role, use get-theme-color
with two
-arguments:
Argument | -Description | -
---|---|
$theme |
-The M3 theme to read from. | -
$role |
-The name of the color role. This can be any of the M3 color roles:
|
-
To read the theme type (light
or dark
), call get-theme-type
with a single argument:
Argument | -Description | -
---|---|
$theme |
-The M3 theme to read from. | -
To read a typescale property from the
-theme, call get-theme-typography
with three arguments:
Argument | -Description | -
---|---|
$theme |
-The M3 theme to read from. | -
$level |
-The typescale level. This can be any of the M3 typescale levels:
|
-
$property |
-The CSS font property to get a value for. This can be one of the following CSS properties:
|
-
To read the density scale (0
, -1
, -2
, -3
, -4
, or -5
) from the theme, call
-get-theme-density
with a single argument:
Argument | -Description | -
---|---|
$theme |
-The M3 theme to read from. | -
Depending on how a theme was created, it may not have configuration data for all theming dimensions
-(base, color, typography, density). You can check if a theme has a configuration for a particular
-dimension by calling the theme-has
Sass function, passing the theme and the dimension to check.
See the below example of checking the configured dimensions for a theme:
-$theme: mat.define-theme(...);
-
-$has-base: mat.theme-has($theme, base);
-$has-color: mat.theme-has($theme, color);
-$has-typography: mat.theme-has($theme, typography);
-$has-density: mat.theme-has($theme, density);
-
-
- Angular Material components each have a Sass file that defines mixins for customizing
-that component's color and typography. For example, MatButton
has mixins for button-color
and
-button-typography
. Each mixin emits all color and typography styles for that component,
-respectively.
You can mirror this structure in your components by defining your own mixins. These mixins -should accept an Angular Material theme, from which they can read color and typography values. You -can then include these mixins in your application along with Angular Material's own mixins.
- -To illustrate participation in Angular Material's theming system, we can look at an example of a
-custom carousel component. The carousel starts with a single file, carousel.scss
, that contains
-structural, color, and typography styles. This file is included in the styleUrls
of the component.
// carousel.scss
-
-.my-carousel {
- display: flex;
- font-family: serif;
-}
-
-.my-carousel-button {
- border-radius: 50%;
- color: blue;
-}
-
-
- To change this file to participate in Angular Material's theming system, we split the styles into
-two files, with the color and typography styles moved into mixins. By convention, the new file
-name ends with -theme
. Additionally, the file starts with an underscore (_
), indicating that
-this is a Sass partial file. See the Sass documentation for more information about
-partial files.
// carousel.scss
-
-.my-carousel {
- display: flex;
-}
-
-.my-carousel-button {
- border-radius: 50%;
-}
-
-// _carousel-theme.scss
-
-@mixin color($theme) {
- .my-carousel-button {
- color: blue;
- }
-}
-
-@mixin typography($theme) {
- .my-carousel {
- font-family: serif;
- }
-}
-
-
- Now that theme theme-based styles reside in mixins, we can extract the values we need from the -theme passed into the mixins.
-// _carousel-theme.scss
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin color($theme) {
- .my-carousel-button {
- // Read the 50 hue from the primary color palette.
- color: mat.get-theme-color($theme, primary, 50);
- }
-}
-
-@mixin typography($theme) {
- .my-carousel {
- // Get the large headline font from the theme.
- font: mat.get-theme-typography($theme, headline-large, font);
- }
-}
-
-
- For convenience, we can add a theme
mixin that includes both color and typography.
-This theme mixin should only emit the styles for each color and typography, respectively, if they
-have a config specified.
// _carousel-theme.scss
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin color($theme) {
- .my-carousel-button {
- // Read the 50 hue from the primary color palette.
- color: mat.get-theme-color($theme, primary, 50);
- }
-}
-
-@mixin typography($theme) {
- .my-carousel {
- // Get the large headline font from the theme.
- font: mat.get-theme-typography($theme, headline-large, font);
- }
-}
-
-@mixin theme($theme) {
- @if mat.theme-has($theme, color) {
- @include color($theme);
- }
-
- @if mat.theme-has($theme, typography) {
- @include typography($theme);
- }
-}
-
-
- Now that you've defined the carousel component's theme mixin, you can include this mixin along with -the other theme mixins in your application.
-@use '@angular/material' as mat;
-@use './path/to/carousel-theme' as carousel;
-
-$my-theme: mat.define-theme((
- color: (
- theme-type: light,
- primary: mat.$red-palette,
- ),
- typography: (
- brand-family: 'Comic Sans',
- bold-weight: 900,
- ),
-));
-
-html {
- @include mat.all-component-themes($my-theme);
- @include carousel.theme($my-theme);
-}
-
-Angular Material lets you customize the appearance of your components by +defining a custom theme. Angular Material’s theming system is inspired by +Google’s Material Design.
+This guide describes how to set up theming for your application using +Sass APIs introduced in Angular Material v19.
+If your application depends on a version before v19, or if your application's
+theme is applied using a theme config created with mat.define-theme
,
+mat.define-light-theme
, or mat.define-dark-theme
,
+then you can refer to the theming guides at
+v18.material.angular.io/guides.
Angular Material's theming system lets you customize base, color, typography, and density styles for components in your application. The theming system is based on Google's -Material Design 3 specification which is the latest -iteration of Google's open-source design system, Material Design.
-For Material 2 specific documentation and how to update to Material 3, see the -Material 2 guide.
-This document describes the concepts and APIs for customizing colors. For typography customization, -see Angular Material Typography. For guidance on building components to be -customizable with this system, see Theming your own components.
- -Angular Material's theming APIs are built with Sass. This document assumes -familiarity with CSS and Sass basics, including variables, functions, and mixins.
+Your application needs to have a Sass theme file
+that includes Angular Material’s mat.theme
mixin.
The mat.theme
mixin takes a map that defines color, typography, and density
+values and outputs a set of CSS variables that control the component appearance
+and layout. These variables are based on
+Design Tokens.
The color variables are defined using the CSS color function +light-dark +so that your theme can switch between light and dark mode using the CSS property +color-scheme.
+The following example theme file applies a violet color palette, Roboto font,
+and standard density to the application’s Angular Material components. It
+targets the html
selector to ensure the CSS variables are applied across the
+entire application. The color-scheme
is explicitly set to light dark
so that
+the end user's system preferences are used to determine whether the application
+appears in light or dark mode.
@use '@angular/material' as mat;
+
+html {
+ color-scheme: light dark;
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0
+ ));
+}
+
+You can use the following styles to apply the theme’s surface background and +on-surface text colors as a default across your application:
+body {
+ background: var(--mat-sys-surface);
+ color: var(--mat-sys-on-surface);
+}
+
+The mat.theme
mixin will only declare CSS variables for the categories
+included in the input. For example, if typography
is not defined, then
+typography CSS variables will not be included in the output.
A theme file is a Sass file that calls Angular Material Sass mixins to output color, -typography, and density CSS styles.
- -The theme
‘s color determines the component color styles, such as the fill
+color of checkboxes or ripple color of buttons. It depends on color palettes of
+varying tones to build a color scheme. Check out the
+Palettes
+section to learn about available prebuilt palettes, or how to create custom
+palettes.
You can set the color in one of two ways: as a single color palette, or as a +color map.
+ +Angular Material represents a theme as a Sass map that contains your color, typography, and density -choices, as well as some base design system settings.
-The simplest usage of the API, $theme: mat.define-theme()
defines a theme with default values.
-However, define-theme
allows you to configure the appearance of your
-Angular Material app along three theming dimensions: color, typography, and density, by passing a
-theme configuration object. The configuration object may have the following properties.
Property | -Description | -
---|---|
color |
-[Optional] A map of color options. See customizing your colors for details. | -
typography |
-[Optional] A map of typography options. See customizing your typography for details. | -
density |
-[Optional] A map of density options. See customizing your density for details. | -
@use '@angular/material' as mat;
-
-$theme: mat.define-theme((
- color: (
- theme-type: dark,
- primary: mat.$violet-palette,
- ),
- typography: (
- brand-family: 'Comic Sans',
- bold-weight: 900
- ),
- density: (
- scale: -1
- )
-));
-
-
- If you provide a single color palette, Angular Material uses its values for the
+theme’s primary, secondary, and tertiary colors. The CSS color values will be
+defined using light-dark
CSS color function. Your application styles should
+define an explicit value declaration for the color-scheme
CSS property.
The following aspects of your app's colors can be customized via the color
property of the theme
-configuration object (see the M3 color spec to learn
-more about these terms):
Color Property | -Description | -
---|---|
theme-type |
-[Optional] Specifies the type of theme, light or dark . The choice of a light versus a dark theme determines the background and foreground colors used throughout the components. |
-
primary |
-[Optional] Specifies the palette to use for the app's primary color palette. (Note: the secondary, neutral, and neutral-variant palettes described in the M3 spec will be automatically chosen based on your primary palette, to ensure a harmonious color combination). | -
tertiary |
-[Optional] Specifies the palette to use for the app's tertiary color palette. | -
Angular Material includes several pre-built theme CSS files, each with different palettes selected. -You can use one of these pre-built themes if you don't want to define a custom theme with Sass.
-Theme | -Light or dark? | -Specification | -
---|---|---|
azure-blue.css |
-Light | -Material Design 3 | -
rose-red.css |
-Light | -Material Design 3 | -
cyan-orange.css |
-Dark | -Material Design 3 | -
magenta-violet.css |
-Dark | -Material Design 3 | -
deeppurple-amber.css |
-Light | -Material Design 2 | -
indigo-pink.css |
-Light | -Material Design 2 | -
pink-bluegrey.css |
-Dark | -Material Design 2 | -
purple-green.css |
-Dark | -Material Design 2 | -
These files include the CSS for every component in the library. To include only the CSS for a subset -of components, you must use the Sass API detailed in Defining a theme above. -You can reference the source code for these pre-built themes to see examples of complete theme definitions.
- -The pre-built themes are based on a set of pre-defined palettes that can be used with the primary
-and tertiary
options:
If you provide a color map, then the tertiary color palette can be configured +separately from the primary palette. The tertiary palette can be used to add a +distinct accent color to some components.
+You can also set the theme-type
to determine the color values are defined:
$red-palette
$green-palette
$blue-palette
$yellow-palette
$cyan-palette
$magenta-palette
$orange-palette
$chartreuse-palette
$spring-green-palette
$azure-palette
$violet-palette
$rose-palette
color-scheme
- include both light and dark colors using the light-dark
+ CSS color functionlight
- only define the light color valuesdark
- only define the dark color valuesAlternatively, custom palettes can be generated with a custom color with the following schematic:
-ng generate @angular/material:theme-color
-
-This schematic integrates with Material Color Utilities to build palettes based on a single color. Optionally you can provide -additional custom colors for the secondary, tertiary, and neutral palettes.
-The output of the schematic is a new Sass file that exports the palettes that can be provided to -a theme definition.
-@use '@angular/material' as mat;
-@use './path/to/my-theme'; // location of generated file
-
-html {
- @include mat.theme(
- color: (
- primary: my-theme.$primary-palette,
- tertiary: my-theme.$tertiary-palette,
+The light-dark
CSS color function is
+widely available for all major
+browsers. However, if your application must support older browser versions or
+non-major browsers, you should explicitly set the theme-type
to either light
+or dark
.
+The following example theme file applies a violet primary color and orange
+tertiary color. The theme-type is set to light
which means that only the light
+color values will be set for the application. The typography is set to Roboto
+with a standard density setting.
+@use '@angular/material' as mat;
+
+html {
+ @include mat.theme((
+ color: (
+ primary: mat.$violet-palette,
+ tertiary: mat.$orange-palette,
+ theme-type: light,
),
- typography: Roboto,
- density: 0,
- )
+ typography: Roboto,
+ density: 0
+ ));
}
-You can also optionally generate high contrast override mixins for your custom theme that allows for
-a better accessibility experience. Learn more about this schematic in its documentation.
-
-
-
-
- Customizing your typography
-
- The following aspects of your app's typography can be customized via the typography
property of
-the theme configuration object.
-
-
-
-Typography Property
-Description
-
-
-
-plain-family
-[Optional] The font family to use for plain text, such as body text.
-
-
-brand-family
-[Optional] The font family to use for brand text, such as headlines.
-
-
-bold-weight
-[Optional] The font weight to use for bold text.
-
-
-medium-weight
-[Optional] The font weight to use for medium text.
-
-
-regular-weight
-[Optional] The font weight to use for regular text.
-
-
-See the typography guide for more
-information.
-
-
-
- Customizing your density
+
+
+ Typography
+
+
The mat.theme
‘s typography determines the text styles used in components,
+such as the font for dialog titles or menu list items.
+You can set the typography in one of two ways: as a single font family value, or
+as a typography map.
+
+
+
+ Single Font Family Value
- The following aspects of your app's density can be customized via the density
property of the
-theme configuration object:
-
-
-
-Density Property
-Description
-
-
-
-scale
-[Optional] The level of compactness of the components in your app, from 0
(most space) to -5
(most compact).
-
-
-
-
-
- Applying a theme to components
+
If you provide a font family, Angular Material uses it for all the text in its
+components. The font weights used in components are set to 700 for bold text,
+500 for medium text, and 400 for regular text.
+
+
+
+ Typography Map
- The core-theme
Sass mixin emits prerequisite styles for common features used by multiple
-components, such as ripples. This mixin must be included once per theme.
-Each Angular Material component has a mixin for each theming dimension: base,
-color, typography, and density. For example, MatButton
declares button-base
, button-color
,
-button-typography
, and button-density
. Each mixin emits only the styles corresponding to that
-dimension of customization.
-Additionally, each component has a "theme" mixin that emits all styles that depend on the theme
-config. This theme mixin only emits color, typography, or density styles if you provided a
-corresponding configuration to define-theme
, and it always emits the base styles.
-Once you've created your theme, you can apply it using the same -theme
, -color
, -typography
, -density
, and -base
mixins.
-For M3 themes, these mixins make some guarantees about the emitted styles.
-
-- The mixins emit properties under the exact selector you specify. They will not add to the
-selector or increase the specificity of the rule.
-- The mixins only emit
-CSS custom property declarations
-(e.g.
--some-prop: xyz
). They do not emit any standard CSS properties such as color
,
-width
, etc.
-
-Apply the styles for each of the components used in your application by including each of their
-theme Sass mixins.
-@use '@angular/material' as mat;
-
-$my-theme: mat.define-theme((
- color: (
- theme-type: light,
- primary: mat.$violet-palette,
- ),
-));
-
-html {
- // Emit theme-dependent styles for common features used across multiple components.
- @include mat.core-theme($my-theme);
-
- // Emit styles for MatButton based on `$my-theme`. Because the configuration
- // passed to `define-theme` omits typography, `button-theme` will not
- // emit any typography styles.
- @include mat.button-theme($my-theme);
-
- // Include the theme mixins for other components you use here.
-}
-
-As an alternative to listing every component that your application uses, Angular Material offers
-Sass mixins that includes styles for all components in the library: all-component-bases
,
-all-component-colors
, all-component-typographies
, all-component-densities
, and
-all-component-themes
. These mixins behave the same as individual component mixins, except they
-emit styles for core-theme
and all 35+ components in Angular Material. Unless your application
-uses every single component, this will produce unnecessary CSS.
-@use '@angular/material' as mat;
-
-$my-theme: mat.define-theme((
- color: (
- theme-type: light,
- primary: mat.$violet-palette,
- ),
-));
-
-html {
- @include mat.all-component-themes($my-theme);
+ If you provide a typography map, then distinct font families are set for plain
+and brand text. The plain font family is typically used for most of the
+application’s text, while the brand font family is typically used for headings
+and titles.
+The typography map also sets specific weights for bold, medium, and regular
+text.
+The following example theme file applies the Roboto font family to plain text
+and the Open Sans font family to brand text. It specifies that bold weight is
+900, medium weight is 500, and regular weight is 300. The color scheme uses the
+violet color palette with a standard density.
+@use '@angular/material' as mat;
+
+html {
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: (
+ plain-family: Roboto,
+ brand-family: Open Sans,
+ bold-weight: 900,
+ medium-weight: 500,
+ regular-weight: 300,
+ ),
+ density: 0,
+ ));
}
-To include the emitted styles in your application, add your theme file to the styles
array of
-your project's angular.json
file.
-
-
- Theming dimensions
-
- Angular Material themes are divided along four dimensions: base, color, typography, and density.
-
-
-
- Base
-
- Common base styles for the design system. These styles don't change based on your configured
-colors, typography, or density, so they only need to be included once per application. These
-mixins include structural styles such as border-radius, border-width, etc. All components have a base
-mixin that can be used to include its base styles. (For example,
-@include mat.checkbox-base($theme)
)
-
-
-
- Color
-
- Styles related to the colors in your application. These style should be included at least once in
-your application. Depending on your needs, you may need to include these styles multiple times
-with different configurations. (For example, if your app supports light and dark theme colors.)
-All components have a color mixin that can be used to include its color styles. (For example,
-@include mat.checkbox-color($theme)
)
-
-
-
- Typography
-
- Styles related to the fonts used in your application, including the font family, size, weight,
-line-height, and letter-spacing. These style should be included at least once in your application.
-Depending on your needs, you may need to include these styles multiple times with different
-configurations. (For example, if your app supports reading content in either a serif or sans-serif
-font.) All components have a typography mixin that can be used to include its typography
-styles. (For example, @include mat.checkbox-typography($theme)
)
-
-
+
- Density
-
- Styles related to the size and spacing of elements in your application. These style should be
-included at least once in your application. Depending on your needs, you may need to include these
-styles multiple times with different configurations. (For example, if your app supports both a
-normal and compact mode). All components have a density mixin that can be used to include its
-density styles. (For example, @include mat.checkbox-density($theme)
)
-
-
-
- Theme mixin
-
- All components also support a theme mixin that can be used to include the component's styles for all
-theme dimensions at once. (For example, @include mat.checkbox-theme($theme)
).
-The recommended approach is to rely on the theme
mixins to lay down your base styles, and if
-needed use the single dimension mixins to override particular aspects for parts of your app (see the
-section on Multiple themes in one file.)
-
-
-
- Defining multiple themes
+ Density
- Using the Sass API described in Defining a theme, you can also define
-multiple themes by repeating the API calls multiple times. You can do this either in the same
-theme file or in separate theme files.
-
-
-
- Multiple themes in one file
-
- Defining multiple themes in a single file allows you to support multiple themes without having to
-manage loading of multiple CSS assets. The downside, however, is that your CSS will include more
-styles than necessary.
-To control which theme applies when, @include
the mixins only within a context specified via
-CSS rule declaration. See the documentation for Sass mixins for further background.
-@use '@angular/material' as mat;
-
-// Define a dark theme
-$dark-theme: mat.define-theme((
- color: (
- theme-type: dark,
- primary: mat.$violet-palette,
- ),
-));
-
-// Define a light theme
-$light-theme: mat.define-theme((
- color: (
- theme-type: light,
- primary: mat.$violet-palette,
- ),
-));
-
-html {
- // Apply the dark theme by default
- @include mat.core-theme($dark-theme);
- @include mat.button-theme($dark-theme);
-
- // Apply the light theme only when the user prefers light themes.
- @media (prefers-color-scheme: light) {
- // Use the `-color` mixins to only apply color styles without reapplying the same
- // typography and density styles.
- @include mat.core-color($light-theme);
- @include mat.button-color($light-theme);
- }
+ The mat.theme
‘s density value determines the spacing within components, such
+as how much padding is used around a button’s text or the height of form fields.
+The density value accepts integers from 0 to -5, where 0 is the default spacing
+and -5 is the most dense and compact layout. Each whole number step down (-1,
+-2, etc.) reduces the affected sizes by 4px, down to the minimum size necessary
+for a component to render itself coherently.
+The following example theme file has a density setting of -2 which causes most
+components to include less whitespace in their layout. The color scheme uses the
+violet color palette and applies Roboto as the font-family.
+@use '@angular/material' as mat;
+
+html {
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: -2,
+ ));
}
+Setting the density below 0 can reduce accessibility and make navigation harder
+for users of assistive technology.
+Density customizations do not affect components that appear in task-based or
+pop-up contexts, such as the date picker. The Material Design density guidance
+explicitly discourages changes to density for such interactions because they
+don't compete for space in the application's layout.
+
+
+
+ Color Palettes
+
+ A color palette is a set of similar colors with different hues ranging from
+light to dark. The Angular Material theme uses color palettes to create a color
+scheme to communicate an application’s hierarchy, state, and brand.
-
-
- Multiple themes across separate files
-
- You can define multiple themes in separate files by creating multiple theme files per
-Defining a theme, adding each of the files to the styles
of your
-angular.json
. However, you must additionally set the inject
option for each of these files to
-false
in order to prevent all the theme files from being loaded at the same time. When setting
-this property to false
, your application becomes responsible for manually loading the desired
-file. The approach for this loading depends on your application.
-
-
-
- Application background color
+
+
+ Prebuilt Color Palettes
-
By default, Angular Material does not apply any styles to your DOM outside
-its own components. If you want to set your application's background color
-to match the components' theme, you can either:
-
-- Put your application's main content inside
mat-sidenav-container
, assuming you're using
-MatSidenav
, or
-- Apply the
mat-app-background
CSS class to your main content root element (typically body
).
-
-
-
-
- Granular customizations with CSS custom properties
+
Angular Material provides twelve prebuilt color palettes that can be used for
+your application’s theme:
+
+-
$red-palette
+-
$green-palette
+-
$blue-palette
+-
$yellow-palette
+-
$cyan-palette
+-
$magenta-palette
+-
$orange-palette
+-
$chartreuse-palette
+-
$spring-green-palette
+-
$azure-palette
+-
$violet-palette
+-
$rose-palette
+
+
+
+
+ Custom Color Palettes
- The CSS custom properties emitted by the theme mixins are derived from
-M3's design tokens. To further
-customize your UI beyond the define-theme
API, you can manually set these custom properties in
-your styles.
-The guarantees made by the theme mixins mean that you do not need to target internal selectors of
-components or use excessive specificity to override any of these tokenized properties. Always apply
-your base theme to your application's root element (typically html
or body
) and apply any
-overrides on the highest-level selector where they apply.
-
-
-<mat-sidenav-container>
- Some content...
- <mat-sidenav>
- Some sidenav content...
- <mat-checkbox class="danger">Enable admin mode</mat-checkbox>
- </mat-sidenav>
-</mat-sidenav-container>
+ The Angular Material
+palette generation schematic
+builds custom color palettes based on a single color input for the primary
+color, and optionally color inputs to further customize secondary, tertiary, and
+neutral palettes:
+ng generate @angular/material:theme-color
-@use '@angular/material' as mat;
-
-$light-theme: mat.define-theme();
-$dark-theme: mat.define-theme((
- color: (
- theme-type: dark
- )
-));
-
-html {
- // Apply the base theme at the root, so it will be inherited by the whole app.
- @include mat.all-component-themes($light-theme);
-}
-mat-sidenav {
- // Override the colors to create a dark sidenav.
- @include mat.all-component-colors($dark-theme);
+
+
+ Loading Fonts
+
+ You can use Google Fonts as one option to load fonts in your application. For
+example, the following code in an application’s <head>
loads the font family
+Roboto with the font weights 700, 500, and 400:
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+
+Learn more about using fonts with
+Google Fonts. By
+default, projects created with the Angular CLI are
+configured
+to inline assets from Google Fonts to reduce render-blocking requests.
+
+
+
+ Supporting Light and Dark Mode
+
+ By default, the mat.theme
mixin defines colors using the CSS color function
+light-dark
to make it easy for your application to switch between light and
+dark mode. The light-dark
function depends on the value of color-scheme
+declared in your application’s global styles. If your application does not
+define a value for color-scheme
, then the light colors will always be applied.
+You can define color-scheme: light
or color-scheme: dark
to explicitly
+define your application’s mode. To set the mode depending on the user’s system
+preferences, use color-scheme: light-dark
as shown in the following example:
+@use '@angular/material' as mat;
+
+html {
+ color-scheme: light dark;
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0
+ ));
+}
+
+You can also use the strategy of defining color-scheme
under a CSS selector so
+that the mode depends on whether that class has been applied. In the following
+example, the application always displays the light mode theme unless the class
+“dark-mode” is added to the HTML body.
+@use '@angular/material' as mat;
+
+html {
+ color-scheme: light;
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0
+ ));
}
-.danger {
- // Override the checkbox hover state to indicate that this is a dangerous setting. No need to
- // target the internal selectors for the elements that use these variables.
- --mdc-checkbox-unselected-hover-state-layer-color: red;
- --mdc-checkbox-unselected-hover-icon-color: red;
+body.dark-mode {
+ color-scheme: dark;
}
-
-
-
- Customizing density
+
Angular Material does not automatically apply different styles or themes based
+on user preference media queries, such as color-scheme
, prefers-color-scheme
+or prefers-contrast
. Instead, Angular Material gives you the flexibility to
+define your own queries to apply the styles that make sense for your users. This
+may mean relying on color-scheme: light dark
, defining custom media queries,
+or reading a saved user preference to apply styles.
+
+
+
+ Multiple Themes
- Angular Material's density customization is based on the
-Material Design density guidelines. This system defines a scale where zero
-represents the default density. You can decrement the number for more density and increment the
-number for less density.
-The density system is based on a density scale. The scale starts with the
-default density of 0
. Each whole number step down (-1
, -2
, etc.) reduces
-the affected sizes by 4dp
, down to the minimum size necessary for a component to render
-coherently.
-Components that appear in task-based or pop-up contexts, such as MatDatepicker
, don't change their
-size via the density system. The Material Design density guidance explicitly
-discourages increasing density for such interactions because they don't compete for space in the
-application's layout.
-You can apply custom density setting to the entire library or to individual components using their
-density Sass mixins.
-// You can set a density setting in your theme to apply to all components.
-$dark-theme: mat.define-theme((
- color: ...,
- typography: ...,
- density: (
- scale: -2
- ),
-));
-
-// Or you can selectively apply the Sass mixin to affect only specific parts of your application.
-.the-dense-zone {
- @include mat.button-density(-1);
+ You can call the mat.theme
mixin more than once to apply multiple different
+color schemes in your application.
+
+
+
+ Context-specific Themes
+
+ The following example theme file customizes the theme for components in
+different contexts. In this case, a cyan-based palette is applied to a container
+of information about deleting data, causing buttons and other components to have
+a unique and attention-grabbing style applied:
+@use '@angular/material' as mat;
+
+html {
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0,
+ ));
+}
+
+.example-bright-container {
+ @include mat.theme((
+ color: mat.$cyan-palette,
+ ));
}
-
-
- Strong focus indicators
+
+
+ Using Theme Styles
-
By default, most components indicate browser focus by changing their background color as described
-by the Material Design specification. This behavior, however, can fall short of accessibility
-requirements, such as WCAG, which require a stronger indication of browser focus.
-Angular Material supports rendering highly visible outlines on focused elements. Applications can
-enable these strong focus indicators via two Sass mixins:
-strong-focus-indicators
and strong-focus-indicators-theme
.
-The strong-focus-indicators
mixin emits structural indicator styles for all components. This mixin
-should be included exactly once in an application, similar to the core
mixin described above.
-The strong-focus-indicators-theme
mixin emits only the indicator's color styles. This mixin should
-be included once per theme, similar to the theme mixins described above. Additionally, you can use
-this mixin to change the color of the focus indicators in situations in which the default color
-would not contrast sufficiently with the background color.
-The following example includes strong focus indicator styles in an application alongside the rest of
-the custom theme API.
-@use '@angular/material' as mat;
-
-@include mat.strong-focus-indicators();
-
-$my-theme: mat.define-theme((
- color: (
- theme-type: light,
- primary: mat.$violet-palette,
- ),
-));
-
-html {
- @include mat.all-component-themes($my-theme);
- @include mat.strong-focus-indicators-theme($my-theme);
+ An application’s custom components can use the CSS variables defined by
+mat.theme
to apply the theme’s colors and typography.
+The color variables are useful for emphasizing important text and actions,
+providing stronger application branding, and ensuring strong contrast ratios
+between surface and on-surface elements.
+The typography variables are useful for creating clear information hierarchy and
+text consistency through the application.
+The following example styles demonstrate a component using the color and
+typography variables to create an application-wide banner presenting important
+information to the user:
+:host {
+ background: var(--mat-sys-primary-container);
+ color: var(--mat-sys-on-primary-container);
+ border: 1px solid var(--mat-sys-outline-variant);
+ font: var(--mat-sys-body-large);
}
+See the Theme Variables guide for a
+comprehensive list of these variables, examples of where they are used, and how
+components can depend on them.
-
-
- Customizing strong focus indicators
+
+
+ Customizing Tokens
+
+
Angular Material components also allow for narrowly targeted customization of
+specific tokens through the overrides
mixins. This enables fine-grained
+adjustments to specific system-level theme CSS variables as well as individual
+component tokens, such as a component’s border-color or title font size.
+The overrides
API validates that the customized tokens are correctly spelled
+and can be used to ensure backwards compatibility if tokens are added, moved, or
+renamed in future versions.
+
+
+
+ System Tokens
- You can pass a configuration map to strong-focus-indicators
to customize the appearance of the
-indicators. This configuration includes border-style
, border-width
, and border-radius
.
-You also can customize the color of indicators with strong-focus-indicators-theme
. This mixin
-accepts either a theme, as described earlier in this guide, or a CSS color value. When providing a
-theme, the indicators will use the default hue of the primary palette.
-The following example includes strong focus indicator styles with custom settings alongside the rest
-of the custom theme API.
-@use '@angular/material' as mat;
-
-@include mat.strong-focus-indicators((
- border-style: dotted,
- border-width: 4px,
- border-radius: 2px,
-));
-
-$my-theme: mat.define-theme((
- color: (
- theme-type: light,
- primary: mat.$violet-palette,
- ),
-));
-
-html {
- @include mat.all-component-themes($my-theme);
- @include mat.strong-focus-indicators-theme(purple);
+ System-level tokens can be changed to different values through the
+mat.theme-overrides
mixin, which will redefine CSS variables that are used in
+the application.
+The following example applies a violet color palette for the application, but
+alters the primary-container
token to a specific shade of blue.
+@use '@angular/material' as mat;
+
+html {
+ color-scheme: light dark;
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0
+ ));
+
+ .example-orange-primary-container {
+ @include mat.theme-overrides((
+ primary-container: #84ffff
+ ));
+ }
}
-
-
-
- Theming and style encapsulation
-
- Angular Material assumes that, by default, all theme styles are loaded as global CSS. If you want
-to use Shadow DOM in your application, you must load the theme styles within each
-shadow root that contains an Angular Material component. You can accomplish this by manually loading
-the CSS in each shadow root, or by using Constructable Stylesheets.
-
-
-
- User preference media queries
-
- Angular Material does not apply styles based on user preference media queries, such as
-prefers-color-scheme
or prefers-contrast
. Instead, Angular Material's Sass mixins give you the
-flexibility to apply theme styles to based on the conditions that make the most sense for your
-users. This may mean using media queries directly or reading a saved user preference.
-
-
-
- Using component color variants
-
- A number of components have a color
input property that allows developers to apply different color
-variants of the component. When using an M3 theme, this input still adds a CSS class to the
-component (e.g. .mat-accent
). However, there are no built-in styles targeting these classes. You
-can instead apply color variants by passing the $color-variant
option to a component's -theme
or
--color
mixins.
-
-
-<mat-checkbox class="tertiary-checkbox" />
-<section class="tertiary-checkbox">
- <mat-checkbox />
-</section>
+Alternatively, an optional override map can be provided in the mat.theme
mixin
+to replace values applied by the mixin:
+@use '@angular/material' as mat;
+
+html {
+ color-scheme: light dark;
+ @include mat.theme((
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0
+ ), $overrides: (
+ primary-container: orange,
+ );
+}
-@use '@angular/material' as mat;
-
-$theme: mat.define-theme();
-.tertiary-checkbox {
- @include mat.checkbox-color($theme, $color-variant: tertiary);
+
+
+ Component Tokens
+
+ Each Angular Material component defines an overrides
mixin that can be used to
+customize tokenized styles for their color, typography, and density.
+More information for each component’s override API, including their list of
+available customizable tokens, can be found on their respective documentation
+page under the Styling tab.
+The following example demonstrates the Card’s overrides
API to change the
+background color to red, increase the corner border radius, and specify a larger
+title font size.
+html {
+ @include mat.card-overrides((
+ elevated-container-color: red,
+ elevated-container-shape: 32px,
+ title-text-size: 2rem,
+ ));
}
-This API is more flexible, and produces less CSS. For example, the .tertiary-checkbox
class shown
-above can be applied to any checkbox or any element that contains checkboxes, to change the color
-of all checkboxes within that element.
-While you should prefer applying the mixins with color variants explicitly, if migrating from M2 to
-M3 you can alternatively use the provided backwards compatibility mixins
-that apply styles directly to the existing CSS classes (mat-primary
, mat-accent
, and
-mat-warn
).
-The table below shows the supported $color-variant
values for each component. (Unlisted components
-do not support any color variants.)
-
-
-
-Component
-Supported $color-variant
values
-Default
-
-
-
-Badge
-primary
, secondary
, tertiary
, error
-error
-
-
-Button
-primary
, secondary
, tertiary
, error
-primary
-
-
-Button-toggle
-primary
, secondary
, tertiary
, error
-secondary
-
-
-Checkbox
-primary
, secondary
, tertiary
, error
-primary
-
-
-Chips
-primary
, secondary
, tertiary
, error
-secondary
-
-
-Datepicker
-primary
, secondary
, tertiary
, error
-primary
-
-
-Fab
-primary
, secondary
, tertiary
-primary
-
-
-Form-field
-primary
, secondary
, tertiary
, error
-primary
-
-
-Icon
-surface
, primary
, secondary
, tertiary
, error
-surface
-
-
-Option
-primary
, secondary
, tertiary
, error
-secondary
-
-
-Progress-bar
-primary
, secondary
, tertiary
, error
-primary
-
-
-Progress-spinner
-primary
, secondary
, tertiary
, error
-primary
-
-
-Pseudo-checkbox
-primary
, secondary
, tertiary
, error
-primary
-
-
-Radio
-primary
, secondary
, tertiary
, error
-primary
-
-
-Select
-primary
, secondary
, tertiary
, error
-primary
-
-
-Slide-toggle
-primary
, secondary
, tertiary
, error
-primary
-
-
-Slider
-primary
, secondary
, tertiary
, error
-primary
-
-
-Stepper
-primary
, secondary
, tertiary
, error
-primary
-
-
-Tabs
-primary
, secondary
, tertiary
, error
-primary
-
-
-
-
-
- Style customization outside the theming system
-
- Angular Material supports customizing color, typography, and density as outlined in this document.
-Angular strongly discourages, and does not directly support, overriding component CSS outside the
-theming APIs described above. Component DOM structure and CSS classes are considered private
-implementation details that may change at any time.
-
-
-
-
- Theme your own components using a Material 3 theme
+
+
+
+ Direct Style Overrides
+
+
Angular Material supports customizing color, typography, and density as outlined
+in this document. Angular strongly discourages, and does not directly support,
+overriding component CSS outside the theming APIs described above. Component DOM
+structure and CSS classes are considered private implementation details that may
+change at any time. CSS variables used by the Angular Material components should
+be defined through the overrides
API instead of defined explicitly.
+
+
+
+ Shadow DOM
- The same utility functions for reading properties of M2 themes (described in
-our guide for theming your components)
-can be used to read properties from M3 themes. However, the named palettes, typography
-levels, etc. available are different for M3 themes, in accordance with the spec.
-The structure of the theme object is considered an implementation detail. Code should not depend on
-directly reading properties off of it, e.g. using map.get
. Always use the utility functions
-provided by Angular Material to access properties of the theme.
-
-
-@use '@angular/material' as mat;
-
-@mixin my-comp-theme($theme) {
- .my-comp {
- font: mat.get-theme-typography($theme, body-large, font);
- letter-spacing: mat.get-theme-typography($theme, body-large, letter-spacing);
- background: mat.get-theme-color($theme, surface);
- @if mat.get-theme-type($theme) == dark {
- color: mat.get-theme-color($theme, primary, 20);
- } @else {
- color: mat.get-theme-color($theme, primary, 80);
- }
- padding: 48px + (2px * mat.get-theme-density($theme));
- }
-}
-
+ Angular Material assumes that, by default, all theme styles are loaded as global
+CSS. If you want to use
+Shadow DOM
+in your application, you must load the theme styles within each shadow root that
+contains an Angular Material component. You can accomplish this by manually
+loading the CSS in each shadow root, or by using
+Constructable Stylesheets.
Note: The information on this page is specific to Material 3, for Material 2 -information on typography go to the Material 2 guide.
- -Typography is a way of arranging type to make text legible, readable, and appealing when displayed. -Angular Material's theming system supports customizing the typography settings -for the library's components. Additionally, Angular Material provides APIs for applying typography -styles to elements in your own application.
-Angular Material's theming APIs are built with Sass. This document assumes -familiarity with CSS and Sass basics, including variables, functions, and mixins.
- -Angular Material's typography APIs lets you specify any font-face. The default font-face value is
-configured to Google's Roboto font with the 300, 400, and 500 font-weight styles. To use
-Roboto, your application must load the font, which is not included with Angular Material. The
-easiest way to load Roboto, or any other custom font, is by using Google Fonts. The following
-snippet can be placed in your application's <head>
to load Roboto from Google Fonts.
<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-
-See Getting Started with the Google Fonts API for more about using Google Fonts. Also -note that, by default, the Angular CLI inlines assets from Google Fonts to reduce render-blocking -requests.
- -The following aspects of your app's typography can be customized via the typography
property of
-the theme configuration object.
Typography Property | -Description | -
---|---|
plain-family |
-[Optional] The font family to use for plain text, such as body text. | -
brand-family |
-[Optional] The font family to use for brand text, such as headlines. | -
bold-weight |
-[Optional] The font weight to use for bold text. | -
medium-weight |
-[Optional] The font weight to use for medium text. | -
regular-weight |
-[Optional] The font weight to use for regular text. | -
These are used to generate the styles for the different typescale levels.
- -A type scale is a selection of font styles that can be used across an app. -They’re assigned based on use (such as display or headline), and grouped more -broadly into categories based on scale (such as large or small). For more -information, see the M3 typography spec.
-There are large
, medium
, and small
variations for the following type roles:
The table below lists the CSS classes emitted and the native elements styled.
-CSS class | -Typesale level | -
---|---|
.mat-display-large |
-display-large |
-
.mat-display-medium |
-display-medium |
-
.mat-display-small |
-display-small |
-
.mat-headline-large |
-headline-large |
-
.mat-headline-medium |
-headline-medium |
-
.mat-headline-small |
-headline-small |
-
.mat-title-large |
-title-large |
-
.mat-title-medium |
-title-medium |
-
.mat-title-small |
-title-small |
-
.mat-body-large |
-body-large |
-
.mat-body-medium |
-body-medium |
-
.mat-body-small |
-body-small |
-
.mat-label-large |
-label-large |
-
.mat-label-medium |
-label-medium |
-
.mat-label-small |
-label-small |
-
See the theming guide -for details on setting up a theme that has typography configured.
- -It is possible to read typography properties from a theme for use in your own components. For more -information about this see our guide on Theming your own components.
- -Note: this section is applicable only if you are using the M2 backwards compatability -mixin.
-In addition to styles shared between components, the typography-hierarchy
mixin includes CSS
-classes for styling your application. These CSS classes correspond to the typography levels in your
-typography config. This mixin also emits styles for native header elements scoped within the
-.mat-typography
CSS class.
@use '@angular/material' as mat;
-
-// Use the default configuration.
-$my-typography: mat.define-typography-config();
-@include mat.typography-hierarchy($my-typography);
-
-In addition to the typographic styles, these style rules also include a margin-bottom
for
-headers and paragraphs. For body
styles, text is styled within the provided CSS selector.
The .mat-h5
and .mat-h6
styles don't directly correspond to a specific Material Design
-typography level. The .mat-h5
style uses the body-2
level with the font-size scaled down by
-0.83
. The .mat-h6
style uses the body-2
level with the font-size scaled down by 0.67
.
The button
typography level does not map to a CSS class.
The following example demonstrates usage of the typography styles emitted by the
-typography-hierarchy
mixin.
<body>
- <!-- This header will *not* be styled because it is outside `.mat-typography` -->
- <h1>Top header</h1>
-
- <!-- This paragraph will be styled as `body-1` via the `.mat-body` CSS class applied -->
- <p class="mat-body">Introductory text</p>
-
- <div class="mat-typography">
- <!-- This header will be styled as `title` because it is inside `.mat-typography` -->
- <h2>Inner header</h2>
-
- <!-- This paragraph will be styled as `body-1` because it is inside `.mat-typography` -->
- <p>Some inner text</p>
- </div>
-</body>
-
-<input matNativeControl>
& <textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>
<mat-chip-set>
By default any options with a null
or undefined
value will reset the select's value. If instead
+you want the nullable options to be selectable, you can enable the canSelectNullableOptions
input.
+The default value for the input can be controlled application-wide through the MAT_SELECT_CONFIG
+injection token.
MatSlider
uses an internal <input type="range">
to provide an accessible experience. The input
receives focus and it can be labelled using aria-label
or aria-labelledby
.
Make sure the colors of the active and inactive track of the MatSlider
meet
+at least a 3:1 contrast ratio with the background. This can be achieved through
+changing the active or inactive track colors or showing tick marks on the
+track that have at least a 3:1 color contrast ratio with the background.
TODO
+The Angular Material Timepicker allows users to set the time portion of a date object either by +typing it in or by selecting it from a list of pre-defined options.
+ + + +A timepicker is composed of a text input and a dropdown menu, connected through the matTimepicker
+binding on the input.
There is also an optional timepicker toggle button that gives the user an easy way to open the dropdown.
+ + +The timepicker input and toggle can be used either on their own or as a part of a mat-form-field
:
The timepicker input integrates with the @angular/forms
module by providing itself as a
+ControlValueAccessor
and a Validator
(see Input validation below for more
+information). When the user types in a new time or selects one from the dropdown, the
+time will be set on the date object which is the current value of the form control. If the form
+control doesn't have a value, the timepicker will create one with today's date and the selected
+time.
MatDatepicker
+ Material's datepicker and timepicker components can operate over the same value, allowing for a +combined datetime picker to be implemented. When binding the two components to the same value, the +datepicker will set the entire date object while the timepicker will only modify the time portion +of it.
+ + + +The timepicker input checks that the value typed in by the user is a valid time string and +whether it fits into the specified bounds.
+If the user types in an invalid time string (for example abc
or 24:67
), the timepicker input
+will report the matTimepickerParse
error. The string is parsed using the parseTime
method of
+the the current date implementation.
The timepicker input also checks that the value typed in by the user fits within the minimum and
+maximum bounds set through the matTimepickerMin
and matTimepickerMax
inputs. They accept either
+a date object with a specific time or a time string. The inputs also control which times will be
+shown inside of the dropdown menu. For example, setting matTimepickerMin="12:30"
and
+matTimepickerMax="21:25"
will allow the user to only select a time between 12:30 in the afternoon
+and 9:25 in the evening. If the value is outside of those bounds, either a maxTimepickerMin
or
+matTimepickerMax
error will be reported to the value accessor.
By default the mat-timepicker
dropdown shows options at 30 minute intervals. You can customize the
+list of options either by setting an interval or providing a custom set of options.
The easiest way is to change the options is to pass the interval
input to mat-timepicker
with
+an interval string which will be used when generating the options. For example,
+<mat-timepicker interval="90m"/>
will show the options at 90 minute intervals, starting from the
+minimum time and ending at the maximum. Valid interval strings include:
interval="50"
represents 50 minutes.30m
represents 30 minutes while 5h
is 5 hours.
+Supported short units include h
or H
for hours, m
or M
for minutes and s
or S
for seconds.75 min
represents 75 minutes while 1.5 hours
is an hour
+and a half. Supported long units include min
or minute
or minutes
for minutes, hour
or hours
for
+hours and second
or seconds
for seconds.Furthermore, the default interval can be controlled for the entire application using the
+MAT_TIMEPICKER_CONFIG
injection token. For example, adding the following to your providers
will
+default all timepickers to a 90 minute interval:
import {MAT_TIMEPICKER_CONFIG} from '@angular/material/timepicker';
+
+{
+ provide: MAT_TIMEPICKER_CONFIG,
+ useValue: {interval: '90 minutes'},
+}
+
+If your app requires more fine-grained control over the options, you can pass in an array of
+options into mat-timepicker
instead. Note that the options need to match the MatTimepickerOption
+interface.
mat-timepicker-toggle
renders a clock icon by default. You can customize it by projecting in an
+element with the matTimepickerToggleIcon
attribute into the toggle:
Internationalization of the timepicker uses the same date adapter as mat-datepicker
. It is
+configured via three aspects:
By default, the MAT_DATE_LOCALE
injection token will use the existing LOCALE_ID
locale code
+from @angular/core
. If you want to override it, you can provide a new value for the
+MAT_DATE_LOCALE
token:
bootstapApplication(MyApp, {
+ providers: [{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}],
+});
+
+It's also possible to set the locale at runtime using the setLocale
method of the DateAdapter
.
Note: if you're using the provideDateFnsAdapter
, you have to provide the data object for your
+locale to MAT_DATE_LOCALE
instead of the locale code, in addition to providing a configuration
+compatible with date-fns
to MAT_DATE_FORMATS
. Locale data for date-fns
can be imported
+from date-fns/locale
.
The timepicker is built to be implementation-agnostic and to be interoperable with
+mat-datepicker
. This means that it can be made to work with a variety of different date
+implementations. However it also means that developers need to make sure to provide the
+appropriate pieces for the timepicker to work with their chosen implementation.
The easiest way to ensure this is to import one of the provided date adapters:
+provideNativeDateAdapter
or MatNativeDateModule
Date type | +Date |
+
---|---|
Supported locales | +Locales using either AM/PM or 24-hour formatting | +
Dependencies | +None | +
Import from | +@angular/material/core |
+
provideDateFnsAdapter
or MatDateFnsModule
(installed via ng add @angular/material-date-fns-adapter
)
Date type | +Date |
+
---|---|
Supported locales | +See project for details | +
Dependencies | +date-fns | +
Import from | +@angular/material-date-fns-adapter |
+
provideLuxonDateAdapter
or MatLuxonDateModule
(installed via ng add @angular/material-luxon-adapter
)
Date type | +DateTime |
+
---|---|
Supported locales | +See project for details | +
Dependencies | +Luxon | +
Import from | +@angular/material-luxon-adapter |
+
provideMomentDateAdapter
or MatMomentDateModule
(installed via ng add @angular/material-moment-adapter
)
Date type | +Moment |
+
---|---|
Supported locales | +See project for details | +
Dependencies | +Moment.js | +
Import from | +@angular/material-moment-adapter |
+
Note: provideNativeDateAdapter
implements time parsing using a regex which means that it
+only supports AM/PM time (e.g. 1:45 PM
) or 24-hour time (e.g. 22:45
or 22.45
). As such
+it won't work on locales with different formatting. We recommend using one of the provided date
+adapters mentioned above or creating your own adapter by extending the DateAdapter
class from
+@angular/material/core
. For example, if you want to use the date-fns
adapter, you can update
+your bootstrapApplication
format to the following:
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';
+
+bootstrapApplication(MyApp, {
+ providers: [provideDateFnsAdapter()]
+});
+
+
+ The MAT_DATE_FORMATS
object is a collection of formats that the timepicker uses when parsing
+and displaying date objects. These formats are passed through to the DateAdapter
so you will want
+to make sure that the format objects you're providing are compatible with the DateAdapter
used in
+your app.
MAT_DATE_FORMATS
is the same object used by mat-datepicker
so it's likely already
+configured if your app is using the datepicker, but for the timepicker you need to ensure that the
+display.timeInput
, display.timeOptionLabel
and parse.timeInput
properties are set as well.
If you want use one of the DateAdapters
that ships with Angular Material, but use your own
+MAT_DATE_FORMATS
, you can either pass the formats into the providers function, or provide the
+MAT_DATE_FORMATS
token yourself. For example:
bootstrapApplication(MyApp, {
+ providers: [provideNativeDateAdapter(MY_NATIVE_DATE_FORMATS)],
+});
+
+
+ The timepicker implements the ARIA combobox interaction pattern.
+The timepicker input specifies role="combobox"
while the content of the dropdown applies
+role="listbox"
and the options within the dropdown apply role="option"
. By default the listbox
+is labelled from the mat-form-field
it is placed in, but if you aren't using a form field or if
+you want to customize the label, you can do so through the ariaLabel
or ariaLabelledby
inputs
+on mat-timepicker
.
This error is thrown if you haven't provided all of the injectables the timepicker needs in order to
+work correctly. The easiest way to resolve this is to add provideNativeDateAdapter
or
+provideMomentDateAdapter
to your app config. See
+Choosing a date implementation for
+more information.
MAT_DATE_FORMATS
has been provided
+ The timepicker needs the display.timeInput
, display.timeOptionLabel
and parse.timeInput
fields
+in MAT_DATE_FORMATS
in order to work correctly. You should update your date formats object to
+include include these fields. See Customizing the parse and display formats
+for more information.
options
and interval
inputs at the same time
+ A mat-timepicker
cannot specifify both the options
and interval
inputs at the same time.
+The template should be updated to remove one of them.
options
input cannot be an empty array
+ The array passed into the options
input of mat-timepicker
cannot be empty, because the user
+won't have any options to choose from.
This error is thrown if more than one <input>
tries to claim ownership over the same
+<mat-timepicker>
(via the matTimepicker
attribute on the input). A timepicker can only be
+associated with a single input.
No. | \n{{element.position}} | \nName | \n\n {{element.name}}\n \n \n \n \n \n | \n Weight | \n\n {{element.weight}}\n \n \n \n \n | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n\n {{element.name}}\n \n \n \n \n \n | \n Weight | \n\n {{element.weight}}\n \n \n \n \n | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n\n {{element.name}}\n \n \n \n \n \n | \n Weight | \n\n {{element.weight}}\n \n \n \n \n | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \nFirst name | \nMiddle name | \nLast name | \n
---|---|---|---|
{{person.id}} | \n\n\n {{person.firstName}}\n\n \n \n \n | \n\n\n {{person.middleName}}\n\n \n \n \n | \n\n\n {{person.lastName}}\n\n \n \n \n | \n
No. | \nFirst name | \nMiddle name | \nLast name | \n
---|---|---|---|
{{person.id}} | \n\n\n {{person.firstName}}\n\n \n \n \n | \n\n\n {{person.middleName}}\n\n \n \n \n | \n\n\n {{person.lastName}}\n\n \n \n \n | \n
No. | \nFirst name | \nMiddle name | \nLast name | \n
---|---|---|---|
{{person.id}} | \n\n\n {{person.firstName}}\n\n \n \n \n | \n\n\n {{person.middleName}}\n\n \n \n \n | \n\n\n {{person.lastName}}\n\n \n \n \n | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n\n \n \n \n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n\n \n \n \n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n\n \n \n \n | \n\n{{element.symbol}} | \n
No. | \n{{element.position}} | \nName | \n\n {{element.name}}\n \n \n \n \n \n | \n Weight | \n\n {{element.weight}}\n \n \n \n \n | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \nFirst name | \nMiddle name | \nLast name | \n
---|---|---|---|
{{person.id}} | \n\n\n {{person.firstName}}\n\n \n \n \n | \n\n\n {{person.middleName}}\n\n \n \n \n | \n\n\n {{person.lastName}}\n\n \n \n \n | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n\n \n \n \n | \n\n{{element.symbol}} | \n
No. | \n{{element.position}} | \nName | \n\n {{element.name}}\n \n \n \n \n \n | \n Weight | \n\n {{element.weight}}\n \n \n \n \n | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \nFirst name | \nMiddle name | \nLast name | \n
---|---|---|---|
{{person.id}} | \n\n\n {{person.firstName}}\n\n \n \n \n | \n\n\n {{person.middleName}}\n\n \n \n \n | \n\n\n {{person.lastName}}\n\n \n \n \n | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n | \n\n{{element.symbol}} | \n
No. | \nName | \nWeight | \nSymbol | \n
---|---|---|---|
{{element.position}} | \n\n\n {{element.name}}\n\n \n \n \n \n | \n\n \n {{element.weight}}\n\n \n \n \n | \n\n{{element.symbol}} | \n
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
native input
mat-checkbox
Single select with mat-checkbox
with trackBy
native input
mat-checkbox
Single select with mat-checkbox
with trackBy
native input
mat-checkbox
Single select with mat-checkbox
with trackBy
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
native input
mat-checkbox
Single select with mat-checkbox
with trackBy
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
native input
mat-checkbox
Single select with mat-checkbox
with trackBy
Focus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \nFocus Monitored Subtree ({{subtreeOrigin}})
\n \n \n\n \n
\n\n\n \n
\n\n\n \n
\n\n\n \n
\n\n\n \n
\n\n\n Resize your browser window to see the current screen size change.\n
\n\n The current screen size is {{currentScreenSize}}\n
\n", styles: ["/** No CSS for this example */\n"] }); } + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BreakpointObserverOverviewExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: BreakpointObserverOverviewExample, isStandalone: true, selector: "breakpoint-observer-overview-example", ngImport: i0, template: "\n Resize your browser window to see the current screen size change.\n
\n\n The current screen size is {{currentScreenSize}}\n
\n", styles: ["/** No CSS for this example */\n"] }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: BreakpointObserverOverviewExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BreakpointObserverOverviewExample, decorators: [{ type: Component, args: [{ selector: 'breakpoint-observer-overview-example', template: "\n Resize your browser window to see the current screen size change.\n
\n\n The current screen size is {{currentScreenSize}}\n
\n", styles: ["/** No CSS for this example */\n"] }] }], ctorParameters: () => [] }); diff --git a/fesm2022/cdk/layout.mjs.map b/fesm2022/cdk/layout.mjs.map index ace07e3c10..92d0e275e4 100755 --- a/fesm2022/cdk/layout.mjs.map +++ b/fesm2022/cdk/layout.mjs.map @@ -1 +1 @@ -{"version":3,"file":"layout.mjs","sources":["../../../../../../../src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts","../../../../../../../src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html","../../../../../../../src/components-examples/cdk/layout/layout_public_index.ts"],"sourcesContent":["import {Component, OnDestroy, inject} from '@angular/core';\nimport {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';\nimport {Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\n\n/** @title Respond to viewport changes with BreakpointObserver */\n@Component({\n selector: 'breakpoint-observer-overview-example',\n templateUrl: 'breakpoint-observer-overview-example.html',\n styleUrl: 'breakpoint-observer-overview-example.css',\n})\nexport class BreakpointObserverOverviewExample implements OnDestroy {\n destroyed = new Subject\n Resize your browser window to see the current screen size change.\n
\n\n The current screen size is {{currentScreenSize}}\n
\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAKA;MAMa,iCAAiC,CAAA;AAa5C,IAAA,WAAA,GAAA;AAZA,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;;QAIhC,IAAc,CAAA,cAAA,GAAG,IAAI,GAAG,CAAC;AACvB,YAAA,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,YAAA,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;AAC5B,YAAA,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,YAAA,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;AAC5B,YAAA,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC/B,SAAA,CAAC,CAAC;QAGD,MAAM,CAAC,kBAAkB,CAAC;AACvB,aAAA,OAAO,CAAC;AACP,YAAA,WAAW,CAAC,MAAM;AAClB,YAAA,WAAW,CAAC,KAAK;AACjB,YAAA,WAAW,CAAC,MAAM;AAClB,YAAA,WAAW,CAAC,KAAK;AACjB,YAAA,WAAW,CAAC,MAAM;SACnB,CAAC;AACD,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAC/B,SAAS,CAAC,MAAM,IAAG;AAClB,YAAA,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE;AACnD,gBAAA,IAAI,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE;AAC7B,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;iBACtE;aACF;AACH,SAAC,CAAC,CAAC;KACN;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;KAC3B;sHAnCU,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,iCAAiC,gGCX9C,kKAMA,EAAA,MAAA,EAAA,CAAA,kCAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGDKa,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAL7C,SAAS;+BACE,sCAAsC,EAAA,QAAA,EAAA,kKAAA,EAAA,MAAA,EAAA,CAAA,kCAAA,CAAA,EAAA,CAAA;;;AEPlD;;AAEG;;;;"} \ No newline at end of file +{"version":3,"file":"layout.mjs","sources":["../../../../../../../src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts","../../../../../../../src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html","../../../../../../../src/components-examples/cdk/layout/layout_public_index.ts"],"sourcesContent":["import {Component, OnDestroy, inject} from '@angular/core';\nimport {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';\nimport {Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\n\n/** @title Respond to viewport changes with BreakpointObserver */\n@Component({\n selector: 'breakpoint-observer-overview-example',\n templateUrl: 'breakpoint-observer-overview-example.html',\n styleUrl: 'breakpoint-observer-overview-example.css',\n})\nexport class BreakpointObserverOverviewExample implements OnDestroy {\n destroyed = new Subject\n Resize your browser window to see the current screen size change.\n
\n\n The current screen size is {{currentScreenSize}}\n
\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAKA;MAMa,iCAAiC,CAAA;AAC5C,IAAA,SAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;AAChC,IAAA,iBAAiB,CAAS;;IAG1B,cAAc,GAAG,IAAI,GAAG,CAAC;AACvB,QAAA,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,QAAA,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;AAC5B,QAAA,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,QAAA,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;AAC5B,QAAA,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC/B,KAAA,CAAC,CAAC;AAEH,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,kBAAkB,CAAC;AACvB,aAAA,OAAO,CAAC;AACP,YAAA,WAAW,CAAC,MAAM;AAClB,YAAA,WAAW,CAAC,KAAK;AACjB,YAAA,WAAW,CAAC,MAAM;AAClB,YAAA,WAAW,CAAC,KAAK;AACjB,YAAA,WAAW,CAAC,MAAM;SACnB,CAAC;AACD,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAC/B,SAAS,CAAC,MAAM,IAAG;AAClB,YAAA,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE;AACnD,gBAAA,IAAI,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE;AAC7B,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;iBACtE;aACF;AACH,SAAC,CAAC,CAAC;KACN;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;KAC3B;uGAnCU,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iCAAiC,gGCX9C,kKAMA,EAAA,MAAA,EAAA,CAAA,kCAAA,CAAA,EAAA,CAAA,CAAA;;2FDKa,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAL7C,SAAS;+BACE,sCAAsC,EAAA,QAAA,EAAA,kKAAA,EAAA,MAAA,EAAA,CAAA,kCAAA,CAAA,EAAA,CAAA;;;AEPlD;;AAEG;;;;"} \ No newline at end of file diff --git a/fesm2022/cdk/listbox.mjs b/fesm2022/cdk/listbox.mjs index 0dde28fcaf..e4ff5208c1 100755 --- a/fesm2022/cdk/listbox.mjs +++ b/fesm2022/cdk/listbox.mjs @@ -8,13 +8,11 @@ import { map } from 'rxjs/operators'; /** @title Listbox with aria-activedescendant. */ class CdkListboxActivedescendantExample { - constructor() { - this.features = ['Hydrodynamic', 'Port & Starboard Attachments', 'Turbo Drive']; - } - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxActivedescendantExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: CdkListboxActivedescendantExample, isStandalone: true, selector: "cdk-listbox-activedescendant-example", exportAs: ["cdkListboxActivedescendantExample"], ngImport: i0, template: "\n Your appointment is scheduled for {{formatAppointment() | json}} \n
\n}\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxCompareWithExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: CdkListboxCompareWithExample, isStandalone: true, selector: "cdk-listbox-compare-with-example", exportAs: ["cdkListboxCompareWithExample"], ngImport: i0, template: "\n Your appointment is scheduled for {{formatAppointment() | json}} \n
\n}\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxCompareWithExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxCompareWithExample, decorators: [{ type: Component, args: [{ selector: 'cdk-listbox-compare-with-example', exportAs: 'cdkListboxCompareWithExample', imports: [CdkListbox, CdkOption, JsonPipe], template: "\n Your appointment is scheduled for {{formatAppointment() | json}} \n
\n}\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"] }] }] }); /** @title Listbox with custom keyboard navigation options. */ class CdkListboxCustomNavigationExample { - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxCustomNavigationExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", type: CdkListboxCustomNavigationExample, isStandalone: true, selector: "cdk-listbox-custom-navigation-example", exportAs: ["cdkListboxCustomNavigationExample"], ngImport: i0, template: "{{error}}
\n }\n\n Your zodiac sign is: {{signCtrl.value | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-invalid {\n border-color: red;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox-invalid .example-listbox-label {\n color: red;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n height: 200px;\n overflow: auto;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.example-listbox-errors {\n color: red;\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxFormsValidationExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: CdkListboxFormsValidationExample, isStandalone: true, selector: "cdk-listbox-forms-validation-example", exportAs: ["cdkListboxFormsValidationExample"], ngImport: i0, template: "{{error}}
\n }\n\n Your zodiac sign is: {{signCtrl.value | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-invalid {\n border-color: red;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox-invalid .example-listbox-label {\n color: red;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n height: 200px;\n overflow: auto;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.example-listbox-errors {\n color: red;\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxFormsValidationExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxFormsValidationExample, decorators: [{ type: Component, args: [{ selector: 'cdk-listbox-forms-validation-example', exportAs: 'cdkListboxFormsValidationExample', imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, AsyncPipe, JsonPipe], template: "{{error}}
\n }\n\n Your zodiac sign is: {{signCtrl.value | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-invalid {\n border-color: red;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox-invalid .example-listbox-label {\n color: red;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n height: 200px;\n overflow: auto;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.example-listbox-errors {\n color: red;\n}\n"] }] }], ctorParameters: () => [] }); /** @title Horizontal listbox */ class CdkListboxHorizontalExample { - constructor() { - this.sizes = ['XS', 'S', 'M', 'L', 'XL']; - } - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxHorizontalExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: CdkListboxHorizontalExample, isStandalone: true, selector: "cdk-listbox-horizontal-example", exportAs: ["cdkListboxhorizontalExample"], ngImport: i0, template: "\n\n\n Your preferred language: {{languageCtrl.value | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } + languages = ['C++', 'Java', 'JavaScript', 'Python', 'TypeScript']; + languageCtrl = new FormControl(['TypeScript']); + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxReactiveFormsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: CdkListboxReactiveFormsExample, isStandalone: true, selector: "cdk-listbox-reactive-forms-example", exportAs: ["cdkListboxReactiveFormsExample"], ngImport: i0, template: "\n Your preferred language: {{languageCtrl.value | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxReactiveFormsExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxReactiveFormsExample, decorators: [{ type: Component, args: [{ selector: 'cdk-listbox-reactive-forms-example', exportAs: 'cdkListboxReactiveFormsExample', imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, JsonPipe], template: "\n Your preferred language: {{languageCtrl.value | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"] }] }] }); /** @title Listbox with template-driven forms. */ class CdkListboxTemplateFormsExample { - constructor() { - this.toppings = ['Extra Cheese', 'Mushrooms', 'Pepperoni', 'Sausage']; - this.order = []; - } - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxTemplateFormsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: CdkListboxTemplateFormsExample, isStandalone: true, selector: "cdk-listbox-template-forms-example", exportAs: ["cdkListboxTemplateFormsExample"], ngImport: i0, template: "\n Your order: {{order | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } + toppings = ['Extra Cheese', 'Mushrooms', 'Pepperoni', 'Sausage']; + order = []; + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxTemplateFormsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: CdkListboxTemplateFormsExample, isStandalone: true, selector: "cdk-listbox-template-forms-example", exportAs: ["cdkListboxTemplateFormsExample"], ngImport: i0, template: "\n Your order: {{order | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxTemplateFormsExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxTemplateFormsExample, decorators: [{ type: Component, args: [{ selector: 'cdk-listbox-template-forms-example', exportAs: 'cdkListboxTemplateFormsExample', imports: [CdkListbox, FormsModule, CdkOption, JsonPipe], template: "\n Your order: {{order | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"] }] }] }); /** @title Listbox with value binding. */ class CdkListboxValueBindingExample { - constructor() { - this.starters = ['Sprigatito', 'Fuecoco', 'Quaxly']; - this.starter = ['Fuecoco']; - } + starters = ['Sprigatito', 'Fuecoco', 'Quaxly']; + starter = ['Fuecoco']; reset() { this.starter = ['Fuecoco']; } - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxValueBindingExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: CdkListboxValueBindingExample, isStandalone: true, selector: "cdk-listbox-value-binding-example", exportAs: ["cdkListboxValueBindingExample"], ngImport: i0, template: "\n Your starter pokemon is {{starter | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxValueBindingExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: CdkListboxValueBindingExample, isStandalone: true, selector: "cdk-listbox-value-binding-example", exportAs: ["cdkListboxValueBindingExample"], ngImport: i0, template: "\n Your starter pokemon is {{starter | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkListboxValueBindingExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkListboxValueBindingExample, decorators: [{ type: Component, args: [{ selector: 'cdk-listbox-value-binding-example', exportAs: 'cdkListboxValueBindingExample', imports: [CdkListbox, CdkOption, JsonPipe], template: "\n Your starter pokemon is {{starter | json}} \n \n
\n", styles: [".example-listbox-container {\n display: block;\n width: 250px;\n border: 1px solid black;\n}\n\n.example-listbox-label {\n display: block;\n padding: 5px;\n}\n\n.example-listbox {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.example-option {\n position: relative;\n padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true']::before {\n content: '';\n display: block;\n width: 20px;\n height: 20px;\n background-image: url('data:image/svg+xml;utf8,'); /* stylelint-disable-line */\n background-size: cover;\n position: absolute;\n left: 2px;\n}\n\n.example-option:focus {\n background: rgba(0, 0, 0, 0.2);\n}\n"] }] }] }); diff --git a/fesm2022/cdk/listbox.mjs.map b/fesm2022/cdk/listbox.mjs.map index 353078ce6c..96973a1f58 100755 --- a/fesm2022/cdk/listbox.mjs.map +++ b/fesm2022/cdk/listbox.mjs.map @@ -1 +1 @@ -{"version":3,"file":"listbox.mjs","sources":["../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.html","../../../../../../../src/components-examples/cdk/listbox/listbox_public_index.ts"],"sourcesContent":["import {Component} from '@angular/core';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with aria-activedescendant. */\n@Component({\n selector: 'cdk-listbox-activedescendant-example',\n exportAs: 'cdkListboxActivedescendantExample',\n templateUrl: 'cdk-listbox-activedescendant-example.html',\n styleUrl: 'cdk-listbox-activedescendant-example.css',\n imports: [CdkListbox, CdkOption],\n})\nexport class CdkListboxActivedescendantExample {\n features = ['Hydrodynamic', 'Port & Starboard Attachments', 'Turbo Drive'];\n}\n","\n Your appointment is scheduled for {{formatAppointment() | json}} \n
\n}\n","import {Component} from '@angular/core';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with custom keyboard navigation options. */\n@Component({\n selector: 'cdk-listbox-custom-navigation-example',\n exportAs: 'cdkListboxCustomNavigationExample',\n templateUrl: 'cdk-listbox-custom-navigation-example.html',\n styleUrl: 'cdk-listbox-custom-navigation-example.css',\n imports: [CdkListbox, CdkOption],\n})\nexport class CdkListboxCustomNavigationExample {}\n","{{error}}
\n }\n\n Your zodiac sign is: {{signCtrl.value | json}} \n \n
\n","import {Component} from '@angular/core';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Horizontal listbox */\n@Component({\n selector: 'cdk-listbox-horizontal-example',\n exportAs: 'cdkListboxhorizontalExample',\n templateUrl: 'cdk-listbox-horizontal-example.html',\n styleUrl: 'cdk-listbox-horizontal-example.css',\n imports: [CdkListbox, CdkOption],\n})\nexport class CdkListboxHorizontalExample {\n sizes = ['XS', 'S', 'M', 'L', 'XL'];\n}\n","\n\n\n Your preferred language: {{languageCtrl.value | json}} \n \n
\n","import {Component} from '@angular/core';\nimport {JsonPipe} from '@angular/common';\nimport {FormsModule} from '@angular/forms';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with template-driven forms. */\n@Component({\n selector: 'cdk-listbox-template-forms-example',\n exportAs: 'cdkListboxTemplateFormsExample',\n templateUrl: 'cdk-listbox-template-forms-example.html',\n styleUrl: 'cdk-listbox-template-forms-example.css',\n imports: [CdkListbox, FormsModule, CdkOption, JsonPipe],\n})\nexport class CdkListboxTemplateFormsExample {\n toppings = ['Extra Cheese', 'Mushrooms', 'Pepperoni', 'Sausage'];\n order: readonly string[] = [];\n}\n","\n Your order: {{order | json}} \n \n
\n","import {Component} from '@angular/core';\nimport {JsonPipe} from '@angular/common';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with value binding. */\n@Component({\n selector: 'cdk-listbox-value-binding-example',\n exportAs: 'cdkListboxValueBindingExample',\n templateUrl: 'cdk-listbox-value-binding-example.html',\n styleUrl: 'cdk-listbox-value-binding-example.css',\n imports: [CdkListbox, CdkOption, JsonPipe],\n})\nexport class CdkListboxValueBindingExample {\n starters = ['Sprigatito', 'Fuecoco', 'Quaxly'];\n starter: readonly string[] = ['Fuecoco'];\n\n reset() {\n this.starter = ['Fuecoco'];\n }\n}\n","\n Your starter pokemon is {{starter | json}} \n \n
\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAGA;MAQa,iCAAiC,CAAA;AAP9C,IAAA,WAAA,GAAA;QAQE,IAAQ,CAAA,QAAA,GAAG,CAAC,cAAc,EAAE,8BAA8B,EAAE,aAAa,CAAC,CAAC;AAC5E,KAAA;sHAFY,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,iCAAiC,ECX9C,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,QAAA,EAAA,CAAA,mCAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,khBAgBA,EDPY,MAAA,EAAA,CAAA,uzBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,+WAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEpB,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAP7C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,YACtC,mCAAmC,EAAA,OAAA,EAGpC,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,khBAAA,EAAA,MAAA,EAAA,CAAA,uzBAAA,CAAA,EAAA,CAAA;;;AELlC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;AACnD,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,MAAM,EAAE,SAAS;AAClB,CAAA,CAAC,CAAC;AAEH;MAQa,4BAA4B,CAAA;AAPzC,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAC1B,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,CACnF,CAAC;AAEF,QAAA,IAAA,CAAA,WAAW,GAAoB;YAC7B,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;SACzE,CAAC;AAaH,KAAA;IAXC,WAAW,CAAC,KAAW,EAAE,KAAW,EAAA;QAClC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC;KAC5C;AAED,IAAA,UAAU,CAAC,IAAU,EAAA;AACnB,QAAA,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KAC/B;IAED,iBAAiB,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;KACtD;sHAnBU,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,4BAA4B,wICtBzC,qvBAsBA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDFY,UAAU,EAAE,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,+BAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kCAAA,EAAA,oCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,qKAAE,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAE9B,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;+BACE,kCAAkC,EAAA,QAAA,EAClC,8BAA8B,EAG/B,OAAA,EAAA,CAAC,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAA,QAAA,EAAA,qvBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AEjB5C;MAQa,iCAAiC,CAAA;sHAAjC,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,iCAAiC,ECX9C,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,QAAA,EAAA,CAAA,mCAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,g0BA8BA,EDrBY,MAAA,EAAA,CAAA,y3BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,+WAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEpB,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAP7C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uCAAuC,YACvC,mCAAmC,EAAA,OAAA,EAGpC,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,g0BAAA,EAAA,MAAA,EAAA,CAAA,y3BAAA,CAAA,EAAA,CAAA;;;AENlC;MAQa,gCAAgC,CAAA;sHAAhC,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,gCAAgC,ECX7C,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,QAAA,EAAA,CAAA,kCAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2wBA2BA,EDlBY,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,+WAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEpB,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAP5C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,YACtC,kCAAkC,EAAA,OAAA,EAGnC,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,2wBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AELlC;MAQa,yBAAyB,CAAA;AAPtC,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AACvC,KAAA;sHAFY,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;0GAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZtC,4rCAqCA,ED3BY,MAAA,EAAA,CAAA,mlCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,gvBAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,+BAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kCAAA,EAAA,oCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEtD,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAPrC,SAAS;+BACE,8BAA8B,EAAA,QAAA,EAC9B,2BAA2B,EAAA,OAAA,EAG5B,CAAC,WAAW,EAAE,mBAAmB,EAAE,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,4rCAAA,EAAA,MAAA,EAAA,CAAA,mlCAAA,CAAA,EAAA,CAAA;;;AEHpE;MAQa,gCAAgC,CAAA;AAiB3C,IAAA,WAAA,GAAA;AAhBA,QAAA,IAAA,CAAA,KAAK,GAAG;YACN,KAAK;YACL,IAAI;YACJ,OAAO;YACP,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,OAAO;YACP,MAAM;YACN,QAAQ;YACR,SAAS;YACT,KAAK;YACL,KAAK;SACN,CAAC;;QAUF,IAAQ,CAAA,QAAA,GAAG,IAAI,WAAW,CAAW,EAAE,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;AAN5D,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAC5C,GAAG,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CACzD,CAAC;KACH;IAKD,SAAS,GAAA;QACP,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AACtC,YAAA,MAAM,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;SAChD;QAED,OAAO,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;KACtC;sHAjCU,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,gCAAgC,ECf7C,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,QAAA,EAAA,CAAA,kCAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2wBAwBA,EDXY,MAAA,EAAA,CAAA,q/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,EAAE,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,+BAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kCAAA,EAAA,oCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,EAAE,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,SAAS,yCAAE,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAE3E,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAP5C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EACtC,QAAA,EAAA,kCAAkC,EAGnC,OAAA,EAAA,CAAC,UAAU,EAAE,WAAW,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAA,QAAA,EAAA,2wBAAA,EAAA,MAAA,EAAA,CAAA,q/BAAA,CAAA,EAAA,CAAA;;;AEVzF;MAQa,2BAA2B,CAAA;AAPxC,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,KAAK,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AACrC,KAAA;sHAFY,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,2BAA2B,ECXxC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,QAAA,EAAA,CAAA,6BAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,maAaA,EDJY,MAAA,EAAA,CAAA,8lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,+WAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEpB,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAPvC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gCAAgC,YAChC,6BAA6B,EAAA,OAAA,EAG9B,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,maAAA,EAAA,MAAA,EAAA,CAAA,8lBAAA,CAAA,EAAA,CAAA;;;AENlC;MAQa,yBAAyB,CAAA;sHAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,yBAAyB,ECXtC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,qoBAgBA,EDPY,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,+WAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEpB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAPrC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,YAC9B,2BAA2B,EAAA,OAAA,EAG5B,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,qoBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AENlC;MAQa,yBAAyB,CAAA;sHAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,yBAAyB,ECXtC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,glBAgBA,EDPY,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,+WAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEpB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAPrC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,YAC9B,2BAA2B,EAAA,OAAA,EAG5B,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,glBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AEJlC;MAQa,8BAA8B,CAAA;AAP3C,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;QAClE,IAAY,CAAA,YAAA,GAAG,IAAI,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;AAChD,KAAA;sHAHY,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;0GAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,QAAA,EAAA,CAAA,gCAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb3C,ypBAmBA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,+BAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kCAAA,EAAA,oCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAEhE,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAP1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oCAAoC,EACpC,QAAA,EAAA,gCAAgC,EAGjC,OAAA,EAAA,CAAC,UAAU,EAAE,WAAW,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAA,QAAA,EAAA,ypBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AEN9E;MAQa,8BAA8B,CAAA;AAP3C,IAAA,WAAA,GAAA;QAQE,IAAQ,CAAA,QAAA,GAAG,CAAC,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;QACjE,IAAK,CAAA,KAAA,GAAsB,EAAE,CAAC;AAC/B,KAAA;sHAHY,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;0GAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,QAAA,EAAA,CAAA,gCAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb3C,8nBAoBA,EDTY,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,8WAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAE3C,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAP1C,SAAS;+BACE,oCAAoC,EAAA,QAAA,EACpC,gCAAgC,EAAA,OAAA,EAGjC,CAAC,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAA,QAAA,EAAA,8nBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AEPzD;MAQa,6BAA6B,CAAA;AAP1C,IAAA,WAAA,GAAA;QAQE,IAAQ,CAAA,QAAA,GAAG,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AAC/C,QAAA,IAAA,CAAA,OAAO,GAAsB,CAAC,SAAS,CAAC,CAAC;AAK1C,KAAA;IAHC,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;KAC5B;sHANU,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,6BAA6B,0ICZ1C,+rBAoBA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,UAAU,EAAE,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,+BAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kCAAA,EAAA,oCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,qKAAE,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;mGAE9B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAPzC,SAAS;+BACE,mCAAmC,EAAA,QAAA,EACnC,+BAA+B,EAGhC,OAAA,EAAA,CAAC,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAA,QAAA,EAAA,+rBAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;AEV5C;;AAEG;;;;"} \ No newline at end of file +{"version":3,"file":"listbox.mjs","sources":["../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.html","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts","../../../../../../../src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.html","../../../../../../../src/components-examples/cdk/listbox/listbox_public_index.ts"],"sourcesContent":["import {Component} from '@angular/core';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with aria-activedescendant. */\n@Component({\n selector: 'cdk-listbox-activedescendant-example',\n exportAs: 'cdkListboxActivedescendantExample',\n templateUrl: 'cdk-listbox-activedescendant-example.html',\n styleUrl: 'cdk-listbox-activedescendant-example.css',\n imports: [CdkListbox, CdkOption],\n})\nexport class CdkListboxActivedescendantExample {\n features = ['Hydrodynamic', 'Port & Starboard Attachments', 'Turbo Drive'];\n}\n","\n Your appointment is scheduled for {{formatAppointment() | json}} \n
\n}\n","import {Component} from '@angular/core';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with custom keyboard navigation options. */\n@Component({\n selector: 'cdk-listbox-custom-navigation-example',\n exportAs: 'cdkListboxCustomNavigationExample',\n templateUrl: 'cdk-listbox-custom-navigation-example.html',\n styleUrl: 'cdk-listbox-custom-navigation-example.css',\n imports: [CdkListbox, CdkOption],\n})\nexport class CdkListboxCustomNavigationExample {}\n","{{error}}
\n }\n\n Your zodiac sign is: {{signCtrl.value | json}} \n \n
\n","import {Component} from '@angular/core';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Horizontal listbox */\n@Component({\n selector: 'cdk-listbox-horizontal-example',\n exportAs: 'cdkListboxhorizontalExample',\n templateUrl: 'cdk-listbox-horizontal-example.html',\n styleUrl: 'cdk-listbox-horizontal-example.css',\n imports: [CdkListbox, CdkOption],\n})\nexport class CdkListboxHorizontalExample {\n sizes = ['XS', 'S', 'M', 'L', 'XL'];\n}\n","\n\n\n Your preferred language: {{languageCtrl.value | json}} \n \n
\n","import {Component} from '@angular/core';\nimport {JsonPipe} from '@angular/common';\nimport {FormsModule} from '@angular/forms';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with template-driven forms. */\n@Component({\n selector: 'cdk-listbox-template-forms-example',\n exportAs: 'cdkListboxTemplateFormsExample',\n templateUrl: 'cdk-listbox-template-forms-example.html',\n styleUrl: 'cdk-listbox-template-forms-example.css',\n imports: [CdkListbox, FormsModule, CdkOption, JsonPipe],\n})\nexport class CdkListboxTemplateFormsExample {\n toppings = ['Extra Cheese', 'Mushrooms', 'Pepperoni', 'Sausage'];\n order: readonly string[] = [];\n}\n","\n Your order: {{order | json}} \n \n
\n","import {Component} from '@angular/core';\nimport {JsonPipe} from '@angular/common';\nimport {CdkListbox, CdkOption} from '@angular/cdk/listbox';\n\n/** @title Listbox with value binding. */\n@Component({\n selector: 'cdk-listbox-value-binding-example',\n exportAs: 'cdkListboxValueBindingExample',\n templateUrl: 'cdk-listbox-value-binding-example.html',\n styleUrl: 'cdk-listbox-value-binding-example.css',\n imports: [CdkListbox, CdkOption, JsonPipe],\n})\nexport class CdkListboxValueBindingExample {\n starters = ['Sprigatito', 'Fuecoco', 'Quaxly'];\n starter: readonly string[] = ['Fuecoco'];\n\n reset() {\n this.starter = ['Fuecoco'];\n }\n}\n","\n Your starter pokemon is {{starter | json}} \n \n
\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/fesm2022/cdk/menu.mjs b/fesm2022/cdk/menu.mjs index c03205e19b..3f7bd9e857 100755 --- a/fesm2022/cdk/menu.mjs +++ b/fesm2022/cdk/menu.mjs @@ -4,31 +4,29 @@ import { CdkMenuTrigger, CdkMenu, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuGroup /** @title Menu with Standalone Trigger. */ class CdkMenuStandaloneMenuExample { - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkMenuStandaloneMenuExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", type: CdkMenuStandaloneMenuExample, isStandalone: true, selector: "cdk-menu-standalone-menu-example", ngImport: i0, template: "\n\n\n\nIs Android: {{platform.ANDROID}}
\nIs iOS: {{platform.IOS}}
\nIs Firefox: {{platform.FIREFOX}}
\nIs Blink: {{platform.BLINK}}
\nIs Webkit: {{platform.WEBKIT}}
\nIs Trident: {{platform.TRIDENT}}
\nIs Edge: {{platform.EDGE}}
\nIs Safari: {{platform.SAFARI}}
\nSupported input types: {{supportedInputTypes}}
\nSupports passive event listeners: {{supportsPassiveEventListeners}}
\nSupports scroll behavior: {{supportsScrollBehavior}}
\n" }); } + platform = inject(Platform); + supportedInputTypes = Array.from(getSupportedInputTypes()).join(', '); + supportsPassiveEventListeners = supportsPassiveEventListeners(); + supportsScrollBehavior = supportsScrollBehavior(); + static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkPlatformOverviewExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); + static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: CdkPlatformOverviewExample, isStandalone: true, selector: "cdk-platform-overview-example", ngImport: i0, template: "Is Android: {{platform.ANDROID}}
\nIs iOS: {{platform.IOS}}
\nIs Firefox: {{platform.FIREFOX}}
\nIs Blink: {{platform.BLINK}}
\nIs Webkit: {{platform.WEBKIT}}
\nIs Trident: {{platform.TRIDENT}}
\nIs Edge: {{platform.EDGE}}
\nIs Safari: {{platform.SAFARI}}
\nSupported input types: {{supportedInputTypes}}
\nSupports passive event listeners: {{supportsPassiveEventListeners}}
\nSupports scroll behavior: {{supportsScrollBehavior}}
\n" }); } -i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkPlatformOverviewExample, decorators: [{ +i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CdkPlatformOverviewExample, decorators: [{ type: Component, args: [{ selector: 'cdk-platform-overview-example', template: "Is Android: {{platform.ANDROID}}
\nIs iOS: {{platform.IOS}}
\nIs Firefox: {{platform.FIREFOX}}
\nIs Blink: {{platform.BLINK}}
\nIs Webkit: {{platform.WEBKIT}}
\nIs Trident: {{platform.TRIDENT}}
\nIs Edge: {{platform.EDGE}}
\nIs Safari: {{platform.SAFARI}}
\nSupported input types: {{supportedInputTypes}}
\nSupports passive event listeners: {{supportsPassiveEventListeners}}
\nSupports scroll behavior: {{supportsScrollBehavior}}
\n" }] }] }); diff --git a/fesm2022/cdk/platform.mjs.map b/fesm2022/cdk/platform.mjs.map index f71b69b1ee..7ac0c541ae 100755 --- a/fesm2022/cdk/platform.mjs.map +++ b/fesm2022/cdk/platform.mjs.map @@ -1 +1 @@ -{"version":3,"file":"platform.mjs","sources":["../../../../../../../src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts","../../../../../../../src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.html","../../../../../../../src/components-examples/cdk/platform/platform_public_index.ts"],"sourcesContent":["import {Component, inject} from '@angular/core';\nimport {\n getSupportedInputTypes,\n Platform,\n supportsPassiveEventListeners,\n supportsScrollBehavior,\n} from '@angular/cdk/platform';\n\n/**\n * @title Platform overview\n */\n@Component({\n selector: 'cdk-platform-overview-example',\n templateUrl: 'cdk-platform-overview-example.html',\n})\nexport class CdkPlatformOverviewExample {\n platform = inject(Platform);\n\n supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');\n supportsPassiveEventListeners = supportsPassiveEventListeners();\n supportsScrollBehavior = supportsScrollBehavior();\n}\n","Is Android: {{platform.ANDROID}}
\nIs iOS: {{platform.IOS}}
\nIs Firefox: {{platform.FIREFOX}}
\nIs Blink: {{platform.BLINK}}
\nIs Webkit: {{platform.WEBKIT}}
\nIs Trident: {{platform.TRIDENT}}
\nIs Edge: {{platform.EDGE}}
\nIs Safari: {{platform.SAFARI}}
\nSupported input types: {{supportedInputTypes}}
\nSupports passive event listeners: {{supportsPassiveEventListeners}}
\nSupports scroll behavior: {{supportsScrollBehavior}}
\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAQA;;AAEG;MAKU,0BAA0B,CAAA;AAJvC,IAAA,WAAA,GAAA;AAKE,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AAE5B,QAAA,IAAA,CAAA,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtE,IAA6B,CAAA,6BAAA,GAAG,6BAA6B,EAAE,CAAC;QAChE,IAAsB,CAAA,sBAAA,GAAG,sBAAsB,EAAE,CAAC;AACnD,KAAA;sHANY,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,0BAA0B,yFCfvC,ohBAYA,EAAA,CAAA,CAAA,EAAA;;mGDGa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAJtC,SAAS;+BACE,+BAA+B,EAAA,QAAA,EAAA,ohBAAA,EAAA,CAAA;;;AEZ3C;;AAEG;;;;"} \ No newline at end of file +{"version":3,"file":"platform.mjs","sources":["../../../../../../../src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts","../../../../../../../src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.html","../../../../../../../src/components-examples/cdk/platform/platform_public_index.ts"],"sourcesContent":["import {Component, inject} from '@angular/core';\nimport {\n getSupportedInputTypes,\n Platform,\n supportsPassiveEventListeners,\n supportsScrollBehavior,\n} from '@angular/cdk/platform';\n\n/**\n * @title Platform overview\n */\n@Component({\n selector: 'cdk-platform-overview-example',\n templateUrl: 'cdk-platform-overview-example.html',\n})\nexport class CdkPlatformOverviewExample {\n platform = inject(Platform);\n\n supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');\n supportsPassiveEventListeners = supportsPassiveEventListeners();\n supportsScrollBehavior = supportsScrollBehavior();\n}\n","Is Android: {{platform.ANDROID}}
\nIs iOS: {{platform.IOS}}
\nIs Firefox: {{platform.FIREFOX}}
\nIs Blink: {{platform.BLINK}}
\nIs Webkit: {{platform.WEBKIT}}
\nIs Trident: {{platform.TRIDENT}}
\nIs Edge: {{platform.EDGE}}
\nIs Safari: {{platform.SAFARI}}
\nSupported input types: {{supportedInputTypes}}
\nSupports passive event listeners: {{supportsPassiveEventListeners}}
\nSupports scroll behavior: {{supportsScrollBehavior}}
\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAQA;;AAEG;MAKU,0BAA0B,CAAA;AACrC,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AAE5B,IAAA,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,6BAA6B,GAAG,6BAA6B,EAAE,CAAC;IAChE,sBAAsB,GAAG,sBAAsB,EAAE,CAAC;uGALvC,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,yFCfvC,ohBAYA,EAAA,CAAA,CAAA;;2FDGa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAJtC,SAAS;+BACE,+BAA+B,EAAA,QAAA,EAAA,ohBAAA,EAAA,CAAA;;;AEZ3C;;AAEG;;;;"} \ No newline at end of file diff --git a/fesm2022/cdk/portal.mjs b/fesm2022/cdk/portal.mjs index 6dfc06fb64..8aa9e0688d 100755 --- a/fesm2022/cdk/portal.mjs +++ b/fesm2022/cdk/portal.mjs @@ -7,18 +7,22 @@ import { ComponentPortal, TemplatePortal, DomPortal, PortalModule } from '@angul * @title Portal overview */ class CdkPortalOverviewExample { - constructor() { - this._viewContainerRef = inject(ViewContainerRef); - } + _viewContainerRef = inject(ViewContainerRef); + templatePortalContent; + domPortalContent; + selectedPortal; + componentPortal; + templatePortal; + domPortal; ngAfterViewInit() { this.componentPortal = new ComponentPortal(ComponentPortalExample); this.templatePortal = new TemplatePortal(this.templatePortalContent, this._viewContainerRef); this.domPortal = new DomPortal(this.domPortalContent); } - static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: CdkPortalOverviewExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); } - static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", type: CdkPortalOverviewExample, isStandalone: true, selector: "cdk-portal-overview-example", viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "domPortalContent", first: true, predicate: ["domPortalContent"], descendants: true }], ngImport: i0, template: "This is any content of \"Step 1\"
This is any content of \"Step 2\"
This is any content of \"Step 1\"
This is any content of \"Step 2\"
This is any content of \"Step 1\"
This is any content of \"Step 2\"
This is any content of \"Step 1\"
This is any content of \"Step 2\"
This is any content of \"Step 1\"
This is any content of \"Step 2\"
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|
No. | \n{{element.position}} | \nName | \n{{element.name}} | \nWeight | \n{{element.weight}} | \nSymbol | \n{{element.symbol}} | \n
---|