@angular/material-experimental 13.1.0 → 13.2.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/_index.scss +2 -1
- package/esm2020/column-resize/column-resize-directives/column-resize-flex.mjs +4 -4
- package/esm2020/column-resize/column-resize-directives/column-resize.mjs +4 -4
- package/esm2020/column-resize/column-resize-directives/default-enabled-column-resize-flex.mjs +4 -4
- package/esm2020/column-resize/column-resize-directives/default-enabled-column-resize.mjs +4 -4
- package/esm2020/column-resize/column-resize-module.mjs +13 -13
- package/esm2020/column-resize/overlay-handle.mjs +4 -4
- package/esm2020/column-resize/resizable-directives/default-enabled-resizable.mjs +4 -4
- package/esm2020/column-resize/resizable-directives/resizable.mjs +4 -4
- package/esm2020/column-resize/resize-strategy.mjs +4 -4
- package/esm2020/mdc-autocomplete/autocomplete-origin.mjs +4 -4
- package/esm2020/mdc-autocomplete/autocomplete-trigger.mjs +4 -4
- package/esm2020/mdc-autocomplete/autocomplete.mjs +4 -4
- package/esm2020/mdc-autocomplete/module.mjs +5 -5
- package/esm2020/mdc-button/button-base.mjs +14 -7
- package/esm2020/mdc-button/button.mjs +9 -9
- package/esm2020/mdc-button/fab.mjs +18 -18
- package/esm2020/mdc-button/icon-button.mjs +7 -7
- package/esm2020/mdc-button/module.mjs +5 -5
- package/esm2020/mdc-card/card.mjs +44 -44
- package/esm2020/mdc-card/module.mjs +5 -5
- package/esm2020/mdc-checkbox/checkbox.mjs +5 -5
- package/esm2020/mdc-checkbox/module.mjs +5 -5
- package/esm2020/mdc-chips/chip-action.mjs +123 -0
- package/esm2020/mdc-chips/chip-edit-input.mjs +5 -5
- package/esm2020/mdc-chips/chip-grid.mjs +46 -96
- package/esm2020/mdc-chips/chip-icons.mjs +46 -101
- package/esm2020/mdc-chips/chip-input.mjs +6 -13
- package/esm2020/mdc-chips/chip-listbox.mjs +51 -156
- package/esm2020/mdc-chips/chip-option.mjs +84 -95
- package/esm2020/mdc-chips/chip-row.mjs +82 -90
- package/esm2020/mdc-chips/chip-set.mjs +119 -120
- package/esm2020/mdc-chips/chip.mjs +189 -181
- package/esm2020/mdc-chips/emit-event.mjs +27 -0
- package/esm2020/mdc-chips/module.mjs +8 -10
- package/esm2020/mdc-chips/testing/chip-harness.mjs +5 -1
- package/esm2020/mdc-chips/testing/chip-option-harness.mjs +2 -2
- package/esm2020/mdc-chips/testing/chip-row-harness.mjs +10 -1
- package/esm2020/mdc-core/option/index.mjs +5 -5
- package/esm2020/mdc-core/option/optgroup.mjs +4 -4
- package/esm2020/mdc-core/option/option.mjs +4 -4
- package/esm2020/mdc-core/public-api.mjs +2 -2
- package/esm2020/mdc-dialog/dialog-container.mjs +5 -5
- package/esm2020/mdc-dialog/dialog-content-directives.mjs +13 -13
- package/esm2020/mdc-dialog/dialog.mjs +4 -4
- package/esm2020/mdc-dialog/module.mjs +5 -5
- package/esm2020/mdc-form-field/directives/error.mjs +4 -4
- package/esm2020/mdc-form-field/directives/floating-label.mjs +4 -4
- package/esm2020/mdc-form-field/directives/hint.mjs +4 -4
- package/esm2020/mdc-form-field/directives/label.mjs +4 -4
- package/esm2020/mdc-form-field/directives/line-ripple.mjs +4 -4
- package/esm2020/mdc-form-field/directives/notched-outline.mjs +4 -4
- package/esm2020/mdc-form-field/directives/prefix.mjs +4 -4
- package/esm2020/mdc-form-field/directives/suffix.mjs +4 -4
- package/esm2020/mdc-form-field/form-field.mjs +4 -4
- package/esm2020/mdc-form-field/module.mjs +5 -5
- package/esm2020/mdc-input/input.mjs +4 -4
- package/esm2020/mdc-input/module.mjs +5 -5
- package/esm2020/mdc-list/action-list.mjs +5 -5
- package/esm2020/mdc-list/interactive-list-base.mjs +12 -10
- package/esm2020/mdc-list/list-base.mjs +138 -41
- package/esm2020/mdc-list/list-item-sections.mjs +138 -0
- package/esm2020/mdc-list/list-option.mjs +25 -17
- package/esm2020/mdc-list/list.mjs +24 -18
- package/esm2020/mdc-list/module.mjs +46 -23
- package/esm2020/mdc-list/nav-list.mjs +5 -5
- package/esm2020/mdc-list/public-api.mjs +3 -2
- package/esm2020/mdc-list/selection-list.mjs +8 -8
- package/esm2020/mdc-list/subheader.mjs +27 -0
- package/esm2020/mdc-list/testing/list-harness-filters.mjs +1 -1
- package/esm2020/mdc-list/testing/list-item-harness-base.mjs +96 -12
- package/esm2020/mdc-list/testing/public-api.mjs +2 -1
- package/esm2020/mdc-menu/directives.mjs +7 -7
- package/esm2020/mdc-menu/menu-item.mjs +4 -4
- package/esm2020/mdc-menu/menu.mjs +4 -4
- package/esm2020/mdc-menu/module.mjs +5 -5
- package/esm2020/mdc-paginator/module.mjs +5 -5
- package/esm2020/mdc-paginator/paginator.mjs +4 -4
- package/esm2020/mdc-progress-bar/module.mjs +5 -5
- package/esm2020/mdc-progress-bar/progress-bar.mjs +5 -5
- package/esm2020/mdc-progress-spinner/module.mjs +5 -5
- package/esm2020/mdc-progress-spinner/progress-spinner.mjs +4 -4
- package/esm2020/mdc-radio/module.mjs +5 -5
- package/esm2020/mdc-radio/radio.mjs +8 -8
- package/esm2020/mdc-select/module.mjs +5 -5
- package/esm2020/mdc-select/select.mjs +9 -9
- package/esm2020/mdc-sidenav/module.mjs +5 -5
- package/esm2020/mdc-slide-toggle/module.mjs +5 -5
- package/esm2020/mdc-slide-toggle/slide-toggle.mjs +5 -5
- package/esm2020/mdc-slider/global-change-and-input-listener.mjs +4 -4
- package/esm2020/mdc-slider/module.mjs +5 -5
- package/esm2020/mdc-slider/slider.mjs +33 -12
- package/esm2020/mdc-snack-bar/module.mjs +5 -5
- package/esm2020/mdc-snack-bar/simple-snack-bar.mjs +4 -4
- package/esm2020/mdc-snack-bar/snack-bar-container.mjs +5 -5
- package/esm2020/mdc-snack-bar/snack-bar-content.mjs +10 -10
- package/esm2020/mdc-snack-bar/snack-bar.mjs +4 -4
- package/esm2020/mdc-table/cell.mjs +22 -22
- package/esm2020/mdc-table/module.mjs +5 -5
- package/esm2020/mdc-table/row.mjs +22 -22
- package/esm2020/mdc-table/table.mjs +9 -9
- package/esm2020/mdc-table/text-column.mjs +4 -4
- package/esm2020/mdc-tabs/module.mjs +10 -6
- package/esm2020/mdc-tabs/public-api.mjs +2 -2
- package/esm2020/mdc-tabs/tab-body.mjs +7 -7
- package/esm2020/mdc-tabs/tab-content.mjs +4 -4
- package/esm2020/mdc-tabs/tab-group.mjs +6 -6
- package/esm2020/mdc-tabs/tab-header.mjs +12 -5
- package/esm2020/mdc-tabs/tab-label-wrapper.mjs +4 -4
- package/esm2020/mdc-tabs/tab-label.mjs +4 -4
- package/esm2020/mdc-tabs/tab-nav-bar/tab-nav-bar.mjs +47 -10
- package/esm2020/mdc-tabs/tab.mjs +4 -4
- package/esm2020/mdc-tabs/testing/tab-harness-filters.mjs +1 -1
- package/esm2020/mdc-tabs/testing/tab-nav-bar-harness.mjs +13 -1
- package/esm2020/mdc-tabs/testing/tab-nav-panel-harness.mjs +27 -0
- package/esm2020/mdc-tooltip/module.mjs +5 -5
- package/esm2020/mdc-tooltip/tooltip.mjs +8 -8
- package/esm2020/menubar/menubar-item.mjs +4 -4
- package/esm2020/menubar/menubar-module.mjs +5 -5
- package/esm2020/menubar/menubar.mjs +4 -4
- package/esm2020/popover-edit/lens-directives.mjs +10 -10
- package/esm2020/popover-edit/popover-edit-module.mjs +5 -5
- package/esm2020/popover-edit/table-directives.mjs +13 -13
- package/esm2020/selection/row-selection.mjs +4 -4
- package/esm2020/selection/select-all.mjs +4 -4
- package/esm2020/selection/selection-column.mjs +4 -4
- package/esm2020/selection/selection-module.mjs +5 -5
- package/esm2020/selection/selection-toggle.mjs +4 -4
- package/esm2020/selection/selection.mjs +4 -4
- package/esm2020/version.mjs +1 -1
- package/fesm2015/column-resize.mjs +36 -36
- package/fesm2015/column-resize.mjs.map +1 -1
- package/fesm2015/material-experimental.mjs +1 -1
- package/fesm2015/material-experimental.mjs.map +1 -1
- package/fesm2015/mdc-autocomplete.mjs +13 -13
- package/fesm2015/mdc-autocomplete.mjs.map +1 -1
- package/fesm2015/mdc-button.mjs +40 -40
- package/fesm2015/mdc-button.mjs.map +1 -1
- package/fesm2015/mdc-card.mjs +47 -47
- package/fesm2015/mdc-card.mjs.map +1 -1
- package/fesm2015/mdc-checkbox.mjs +8 -8
- package/fesm2015/mdc-checkbox.mjs.map +1 -1
- package/fesm2015/mdc-chips/testing.mjs +18 -8
- package/fesm2015/mdc-chips/testing.mjs.map +1 -1
- package/fesm2015/mdc-chips.mjs +758 -1061
- package/fesm2015/mdc-chips.mjs.map +1 -1
- package/fesm2015/mdc-core.mjs +11 -11
- package/fesm2015/mdc-core.mjs.map +1 -1
- package/fesm2015/mdc-dialog.mjs +23 -23
- package/fesm2015/mdc-dialog.mjs.map +1 -1
- package/fesm2015/mdc-form-field.mjs +31 -31
- package/fesm2015/mdc-form-field.mjs.map +1 -1
- package/fesm2015/mdc-input.mjs +7 -7
- package/fesm2015/mdc-input.mjs.map +1 -1
- package/fesm2015/mdc-list/testing.mjs +104 -12
- package/fesm2015/mdc-list/testing.mjs.map +1 -1
- package/fesm2015/mdc-list.mjs +361 -154
- package/fesm2015/mdc-list.mjs.map +1 -1
- package/fesm2015/mdc-menu.mjs +16 -16
- package/fesm2015/mdc-menu.mjs.map +1 -1
- package/fesm2015/mdc-paginator.mjs +7 -7
- package/fesm2015/mdc-paginator.mjs.map +1 -1
- package/fesm2015/mdc-progress-bar.mjs +8 -8
- package/fesm2015/mdc-progress-bar.mjs.map +1 -1
- package/fesm2015/mdc-progress-spinner.mjs +7 -7
- package/fesm2015/mdc-progress-spinner.mjs.map +1 -1
- package/fesm2015/mdc-radio.mjs +11 -11
- package/fesm2015/mdc-radio.mjs.map +1 -1
- package/fesm2015/mdc-select.mjs +12 -12
- package/fesm2015/mdc-select.mjs.map +1 -1
- package/fesm2015/mdc-sidenav.mjs +4 -4
- package/fesm2015/mdc-sidenav.mjs.map +1 -1
- package/fesm2015/mdc-slide-toggle.mjs +8 -8
- package/fesm2015/mdc-slide-toggle.mjs.map +1 -1
- package/fesm2015/mdc-slider.mjs +39 -18
- package/fesm2015/mdc-slider.mjs.map +1 -1
- package/fesm2015/mdc-snack-bar.mjs +23 -23
- package/fesm2015/mdc-snack-bar.mjs.map +1 -1
- package/fesm2015/mdc-table.mjs +57 -57
- package/fesm2015/mdc-table.mjs.map +1 -1
- package/fesm2015/mdc-tabs/testing.mjs +34 -0
- package/fesm2015/mdc-tabs/testing.mjs.map +1 -1
- package/fesm2015/mdc-tabs.mjs +89 -41
- package/fesm2015/mdc-tabs.mjs.map +1 -1
- package/fesm2015/mdc-tooltip.mjs +11 -11
- package/fesm2015/mdc-tooltip.mjs.map +1 -1
- package/fesm2015/menubar.mjs +10 -10
- package/fesm2015/menubar.mjs.map +1 -1
- package/fesm2015/popover-edit.mjs +25 -25
- package/fesm2015/popover-edit.mjs.map +1 -1
- package/fesm2015/selection.mjs +19 -19
- package/fesm2015/selection.mjs.map +1 -1
- package/fesm2020/column-resize.mjs +36 -36
- package/fesm2020/column-resize.mjs.map +1 -1
- package/fesm2020/material-experimental.mjs +1 -1
- package/fesm2020/material-experimental.mjs.map +1 -1
- package/fesm2020/mdc-autocomplete.mjs +13 -13
- package/fesm2020/mdc-autocomplete.mjs.map +1 -1
- package/fesm2020/mdc-button.mjs +48 -41
- package/fesm2020/mdc-button.mjs.map +1 -1
- package/fesm2020/mdc-card.mjs +47 -47
- package/fesm2020/mdc-card.mjs.map +1 -1
- package/fesm2020/mdc-checkbox.mjs +8 -8
- package/fesm2020/mdc-checkbox.mjs.map +1 -1
- package/fesm2020/mdc-chips/testing.mjs +14 -1
- package/fesm2020/mdc-chips/testing.mjs.map +1 -1
- package/fesm2020/mdc-chips.mjs +738 -1066
- package/fesm2020/mdc-chips.mjs.map +1 -1
- package/fesm2020/mdc-core.mjs +11 -11
- package/fesm2020/mdc-core.mjs.map +1 -1
- package/fesm2020/mdc-dialog.mjs +23 -23
- package/fesm2020/mdc-dialog.mjs.map +1 -1
- package/fesm2020/mdc-form-field.mjs +31 -31
- package/fesm2020/mdc-form-field.mjs.map +1 -1
- package/fesm2020/mdc-input.mjs +7 -7
- package/fesm2020/mdc-input.mjs.map +1 -1
- package/fesm2020/mdc-list/testing.mjs +96 -12
- package/fesm2020/mdc-list/testing.mjs.map +1 -1
- package/fesm2020/mdc-list.mjs +359 -154
- package/fesm2020/mdc-list.mjs.map +1 -1
- package/fesm2020/mdc-menu.mjs +16 -16
- package/fesm2020/mdc-menu.mjs.map +1 -1
- package/fesm2020/mdc-paginator.mjs +7 -7
- package/fesm2020/mdc-paginator.mjs.map +1 -1
- package/fesm2020/mdc-progress-bar.mjs +8 -8
- package/fesm2020/mdc-progress-bar.mjs.map +1 -1
- package/fesm2020/mdc-progress-spinner.mjs +7 -7
- package/fesm2020/mdc-progress-spinner.mjs.map +1 -1
- package/fesm2020/mdc-radio.mjs +11 -11
- package/fesm2020/mdc-radio.mjs.map +1 -1
- package/fesm2020/mdc-select.mjs +12 -12
- package/fesm2020/mdc-select.mjs.map +1 -1
- package/fesm2020/mdc-sidenav.mjs +4 -4
- package/fesm2020/mdc-sidenav.mjs.map +1 -1
- package/fesm2020/mdc-slide-toggle.mjs +8 -8
- package/fesm2020/mdc-slide-toggle.mjs.map +1 -1
- package/fesm2020/mdc-slider.mjs +39 -18
- package/fesm2020/mdc-slider.mjs.map +1 -1
- package/fesm2020/mdc-snack-bar.mjs +23 -23
- package/fesm2020/mdc-snack-bar.mjs.map +1 -1
- package/fesm2020/mdc-table.mjs +57 -57
- package/fesm2020/mdc-table.mjs.map +1 -1
- package/fesm2020/mdc-tabs/testing.mjs +37 -0
- package/fesm2020/mdc-tabs/testing.mjs.map +1 -1
- package/fesm2020/mdc-tabs.mjs +89 -41
- package/fesm2020/mdc-tabs.mjs.map +1 -1
- package/fesm2020/mdc-tooltip.mjs +11 -11
- package/fesm2020/mdc-tooltip.mjs.map +1 -1
- package/fesm2020/menubar.mjs +10 -10
- package/fesm2020/menubar.mjs.map +1 -1
- package/fesm2020/popover-edit.mjs +25 -25
- package/fesm2020/popover-edit.mjs.map +1 -1
- package/fesm2020/selection.mjs +19 -19
- package/fesm2020/selection.mjs.map +1 -1
- package/mdc-button/button-base.d.ts +0 -3
- package/mdc-button/fab.d.ts +5 -7
- package/mdc-checkbox/_checkbox-theme.scss +32 -30
- package/mdc-checkbox/checkbox.d.ts +4 -9
- package/mdc-chips/_chips-theme.scss +53 -53
- package/mdc-chips/chip-action.d.ts +40 -0
- package/mdc-chips/chip-grid.d.ts +8 -26
- package/mdc-chips/chip-icons.d.ts +14 -40
- package/mdc-chips/chip-input.d.ts +2 -4
- package/mdc-chips/chip-listbox.d.ts +7 -46
- package/mdc-chips/chip-option.d.ts +17 -15
- package/mdc-chips/chip-row.d.ts +13 -30
- package/mdc-chips/chip-set.d.ts +27 -46
- package/mdc-chips/chip.d.ts +41 -45
- package/mdc-chips/emit-event.d.ts +16 -0
- package/mdc-chips/module.d.ts +13 -12
- package/mdc-chips/testing/chip-harness.d.ts +1 -0
- package/mdc-chips/testing/chip-row-harness.d.ts +4 -0
- package/mdc-core/_core-theme.scss +47 -14
- package/mdc-core/public-api.d.ts +1 -1
- package/mdc-form-field/form-field.d.ts +1 -2
- package/mdc-helpers/_focus-indicators.scss +15 -3
- package/mdc-list/_interactive-list-theme.scss +17 -11
- package/mdc-list/_list-option-theme.scss +2 -2
- package/mdc-list/_list-theme.scss +7 -3
- package/mdc-list/list-base.d.ts +59 -18
- package/mdc-list/list-item-sections.d.ts +77 -0
- package/mdc-list/list-option.d.ts +12 -10
- package/mdc-list/list.d.ts +6 -2
- package/mdc-list/module.d.ts +7 -5
- package/mdc-list/public-api.d.ts +2 -1
- package/mdc-list/selection-list.d.ts +1 -2
- package/mdc-list/subheader.d.ts +9 -0
- package/mdc-list/testing/list-harness-filters.d.ts +8 -0
- package/mdc-list/testing/list-item-harness-base.d.ts +34 -3
- package/mdc-list/testing/public-api.d.ts +1 -1
- package/mdc-progress-spinner/progress-spinner.d.ts +3 -6
- package/mdc-select/_select-theme.scss +6 -27
- package/mdc-slide-toggle/slide-toggle.d.ts +5 -10
- package/mdc-slider/slider.d.ts +20 -16
- package/mdc-table/_table-theme.scss +1 -1
- package/mdc-tabs/_tabs-common.scss +0 -1
- package/mdc-tabs/module.d.ts +1 -1
- package/mdc-tabs/public-api.d.ts +1 -1
- package/mdc-tabs/tab-group.d.ts +1 -2
- package/mdc-tabs/tab-header.d.ts +0 -2
- package/mdc-tabs/tab-label-wrapper.d.ts +1 -2
- package/mdc-tabs/tab-nav-bar/tab-nav-bar.d.ts +12 -3
- package/mdc-tabs/testing/tab-harness-filters.d.ts +3 -0
- package/mdc-tabs/testing/tab-nav-bar-harness.d.ts +3 -0
- package/mdc-tabs/testing/tab-nav-panel-harness.d.ts +23 -0
- package/mdc-theming/prebuilt/deeppurple-amber.css +1 -0
- package/mdc-theming/prebuilt/indigo-pink.css +1 -1
- package/mdc-theming/prebuilt/pink-bluegrey.css +1 -0
- package/mdc-theming/prebuilt/purple-green.css +1 -0
- package/mdc-tooltip/_tooltip-theme.scss +1 -1
- package/package.json +17 -3
- package/esm2020/mdc-chips/grid-focus-key-manager.mjs +0 -21
- package/esm2020/mdc-chips/grid-key-manager.mjs +0 -218
- package/esm2020/mdc-list/list-styling.mjs +0 -92
- package/mdc-chips/grid-focus-key-manager.d.ts +0 -28
- package/mdc-chips/grid-key-manager.d.ts +0 -116
- package/mdc-list/list-styling.d.ts +0 -40
package/fesm2015/mdc-chips.mjs
CHANGED
|
@@ -1,22 +1,175 @@
|
|
|
1
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
2
2
|
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { Directive, Inject, Input, InjectionToken, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Attribute, Output, ContentChild, ViewChild, ContentChildren, forwardRef, Self, NgModule } from '@angular/core';
|
|
5
|
+
import * as i3$1 from '@angular/common';
|
|
6
|
+
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
5
7
|
import * as i3 from '@angular/material-experimental/mdc-core';
|
|
6
8
|
import { mixinTabIndex, mixinDisabled, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, mixinErrorState, MatCommonModule, MatRippleModule, ErrorStateMatcher } from '@angular/material-experimental/mdc-core';
|
|
7
|
-
import {
|
|
8
|
-
import { SPACE, ENTER, hasModifierKey, BACKSPACE, DELETE, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, END, HOME, TAB } from '@angular/cdk/keycodes';
|
|
9
|
+
import { MDCChipPrimaryActionFoundation, MDCChipActionType, MDCChipTrailingActionFoundation, MDCChipFoundation, MDCChipActionEvents, MDCChipActionInteractionTrigger, MDCChipCssClasses, MDCChipSetFoundation, MDCChipEvents } from '@material/chips';
|
|
9
10
|
import { Subject, merge } from 'rxjs';
|
|
10
|
-
import
|
|
11
|
-
import * as
|
|
12
|
-
import
|
|
13
|
-
import {
|
|
14
|
-
import { FocusKeyManager } from '@angular/cdk/a11y';
|
|
11
|
+
import * as i1 from '@angular/cdk/a11y';
|
|
12
|
+
import * as i2 from '@angular/cdk/bidi';
|
|
13
|
+
import { take, startWith, takeUntil, switchMap } from 'rxjs/operators';
|
|
14
|
+
import { BACKSPACE, DELETE, ENTER, TAB, hasModifierKey } from '@angular/cdk/keycodes';
|
|
15
15
|
import * as i2$1 from '@angular/forms';
|
|
16
16
|
import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
|
|
17
17
|
import * as i1$1 from '@angular/material-experimental/mdc-form-field';
|
|
18
18
|
import { MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material-experimental/mdc-form-field';
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* @license
|
|
22
|
+
* Copyright Google LLC All Rights Reserved.
|
|
23
|
+
*
|
|
24
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
25
|
+
* found in the LICENSE file at https://angular.io/license
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Emits a custom event from an element.
|
|
29
|
+
* @param element Element from which to emit the event.
|
|
30
|
+
* @param _document Document that the element is placed in.
|
|
31
|
+
* @param eventName Name of the event.
|
|
32
|
+
* @param data Data attached to the event.
|
|
33
|
+
* @param shouldBubble Whether the event should bubble.
|
|
34
|
+
*/
|
|
35
|
+
function emitCustomEvent(element, _document, eventName, data, shouldBubble) {
|
|
36
|
+
let event;
|
|
37
|
+
if (typeof CustomEvent === 'function') {
|
|
38
|
+
event = new CustomEvent(eventName, { bubbles: shouldBubble, detail: data });
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
event = _document.createEvent('CustomEvent');
|
|
42
|
+
event.initCustomEvent(eventName, shouldBubble, false, data);
|
|
43
|
+
}
|
|
44
|
+
element.dispatchEvent(event);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* @license
|
|
49
|
+
* Copyright Google LLC All Rights Reserved.
|
|
50
|
+
*
|
|
51
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
52
|
+
* found in the LICENSE file at https://angular.io/license
|
|
53
|
+
*/
|
|
54
|
+
const _MatChipActionMixinBase = mixinTabIndex(mixinDisabled(class {
|
|
55
|
+
}), -1);
|
|
56
|
+
/**
|
|
57
|
+
* Interactive element within a chip.
|
|
58
|
+
* @docs-private
|
|
59
|
+
*/
|
|
60
|
+
class MatChipAction extends _MatChipActionMixinBase {
|
|
61
|
+
constructor(_elementRef, _document, _changeDetectorRef) {
|
|
62
|
+
super();
|
|
63
|
+
this._elementRef = _elementRef;
|
|
64
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
65
|
+
this._adapter = {
|
|
66
|
+
focus: () => this.focus(),
|
|
67
|
+
getAttribute: (name) => this._elementRef.nativeElement.getAttribute(name),
|
|
68
|
+
setAttribute: (name, value) => {
|
|
69
|
+
// MDC tries to update the tabindex directly in the DOM when navigating using the keyboard
|
|
70
|
+
// which overrides our own handling. If we detect such a case, assign it to the same property
|
|
71
|
+
// as the Angular binding in order to maintain consistency.
|
|
72
|
+
if (name === 'tabindex') {
|
|
73
|
+
this._updateTabindex(parseInt(value));
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
this._elementRef.nativeElement.setAttribute(name, value);
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
removeAttribute: (name) => {
|
|
80
|
+
if (name !== 'tabindex') {
|
|
81
|
+
this._elementRef.nativeElement.removeAttribute(name);
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
getElementID: () => this._elementRef.nativeElement.id,
|
|
85
|
+
emitEvent: (eventName, data) => {
|
|
86
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, data, true);
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
/** Whether the action is interactive. */
|
|
90
|
+
this.isInteractive = true;
|
|
91
|
+
this._foundation = this._createFoundation(this._adapter);
|
|
92
|
+
if (_elementRef.nativeElement.nodeName === 'BUTTON') {
|
|
93
|
+
_elementRef.nativeElement.setAttribute('type', 'button');
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
_handleClick(_event) {
|
|
97
|
+
// Usually these events can't happen while the chip is disabled since the browser won't
|
|
98
|
+
// allow them which is what MDC seems to rely on, however the event can be faked in tests.
|
|
99
|
+
if (!this.disabled && this.isInteractive) {
|
|
100
|
+
this._foundation.handleClick();
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
_handleKeydown(event) {
|
|
104
|
+
// Usually these events can't happen while the chip is disabled since the browser won't
|
|
105
|
+
// allow them which is what MDC seems to rely on, however the event can be faked in tests.
|
|
106
|
+
if (!this.disabled && this.isInteractive) {
|
|
107
|
+
this._foundation.handleKeydown(event);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
_createFoundation(adapter) {
|
|
111
|
+
return new MDCChipPrimaryActionFoundation(adapter);
|
|
112
|
+
}
|
|
113
|
+
ngAfterViewInit() {
|
|
114
|
+
this._foundation.init();
|
|
115
|
+
this._foundation.setDisabled(this.disabled);
|
|
116
|
+
}
|
|
117
|
+
ngOnChanges(changes) {
|
|
118
|
+
if (changes['disabled']) {
|
|
119
|
+
this._foundation.setDisabled(this.disabled);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
ngOnDestroy() {
|
|
123
|
+
this._foundation.destroy();
|
|
124
|
+
}
|
|
125
|
+
focus() {
|
|
126
|
+
this._elementRef.nativeElement.focus();
|
|
127
|
+
}
|
|
128
|
+
_getFoundation() {
|
|
129
|
+
return this._foundation;
|
|
130
|
+
}
|
|
131
|
+
_updateTabindex(value) {
|
|
132
|
+
this.tabIndex = value;
|
|
133
|
+
this._changeDetectorRef.markForCheck();
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
MatChipAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipAction, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
137
|
+
MatChipAction.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatChipAction, selector: "[matChipAction]", inputs: { disabled: "disabled", tabIndex: "tabIndex", isInteractive: "isInteractive" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)" }, properties: { "class.mdc-evolution-chip__action--primary": "_getFoundation().actionType() === 1", "class.mdc-evolution-chip__action--presentational": "_getFoundation().actionType() === 1", "class.mdc-evolution-chip__action--trailing": "_getFoundation().actionType() === 2", "attr.tabindex": "(disabled || !isInteractive) ? null : tabIndex", "attr.disabled": "disabled ? '' : null", "attr.aria-disabled": "disabled" }, classAttribute: "mdc-evolution-chip__action mat-mdc-chip-action" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipAction, decorators: [{
|
|
139
|
+
type: Directive,
|
|
140
|
+
args: [{
|
|
141
|
+
selector: '[matChipAction]',
|
|
142
|
+
inputs: ['disabled', 'tabIndex'],
|
|
143
|
+
host: {
|
|
144
|
+
'class': 'mdc-evolution-chip__action mat-mdc-chip-action',
|
|
145
|
+
'[class.mdc-evolution-chip__action--primary]': `_getFoundation().actionType() === ${MDCChipActionType.PRIMARY}`,
|
|
146
|
+
// Note that while our actions are interactive, we have to add the `--presentational` class,
|
|
147
|
+
// in order to avoid some super-specific `:hover` styles from MDC.
|
|
148
|
+
'[class.mdc-evolution-chip__action--presentational]': `_getFoundation().actionType() === ${MDCChipActionType.PRIMARY}`,
|
|
149
|
+
'[class.mdc-evolution-chip__action--trailing]': `_getFoundation().actionType() === ${MDCChipActionType.TRAILING}`,
|
|
150
|
+
'[attr.tabindex]': '(disabled || !isInteractive) ? null : tabIndex',
|
|
151
|
+
'[attr.disabled]': "disabled ? '' : null",
|
|
152
|
+
'[attr.aria-disabled]': 'disabled',
|
|
153
|
+
'(click)': '_handleClick($event)',
|
|
154
|
+
'(keydown)': '_handleKeydown($event)',
|
|
155
|
+
},
|
|
156
|
+
}]
|
|
157
|
+
}], ctorParameters: function () {
|
|
158
|
+
return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
159
|
+
type: Inject,
|
|
160
|
+
args: [DOCUMENT]
|
|
161
|
+
}] }, { type: i0.ChangeDetectorRef }];
|
|
162
|
+
}, propDecorators: { isInteractive: [{
|
|
163
|
+
type: Input
|
|
164
|
+
}] } });
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* @license
|
|
168
|
+
* Copyright Google LLC All Rights Reserved.
|
|
169
|
+
*
|
|
170
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
171
|
+
* found in the LICENSE file at https://angular.io/license
|
|
172
|
+
*/
|
|
20
173
|
/**
|
|
21
174
|
* Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
|
|
22
175
|
* alternative token to the actual `MatChipAvatar` class which could cause unnecessary
|
|
@@ -28,29 +181,20 @@ const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
|
|
|
28
181
|
* @docs-private
|
|
29
182
|
*/
|
|
30
183
|
class MatChipAvatar {
|
|
31
|
-
constructor(_changeDetectorRef, _elementRef) {
|
|
32
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
33
|
-
this._elementRef = _elementRef;
|
|
34
|
-
}
|
|
35
|
-
/** Sets whether the given CSS class should be applied to the leading icon. */
|
|
36
|
-
setClass(cssClass, active) {
|
|
37
|
-
this._elementRef.nativeElement.classList.toggle(cssClass, active);
|
|
38
|
-
this._changeDetectorRef.markForCheck();
|
|
39
|
-
}
|
|
40
184
|
}
|
|
41
|
-
MatChipAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
42
|
-
MatChipAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
185
|
+
MatChipAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
186
|
+
MatChipAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]", host: { attributes: { "role": "img" }, classAttribute: "mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary" }, providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }], ngImport: i0 });
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipAvatar, decorators: [{
|
|
44
188
|
type: Directive,
|
|
45
189
|
args: [{
|
|
46
190
|
selector: 'mat-chip-avatar, [matChipAvatar]',
|
|
47
191
|
host: {
|
|
48
|
-
'class': 'mat-mdc-chip-avatar mdc-chip__icon mdc-chip__icon--
|
|
192
|
+
'class': 'mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
|
|
49
193
|
'role': 'img',
|
|
50
194
|
},
|
|
51
195
|
providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }],
|
|
52
196
|
}]
|
|
53
|
-
}]
|
|
197
|
+
}] });
|
|
54
198
|
/**
|
|
55
199
|
* Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
|
|
56
200
|
* alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
|
|
@@ -61,79 +205,38 @@ const MAT_CHIP_TRAILING_ICON = new InjectionToken('MatChipTrailingIcon');
|
|
|
61
205
|
* Directive to add CSS classes to and configure attributes for chip trailing icon.
|
|
62
206
|
* @docs-private
|
|
63
207
|
*/
|
|
64
|
-
class MatChipTrailingIcon {
|
|
65
|
-
constructor(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
this.
|
|
72
|
-
this._adapter = {
|
|
73
|
-
focus: () => this._elementRef.nativeElement.focus(),
|
|
74
|
-
getAttribute: (name) => this._elementRef.nativeElement.getAttribute(name),
|
|
75
|
-
setAttribute: (name, value) => {
|
|
76
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
77
|
-
},
|
|
78
|
-
// TODO(crisbeto): there's also a `trigger` parameter that the chip isn't
|
|
79
|
-
// handling yet. Consider passing it along once MDC start using it.
|
|
80
|
-
notifyInteraction: () => {
|
|
81
|
-
// TODO(crisbeto): uncomment this code once we've inverted the
|
|
82
|
-
// dependency on `MatChip`. this._chip._notifyInteraction();
|
|
83
|
-
},
|
|
84
|
-
// TODO(crisbeto): there's also a `key` parameter that the chip isn't
|
|
85
|
-
// handling yet. Consider passing it along once MDC start using it.
|
|
86
|
-
notifyNavigation: () => {
|
|
87
|
-
// TODO(crisbeto): uncomment this code once we've inverted the
|
|
88
|
-
// dependency on `MatChip`. this._chip._notifyNavigation();
|
|
89
|
-
},
|
|
90
|
-
};
|
|
91
|
-
this._foundation = new deprecated.MDCChipTrailingActionFoundation(this._adapter);
|
|
92
|
-
}
|
|
93
|
-
ngOnDestroy() {
|
|
94
|
-
this._foundation.destroy();
|
|
95
|
-
}
|
|
96
|
-
focus() {
|
|
97
|
-
this._elementRef.nativeElement.focus();
|
|
98
|
-
}
|
|
99
|
-
/** Sets an attribute on the icon. */
|
|
100
|
-
setAttribute(name, value) {
|
|
101
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
208
|
+
class MatChipTrailingIcon extends MatChipAction {
|
|
209
|
+
constructor() {
|
|
210
|
+
super(...arguments);
|
|
211
|
+
/**
|
|
212
|
+
* MDC considers all trailing actions as a remove icon,
|
|
213
|
+
* but we support non-interactive trailing icons.
|
|
214
|
+
*/
|
|
215
|
+
this.isInteractive = false;
|
|
102
216
|
}
|
|
103
|
-
|
|
104
|
-
return
|
|
217
|
+
_createFoundation(adapter) {
|
|
218
|
+
return new MDCChipTrailingActionFoundation(adapter);
|
|
105
219
|
}
|
|
106
220
|
}
|
|
107
|
-
MatChipTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
108
|
-
MatChipTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
221
|
+
MatChipTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipTrailingIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
222
|
+
MatChipTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing" }, providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }], usesInheritance: true, ngImport: i0 });
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipTrailingIcon, decorators: [{
|
|
110
224
|
type: Directive,
|
|
111
225
|
args: [{
|
|
112
226
|
selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
|
|
113
227
|
host: {
|
|
114
|
-
'class': 'mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
|
|
115
|
-
'tabindex': '-1',
|
|
228
|
+
'class': 'mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
|
|
116
229
|
'aria-hidden': 'true',
|
|
117
230
|
},
|
|
118
231
|
providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }],
|
|
119
232
|
}]
|
|
120
|
-
}]
|
|
233
|
+
}] });
|
|
121
234
|
/**
|
|
122
235
|
* Injection token that can be used to reference instances of `MatChipRemove`. It serves as
|
|
123
236
|
* alternative token to the actual `MatChipRemove` class which could cause unnecessary
|
|
124
237
|
* retention of the class and its directive metadata.
|
|
125
238
|
*/
|
|
126
239
|
const MAT_CHIP_REMOVE = new InjectionToken('MatChipRemove');
|
|
127
|
-
/**
|
|
128
|
-
* Boilerplate for applying mixins to MatChipRemove.
|
|
129
|
-
* @docs-private
|
|
130
|
-
*/
|
|
131
|
-
class MatChipRemoveBase extends MatChipTrailingIcon {
|
|
132
|
-
constructor(elementRef) {
|
|
133
|
-
super(elementRef);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
const _MatChipRemoveMixinBase = mixinTabIndex(mixinDisabled(MatChipRemoveBase), 0);
|
|
137
240
|
/**
|
|
138
241
|
* Directive to remove the parent chip when the trailing icon is clicked or
|
|
139
242
|
* when the ENTER key is pressed on it.
|
|
@@ -149,65 +252,38 @@ const _MatChipRemoveMixinBase = mixinTabIndex(mixinDisabled(MatChipRemoveBase),
|
|
|
149
252
|
* </mat-chip>
|
|
150
253
|
* ```
|
|
151
254
|
*/
|
|
152
|
-
class MatChipRemove extends
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* Emits when the user interacts with the icon.
|
|
157
|
-
* @docs-private
|
|
158
|
-
*/
|
|
159
|
-
this.interaction = new Subject();
|
|
160
|
-
if (elementRef.nativeElement.nodeName === 'BUTTON') {
|
|
161
|
-
elementRef.nativeElement.setAttribute('type', 'button');
|
|
162
|
-
}
|
|
255
|
+
class MatChipRemove extends MatChipAction {
|
|
256
|
+
_createFoundation(adapter) {
|
|
257
|
+
return new MDCChipTrailingActionFoundation(adapter);
|
|
163
258
|
}
|
|
164
|
-
/** Emits a MouseEvent when the user clicks on the remove icon. */
|
|
165
259
|
_handleClick(event) {
|
|
166
|
-
|
|
260
|
+
// Some consumers bind `click` events directly on the chip
|
|
261
|
+
// which will also pick up clicks on the remove button.
|
|
167
262
|
event.stopPropagation();
|
|
263
|
+
super._handleClick(event);
|
|
168
264
|
}
|
|
169
|
-
|
|
170
|
-
|
|
265
|
+
_handleKeydown(event) {
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
super._handleKeydown(event);
|
|
171
268
|
}
|
|
172
269
|
}
|
|
173
|
-
MatChipRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
174
|
-
MatChipRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
270
|
+
MatChipRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipRemove, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
271
|
+
MatChipRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatChipRemove, selector: "[matChipRemove]", host: { attributes: { "role": "button" }, properties: { "attr.aria-hidden": "null" }, classAttribute: "mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing" }, providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }], usesInheritance: true, ngImport: i0 });
|
|
272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipRemove, decorators: [{
|
|
176
273
|
type: Directive,
|
|
177
274
|
args: [{
|
|
178
275
|
selector: '[matChipRemove]',
|
|
179
|
-
inputs: ['disabled', 'tabIndex'],
|
|
180
276
|
host: {
|
|
181
|
-
'class':
|
|
182
|
-
|
|
183
|
-
'[tabIndex]': 'tabIndex',
|
|
277
|
+
'class': 'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' +
|
|
278
|
+
'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
|
|
184
279
|
'role': 'button',
|
|
185
|
-
'(click)': '_handleClick($event)',
|
|
186
|
-
'(keydown)': 'interaction.next($event)',
|
|
187
|
-
// We need to remove this explicitly, because it gets inherited from MatChipTrailingIcon.
|
|
188
280
|
'[attr.aria-hidden]': 'null',
|
|
189
281
|
},
|
|
190
282
|
providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }],
|
|
191
283
|
}]
|
|
192
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
|
|
193
|
-
|
|
194
|
-
let uid$1 = 0;
|
|
195
|
-
/**
|
|
196
|
-
* Directive to add MDC CSS to non-basic chips.
|
|
197
|
-
* @docs-private
|
|
198
|
-
*/
|
|
199
|
-
class MatChipCssInternalOnly {
|
|
200
|
-
}
|
|
201
|
-
MatChipCssInternalOnly.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: MatChipCssInternalOnly, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
202
|
-
MatChipCssInternalOnly.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0-next.3", type: MatChipCssInternalOnly, selector: "mat-chip, mat-chip-option, mat-chip-row, [mat-chip], [mat-chip-option],\n [mat-chip-row]", host: { classAttribute: "mat-mdc-chip mdc-chip" }, ngImport: i0 });
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3", ngImport: i0, type: MatChipCssInternalOnly, decorators: [{
|
|
204
|
-
type: Directive,
|
|
205
|
-
args: [{
|
|
206
|
-
selector: `mat-chip, mat-chip-option, mat-chip-row, [mat-chip], [mat-chip-option],
|
|
207
|
-
[mat-chip-row]`,
|
|
208
|
-
host: { 'class': 'mat-mdc-chip mdc-chip' },
|
|
209
|
-
}]
|
|
210
284
|
}] });
|
|
285
|
+
|
|
286
|
+
let uid = 0;
|
|
211
287
|
/**
|
|
212
288
|
* Boilerplate for applying mixins to MatChip.
|
|
213
289
|
* @docs-private
|
|
@@ -224,10 +300,12 @@ const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBas
|
|
|
224
300
|
* Extended by MatChipOption and MatChipRow for different interaction patterns.
|
|
225
301
|
*/
|
|
226
302
|
class MatChip extends _MatChipMixinBase {
|
|
227
|
-
constructor(_changeDetectorRef, elementRef, _ngZone, _dir, animationMode, _globalRippleOptions) {
|
|
303
|
+
constructor(_changeDetectorRef, elementRef, _ngZone, _focusMonitor, _document, _dir, animationMode, _globalRippleOptions, tabIndex) {
|
|
304
|
+
var _a;
|
|
228
305
|
super(elementRef);
|
|
229
306
|
this._changeDetectorRef = _changeDetectorRef;
|
|
230
307
|
this._ngZone = _ngZone;
|
|
308
|
+
this._focusMonitor = _focusMonitor;
|
|
231
309
|
this._dir = _dir;
|
|
232
310
|
this._globalRippleOptions = _globalRippleOptions;
|
|
233
311
|
/** Whether the ripple is centered on the chip. */
|
|
@@ -236,22 +314,21 @@ class MatChip extends _MatChipMixinBase {
|
|
|
236
314
|
this._onFocus = new Subject();
|
|
237
315
|
/** Emits when the chip is blurred. */
|
|
238
316
|
this._onBlur = new Subject();
|
|
239
|
-
|
|
317
|
+
/** Role for the root of the chip. */
|
|
318
|
+
this.role = null;
|
|
240
319
|
/** Whether the chip has focus. */
|
|
241
320
|
this._hasFocusInternal = false;
|
|
242
|
-
/** Default unique id for the chip. */
|
|
243
|
-
this._uniqueId = `mat-mdc-chip-${uid$1++}`;
|
|
244
321
|
/** A unique id for the chip. If none is supplied, it will be auto-generated. */
|
|
245
|
-
this.id =
|
|
322
|
+
this.id = `mat-mdc-chip-${uid++}`;
|
|
323
|
+
/** ARIA label for the content of the chip. */
|
|
324
|
+
this.ariaLabel = null;
|
|
246
325
|
this._disabled = false;
|
|
247
326
|
this._removable = true;
|
|
248
327
|
this._highlighted = false;
|
|
249
|
-
/** Emitted when the user interacts with the chip. */
|
|
250
|
-
this.interaction = new EventEmitter();
|
|
251
|
-
/** Emitted when the chip is destroyed. */
|
|
252
|
-
this.destroyed = new EventEmitter();
|
|
253
328
|
/** Emitted when a chip is to be removed. */
|
|
254
329
|
this.removed = new EventEmitter();
|
|
330
|
+
/** Emitted when the chip is destroyed. */
|
|
331
|
+
this.destroyed = new EventEmitter();
|
|
255
332
|
/** The unstyled chip selector for this component. */
|
|
256
333
|
this.basicChipAttrName = 'mat-basic-chip';
|
|
257
334
|
/**
|
|
@@ -262,86 +339,88 @@ class MatChip extends _MatChipMixinBase {
|
|
|
262
339
|
addClass: className => this._setMdcClass(className, true),
|
|
263
340
|
removeClass: className => this._setMdcClass(className, false),
|
|
264
341
|
hasClass: className => this._elementRef.nativeElement.classList.contains(className),
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
eventTargetHasClass: (target, className) => {
|
|
268
|
-
// We need to null check the `classList`, because IE and Edge don't
|
|
269
|
-
// support it on SVG elements and Edge seems to throw for ripple
|
|
270
|
-
// elements, because they're outside the DOM.
|
|
271
|
-
return target && target.classList
|
|
272
|
-
? target.classList.contains(className)
|
|
273
|
-
: false;
|
|
342
|
+
emitEvent: (eventName, data) => {
|
|
343
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, data, true);
|
|
274
344
|
},
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
// No-op. We call dispatchSelectionEvent ourselves in MatChipOption,
|
|
278
|
-
// because we want to specify whether selection occurred via user
|
|
279
|
-
// input.
|
|
345
|
+
setStyleProperty: (propertyName, value) => {
|
|
346
|
+
this._elementRef.nativeElement.style.setProperty(propertyName, value);
|
|
280
347
|
},
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
348
|
+
isRTL: () => { var _a; return ((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl'; },
|
|
349
|
+
getAttribute: attributeName => this._elementRef.nativeElement.getAttribute(attributeName),
|
|
350
|
+
getElementID: () => this._elementRef.nativeElement.id,
|
|
351
|
+
getOffsetWidth: () => this._elementRef.nativeElement.offsetWidth,
|
|
352
|
+
getActions: () => {
|
|
353
|
+
const result = [];
|
|
354
|
+
if (this._getAction(MDCChipActionType.PRIMARY)) {
|
|
355
|
+
result.push(MDCChipActionType.PRIMARY);
|
|
356
|
+
}
|
|
357
|
+
if (this._getAction(MDCChipActionType.TRAILING)) {
|
|
358
|
+
result.push(MDCChipActionType.TRAILING);
|
|
359
|
+
}
|
|
360
|
+
return result;
|
|
287
361
|
},
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
this.
|
|
362
|
+
isActionSelectable: (action) => {
|
|
363
|
+
var _a;
|
|
364
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isSelectable()) || false;
|
|
291
365
|
},
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
// case.
|
|
296
|
-
if (typeof window !== 'undefined' && window) {
|
|
297
|
-
const getComputedStyle = window.getComputedStyle(this._elementRef.nativeElement);
|
|
298
|
-
return getComputedStyle.getPropertyValue(propertyName);
|
|
299
|
-
}
|
|
300
|
-
return '';
|
|
366
|
+
isActionSelected: (action) => {
|
|
367
|
+
var _a;
|
|
368
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isSelected()) || false;
|
|
301
369
|
},
|
|
302
|
-
|
|
303
|
-
|
|
370
|
+
isActionDisabled: (action) => {
|
|
371
|
+
var _a;
|
|
372
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isDisabled()) || false;
|
|
304
373
|
},
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
return this.trailingIcon.isNavigable();
|
|
309
|
-
}
|
|
310
|
-
return false;
|
|
374
|
+
isActionFocusable: (action) => {
|
|
375
|
+
var _a;
|
|
376
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isFocusable()) || false;
|
|
311
377
|
},
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
// and handling keyboard events was added by MDC after our
|
|
316
|
-
// implementation; consider consolidating.
|
|
378
|
+
setActionSelected: (action, isSelected) => {
|
|
379
|
+
var _a;
|
|
380
|
+
(_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.setSelected(isSelected);
|
|
317
381
|
},
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
// tabindex ourselves, we don't allow MDC to set it.
|
|
326
|
-
if (name === 'aria-checked' || name === 'tabindex') {
|
|
327
|
-
return;
|
|
328
|
-
}
|
|
329
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
382
|
+
setActionDisabled: (action, isDisabled) => {
|
|
383
|
+
var _a;
|
|
384
|
+
(_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.setDisabled(isDisabled);
|
|
385
|
+
},
|
|
386
|
+
setActionFocus: (action, behavior) => {
|
|
387
|
+
var _a;
|
|
388
|
+
(_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.setFocus(behavior);
|
|
330
389
|
},
|
|
331
|
-
// The 2 functions below are used by the MDC ripple, which we aren't using,
|
|
332
|
-
// so they will never be called
|
|
333
|
-
getRootBoundingClientRect: () => this._elementRef.nativeElement.getBoundingClientRect(),
|
|
334
|
-
getCheckmarkBoundingClientRect: () => null,
|
|
335
|
-
getAttribute: attr => this._elementRef.nativeElement.getAttribute(attr),
|
|
336
390
|
};
|
|
337
|
-
this.
|
|
391
|
+
this._handleActionInteraction = (event) => {
|
|
392
|
+
this._onChipInteraction(event);
|
|
393
|
+
};
|
|
394
|
+
this._handleActionNavigation = (event) => {
|
|
395
|
+
this._chipFoundation.handleActionNavigation(event);
|
|
396
|
+
};
|
|
397
|
+
this._handleTransitionend = (event) => {
|
|
398
|
+
if (event.target === this._elementRef.nativeElement) {
|
|
399
|
+
this._ngZone.run(() => this._chipFoundation.handleTransitionEnd());
|
|
400
|
+
}
|
|
401
|
+
};
|
|
402
|
+
this._handleAnimationend = (event) => {
|
|
403
|
+
if (event.target === this._elementRef.nativeElement) {
|
|
404
|
+
this._ngZone.run(() => this._chipFoundation.handleAnimationEnd(event));
|
|
405
|
+
}
|
|
406
|
+
};
|
|
407
|
+
const element = elementRef.nativeElement;
|
|
408
|
+
this._document = _document;
|
|
409
|
+
this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
|
|
338
410
|
this._animationsDisabled = animationMode === 'NoopAnimations';
|
|
339
411
|
this._isBasicChip =
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
412
|
+
element.hasAttribute(this.basicChipAttrName) ||
|
|
413
|
+
element.tagName.toLowerCase() === this.basicChipAttrName;
|
|
414
|
+
element.addEventListener(MDCChipActionEvents.INTERACTION, this._handleActionInteraction);
|
|
415
|
+
element.addEventListener(MDCChipActionEvents.NAVIGATION, this._handleActionNavigation);
|
|
416
|
+
_focusMonitor.monitor(elementRef, true);
|
|
417
|
+
_ngZone.runOutsideAngular(() => {
|
|
418
|
+
element.addEventListener('transitionend', this._handleTransitionend);
|
|
419
|
+
element.addEventListener('animationend', this._handleAnimationend);
|
|
420
|
+
});
|
|
421
|
+
if (tabIndex != null) {
|
|
422
|
+
this.tabIndex = (_a = parseInt(tabIndex)) !== null && _a !== void 0 ? _a : this.defaultTabIndex;
|
|
423
|
+
}
|
|
345
424
|
}
|
|
346
425
|
_hasFocus() {
|
|
347
426
|
return this._hasFocusInternal;
|
|
@@ -352,10 +431,14 @@ class MatChip extends _MatChipMixinBase {
|
|
|
352
431
|
set disabled(value) {
|
|
353
432
|
this._disabled = coerceBooleanProperty(value);
|
|
354
433
|
if (this.removeIcon) {
|
|
355
|
-
this.removeIcon.disabled =
|
|
434
|
+
this.removeIcon.disabled = this._disabled;
|
|
356
435
|
}
|
|
436
|
+
this._chipFoundation.setDisabled(this._disabled);
|
|
357
437
|
}
|
|
358
|
-
/**
|
|
438
|
+
/**
|
|
439
|
+
* The value of the chip. Defaults to the content inside
|
|
440
|
+
* the `mat-mdc-chip-action-label` element.
|
|
441
|
+
*/
|
|
359
442
|
get value() {
|
|
360
443
|
return this._value !== undefined ? this._value : this._textElement.textContent.trim();
|
|
361
444
|
}
|
|
@@ -380,42 +463,24 @@ class MatChip extends _MatChipMixinBase {
|
|
|
380
463
|
set highlighted(value) {
|
|
381
464
|
this._highlighted = coerceBooleanProperty(value);
|
|
382
465
|
}
|
|
383
|
-
ngAfterContentInit() {
|
|
384
|
-
this._initRemoveIcon();
|
|
385
|
-
}
|
|
386
466
|
ngAfterViewInit() {
|
|
387
467
|
this._chipFoundation.init();
|
|
388
|
-
this.
|
|
468
|
+
this._chipFoundation.setDisabled(this.disabled);
|
|
469
|
+
this._textElement = this._elementRef.nativeElement.querySelector('.mat-mdc-chip-action-label');
|
|
470
|
+
if (this._pendingFocus) {
|
|
471
|
+
this._pendingFocus = false;
|
|
472
|
+
this.focus();
|
|
473
|
+
}
|
|
389
474
|
}
|
|
390
475
|
ngOnDestroy() {
|
|
391
|
-
this.
|
|
476
|
+
const element = this._elementRef.nativeElement;
|
|
477
|
+
element.removeEventListener(MDCChipActionEvents.INTERACTION, this._handleActionInteraction);
|
|
478
|
+
element.removeEventListener(MDCChipActionEvents.NAVIGATION, this._handleActionNavigation);
|
|
479
|
+
element.removeEventListener('transitionend', this._handleTransitionend);
|
|
480
|
+
element.removeEventListener('animationend', this._handleAnimationend);
|
|
392
481
|
this._chipFoundation.destroy();
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
_initRemoveIcon() {
|
|
396
|
-
if (this.removeIcon) {
|
|
397
|
-
this._chipFoundation.setShouldRemoveOnTrailingIconClick(true);
|
|
398
|
-
this.removeIcon.disabled = this.disabled;
|
|
399
|
-
this.removeIcon.interaction.pipe(takeUntil(this.destroyed)).subscribe(event => {
|
|
400
|
-
// The MDC chip foundation calls stopPropagation() for any trailing icon interaction
|
|
401
|
-
// event, even ones it doesn't handle, so we want to avoid passing it keyboard events
|
|
402
|
-
// for which we have a custom handler. Note that we assert the type of the event using
|
|
403
|
-
// the `type`, because `instanceof KeyboardEvent` can throw during server-side rendering.
|
|
404
|
-
const isKeyboardEvent = event.type.startsWith('key');
|
|
405
|
-
if (this.disabled ||
|
|
406
|
-
(isKeyboardEvent && !this.REMOVE_ICON_HANDLED_KEYS.has(event.keyCode))) {
|
|
407
|
-
return;
|
|
408
|
-
}
|
|
409
|
-
this.remove();
|
|
410
|
-
if (isKeyboardEvent && !hasModifierKey(event)) {
|
|
411
|
-
const keyCode = event.keyCode;
|
|
412
|
-
// Prevent default space and enter presses so we don't scroll the page or submit forms.
|
|
413
|
-
if (keyCode === SPACE || keyCode === ENTER) {
|
|
414
|
-
event.preventDefault();
|
|
415
|
-
}
|
|
416
|
-
}
|
|
417
|
-
});
|
|
418
|
-
}
|
|
482
|
+
this._focusMonitor.stopMonitoring(this._elementRef);
|
|
483
|
+
this.destroyed.emit({ chip: this });
|
|
419
484
|
}
|
|
420
485
|
/**
|
|
421
486
|
* Allows for programmatic removal of the chip.
|
|
@@ -433,29 +498,6 @@ class MatChip extends _MatChipMixinBase {
|
|
|
433
498
|
active ? classes.add(cssClass) : classes.remove(cssClass);
|
|
434
499
|
this._changeDetectorRef.markForCheck();
|
|
435
500
|
}
|
|
436
|
-
/** Forwards interaction events to the MDC chip foundation. */
|
|
437
|
-
_handleInteraction(event) {
|
|
438
|
-
if (this.disabled) {
|
|
439
|
-
return;
|
|
440
|
-
}
|
|
441
|
-
if (event.type === 'click') {
|
|
442
|
-
this._chipFoundation.handleClick();
|
|
443
|
-
return;
|
|
444
|
-
}
|
|
445
|
-
if (event.type === 'dblclick') {
|
|
446
|
-
this._chipFoundation.handleDoubleClick();
|
|
447
|
-
}
|
|
448
|
-
if (event.type === 'keydown') {
|
|
449
|
-
this._chipFoundation.handleKeydown(event);
|
|
450
|
-
return;
|
|
451
|
-
}
|
|
452
|
-
if (event.type === 'focusout') {
|
|
453
|
-
this._chipFoundation.handleFocusOut(event);
|
|
454
|
-
}
|
|
455
|
-
if (event.type === 'focusin') {
|
|
456
|
-
this._chipFoundation.handleFocusIn(event);
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
501
|
/** Whether or not the ripple should be disabled. */
|
|
460
502
|
_isRippleDisabled() {
|
|
461
503
|
var _a;
|
|
@@ -465,37 +507,91 @@ class MatChip extends _MatChipMixinBase {
|
|
|
465
507
|
this._isBasicChip ||
|
|
466
508
|
!!((_a = this._globalRippleOptions) === null || _a === void 0 ? void 0 : _a.disabled));
|
|
467
509
|
}
|
|
468
|
-
|
|
469
|
-
|
|
510
|
+
_getAction(type) {
|
|
511
|
+
var _a, _b;
|
|
512
|
+
switch (type) {
|
|
513
|
+
case MDCChipActionType.PRIMARY:
|
|
514
|
+
return (_a = this.primaryAction) === null || _a === void 0 ? void 0 : _a._getFoundation();
|
|
515
|
+
case MDCChipActionType.TRAILING:
|
|
516
|
+
return (_b = (this.removeIcon || this.trailingIcon)) === null || _b === void 0 ? void 0 : _b._getFoundation();
|
|
517
|
+
}
|
|
518
|
+
return undefined;
|
|
519
|
+
}
|
|
520
|
+
_getFoundation() {
|
|
521
|
+
return this._chipFoundation;
|
|
522
|
+
}
|
|
523
|
+
_hasTrailingIcon() {
|
|
524
|
+
return !!(this.trailingIcon || this.removeIcon);
|
|
525
|
+
}
|
|
526
|
+
/** Allows for programmatic focusing of the chip. */
|
|
527
|
+
focus() {
|
|
528
|
+
if (this.disabled) {
|
|
529
|
+
return;
|
|
530
|
+
}
|
|
531
|
+
// If `focus` is called before `ngAfterViewInit`, we won't have access to the primary action.
|
|
532
|
+
// This can happen if the consumer tries to focus a chip immediately after it is added.
|
|
533
|
+
// Queue the method to be called again on init.
|
|
534
|
+
if (!this.primaryAction) {
|
|
535
|
+
this._pendingFocus = true;
|
|
536
|
+
return;
|
|
537
|
+
}
|
|
538
|
+
if (!this._hasFocus()) {
|
|
539
|
+
this._onFocus.next({ chip: this });
|
|
540
|
+
this._hasFocusInternal = true;
|
|
541
|
+
}
|
|
542
|
+
this.primaryAction.focus();
|
|
470
543
|
}
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
544
|
+
/** Overridden by MatChipOption. */
|
|
545
|
+
_onChipInteraction(event) {
|
|
546
|
+
var _a;
|
|
547
|
+
const removeElement = (_a = this.removeIcon) === null || _a === void 0 ? void 0 : _a._elementRef.nativeElement;
|
|
548
|
+
const trigger = event.detail.trigger;
|
|
549
|
+
// MDC's removal process requires an `animationend` event followed by a `transitionend`
|
|
550
|
+
// event coming from the chip, which in turn will call `remove`. While we can stub
|
|
551
|
+
// out these events in our own tests, they can be difficult to fake for consumers that are
|
|
552
|
+
// testing our components or are wrapping them. We skip the entire sequence and trigger the
|
|
553
|
+
// removal directly in order to make the component easier to deal with.
|
|
554
|
+
if (removeElement &&
|
|
555
|
+
(trigger === MDCChipActionInteractionTrigger.CLICK ||
|
|
556
|
+
trigger === MDCChipActionInteractionTrigger.ENTER_KEY ||
|
|
557
|
+
trigger === MDCChipActionInteractionTrigger.SPACEBAR_KEY) &&
|
|
558
|
+
(event.target === removeElement || removeElement.contains(event.target))) {
|
|
559
|
+
this.remove();
|
|
560
|
+
}
|
|
561
|
+
else {
|
|
562
|
+
this._chipFoundation.handleActionInteraction(event);
|
|
563
|
+
}
|
|
474
564
|
}
|
|
475
|
-
/** Overridden by MatChipRow. */
|
|
476
|
-
_onEditStart() { }
|
|
477
|
-
/** Overridden by MatChipRow. */
|
|
478
|
-
_onEditFinish() { }
|
|
479
565
|
}
|
|
480
|
-
MatChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
481
|
-
MatChip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0-next.3", type: MatChip, selector: "mat-basic-chip, mat-chip", inputs: { color: "color", disableRipple: "disableRipple", id: "id", disabled: "disabled", value: "value", removable: "removable", highlighted: "highlighted" }, outputs: { interaction: "interaction", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "transitionend": "_handleTransitionEnd($event)" }, properties: { "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-with-trailing-icon": "trailingIcon || removeIcon", "class.mat-mdc-basic-chip": "_isBasicChip", "class.mat-mdc-standard-chip": "!_isBasicChip", "class._mat-animation-noopable": "_animationsDisabled", "id": "id", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled.toString()" } }, queries: [{ propertyName: "leadingIcon", first: true, predicate: MAT_CHIP_AVATAR, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: MAT_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "removeIcon", first: true, predicate: MAT_CHIP_REMOVE, descendants: true }], viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true }], exportAs: ["matChip"], usesInheritance: true, ngImport: i0, template: "<span class=\"mdc-chip__ripple\"></span>\n\n<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n\n<ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n<div class=\"mdc-chip__primary-action\">\n <div class=\"mdc-chip__text\"><ng-content></ng-content></div>\n</div>\n<ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
566
|
+
MatChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: DOCUMENT }, { token: i2.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
+
MatChip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatChip, selector: "mat-basic-chip, mat-chip", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", role: "role", id: "id", ariaLabel: ["aria-label", "ariaLabel"], disabled: "disabled", value: "value", removable: "removable", highlighted: "highlighted" }, outputs: { removed: "removed", destroyed: "destroyed" }, host: { properties: { "class.mdc-evolution-chip": "!_isBasicChip", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "leadingIcon", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-basic-chip": "_isBasicChip", "class.mat-mdc-standard-chip": "!_isBasicChip", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "class._mat-animation-noopable": "_animationsDisabled", "id": "id", "attr.role": "role", "attr.tabindex": "role ? tabIndex : null", "attr.aria-label": "ariaLabel" }, classAttribute: "mat-mdc-chip" }, queries: [{ propertyName: "leadingIcon", first: true, predicate: MAT_CHIP_AVATAR, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: MAT_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "removeIcon", first: true, predicate: MAT_CHIP_REMOVE, descendants: true }], viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "primaryAction", first: true, predicate: MatChipAction, descendants: true }], exportAs: ["matChip"], usesInheritance: true, ngImport: i0, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <div matChipAction [isInteractive]=\"false\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </div>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChip, decorators: [{
|
|
483
569
|
type: Component,
|
|
484
|
-
args: [{ selector: 'mat-basic-chip, mat-chip', inputs: ['color', 'disableRipple'], exportAs: 'matChip', host: {
|
|
485
|
-
'
|
|
486
|
-
'[class.
|
|
570
|
+
args: [{ selector: 'mat-basic-chip, mat-chip', inputs: ['color', 'disableRipple', 'tabIndex'], exportAs: 'matChip', host: {
|
|
571
|
+
'class': 'mat-mdc-chip',
|
|
572
|
+
'[class.mdc-evolution-chip]': '!_isBasicChip',
|
|
573
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
574
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
575
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
|
|
576
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
577
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
487
578
|
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
488
|
-
'[class.mat-mdc-chip-
|
|
579
|
+
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
580
|
+
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
489
581
|
'[class.mat-mdc-basic-chip]': '_isBasicChip',
|
|
490
582
|
'[class.mat-mdc-standard-chip]': '!_isBasicChip',
|
|
583
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
491
584
|
'[class._mat-animation-noopable]': '_animationsDisabled',
|
|
492
585
|
'[id]': 'id',
|
|
493
|
-
'[attr.
|
|
494
|
-
'[attr.
|
|
495
|
-
'
|
|
496
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mdc-chip__ripple\"></span>\n\n<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n\n<ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n<div class=\"mdc-chip__primary-action\">\n <div class=\"mdc-chip__text\"><ng-content></ng-content></div>\n</div>\n<ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
586
|
+
'[attr.role]': 'role',
|
|
587
|
+
'[attr.tabindex]': 'role ? tabIndex : null',
|
|
588
|
+
'[attr.aria-label]': 'ariaLabel',
|
|
589
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <div matChipAction [isInteractive]=\"false\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </div>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"] }]
|
|
497
590
|
}], ctorParameters: function () {
|
|
498
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.
|
|
591
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
592
|
+
type: Inject,
|
|
593
|
+
args: [DOCUMENT]
|
|
594
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
499
595
|
type: Optional
|
|
500
596
|
}] }, { type: undefined, decorators: [{
|
|
501
597
|
type: Optional
|
|
@@ -507,9 +603,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
507
603
|
}, {
|
|
508
604
|
type: Inject,
|
|
509
605
|
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
606
|
+
}] }, { type: undefined, decorators: [{
|
|
607
|
+
type: Attribute,
|
|
608
|
+
args: ['tabindex']
|
|
510
609
|
}] }];
|
|
511
|
-
}, propDecorators: {
|
|
610
|
+
}, propDecorators: { role: [{
|
|
512
611
|
type: Input
|
|
612
|
+
}], id: [{
|
|
613
|
+
type: Input
|
|
614
|
+
}], ariaLabel: [{
|
|
615
|
+
type: Input,
|
|
616
|
+
args: ['aria-label']
|
|
513
617
|
}], disabled: [{
|
|
514
618
|
type: Input
|
|
515
619
|
}], value: [{
|
|
@@ -518,12 +622,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
518
622
|
type: Input
|
|
519
623
|
}], highlighted: [{
|
|
520
624
|
type: Input
|
|
521
|
-
}],
|
|
625
|
+
}], removed: [{
|
|
522
626
|
type: Output
|
|
523
627
|
}], destroyed: [{
|
|
524
628
|
type: Output
|
|
525
|
-
}], removed: [{
|
|
526
|
-
type: Output
|
|
527
629
|
}], leadingIcon: [{
|
|
528
630
|
type: ContentChild,
|
|
529
631
|
args: [MAT_CHIP_AVATAR]
|
|
@@ -536,6 +638,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
536
638
|
}], ripple: [{
|
|
537
639
|
type: ViewChild,
|
|
538
640
|
args: [MatRipple]
|
|
641
|
+
}], primaryAction: [{
|
|
642
|
+
type: ViewChild,
|
|
643
|
+
args: [MatChipAction]
|
|
539
644
|
}] } });
|
|
540
645
|
|
|
541
646
|
/**
|
|
@@ -591,16 +696,18 @@ class MatChipOption extends MatChip {
|
|
|
591
696
|
}
|
|
592
697
|
/** Whether the chip is selected. */
|
|
593
698
|
get selected() {
|
|
594
|
-
|
|
699
|
+
var _a;
|
|
700
|
+
return ((_a = this._pendingSelectedState) !== null && _a !== void 0 ? _a : this._chipFoundation.isActionSelected(MDCChipActionType.PRIMARY));
|
|
595
701
|
}
|
|
596
702
|
set selected(value) {
|
|
597
|
-
if (
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
703
|
+
if (this.selectable) {
|
|
704
|
+
const coercedValue = coerceBooleanProperty(value);
|
|
705
|
+
if (this._isInitialized) {
|
|
706
|
+
this._setSelectedState(coercedValue, false);
|
|
707
|
+
}
|
|
708
|
+
else {
|
|
709
|
+
this._pendingSelectedState = coercedValue;
|
|
710
|
+
}
|
|
604
711
|
}
|
|
605
712
|
}
|
|
606
713
|
/** The ARIA selected applied to the chip. */
|
|
@@ -611,70 +718,45 @@ class MatChipOption extends MatChip {
|
|
|
611
718
|
? this.selected.toString()
|
|
612
719
|
: null;
|
|
613
720
|
}
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
721
|
+
ngOnInit() {
|
|
722
|
+
this.role = 'presentation';
|
|
723
|
+
}
|
|
724
|
+
ngAfterViewInit() {
|
|
725
|
+
super.ngAfterViewInit();
|
|
726
|
+
this._isInitialized = true;
|
|
727
|
+
if (this._pendingSelectedState != null) {
|
|
728
|
+
// Note that we want to clear the pending state before calling `_setSelectedState`, because
|
|
729
|
+
// we want it to read the actual selected state instead falling back to the pending one.
|
|
730
|
+
const selectedState = this._pendingSelectedState;
|
|
731
|
+
this._pendingSelectedState = undefined;
|
|
732
|
+
this._setSelectedState(selectedState, false);
|
|
618
733
|
}
|
|
619
734
|
}
|
|
620
735
|
/** Selects the chip. */
|
|
621
736
|
select() {
|
|
622
|
-
if (
|
|
623
|
-
|
|
624
|
-
}
|
|
625
|
-
else if (!this.selected) {
|
|
626
|
-
this._chipFoundation.setSelected(true);
|
|
627
|
-
this._dispatchSelectionChange();
|
|
737
|
+
if (this.selectable) {
|
|
738
|
+
this._setSelectedState(true, false);
|
|
628
739
|
}
|
|
629
740
|
}
|
|
630
741
|
/** Deselects the chip. */
|
|
631
742
|
deselect() {
|
|
632
|
-
if (
|
|
633
|
-
|
|
634
|
-
}
|
|
635
|
-
else if (this.selected) {
|
|
636
|
-
this._chipFoundation.setSelected(false);
|
|
637
|
-
this._dispatchSelectionChange();
|
|
743
|
+
if (this.selectable) {
|
|
744
|
+
this._setSelectedState(false, false);
|
|
638
745
|
}
|
|
639
746
|
}
|
|
640
747
|
/** Selects this chip and emits userInputSelection event */
|
|
641
748
|
selectViaInteraction() {
|
|
642
|
-
if (
|
|
643
|
-
|
|
644
|
-
}
|
|
645
|
-
else if (!this.selected) {
|
|
646
|
-
this._chipFoundation.setSelected(true);
|
|
647
|
-
this._dispatchSelectionChange(true);
|
|
749
|
+
if (this.selectable) {
|
|
750
|
+
this._setSelectedState(true, true);
|
|
648
751
|
}
|
|
649
752
|
}
|
|
650
753
|
/** Toggles the current selected state of this chip. */
|
|
651
754
|
toggleSelected(isUserInput = false) {
|
|
652
|
-
if (
|
|
653
|
-
|
|
755
|
+
if (this.selectable) {
|
|
756
|
+
this._setSelectedState(!this.selected, isUserInput);
|
|
654
757
|
}
|
|
655
|
-
this._chipFoundation.setSelected(!this.selected);
|
|
656
|
-
this._dispatchSelectionChange(isUserInput);
|
|
657
758
|
return this.selected;
|
|
658
759
|
}
|
|
659
|
-
/** Emits a selection change event. */
|
|
660
|
-
_dispatchSelectionChange(isUserInput = false) {
|
|
661
|
-
this.selectionChange.emit({
|
|
662
|
-
source: this,
|
|
663
|
-
isUserInput,
|
|
664
|
-
selected: this.selected,
|
|
665
|
-
});
|
|
666
|
-
}
|
|
667
|
-
/** Allows for programmatic focusing of the chip. */
|
|
668
|
-
focus() {
|
|
669
|
-
if (this.disabled) {
|
|
670
|
-
return;
|
|
671
|
-
}
|
|
672
|
-
if (!this._hasFocus()) {
|
|
673
|
-
this._elementRef.nativeElement.focus();
|
|
674
|
-
this._onFocus.next({ chip: this });
|
|
675
|
-
}
|
|
676
|
-
this._hasFocusInternal = true;
|
|
677
|
-
}
|
|
678
760
|
/** Resets the state of the chip when it loses focus. */
|
|
679
761
|
_blur() {
|
|
680
762
|
// When animations are enabled, Angular may end up removing the chip from the DOM a little
|
|
@@ -688,55 +770,68 @@ class MatChipOption extends MatChip {
|
|
|
688
770
|
});
|
|
689
771
|
});
|
|
690
772
|
}
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
773
|
+
_onChipInteraction(event) {
|
|
774
|
+
const { trigger, source } = event.detail;
|
|
775
|
+
// Non-selection interactions should work the same as other chips.
|
|
776
|
+
if (source !== MDCChipActionType.PRIMARY ||
|
|
777
|
+
(trigger !== MDCChipActionInteractionTrigger.CLICK &&
|
|
778
|
+
trigger !== MDCChipActionInteractionTrigger.ENTER_KEY &&
|
|
779
|
+
trigger !== MDCChipActionInteractionTrigger.SPACEBAR_KEY)) {
|
|
780
|
+
super._onChipInteraction(event);
|
|
781
|
+
}
|
|
782
|
+
else if (this.selectable && !this.disabled) {
|
|
783
|
+
// Otherwise only let the event through if the chip is enabled and selectable.
|
|
784
|
+
this._chipFoundation.handleActionInteraction(event);
|
|
785
|
+
this.selectionChange.emit({
|
|
786
|
+
source: this,
|
|
787
|
+
isUserInput: true,
|
|
788
|
+
selected: this.selected,
|
|
789
|
+
});
|
|
699
790
|
}
|
|
700
791
|
}
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
792
|
+
_hasLeadingGraphic() {
|
|
793
|
+
// The checkmark graphic is built in for multi-select chip lists.
|
|
794
|
+
return this.leadingIcon || (this._chipListMultiple && this.selectable);
|
|
795
|
+
}
|
|
796
|
+
_setSelectedState(isSelected, isUserInput) {
|
|
797
|
+
if (isSelected !== this.selected) {
|
|
798
|
+
this._chipFoundation.setActionSelected(MDCChipActionType.PRIMARY, isSelected);
|
|
799
|
+
this.selectionChange.emit({
|
|
800
|
+
source: this,
|
|
801
|
+
isUserInput,
|
|
802
|
+
selected: this.selected,
|
|
803
|
+
});
|
|
705
804
|
}
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
event.preventDefault();
|
|
711
|
-
break;
|
|
712
|
-
default:
|
|
713
|
-
this._handleInteraction(event);
|
|
805
|
+
// MDC won't assign the selected class until the animation finishes, but that may not
|
|
806
|
+
// happen if animations are disabled. If we detect such a case, assign the class manually.
|
|
807
|
+
if (this._animationsDisabled) {
|
|
808
|
+
this._elementRef.nativeElement.classList.toggle(MDCChipCssClasses.SELECTED, isSelected);
|
|
714
809
|
}
|
|
715
810
|
}
|
|
716
811
|
}
|
|
717
|
-
MatChipOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
718
|
-
MatChipOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0-next.3", type: MatChipOption, selector: "mat-basic-chip-option, mat-chip-option", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", selectable: "selectable", selected: "selected" }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_click($event)", "keydown": "_keydown($event)", "focus": "focus()", "blur": "_blur()" }, properties: { "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-with-trailing-icon": "trailingIcon || removeIcon", "class.mat-mdc-chip-selected": "selected", "class.mat-mdc-chip-multiple": "_chipListMultiple", "id": "id", "tabIndex": "tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "mat-mdc-focus-indicator mat-mdc-chip-option" }, providers: [{ provide: MatChip, useExisting: MatChipOption }], usesInheritance: true, ngImport: i0, template: "<span class=\"mdc-chip__ripple\"></span>\n\n<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n\n<ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n<div class=\"mdc-chip__checkmark\" *ngIf=\"_chipListMultiple\">\n <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n </svg>\n</div>\n<div class=\"mdc-chip__text\"><ng-content></ng-content></div>\n<ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
719
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
812
|
+
MatChipOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipOption, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
+
MatChipOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatChipOption, selector: "mat-basic-chip-option, mat-chip-option", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", selectable: "selectable", selected: "selected" }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.mat-mdc-chip-selected": "selected", "class.mat-mdc-chip-multiple": "_chipListMultiple", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mdc-evolution-chip--selectable": "selectable", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "_hasLeadingGraphic()", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "attr.tabindex": "null", "attr.aria-label": "null", "attr.role": "role", "id": "id" }, classAttribute: "mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter" }, providers: [{ provide: MatChip, useExisting: MatChipOption }], usesInheritance: true, ngImport: i0, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"ariaSelected\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"option\"\n (blur)=\"_blur()\"\n (focus)=\"focus()\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"_hasLeadingGraphic()\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-evolution-chip__checkmark\">\n <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-evolution-chip__checkmark-path\"\n fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipOption, decorators: [{
|
|
720
815
|
type: Component,
|
|
721
816
|
args: [{ selector: 'mat-basic-chip-option, mat-chip-option', inputs: ['color', 'disableRipple', 'tabIndex'], host: {
|
|
722
|
-
'
|
|
723
|
-
'class': 'mat-mdc-focus-indicator mat-mdc-chip-option',
|
|
724
|
-
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
725
|
-
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
726
|
-
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
727
|
-
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
|
|
817
|
+
'class': 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter',
|
|
728
818
|
'[class.mat-mdc-chip-selected]': 'selected',
|
|
729
819
|
'[class.mat-mdc-chip-multiple]': '_chipListMultiple',
|
|
820
|
+
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
821
|
+
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
822
|
+
'[class.mdc-evolution-chip--selectable]': 'selectable',
|
|
823
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
824
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
825
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
|
|
826
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
827
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
828
|
+
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
829
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
830
|
+
'[attr.tabindex]': 'null',
|
|
831
|
+
'[attr.aria-label]': 'null',
|
|
832
|
+
'[attr.role]': 'role',
|
|
730
833
|
'[id]': 'id',
|
|
731
|
-
'[tabIndex]': 'tabIndex',
|
|
732
|
-
'[attr.disabled]': 'disabled || null',
|
|
733
|
-
'[attr.aria-disabled]': 'disabled.toString()',
|
|
734
|
-
'[attr.aria-selected]': 'ariaSelected',
|
|
735
|
-
'(click)': '_click($event)',
|
|
736
|
-
'(keydown)': '_keydown($event)',
|
|
737
|
-
'(focus)': 'focus()',
|
|
738
|
-
'(blur)': '_blur()',
|
|
739
|
-
}, providers: [{ provide: MatChip, useExisting: MatChipOption }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mdc-chip__ripple\"></span>\n\n<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n\n<ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n<div class=\"mdc-chip__checkmark\" *ngIf=\"_chipListMultiple\">\n <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n </svg>\n</div>\n<div class=\"mdc-chip__text\"><ng-content></ng-content></div>\n<ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
834
|
+
}, providers: [{ provide: MatChip, useExisting: MatChipOption }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"ariaSelected\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"option\"\n (blur)=\"_blur()\"\n (focus)=\"focus()\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"_hasLeadingGraphic()\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-evolution-chip__checkmark\">\n <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-evolution-chip__checkmark-path\"\n fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"] }]
|
|
740
835
|
}], propDecorators: { selectable: [{
|
|
741
836
|
type: Input
|
|
742
837
|
}], selected: [{
|
|
@@ -784,14 +879,14 @@ class MatChipEditInput {
|
|
|
784
879
|
sel.addRange(range);
|
|
785
880
|
}
|
|
786
881
|
}
|
|
787
|
-
MatChipEditInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
788
|
-
MatChipEditInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0
|
|
789
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
882
|
+
MatChipEditInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipEditInput, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
883
|
+
MatChipEditInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatChipEditInput, selector: "span[matChipEditInput]", host: { attributes: { "role": "textbox", "tabindex": "-1", "contenteditable": "true" }, classAttribute: "mat-chip-edit-input" }, ngImport: i0 });
|
|
884
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipEditInput, decorators: [{
|
|
790
885
|
type: Directive,
|
|
791
886
|
args: [{
|
|
792
887
|
selector: 'span[matChipEditInput]',
|
|
793
888
|
host: {
|
|
794
|
-
'class': '
|
|
889
|
+
'class': 'mat-chip-edit-input',
|
|
795
890
|
'role': 'textbox',
|
|
796
891
|
'tabindex': '-1',
|
|
797
892
|
'contenteditable': 'true',
|
|
@@ -809,121 +904,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
809
904
|
* the matChipInputFor directive.
|
|
810
905
|
*/
|
|
811
906
|
class MatChipRow extends MatChip {
|
|
812
|
-
constructor(
|
|
813
|
-
super(changeDetectorRef, elementRef, ngZone, dir, animationMode, globalRippleOptions);
|
|
814
|
-
this._document = _document;
|
|
907
|
+
constructor(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, dir, animationMode, globalRippleOptions, tabIndex) {
|
|
908
|
+
super(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, dir, animationMode, globalRippleOptions, tabIndex);
|
|
815
909
|
this.basicChipAttrName = 'mat-basic-chip-row';
|
|
816
910
|
this.editable = false;
|
|
817
911
|
/** Emitted when the chip is edited. */
|
|
818
912
|
this.edited = new EventEmitter();
|
|
913
|
+
this._isEditing = false;
|
|
914
|
+
this.role = 'row';
|
|
819
915
|
}
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
// Defer setting the value in order to avoid the "Expression
|
|
824
|
-
// has changed after it was checked" errors from Angular.
|
|
825
|
-
setTimeout(() => {
|
|
826
|
-
// removeIcon has tabIndex 0 for regular chips, but should only be focusable by
|
|
827
|
-
// the GridFocusKeyManager for row chips.
|
|
828
|
-
this.removeIcon.tabIndex = -1;
|
|
829
|
-
});
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
|
-
ngAfterViewInit() {
|
|
833
|
-
super.ngAfterViewInit();
|
|
834
|
-
this.cells = this.removeIcon
|
|
835
|
-
? [this.chipContent.nativeElement, this.removeIcon._elementRef.nativeElement]
|
|
836
|
-
: [this.chipContent.nativeElement];
|
|
837
|
-
}
|
|
838
|
-
/**
|
|
839
|
-
* Allows for programmatic focusing of the chip.
|
|
840
|
-
* Sends focus to the first grid cell. The row chip element itself
|
|
841
|
-
* is never focused.
|
|
842
|
-
*/
|
|
843
|
-
focus() {
|
|
844
|
-
if (this.disabled) {
|
|
845
|
-
return;
|
|
846
|
-
}
|
|
847
|
-
if (!this._hasFocusInternal) {
|
|
848
|
-
this._onFocus.next({ chip: this });
|
|
849
|
-
}
|
|
850
|
-
this.chipContent.nativeElement.focus();
|
|
916
|
+
_hasTrailingIcon() {
|
|
917
|
+
// The trailing icon is hidden while editing.
|
|
918
|
+
return !this._isEditing && super._hasTrailingIcon();
|
|
851
919
|
}
|
|
852
920
|
/**
|
|
853
921
|
* Emits a blur event when one of the gridcells loses focus, unless focus moved
|
|
854
922
|
* to the other gridcell.
|
|
855
923
|
*/
|
|
856
|
-
_focusout(
|
|
924
|
+
_focusout() {
|
|
857
925
|
if (this._focusoutTimeout) {
|
|
858
926
|
clearTimeout(this._focusoutTimeout);
|
|
859
927
|
}
|
|
860
928
|
// Wait to see if focus moves to the other gridcell
|
|
861
|
-
this._focusoutTimeout = setTimeout(() => {
|
|
929
|
+
this._focusoutTimeout = window.setTimeout(() => {
|
|
930
|
+
if (this._isEditing) {
|
|
931
|
+
this._onEditFinish();
|
|
932
|
+
}
|
|
862
933
|
this._hasFocusInternal = false;
|
|
863
934
|
this._onBlur.next({ chip: this });
|
|
864
|
-
this._handleInteraction(event);
|
|
865
935
|
});
|
|
866
936
|
}
|
|
867
937
|
/** Records that the chip has focus when one of the gridcells is focused. */
|
|
868
|
-
_focusin(
|
|
938
|
+
_focusin() {
|
|
869
939
|
if (this._focusoutTimeout) {
|
|
870
940
|
clearTimeout(this._focusoutTimeout);
|
|
871
941
|
this._focusoutTimeout = null;
|
|
872
942
|
}
|
|
873
943
|
this._hasFocusInternal = true;
|
|
874
|
-
this._handleInteraction(event);
|
|
875
944
|
}
|
|
876
945
|
/** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
|
|
877
946
|
_mousedown(event) {
|
|
878
|
-
if (this._isEditing
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
947
|
+
if (!this._isEditing) {
|
|
948
|
+
if (!this.disabled) {
|
|
949
|
+
this.focus();
|
|
950
|
+
}
|
|
951
|
+
event.preventDefault();
|
|
883
952
|
}
|
|
884
|
-
event.preventDefault();
|
|
885
|
-
}
|
|
886
|
-
_dblclick(event) {
|
|
887
|
-
this._handleInteraction(event);
|
|
888
953
|
}
|
|
889
954
|
/** Handles custom key presses. */
|
|
890
955
|
_keydown(event) {
|
|
891
956
|
if (this.disabled) {
|
|
892
957
|
return;
|
|
893
958
|
}
|
|
894
|
-
if (this._isEditing()) {
|
|
895
|
-
this._handleInteraction(event);
|
|
896
|
-
return;
|
|
897
|
-
}
|
|
898
959
|
switch (event.keyCode) {
|
|
960
|
+
case ENTER:
|
|
961
|
+
if (this._isEditing) {
|
|
962
|
+
event.preventDefault();
|
|
963
|
+
// Wrap in a timeout so the timing is consistent as when it is emitted in `focusout`.
|
|
964
|
+
setTimeout(() => this._onEditFinish());
|
|
965
|
+
}
|
|
966
|
+
else if (this.editable) {
|
|
967
|
+
this._startEditing();
|
|
968
|
+
}
|
|
969
|
+
break;
|
|
899
970
|
case DELETE:
|
|
900
971
|
case BACKSPACE:
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
972
|
+
if (!this._isEditing) {
|
|
973
|
+
// Remove the focused chip
|
|
974
|
+
this.remove();
|
|
975
|
+
// Always prevent so page navigation does not occur
|
|
976
|
+
event.preventDefault();
|
|
977
|
+
}
|
|
905
978
|
break;
|
|
906
|
-
default:
|
|
907
|
-
this._handleInteraction(event);
|
|
908
979
|
}
|
|
909
980
|
}
|
|
910
|
-
|
|
911
|
-
|
|
981
|
+
_doubleclick() {
|
|
982
|
+
if (!this.disabled && this.editable) {
|
|
983
|
+
this._startEditing();
|
|
984
|
+
}
|
|
912
985
|
}
|
|
913
|
-
|
|
986
|
+
_startEditing() {
|
|
987
|
+
// The value depends on the DOM so we need to extract it before we flip the flag.
|
|
988
|
+
const value = this.value;
|
|
989
|
+
// Make the primary action non-interactive so that it doesn't
|
|
990
|
+
// navigate when the user presses the arrow keys while editing.
|
|
991
|
+
this.primaryAction.isInteractive = false;
|
|
992
|
+
this._isEditing = true;
|
|
914
993
|
// Defer initializing the input so it has time to be added to the DOM.
|
|
915
|
-
setTimeout(() =>
|
|
916
|
-
this._getEditInput().initialize(this.value);
|
|
917
|
-
});
|
|
994
|
+
setTimeout(() => this._getEditInput().initialize(value));
|
|
918
995
|
}
|
|
919
996
|
_onEditFinish() {
|
|
920
997
|
// If the edit input is still focused or focus was returned to the body after it was destroyed,
|
|
921
998
|
// return focus to the chip contents.
|
|
922
999
|
if (this._document.activeElement === this._getEditInput().getNativeElement() ||
|
|
923
1000
|
this._document.activeElement === this._document.body) {
|
|
924
|
-
this.
|
|
1001
|
+
this.primaryAction.focus();
|
|
925
1002
|
}
|
|
926
1003
|
this.edited.emit({ chip: this, value: this._getEditInput().getValue() });
|
|
1004
|
+
this.primaryAction.isInteractive = true;
|
|
1005
|
+
this._isEditing = false;
|
|
927
1006
|
}
|
|
928
1007
|
/**
|
|
929
1008
|
* Gets the projected chip edit input, or the default input if none is projected in. One of these
|
|
@@ -933,33 +1012,38 @@ class MatChipRow extends MatChip {
|
|
|
933
1012
|
return this.contentEditInput || this.defaultEditInput;
|
|
934
1013
|
}
|
|
935
1014
|
}
|
|
936
|
-
MatChipRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
937
|
-
MatChipRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0-next.3", type: MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", editable: "editable" }, outputs: { edited: "edited" }, host: { attributes: { "role": "row" }, listeners: { "mousedown": "_mousedown($event)", "dblclick": "_dblclick($event)", "keydown": "_keydown($event)", "focusin": "_focusin($event)", "focusout": "_focusout($event)" }, properties: { "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-with-trailing-icon": "trailingIcon || removeIcon", "class.mdc-chip--editable": "editable", "id": "id", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled.toString()", "tabIndex": "tabIndex" }, classAttribute: "mat-mdc-chip-row" }, providers: [{ provide: MatChip, useExisting: MatChipRow }], queries: [{ propertyName: "contentEditInput", first: true, predicate: MatChipEditInput, descendants: true }], viewQueries: [{ propertyName: "chipContent", first: true, predicate: ["chipContent"], descendants: true }, { propertyName: "defaultEditInput", first: true, predicate: MatChipEditInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!_isEditing()\">\n <span class=\"mdc-chip__ripple\"></span>\n\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n</ng-container>\n\n<div class=\"mat-mdc-chip-content\">\n <div role=\"gridcell\">\n <div #chipContent tabindex=\"-1\"\n class=\"mat-mdc-chip-row-focusable-text-content mat-mdc-focus-indicator mdc-chip__primary-action\"\n [attr.role]=\"editable ? 'button' : null\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-chip__text\"><ng-content></ng-content></span>\n <ng-content select=\"mat-chip-trailing-icon,[matChipTrailingIcon]\"></ng-content>\n </div>\n </div>\n <div role=\"gridcell\" *ngIf=\"removeIcon\" class=\"mat-mdc-chip-remove-icon\">\n <ng-content select=\"[matChipRemove]\"></ng-content>\n </div>\n</div>\n\n<div *ngIf=\"_isEditing()\" role=\"gridcell\" class=\"mat-mdc-chip-edit-input-container\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput>\n <span matChipEditInput></span>\n </ng-template>\n</div>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipEditInput, selector: "span[matChipEditInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
1015
|
+
MatChipRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: DOCUMENT }, { token: i2.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1016
|
+
MatChipRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", editable: "editable" }, outputs: { edited: "edited" }, host: { listeners: { "mousedown": "_mousedown($event)", "keydown": "_keydown($event)", "dblclick": "_doubleclick()", "focusin": "_focusin($event)", "focusout": "_focusout($event)" }, properties: { "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-editing": "_isEditing", "class.mat-mdc-chip-editable": "editable", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "leadingIcon", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.role": "role" }, classAttribute: "mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip" }, providers: [{ provide: MatChip, useExisting: MatChipRow }], queries: [{ propertyName: "contentEditInput", first: true, predicate: MatChipEditInput, descendants: true }], viewQueries: [{ propertyName: "defaultEditInput", first: true, predicate: MatChipEditInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!_isEditing\">\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n <span class=\"mat-mdc-chip-focus-overlay\"></span>\n</ng-container>\n\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\" [ngSwitch]=\"_isEditing\">\n <ng-container *ngSwitchCase=\"false\"><ng-content></ng-content></ng-container>\n\n <ng-container *ngSwitchCase=\"true\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>\n </ng-container>\n\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatChipEditInput, selector: "span[matChipEditInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipRow, decorators: [{
|
|
939
1018
|
type: Component,
|
|
940
1019
|
args: [{ selector: 'mat-chip-row, mat-basic-chip-row', inputs: ['color', 'disableRipple', 'tabIndex'], host: {
|
|
941
|
-
'
|
|
942
|
-
'class
|
|
1020
|
+
'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
|
|
1021
|
+
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
943
1022
|
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
1023
|
+
'[class.mat-mdc-chip-editing]': '_isEditing',
|
|
1024
|
+
'[class.mat-mdc-chip-editable]': 'editable',
|
|
1025
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
1026
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
1027
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
|
|
1028
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
1029
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
944
1030
|
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
945
|
-
'[class.mat-mdc-chip-with-
|
|
946
|
-
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
|
|
947
|
-
'[class.mdc-chip--editable]': 'editable',
|
|
1031
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
948
1032
|
'[id]': 'id',
|
|
949
|
-
'[attr.
|
|
950
|
-
'[attr.aria-
|
|
951
|
-
'[
|
|
1033
|
+
'[attr.tabindex]': 'null',
|
|
1034
|
+
'[attr.aria-label]': 'null',
|
|
1035
|
+
'[attr.role]': 'role',
|
|
952
1036
|
'(mousedown)': '_mousedown($event)',
|
|
953
|
-
'(dblclick)': '_dblclick($event)',
|
|
954
1037
|
'(keydown)': '_keydown($event)',
|
|
1038
|
+
'(dblclick)': '_doubleclick()',
|
|
955
1039
|
'(focusin)': '_focusin($event)',
|
|
956
1040
|
'(focusout)': '_focusout($event)',
|
|
957
|
-
}, providers: [{ provide: MatChip, useExisting: MatChipRow }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!_isEditing()\">\n <span class=\"mdc-chip__ripple\"></span>\n\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n</ng-container>\n\n<div class=\"mat-mdc-chip-content\">\n <div role=\"gridcell\">\n <div #chipContent tabindex=\"-1\"\n class=\"mat-mdc-chip-row-focusable-text-content mat-mdc-focus-indicator mdc-chip__primary-action\"\n [attr.role]=\"editable ? 'button' : null\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-chip__text\"><ng-content></ng-content></span>\n <ng-content select=\"mat-chip-trailing-icon,[matChipTrailingIcon]\"></ng-content>\n </div>\n </div>\n <div role=\"gridcell\" *ngIf=\"removeIcon\" class=\"mat-mdc-chip-remove-icon\">\n <ng-content select=\"[matChipRemove]\"></ng-content>\n </div>\n</div>\n\n<div *ngIf=\"_isEditing()\" role=\"gridcell\" class=\"mat-mdc-chip-edit-input-container\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput>\n <span matChipEditInput></span>\n </ng-template>\n</div>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
1041
|
+
}, providers: [{ provide: MatChip, useExisting: MatChipRow }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!_isEditing\">\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n <span class=\"mat-mdc-chip-focus-overlay\"></span>\n</ng-container>\n\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\" [ngSwitch]=\"_isEditing\">\n <ng-container *ngSwitchCase=\"false\"><ng-content></ng-content></ng-container>\n\n <ng-container *ngSwitchCase=\"true\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>\n </ng-container>\n\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"] }]
|
|
958
1042
|
}], ctorParameters: function () {
|
|
959
|
-
return [{ type: undefined, decorators: [{
|
|
1043
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
960
1044
|
type: Inject,
|
|
961
1045
|
args: [DOCUMENT]
|
|
962
|
-
}] }, { type:
|
|
1046
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
963
1047
|
type: Optional
|
|
964
1048
|
}] }, { type: undefined, decorators: [{
|
|
965
1049
|
type: Optional
|
|
@@ -971,14 +1055,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
971
1055
|
}, {
|
|
972
1056
|
type: Inject,
|
|
973
1057
|
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
1058
|
+
}] }, { type: undefined, decorators: [{
|
|
1059
|
+
type: Attribute,
|
|
1060
|
+
args: ['tabindex']
|
|
974
1061
|
}] }];
|
|
975
1062
|
}, propDecorators: { editable: [{
|
|
976
1063
|
type: Input
|
|
977
1064
|
}], edited: [{
|
|
978
1065
|
type: Output
|
|
979
|
-
}], chipContent: [{
|
|
980
|
-
type: ViewChild,
|
|
981
|
-
args: ['chipContent']
|
|
982
1066
|
}], defaultEditInput: [{
|
|
983
1067
|
type: ViewChild,
|
|
984
1068
|
args: [MatChipEditInput]
|
|
@@ -987,7 +1071,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
987
1071
|
args: [MatChipEditInput]
|
|
988
1072
|
}] } });
|
|
989
1073
|
|
|
990
|
-
let uid = 0;
|
|
991
1074
|
/**
|
|
992
1075
|
* Boilerplate for applying mixins to MatChipSet.
|
|
993
1076
|
* @docs-private
|
|
@@ -1002,11 +1085,12 @@ const _MatChipSetMixinBase = mixinTabIndex(MatChipSetBase);
|
|
|
1002
1085
|
* Extended by MatChipListbox and MatChipGrid for different interaction patterns.
|
|
1003
1086
|
*/
|
|
1004
1087
|
class MatChipSet extends _MatChipSetMixinBase {
|
|
1005
|
-
constructor(_elementRef, _changeDetectorRef
|
|
1088
|
+
constructor(_liveAnnouncer, _document, _elementRef, _changeDetectorRef) {
|
|
1006
1089
|
super(_elementRef);
|
|
1090
|
+
this._liveAnnouncer = _liveAnnouncer;
|
|
1091
|
+
this._document = _document;
|
|
1007
1092
|
this._elementRef = _elementRef;
|
|
1008
1093
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1009
|
-
this._dir = _dir;
|
|
1010
1094
|
/**
|
|
1011
1095
|
* When a chip is destroyed, we store the index of the destroyed chip until the chips
|
|
1012
1096
|
* query list notifies about the update. This is necessary because we cannot determine an
|
|
@@ -1020,23 +1104,48 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1020
1104
|
* These methods are called by the chip set foundation.
|
|
1021
1105
|
*/
|
|
1022
1106
|
this._chipSetAdapter = {
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1107
|
+
announceMessage: message => this._liveAnnouncer.announce(message),
|
|
1108
|
+
emitEvent: (eventName, eventDetail) => {
|
|
1109
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, eventDetail, true);
|
|
1110
|
+
},
|
|
1111
|
+
getAttribute: name => this._elementRef.nativeElement.getAttribute(name),
|
|
1112
|
+
getChipActionsAtIndex: index => { var _a; return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.getActions()) || []; },
|
|
1113
|
+
getChipCount: () => this._chips.length,
|
|
1114
|
+
getChipIdAtIndex: index => { var _a; return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.getElementID()) || ''; },
|
|
1115
|
+
getChipIndexById: id => {
|
|
1116
|
+
return this._chips.toArray().findIndex(chip => chip._getFoundation().getElementID() === id);
|
|
1117
|
+
},
|
|
1118
|
+
isChipFocusableAtIndex: (index, actionType) => {
|
|
1119
|
+
var _a;
|
|
1120
|
+
return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.isActionFocusable(actionType)) || false;
|
|
1121
|
+
},
|
|
1122
|
+
isChipSelectableAtIndex: (index, actionType) => {
|
|
1123
|
+
var _a;
|
|
1124
|
+
return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.isActionSelectable(actionType)) || false;
|
|
1125
|
+
},
|
|
1126
|
+
isChipSelectedAtIndex: (index, actionType) => {
|
|
1127
|
+
var _a;
|
|
1128
|
+
return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.isActionSelected(actionType)) || false;
|
|
1129
|
+
},
|
|
1130
|
+
removeChipAtIndex: index => { var _a; return (_a = this._chips.toArray()[index]) === null || _a === void 0 ? void 0 : _a.remove(); },
|
|
1131
|
+
setChipFocusAtIndex: (index, action, behavior) => {
|
|
1132
|
+
var _a;
|
|
1133
|
+
(_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.setActionFocus(action, behavior);
|
|
1134
|
+
},
|
|
1135
|
+
setChipSelectedAtIndex: (index, actionType, isSelected) => {
|
|
1136
|
+
var _a;
|
|
1137
|
+
// Setting the trailing action as deselected ends up deselecting the entire chip.
|
|
1138
|
+
// This is working as expected, but it's not something we want so we only apply the
|
|
1139
|
+
// selected state to the primary chip.
|
|
1140
|
+
if (actionType === MDCChipActionType.PRIMARY) {
|
|
1141
|
+
(_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.setActionSelected(actionType, isSelected);
|
|
1142
|
+
}
|
|
1143
|
+
},
|
|
1144
|
+
startChipAnimationAtIndex: (index, animation) => {
|
|
1145
|
+
var _a;
|
|
1146
|
+
(_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.startAnimation(animation);
|
|
1147
|
+
},
|
|
1037
1148
|
};
|
|
1038
|
-
/** Uid of the chip set */
|
|
1039
|
-
this._uid = `mat-mdc-chip-set-${uid++}`;
|
|
1040
1149
|
/**
|
|
1041
1150
|
* Map from class to whether the class is enabled.
|
|
1042
1151
|
* Enabled classes are set on the MDC chip-set div.
|
|
@@ -1044,7 +1153,24 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1044
1153
|
this._mdcClasses = {};
|
|
1045
1154
|
this._disabled = false;
|
|
1046
1155
|
this._role = null;
|
|
1047
|
-
this.
|
|
1156
|
+
this._handleChipAnimation = (event) => {
|
|
1157
|
+
this._chipSetFoundation.handleChipAnimation(event);
|
|
1158
|
+
};
|
|
1159
|
+
this._handleChipInteraction = (event) => {
|
|
1160
|
+
this._chipSetFoundation.handleChipInteraction(event);
|
|
1161
|
+
};
|
|
1162
|
+
this._handleChipNavigation = (event) => {
|
|
1163
|
+
this._chipSetFoundation.handleChipNavigation(event);
|
|
1164
|
+
};
|
|
1165
|
+
const element = _elementRef.nativeElement;
|
|
1166
|
+
this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
|
|
1167
|
+
element.addEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
|
|
1168
|
+
element.addEventListener(MDCChipEvents.INTERACTION, this._handleChipInteraction);
|
|
1169
|
+
element.addEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
|
|
1170
|
+
}
|
|
1171
|
+
/** Combined stream of all of the child chips' remove events. */
|
|
1172
|
+
get chipDestroyedChanges() {
|
|
1173
|
+
return this._getChipStream(chip => chip.destroyed);
|
|
1048
1174
|
}
|
|
1049
1175
|
/** Whether the chip set is disabled. */
|
|
1050
1176
|
get disabled() {
|
|
@@ -1074,18 +1200,6 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1074
1200
|
get focused() {
|
|
1075
1201
|
return this._hasFocusedChip();
|
|
1076
1202
|
}
|
|
1077
|
-
/** Combined stream of all of the child chips' remove events. */
|
|
1078
|
-
get chipRemoveChanges() {
|
|
1079
|
-
return merge(...this._chips.map(chip => chip.removed));
|
|
1080
|
-
}
|
|
1081
|
-
/** Combined stream of all of the child chips' remove events. */
|
|
1082
|
-
get chipDestroyedChanges() {
|
|
1083
|
-
return merge(...this._chips.map(chip => chip.destroyed));
|
|
1084
|
-
}
|
|
1085
|
-
/** Combined stream of all of the child chips' interaction events. */
|
|
1086
|
-
get chipInteractionChanges() {
|
|
1087
|
-
return merge(...this._chips.map(chip => chip.interaction));
|
|
1088
|
-
}
|
|
1089
1203
|
ngAfterViewInit() {
|
|
1090
1204
|
this._chipSetFoundation.init();
|
|
1091
1205
|
}
|
|
@@ -1098,11 +1212,23 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1098
1212
|
this._syncChipsState();
|
|
1099
1213
|
});
|
|
1100
1214
|
}
|
|
1101
|
-
|
|
1215
|
+
});
|
|
1216
|
+
this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event) => {
|
|
1217
|
+
const chip = event.chip;
|
|
1218
|
+
const chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1219
|
+
// In case the chip that will be removed is currently focused, we temporarily store
|
|
1220
|
+
// the index in order to be able to determine an appropriate sibling chip that will
|
|
1221
|
+
// receive focus.
|
|
1222
|
+
if (this._isValidIndex(chipIndex) && chip._hasFocus()) {
|
|
1223
|
+
this._lastDestroyedChipIndex = chipIndex;
|
|
1224
|
+
}
|
|
1102
1225
|
});
|
|
1103
1226
|
}
|
|
1104
1227
|
ngOnDestroy() {
|
|
1105
|
-
this.
|
|
1228
|
+
const element = this._elementRef.nativeElement;
|
|
1229
|
+
element.removeEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
|
|
1230
|
+
element.removeEventListener(MDCChipEvents.INTERACTION, this._handleChipInteraction);
|
|
1231
|
+
element.removeEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
|
|
1106
1232
|
this._destroyed.next();
|
|
1107
1233
|
this._destroyed.complete();
|
|
1108
1234
|
this._chipSetFoundation.destroy();
|
|
@@ -1120,71 +1246,6 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1120
1246
|
});
|
|
1121
1247
|
}
|
|
1122
1248
|
}
|
|
1123
|
-
/** Sets whether the given CSS class should be applied to the MDC chip. */
|
|
1124
|
-
_setMdcClass(cssClass, active) {
|
|
1125
|
-
const classes = this._elementRef.nativeElement.classList;
|
|
1126
|
-
active ? classes.add(cssClass) : classes.remove(cssClass);
|
|
1127
|
-
this._changeDetectorRef.markForCheck();
|
|
1128
|
-
}
|
|
1129
|
-
/** Adapter method that returns true if the chip set has the given MDC class. */
|
|
1130
|
-
_hasMdcClass(className) {
|
|
1131
|
-
return this._elementRef.nativeElement.classList.contains(className);
|
|
1132
|
-
}
|
|
1133
|
-
/** Updates subscriptions to chip events. */
|
|
1134
|
-
_resetChips() {
|
|
1135
|
-
this._dropSubscriptions();
|
|
1136
|
-
this._subscribeToChipEvents();
|
|
1137
|
-
}
|
|
1138
|
-
/** Subscribes to events on the child chips. */
|
|
1139
|
-
_subscribeToChipEvents() {
|
|
1140
|
-
this._listenToChipsRemove();
|
|
1141
|
-
this._listenToChipsDestroyed();
|
|
1142
|
-
this._listenToChipsInteraction();
|
|
1143
|
-
}
|
|
1144
|
-
/** Subscribes to chip removal events. */
|
|
1145
|
-
_listenToChipsRemove() {
|
|
1146
|
-
this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((event) => {
|
|
1147
|
-
this._chipSetFoundation.handleChipRemoval({
|
|
1148
|
-
chipId: event.chip.id,
|
|
1149
|
-
// TODO(mmalerba): Add removal message.
|
|
1150
|
-
removedAnnouncement: null,
|
|
1151
|
-
});
|
|
1152
|
-
});
|
|
1153
|
-
}
|
|
1154
|
-
/** Subscribes to chip destroyed events. */
|
|
1155
|
-
_listenToChipsDestroyed() {
|
|
1156
|
-
this._chipDestroyedSubscription = this.chipDestroyedChanges.subscribe((event) => {
|
|
1157
|
-
const chip = event.chip;
|
|
1158
|
-
const chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1159
|
-
// In case the chip that will be removed is currently focused, we temporarily store
|
|
1160
|
-
// the index in order to be able to determine an appropriate sibling chip that will
|
|
1161
|
-
// receive focus.
|
|
1162
|
-
if (this._isValidIndex(chipIndex) && chip._hasFocus()) {
|
|
1163
|
-
this._lastDestroyedChipIndex = chipIndex;
|
|
1164
|
-
}
|
|
1165
|
-
});
|
|
1166
|
-
}
|
|
1167
|
-
/** Subscribes to chip interaction events. */
|
|
1168
|
-
_listenToChipsInteraction() {
|
|
1169
|
-
this._chipInteractionSubscription = this.chipInteractionChanges.subscribe((id) => {
|
|
1170
|
-
this._chipSetFoundation.handleChipInteraction({ chipId: id });
|
|
1171
|
-
});
|
|
1172
|
-
}
|
|
1173
|
-
/** Unsubscribes from all chip events. */
|
|
1174
|
-
_dropSubscriptions() {
|
|
1175
|
-
if (this._chipRemoveSubscription) {
|
|
1176
|
-
this._chipRemoveSubscription.unsubscribe();
|
|
1177
|
-
this._chipRemoveSubscription = null;
|
|
1178
|
-
}
|
|
1179
|
-
if (this._chipInteractionSubscription) {
|
|
1180
|
-
this._chipInteractionSubscription.unsubscribe();
|
|
1181
|
-
this._chipInteractionSubscription = null;
|
|
1182
|
-
}
|
|
1183
|
-
if (this._chipDestroyedSubscription) {
|
|
1184
|
-
this._chipDestroyedSubscription.unsubscribe();
|
|
1185
|
-
this._chipDestroyedSubscription = null;
|
|
1186
|
-
}
|
|
1187
|
-
}
|
|
1188
1249
|
/** Dummy method for subclasses to override. Base chip set cannot be focused. */
|
|
1189
1250
|
focus() { }
|
|
1190
1251
|
/**
|
|
@@ -1198,14 +1259,29 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1198
1259
|
}
|
|
1199
1260
|
/** Checks whether an event comes from inside a chip element. */
|
|
1200
1261
|
_originatesFromChip(event) {
|
|
1201
|
-
return this._checkForClassInHierarchy(event, 'mdc-chip');
|
|
1262
|
+
return this._checkForClassInHierarchy(event, 'mdc-evolution-chip');
|
|
1263
|
+
}
|
|
1264
|
+
/**
|
|
1265
|
+
* Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
|
|
1266
|
+
* user to tab out of it. This prevents the grid from capturing focus and redirecting
|
|
1267
|
+
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
1268
|
+
*/
|
|
1269
|
+
_allowFocusEscape() {
|
|
1270
|
+
const previousTabIndex = this.tabIndex;
|
|
1271
|
+
if (this.tabIndex !== -1) {
|
|
1272
|
+
this.tabIndex = -1;
|
|
1273
|
+
setTimeout(() => {
|
|
1274
|
+
this.tabIndex = previousTabIndex;
|
|
1275
|
+
this._changeDetectorRef.markForCheck();
|
|
1276
|
+
});
|
|
1277
|
+
}
|
|
1202
1278
|
}
|
|
1203
1279
|
/**
|
|
1204
|
-
*
|
|
1205
|
-
*
|
|
1280
|
+
* Gets a stream of events from all the chips within the set.
|
|
1281
|
+
* The stream will automatically incorporate any newly-added chips.
|
|
1206
1282
|
*/
|
|
1207
|
-
|
|
1208
|
-
return this.
|
|
1283
|
+
_getChipStream(mappingFunction) {
|
|
1284
|
+
return this._chips.changes.pipe(startWith(null), switchMap(() => merge(...this._chips.map(mappingFunction))));
|
|
1209
1285
|
}
|
|
1210
1286
|
_checkForClassInHierarchy(event, className) {
|
|
1211
1287
|
let currentElement = event.target;
|
|
@@ -1218,22 +1294,34 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1218
1294
|
}
|
|
1219
1295
|
return false;
|
|
1220
1296
|
}
|
|
1297
|
+
_chipFoundation(index) {
|
|
1298
|
+
var _a;
|
|
1299
|
+
return (_a = this._chips.toArray()[index]) === null || _a === void 0 ? void 0 : _a._getFoundation();
|
|
1300
|
+
}
|
|
1221
1301
|
}
|
|
1222
|
-
MatChipSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
1223
|
-
MatChipSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0
|
|
1224
|
-
|
|
1302
|
+
MatChipSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipSet, deps: [{ token: i1.LiveAnnouncer }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1303
|
+
MatChipSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatChipSet, selector: "mat-chip-set", inputs: { disabled: "disabled", role: "role" }, host: { properties: { "attr.role": "role", "attr.aria-describedby": "_ariaDescribedby || null" }, classAttribute: "mat-mdc-chip-set mdc-evolution-chip-set" }, queries: [{ propertyName: "_chips", predicate: MatChip, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1304
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1305
|
+
<ng-content></ng-content>
|
|
1306
|
+
</span>
|
|
1307
|
+
`, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipSet, decorators: [{
|
|
1225
1309
|
type: Component,
|
|
1226
|
-
args: [{ selector: 'mat-chip-set', template:
|
|
1227
|
-
|
|
1310
|
+
args: [{ selector: 'mat-chip-set', template: `
|
|
1311
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1312
|
+
<ng-content></ng-content>
|
|
1313
|
+
</span>
|
|
1314
|
+
`, host: {
|
|
1315
|
+
'class': 'mat-mdc-chip-set mdc-evolution-chip-set',
|
|
1228
1316
|
'[attr.role]': 'role',
|
|
1229
1317
|
// TODO: replace this binding with use of AriaDescriber
|
|
1230
1318
|
'[attr.aria-describedby]': '_ariaDescribedby || null',
|
|
1231
|
-
|
|
1232
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
1319
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"] }]
|
|
1233
1320
|
}], ctorParameters: function () {
|
|
1234
|
-
return [{ type:
|
|
1235
|
-
type:
|
|
1236
|
-
|
|
1321
|
+
return [{ type: i1.LiveAnnouncer }, { type: undefined, decorators: [{
|
|
1322
|
+
type: Inject,
|
|
1323
|
+
args: [DOCUMENT]
|
|
1324
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
|
|
1237
1325
|
}, propDecorators: { disabled: [{
|
|
1238
1326
|
type: Input
|
|
1239
1327
|
}], role: [{
|
|
@@ -1280,8 +1368,8 @@ const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR = {
|
|
|
1280
1368
|
* Used with MatChipOption chips.
|
|
1281
1369
|
*/
|
|
1282
1370
|
class MatChipListbox extends MatChipSet {
|
|
1283
|
-
constructor(
|
|
1284
|
-
super(
|
|
1371
|
+
constructor() {
|
|
1372
|
+
super(...arguments);
|
|
1285
1373
|
/**
|
|
1286
1374
|
* Function when touched. Set as part of ControlValueAccessor implementation.
|
|
1287
1375
|
* @docs-private
|
|
@@ -1300,14 +1388,9 @@ class MatChipListbox extends MatChipSet {
|
|
|
1300
1388
|
this._required = false;
|
|
1301
1389
|
/** Event emitted when the selected chip listbox value has been changed by the user. */
|
|
1302
1390
|
this.change = new EventEmitter();
|
|
1303
|
-
this._chipSetAdapter.selectChipAtIndex = (index, selected) => {
|
|
1304
|
-
this._setSelected(index, selected);
|
|
1305
|
-
};
|
|
1306
|
-
// Reinitialize the foundation with our overridden adapter
|
|
1307
|
-
this._chipSetFoundation = new deprecated.MDCChipSetFoundation(this._chipSetAdapter);
|
|
1308
|
-
this._updateMdcSelectionClasses();
|
|
1309
1391
|
}
|
|
1310
1392
|
/** The ARIA role applied to the chip listbox. */
|
|
1393
|
+
// TODO: MDC uses `grid` here
|
|
1311
1394
|
get role() {
|
|
1312
1395
|
return this.empty ? null : 'listbox';
|
|
1313
1396
|
}
|
|
@@ -1317,7 +1400,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1317
1400
|
}
|
|
1318
1401
|
set multiple(value) {
|
|
1319
1402
|
this._multiple = coerceBooleanProperty(value);
|
|
1320
|
-
this._updateMdcSelectionClasses();
|
|
1321
1403
|
this._syncListboxProperties();
|
|
1322
1404
|
}
|
|
1323
1405
|
/** The array of selected chips inside the chip listbox. */
|
|
@@ -1336,7 +1418,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1336
1418
|
}
|
|
1337
1419
|
set selectable(value) {
|
|
1338
1420
|
this._selectable = coerceBooleanProperty(value);
|
|
1339
|
-
this._updateMdcSelectionClasses();
|
|
1340
1421
|
this._syncListboxProperties();
|
|
1341
1422
|
}
|
|
1342
1423
|
/**
|
|
@@ -1360,15 +1441,15 @@ class MatChipListbox extends MatChipSet {
|
|
|
1360
1441
|
}
|
|
1361
1442
|
/** Combined stream of all of the child chips' selection change events. */
|
|
1362
1443
|
get chipSelectionChanges() {
|
|
1363
|
-
return
|
|
1444
|
+
return this._getChipStream(chip => chip.selectionChange);
|
|
1364
1445
|
}
|
|
1365
1446
|
/** Combined stream of all of the child chips' focus events. */
|
|
1366
1447
|
get chipFocusChanges() {
|
|
1367
|
-
return
|
|
1448
|
+
return this._getChipStream(chip => chip._onFocus);
|
|
1368
1449
|
}
|
|
1369
1450
|
/** Combined stream of all of the child chips' blur events. */
|
|
1370
1451
|
get chipBlurChanges() {
|
|
1371
|
-
return
|
|
1452
|
+
return this._getChipStream(chip => chip._onBlur);
|
|
1372
1453
|
}
|
|
1373
1454
|
/** The value of the listbox, which is the combined value of the selected chips. */
|
|
1374
1455
|
get value() {
|
|
@@ -1380,7 +1461,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1380
1461
|
}
|
|
1381
1462
|
ngAfterContentInit() {
|
|
1382
1463
|
super.ngAfterContentInit();
|
|
1383
|
-
this._initKeyManager();
|
|
1384
1464
|
this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
|
|
1385
1465
|
// Update listbox selectable/multiple properties on chips
|
|
1386
1466
|
this._syncListboxProperties();
|
|
@@ -1389,6 +1469,12 @@ class MatChipListbox extends MatChipSet {
|
|
|
1389
1469
|
// Check to see if we have a destroyed chip and need to refocus
|
|
1390
1470
|
this._updateFocusForDestroyedChips();
|
|
1391
1471
|
});
|
|
1472
|
+
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
|
|
1473
|
+
this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {
|
|
1474
|
+
if (event.isUserInput) {
|
|
1475
|
+
this._propagateChanges();
|
|
1476
|
+
}
|
|
1477
|
+
});
|
|
1392
1478
|
}
|
|
1393
1479
|
/**
|
|
1394
1480
|
* Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
|
|
@@ -1400,11 +1486,14 @@ class MatChipListbox extends MatChipSet {
|
|
|
1400
1486
|
}
|
|
1401
1487
|
const firstSelectedChip = this._getFirstSelectedChip();
|
|
1402
1488
|
if (firstSelectedChip) {
|
|
1403
|
-
|
|
1404
|
-
this._keyManager.setActiveItem(firstSelectedChipIndex);
|
|
1489
|
+
firstSelectedChip.focus();
|
|
1405
1490
|
}
|
|
1406
1491
|
else if (this._chips.length > 0) {
|
|
1407
|
-
|
|
1492
|
+
// MDC sets the tabindex directly on the DOM node when the user is navigating which means
|
|
1493
|
+
// that we may end up with a `0` value from a previous interaction. We reset it manually
|
|
1494
|
+
// here to ensure that the state is correct.
|
|
1495
|
+
this._chips.forEach(chip => chip.primaryAction._updateTabindex(-1));
|
|
1496
|
+
this._chips.first.primaryAction.focus();
|
|
1408
1497
|
}
|
|
1409
1498
|
}
|
|
1410
1499
|
/**
|
|
@@ -1444,60 +1533,24 @@ class MatChipListbox extends MatChipSet {
|
|
|
1444
1533
|
value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
|
|
1445
1534
|
}
|
|
1446
1535
|
else {
|
|
1447
|
-
|
|
1448
|
-
// Shift focus to the active item. Note that we shouldn't do this in multiple
|
|
1449
|
-
// mode, because we don't know what chip the user interacted with last.
|
|
1450
|
-
if (correspondingChip) {
|
|
1451
|
-
if (isUserInput) {
|
|
1452
|
-
this._keyManager.setActiveItem(correspondingChip);
|
|
1453
|
-
}
|
|
1454
|
-
}
|
|
1455
|
-
}
|
|
1456
|
-
}
|
|
1457
|
-
/** Selects or deselects a chip by id. */
|
|
1458
|
-
_setSelected(index, selected) {
|
|
1459
|
-
const chip = this._chips.toArray()[index];
|
|
1460
|
-
if (chip && chip.selected != selected) {
|
|
1461
|
-
chip.toggleSelected(true);
|
|
1536
|
+
this._selectValue(value, isUserInput);
|
|
1462
1537
|
}
|
|
1463
1538
|
}
|
|
1464
1539
|
/** When blurred, marks the field as touched when focus moved outside the chip listbox. */
|
|
1465
1540
|
_blur() {
|
|
1466
|
-
if (this.disabled) {
|
|
1467
|
-
|
|
1468
|
-
}
|
|
1469
|
-
if (!this.focused) {
|
|
1470
|
-
this._keyManager.setActiveItem(-1);
|
|
1471
|
-
}
|
|
1472
|
-
// Wait to see if focus moves to an indivdual chip.
|
|
1473
|
-
setTimeout(() => {
|
|
1474
|
-
if (!this.focused) {
|
|
1475
|
-
this._propagateChanges();
|
|
1476
|
-
this._markAsTouched();
|
|
1477
|
-
}
|
|
1478
|
-
});
|
|
1479
|
-
}
|
|
1480
|
-
/**
|
|
1481
|
-
* Removes the `tabindex` from the chip listbox and resets it back afterwards, allowing the
|
|
1482
|
-
* user to tab out of it. This prevents the listbox from capturing focus and redirecting
|
|
1483
|
-
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
1484
|
-
*/
|
|
1485
|
-
_allowFocusEscape() {
|
|
1486
|
-
const previousTabIndex = this.tabIndex;
|
|
1487
|
-
if (this.tabIndex !== -1) {
|
|
1488
|
-
this.tabIndex = -1;
|
|
1541
|
+
if (!this.disabled) {
|
|
1542
|
+
// Wait to see if focus moves to an individual chip.
|
|
1489
1543
|
setTimeout(() => {
|
|
1490
|
-
this.
|
|
1491
|
-
|
|
1544
|
+
if (!this.focused) {
|
|
1545
|
+
this._propagateChanges();
|
|
1546
|
+
this._markAsTouched();
|
|
1547
|
+
}
|
|
1492
1548
|
});
|
|
1493
1549
|
}
|
|
1494
1550
|
}
|
|
1495
|
-
/**
|
|
1496
|
-
* Handles custom keyboard shortcuts, and passes other keyboard events to the keyboard manager.
|
|
1497
|
-
*/
|
|
1498
1551
|
_keydown(event) {
|
|
1499
|
-
if (
|
|
1500
|
-
|
|
1552
|
+
if (event.keyCode === TAB) {
|
|
1553
|
+
super._allowFocusEscape();
|
|
1501
1554
|
}
|
|
1502
1555
|
}
|
|
1503
1556
|
/** Marks the field as touched */
|
|
@@ -1506,13 +1559,13 @@ class MatChipListbox extends MatChipSet {
|
|
|
1506
1559
|
this._changeDetectorRef.markForCheck();
|
|
1507
1560
|
}
|
|
1508
1561
|
/** Emits change event to set the model value. */
|
|
1509
|
-
_propagateChanges(
|
|
1562
|
+
_propagateChanges() {
|
|
1510
1563
|
let valueToEmit = null;
|
|
1511
1564
|
if (Array.isArray(this.selected)) {
|
|
1512
1565
|
valueToEmit = this.selected.map(chip => chip.value);
|
|
1513
1566
|
}
|
|
1514
1567
|
else {
|
|
1515
|
-
valueToEmit = this.selected ? this.selected.value :
|
|
1568
|
+
valueToEmit = this.selected ? this.selected.value : undefined;
|
|
1516
1569
|
}
|
|
1517
1570
|
this._value = valueToEmit;
|
|
1518
1571
|
this.change.emit(new MatChipListboxChange(this, valueToEmit));
|
|
@@ -1526,9 +1579,9 @@ class MatChipListbox extends MatChipSet {
|
|
|
1526
1579
|
setTimeout(() => {
|
|
1527
1580
|
// Defer setting the value in order to avoid the "Expression
|
|
1528
1581
|
// has changed after it was checked" errors from Angular.
|
|
1529
|
-
this._chips.forEach(chip => {
|
|
1582
|
+
this._chips.forEach((chip, index) => {
|
|
1530
1583
|
if (chip.selected) {
|
|
1531
|
-
this._chipSetFoundation.
|
|
1584
|
+
this._chipSetFoundation.setChipSelected(index, MDCChipActionType.PRIMARY, true);
|
|
1532
1585
|
}
|
|
1533
1586
|
});
|
|
1534
1587
|
});
|
|
@@ -1571,27 +1624,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1571
1624
|
});
|
|
1572
1625
|
}
|
|
1573
1626
|
}
|
|
1574
|
-
/** Sets the mdc classes for single vs multi selection. */
|
|
1575
|
-
_updateMdcSelectionClasses() {
|
|
1576
|
-
this._setMdcClass('mdc-chip-set--filter', this.selectable && this.multiple);
|
|
1577
|
-
this._setMdcClass('mdc-chip-set--choice', this.selectable && !this.multiple);
|
|
1578
|
-
}
|
|
1579
|
-
/** Initializes the key manager to manage focus. */
|
|
1580
|
-
_initKeyManager() {
|
|
1581
|
-
this._keyManager = new FocusKeyManager(this._chips)
|
|
1582
|
-
.withWrap()
|
|
1583
|
-
.withVerticalOrientation()
|
|
1584
|
-
.withHomeAndEnd()
|
|
1585
|
-
.withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
|
|
1586
|
-
if (this._dir) {
|
|
1587
|
-
this._dir.change
|
|
1588
|
-
.pipe(takeUntil(this._destroyed))
|
|
1589
|
-
.subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
|
|
1590
|
-
}
|
|
1591
|
-
this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
1592
|
-
this._allowFocusEscape();
|
|
1593
|
-
});
|
|
1594
|
-
}
|
|
1595
1627
|
/** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
|
|
1596
1628
|
_getFirstSelectedChip() {
|
|
1597
1629
|
if (Array.isArray(this.selected)) {
|
|
@@ -1601,57 +1633,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1601
1633
|
return this.selected;
|
|
1602
1634
|
}
|
|
1603
1635
|
}
|
|
1604
|
-
/** Unsubscribes from all chip events. */
|
|
1605
|
-
_dropSubscriptions() {
|
|
1606
|
-
super._dropSubscriptions();
|
|
1607
|
-
if (this._chipSelectionSubscription) {
|
|
1608
|
-
this._chipSelectionSubscription.unsubscribe();
|
|
1609
|
-
this._chipSelectionSubscription = null;
|
|
1610
|
-
}
|
|
1611
|
-
if (this._chipBlurSubscription) {
|
|
1612
|
-
this._chipBlurSubscription.unsubscribe();
|
|
1613
|
-
this._chipBlurSubscription = null;
|
|
1614
|
-
}
|
|
1615
|
-
if (this._chipFocusSubscription) {
|
|
1616
|
-
this._chipFocusSubscription.unsubscribe();
|
|
1617
|
-
this._chipFocusSubscription = null;
|
|
1618
|
-
}
|
|
1619
|
-
}
|
|
1620
|
-
/** Subscribes to events on the child chips. */
|
|
1621
|
-
_subscribeToChipEvents() {
|
|
1622
|
-
super._subscribeToChipEvents();
|
|
1623
|
-
this._listenToChipsSelection();
|
|
1624
|
-
this._listenToChipsFocus();
|
|
1625
|
-
this._listenToChipsBlur();
|
|
1626
|
-
}
|
|
1627
|
-
/** Subscribes to chip focus events. */
|
|
1628
|
-
_listenToChipsFocus() {
|
|
1629
|
-
this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
|
|
1630
|
-
let chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1631
|
-
if (this._isValidIndex(chipIndex)) {
|
|
1632
|
-
this._keyManager.updateActiveItem(chipIndex);
|
|
1633
|
-
}
|
|
1634
|
-
});
|
|
1635
|
-
}
|
|
1636
|
-
/** Subscribes to chip blur events. */
|
|
1637
|
-
_listenToChipsBlur() {
|
|
1638
|
-
this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
|
|
1639
|
-
this._blur();
|
|
1640
|
-
});
|
|
1641
|
-
}
|
|
1642
|
-
/** Subscribes to selection changes in the option chips. */
|
|
1643
|
-
_listenToChipsSelection() {
|
|
1644
|
-
this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((chipSelectionChange) => {
|
|
1645
|
-
this._chipSetFoundation.handleChipSelection({
|
|
1646
|
-
chipId: chipSelectionChange.source.id,
|
|
1647
|
-
selected: chipSelectionChange.selected,
|
|
1648
|
-
shouldIgnore: false,
|
|
1649
|
-
});
|
|
1650
|
-
if (chipSelectionChange.isUserInput) {
|
|
1651
|
-
this._propagateChanges();
|
|
1652
|
-
}
|
|
1653
|
-
});
|
|
1654
|
-
}
|
|
1655
1636
|
/**
|
|
1656
1637
|
* If the amount of chips changed, we need to update the
|
|
1657
1638
|
* key manager state and focus the next closest chip.
|
|
@@ -1661,7 +1642,7 @@ class MatChipListbox extends MatChipSet {
|
|
|
1661
1642
|
if (this._lastDestroyedChipIndex != null) {
|
|
1662
1643
|
if (this._chips.length) {
|
|
1663
1644
|
const newChipIndex = Math.min(this._lastDestroyedChipIndex, this._chips.length - 1);
|
|
1664
|
-
this.
|
|
1645
|
+
this._chips.toArray()[newChipIndex].focus();
|
|
1665
1646
|
}
|
|
1666
1647
|
else {
|
|
1667
1648
|
this.focus();
|
|
@@ -1670,12 +1651,20 @@ class MatChipListbox extends MatChipSet {
|
|
|
1670
1651
|
this._lastDestroyedChipIndex = null;
|
|
1671
1652
|
}
|
|
1672
1653
|
}
|
|
1673
|
-
MatChipListbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
1674
|
-
MatChipListbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0
|
|
1675
|
-
|
|
1654
|
+
MatChipListbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipListbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1655
|
+
MatChipListbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatChipListbox, selector: "mat-chip-listbox", inputs: { tabIndex: "tabIndex", multiple: "multiple", ariaOrientation: ["aria-orientation", "ariaOrientation"], selectable: "selectable", compareWith: "compareWith", required: "required", value: "value" }, outputs: { change: "change" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "attr.role": "role", "tabIndex": "empty ? -1 : tabIndex", "attr.aria-describedby": "_ariaDescribedby || null", "attr.aria-required": "role ? required : null", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "ariaOrientation", "class.mat-mdc-chip-list-disabled": "disabled", "class.mat-mdc-chip-list-required": "required" }, classAttribute: "mdc-evolution-chip-set mat-mdc-chip-listbox" }, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "_chips", predicate: MatChipOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1656
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1657
|
+
<ng-content></ng-content>
|
|
1658
|
+
</span>
|
|
1659
|
+
`, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipListbox, decorators: [{
|
|
1676
1661
|
type: Component,
|
|
1677
|
-
args: [{ selector: 'mat-chip-listbox', template:
|
|
1678
|
-
|
|
1662
|
+
args: [{ selector: 'mat-chip-listbox', template: `
|
|
1663
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1664
|
+
<ng-content></ng-content>
|
|
1665
|
+
</span>
|
|
1666
|
+
`, inputs: ['tabIndex'], host: {
|
|
1667
|
+
'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',
|
|
1679
1668
|
'[attr.role]': 'role',
|
|
1680
1669
|
'[tabIndex]': 'empty ? -1 : tabIndex',
|
|
1681
1670
|
// TODO: replace this binding with use of AriaDescriber
|
|
@@ -1689,13 +1678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
1689
1678
|
'(focus)': 'focus()',
|
|
1690
1679
|
'(blur)': '_blur()',
|
|
1691
1680
|
'(keydown)': '_keydown($event)',
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
}], ctorParameters: function () {
|
|
1695
|
-
return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Directionality, decorators: [{
|
|
1696
|
-
type: Optional
|
|
1697
|
-
}] }];
|
|
1698
|
-
}, propDecorators: { multiple: [{
|
|
1681
|
+
}, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"] }]
|
|
1682
|
+
}], propDecorators: { multiple: [{
|
|
1699
1683
|
type: Input
|
|
1700
1684
|
}], ariaOrientation: [{
|
|
1701
1685
|
type: Input,
|
|
@@ -1726,234 +1710,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
1726
1710
|
* Use of this source code is governed by an MIT-style license that can be
|
|
1727
1711
|
* found in the LICENSE file at https://angular.io/license
|
|
1728
1712
|
*/
|
|
1729
|
-
/** The keys handled by the GridKeyManager keydown method. */
|
|
1730
|
-
const NAVIGATION_KEYS = [DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW];
|
|
1731
|
-
/**
|
|
1732
|
-
* This class manages keyboard events for grids. If you pass it a query list
|
|
1733
|
-
* of GridKeyManagerRow, it will set the active cell correctly when arrow events occur.
|
|
1734
|
-
*
|
|
1735
|
-
* GridKeyManager expects that rows may change dynamically, but the cells for a given row are
|
|
1736
|
-
* static. It also expects that all rows have the same number of cells.
|
|
1737
|
-
*/
|
|
1738
|
-
class GridKeyManager {
|
|
1739
|
-
constructor(_rows) {
|
|
1740
|
-
this._rows = _rows;
|
|
1741
|
-
this._activeRowIndex = -1;
|
|
1742
|
-
this._activeColumnIndex = -1;
|
|
1743
|
-
this._activeRow = null;
|
|
1744
|
-
this._activeCell = null;
|
|
1745
|
-
this._dir = 'ltr';
|
|
1746
|
-
this._homeAndEnd = false;
|
|
1747
|
-
/** Stream that emits whenever the active cell of the grid manager changes. */
|
|
1748
|
-
this.change = new Subject();
|
|
1749
|
-
// We allow for the rows to be an array because, in some cases, the consumer may
|
|
1750
|
-
// not have access to a QueryList of the rows they want to manage (e.g. when the
|
|
1751
|
-
// rows aren't being collected via `ViewChildren` or `ContentChildren`).
|
|
1752
|
-
if (_rows instanceof QueryList) {
|
|
1753
|
-
_rows.changes.subscribe((newRows) => {
|
|
1754
|
-
if (this._activeRow) {
|
|
1755
|
-
const newIndex = newRows.toArray().indexOf(this._activeRow);
|
|
1756
|
-
if (newIndex > -1 && newIndex !== this._activeRowIndex) {
|
|
1757
|
-
this._activeRowIndex = newIndex;
|
|
1758
|
-
}
|
|
1759
|
-
}
|
|
1760
|
-
});
|
|
1761
|
-
}
|
|
1762
|
-
}
|
|
1763
|
-
/**
|
|
1764
|
-
* Configures the directionality of the key manager's horizontal movement.
|
|
1765
|
-
* @param direction Direction which is considered forward movement across a row.
|
|
1766
|
-
*
|
|
1767
|
-
* If withDirectionality is not set, the default is 'ltr'.
|
|
1768
|
-
*/
|
|
1769
|
-
withDirectionality(direction) {
|
|
1770
|
-
this._dir = direction;
|
|
1771
|
-
return this;
|
|
1772
|
-
}
|
|
1773
|
-
setActiveCell(cell) {
|
|
1774
|
-
const previousRowIndex = this._activeRowIndex;
|
|
1775
|
-
const previousColumnIndex = this._activeColumnIndex;
|
|
1776
|
-
this.updateActiveCell(cell);
|
|
1777
|
-
if (this._activeRowIndex !== previousRowIndex ||
|
|
1778
|
-
this._activeColumnIndex !== previousColumnIndex) {
|
|
1779
|
-
this.change.next({ row: this._activeRowIndex, column: this._activeColumnIndex });
|
|
1780
|
-
}
|
|
1781
|
-
}
|
|
1782
|
-
/**
|
|
1783
|
-
* Configures the key manager to activate the first and last items
|
|
1784
|
-
* respectively when the Home or End key is pressed.
|
|
1785
|
-
* @param enabled Whether pressing the Home or End key activates the first/last item.
|
|
1786
|
-
*/
|
|
1787
|
-
withHomeAndEnd(enabled = true) {
|
|
1788
|
-
this._homeAndEnd = enabled;
|
|
1789
|
-
return this;
|
|
1790
|
-
}
|
|
1791
|
-
/**
|
|
1792
|
-
* Sets the active cell depending on the key event passed in.
|
|
1793
|
-
* @param event Keyboard event to be used for determining which element should be active.
|
|
1794
|
-
*/
|
|
1795
|
-
onKeydown(event) {
|
|
1796
|
-
const keyCode = event.keyCode;
|
|
1797
|
-
switch (keyCode) {
|
|
1798
|
-
case DOWN_ARROW:
|
|
1799
|
-
this.setNextRowActive();
|
|
1800
|
-
break;
|
|
1801
|
-
case UP_ARROW:
|
|
1802
|
-
this.setPreviousRowActive();
|
|
1803
|
-
break;
|
|
1804
|
-
case RIGHT_ARROW:
|
|
1805
|
-
this._dir === 'rtl' ? this.setPreviousColumnActive() : this.setNextColumnActive();
|
|
1806
|
-
break;
|
|
1807
|
-
case LEFT_ARROW:
|
|
1808
|
-
this._dir === 'rtl' ? this.setNextColumnActive() : this.setPreviousColumnActive();
|
|
1809
|
-
break;
|
|
1810
|
-
case HOME:
|
|
1811
|
-
if (this._homeAndEnd) {
|
|
1812
|
-
this.setFirstCellActive();
|
|
1813
|
-
break;
|
|
1814
|
-
}
|
|
1815
|
-
else {
|
|
1816
|
-
return;
|
|
1817
|
-
}
|
|
1818
|
-
case END:
|
|
1819
|
-
if (this._homeAndEnd) {
|
|
1820
|
-
this.setLastCellActive();
|
|
1821
|
-
break;
|
|
1822
|
-
}
|
|
1823
|
-
else {
|
|
1824
|
-
return;
|
|
1825
|
-
}
|
|
1826
|
-
default:
|
|
1827
|
-
// Note that we return here, in order to avoid preventing
|
|
1828
|
-
// the default action of non-navigational keys.
|
|
1829
|
-
return;
|
|
1830
|
-
}
|
|
1831
|
-
event.preventDefault();
|
|
1832
|
-
}
|
|
1833
|
-
/** Index of the currently active row. */
|
|
1834
|
-
get activeRowIndex() {
|
|
1835
|
-
return this._activeRowIndex;
|
|
1836
|
-
}
|
|
1837
|
-
/** Index of the currently active column. */
|
|
1838
|
-
get activeColumnIndex() {
|
|
1839
|
-
return this._activeColumnIndex;
|
|
1840
|
-
}
|
|
1841
|
-
/** The active cell. */
|
|
1842
|
-
get activeCell() {
|
|
1843
|
-
return this._activeCell;
|
|
1844
|
-
}
|
|
1845
|
-
/** Sets the active cell to the first cell in the grid. */
|
|
1846
|
-
setFirstCellActive() {
|
|
1847
|
-
this._setActiveCellByIndex(0, 0);
|
|
1848
|
-
}
|
|
1849
|
-
/** Sets the active cell to the last cell in the grid. */
|
|
1850
|
-
setLastCellActive() {
|
|
1851
|
-
const lastRowIndex = this._rows.length - 1;
|
|
1852
|
-
const lastRow = this._getRowsArray()[lastRowIndex];
|
|
1853
|
-
this._setActiveCellByIndex(lastRowIndex, lastRow.cells.length - 1);
|
|
1854
|
-
}
|
|
1855
|
-
/** Sets the active row to the next row in the grid. Active column is unchanged. */
|
|
1856
|
-
setNextRowActive() {
|
|
1857
|
-
this._activeRowIndex < 0 ? this.setFirstCellActive() : this._setActiveCellByDelta(1, 0);
|
|
1858
|
-
}
|
|
1859
|
-
/** Sets the active row to the previous row in the grid. Active column is unchanged. */
|
|
1860
|
-
setPreviousRowActive() {
|
|
1861
|
-
this._setActiveCellByDelta(-1, 0);
|
|
1862
|
-
}
|
|
1863
|
-
/**
|
|
1864
|
-
* Sets the active column to the next column in the grid.
|
|
1865
|
-
* Active row is unchanged, unless we reach the end of a row.
|
|
1866
|
-
*/
|
|
1867
|
-
setNextColumnActive() {
|
|
1868
|
-
this._activeRowIndex < 0 ? this.setFirstCellActive() : this._setActiveCellByDelta(0, 1);
|
|
1869
|
-
}
|
|
1870
|
-
/**
|
|
1871
|
-
* Sets the active column to the previous column in the grid.
|
|
1872
|
-
* Active row is unchanged, unless we reach the end of a row.
|
|
1873
|
-
*/
|
|
1874
|
-
setPreviousColumnActive() {
|
|
1875
|
-
this._setActiveCellByDelta(0, -1);
|
|
1876
|
-
}
|
|
1877
|
-
updateActiveCell(cell) {
|
|
1878
|
-
const rowArray = this._getRowsArray();
|
|
1879
|
-
if (typeof cell === 'object' &&
|
|
1880
|
-
typeof cell.row === 'number' &&
|
|
1881
|
-
typeof cell.column === 'number') {
|
|
1882
|
-
this._activeRowIndex = cell.row;
|
|
1883
|
-
this._activeColumnIndex = cell.column;
|
|
1884
|
-
this._activeRow = rowArray[cell.row] || null;
|
|
1885
|
-
this._activeCell = this._activeRow ? this._activeRow.cells[cell.column] || null : null;
|
|
1886
|
-
}
|
|
1887
|
-
else {
|
|
1888
|
-
rowArray.forEach((row, rowIndex) => {
|
|
1889
|
-
const columnIndex = row.cells.indexOf(cell);
|
|
1890
|
-
if (columnIndex !== -1) {
|
|
1891
|
-
this._activeRowIndex = rowIndex;
|
|
1892
|
-
this._activeColumnIndex = columnIndex;
|
|
1893
|
-
this._activeRow = row;
|
|
1894
|
-
this._activeCell = row.cells[columnIndex];
|
|
1895
|
-
}
|
|
1896
|
-
});
|
|
1897
|
-
}
|
|
1898
|
-
}
|
|
1899
|
-
/**
|
|
1900
|
-
* This method sets the active cell, given the row and columns deltas
|
|
1901
|
-
* between the currently active cell and the new active cell.
|
|
1902
|
-
*/
|
|
1903
|
-
_setActiveCellByDelta(rowDelta, columnDelta) {
|
|
1904
|
-
// If delta puts us past the last cell in a row, move to the first cell of the next row.
|
|
1905
|
-
if (this._activeRow && this._activeColumnIndex + columnDelta >= this._activeRow.cells.length) {
|
|
1906
|
-
this._setActiveCellByIndex(this._activeRowIndex + 1, 0);
|
|
1907
|
-
// If delta puts us prior to the first cell in a row, move to the last cell of the previous row.
|
|
1908
|
-
}
|
|
1909
|
-
else if (this._activeColumnIndex + columnDelta < 0) {
|
|
1910
|
-
const previousRowIndex = this._activeRowIndex - 1;
|
|
1911
|
-
const previousRow = this._getRowsArray()[previousRowIndex];
|
|
1912
|
-
if (previousRow) {
|
|
1913
|
-
this._setActiveCellByIndex(previousRowIndex, previousRow.cells.length - 1);
|
|
1914
|
-
}
|
|
1915
|
-
}
|
|
1916
|
-
else {
|
|
1917
|
-
this._setActiveCellByIndex(this._activeRowIndex + rowDelta, this._activeColumnIndex + columnDelta);
|
|
1918
|
-
}
|
|
1919
|
-
}
|
|
1920
|
-
/**
|
|
1921
|
-
* Sets the active cell to the cell at the indices specified, if they are valid.
|
|
1922
|
-
*/
|
|
1923
|
-
_setActiveCellByIndex(rowIndex, columnIndex) {
|
|
1924
|
-
const rows = this._getRowsArray();
|
|
1925
|
-
const targetRow = rows[rowIndex];
|
|
1926
|
-
if (!targetRow || !targetRow.cells[columnIndex]) {
|
|
1927
|
-
return;
|
|
1928
|
-
}
|
|
1929
|
-
this.setActiveCell({ row: rowIndex, column: columnIndex });
|
|
1930
|
-
}
|
|
1931
|
-
/** Returns the rows as an array. */
|
|
1932
|
-
_getRowsArray() {
|
|
1933
|
-
return this._rows instanceof QueryList ? this._rows.toArray() : this._rows;
|
|
1934
|
-
}
|
|
1935
|
-
}
|
|
1936
|
-
|
|
1937
|
-
/**
|
|
1938
|
-
* @license
|
|
1939
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1940
|
-
*
|
|
1941
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1942
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1943
|
-
*/
|
|
1944
|
-
/**
|
|
1945
|
-
* A version of GridKeyManager where the cells are HTMLElements, and focus()
|
|
1946
|
-
* is called on a cell when it becomes active.
|
|
1947
|
-
*/
|
|
1948
|
-
class GridFocusKeyManager extends GridKeyManager {
|
|
1949
|
-
setActiveCell(cell) {
|
|
1950
|
-
super.setActiveCell(cell);
|
|
1951
|
-
if (this.activeCell) {
|
|
1952
|
-
this.activeCell.focus();
|
|
1953
|
-
}
|
|
1954
|
-
}
|
|
1955
|
-
}
|
|
1956
|
-
|
|
1957
1713
|
/** Change event object that is emitted when the chip grid value has changed. */
|
|
1958
1714
|
class MatChipGridChange {
|
|
1959
1715
|
constructor(
|
|
@@ -1970,10 +1726,10 @@ class MatChipGridChange {
|
|
|
1970
1726
|
* @docs-private
|
|
1971
1727
|
*/
|
|
1972
1728
|
class MatChipGridBase extends MatChipSet {
|
|
1973
|
-
constructor(
|
|
1729
|
+
constructor(liveAnnouncer, document, elementRef, changeDetectorRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup,
|
|
1974
1730
|
/** @docs-private */
|
|
1975
1731
|
ngControl) {
|
|
1976
|
-
super(
|
|
1732
|
+
super(liveAnnouncer, document, elementRef, changeDetectorRef);
|
|
1977
1733
|
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
|
|
1978
1734
|
this._parentForm = _parentForm;
|
|
1979
1735
|
this._parentFormGroup = _parentFormGroup;
|
|
@@ -1986,8 +1742,8 @@ const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase);
|
|
|
1986
1742
|
* the matChipInputFor directive.
|
|
1987
1743
|
*/
|
|
1988
1744
|
class MatChipGrid extends _MatChipGridMixinBase {
|
|
1989
|
-
constructor(
|
|
1990
|
-
super(
|
|
1745
|
+
constructor(liveAnnouncer, document, elementRef, changeDetectorRef, parentForm, parentFormGroup, defaultErrorStateMatcher, ngControl) {
|
|
1746
|
+
super(liveAnnouncer, document, elementRef, changeDetectorRef, defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
|
|
1991
1747
|
/**
|
|
1992
1748
|
* Implemented as part of MatFormFieldControl.
|
|
1993
1749
|
* @docs-private
|
|
@@ -2091,20 +1847,23 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2091
1847
|
}
|
|
2092
1848
|
/** Combined stream of all of the child chips' blur events. */
|
|
2093
1849
|
get chipBlurChanges() {
|
|
2094
|
-
return
|
|
1850
|
+
return this._getChipStream(chip => chip._onBlur);
|
|
2095
1851
|
}
|
|
2096
1852
|
/** Combined stream of all of the child chips' focus events. */
|
|
2097
1853
|
get chipFocusChanges() {
|
|
2098
|
-
return
|
|
1854
|
+
return this._getChipStream(chip => chip._onFocus);
|
|
2099
1855
|
}
|
|
2100
1856
|
ngAfterContentInit() {
|
|
2101
1857
|
super.ngAfterContentInit();
|
|
2102
|
-
this._initKeyManager();
|
|
2103
1858
|
this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
|
|
2104
1859
|
// Check to see if we have a destroyed chip and need to refocus
|
|
2105
1860
|
this._updateFocusForDestroyedChips();
|
|
2106
1861
|
this.stateChanges.next();
|
|
2107
1862
|
});
|
|
1863
|
+
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
1864
|
+
this._blur();
|
|
1865
|
+
this.stateChanges.next();
|
|
1866
|
+
});
|
|
2108
1867
|
}
|
|
2109
1868
|
ngAfterViewInit() {
|
|
2110
1869
|
super.ngAfterViewInit();
|
|
@@ -2127,14 +1886,13 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2127
1886
|
/** Associates an HTML input element with this chip grid. */
|
|
2128
1887
|
registerInput(inputElement) {
|
|
2129
1888
|
this._chipInput = inputElement;
|
|
2130
|
-
this._setMdcClass('mdc-chip-set--input', true);
|
|
2131
1889
|
}
|
|
2132
1890
|
/**
|
|
2133
1891
|
* Implemented as part of MatFormFieldControl.
|
|
2134
1892
|
* @docs-private
|
|
2135
1893
|
*/
|
|
2136
1894
|
onContainerClick(event) {
|
|
2137
|
-
if (!this.
|
|
1895
|
+
if (!this.disabled && !this._originatesFromChip(event)) {
|
|
2138
1896
|
this.focus();
|
|
2139
1897
|
}
|
|
2140
1898
|
}
|
|
@@ -2147,7 +1905,11 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2147
1905
|
return;
|
|
2148
1906
|
}
|
|
2149
1907
|
if (this._chips.length > 0) {
|
|
2150
|
-
|
|
1908
|
+
// MDC sets the tabindex directly on the DOM node when the user is navigating which means
|
|
1909
|
+
// that we may end up with a `0` value from a previous interaction. We reset it manually
|
|
1910
|
+
// here to ensure that the state is correct.
|
|
1911
|
+
this._chips.forEach(chip => chip.primaryAction._updateTabindex(-1));
|
|
1912
|
+
this._chips.first.focus();
|
|
2151
1913
|
}
|
|
2152
1914
|
else {
|
|
2153
1915
|
this._focusInput();
|
|
@@ -2202,7 +1964,6 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2202
1964
|
// Timeout is needed to wait for the focus() event trigger on chip input.
|
|
2203
1965
|
setTimeout(() => {
|
|
2204
1966
|
if (!this.focused) {
|
|
2205
|
-
this._keyManager.setActiveCell({ row: -1, column: -1 });
|
|
2206
1967
|
this._propagateChanges();
|
|
2207
1968
|
this._markAsTouched();
|
|
2208
1969
|
}
|
|
@@ -2214,78 +1975,21 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2214
1975
|
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
2215
1976
|
*/
|
|
2216
1977
|
_allowFocusEscape() {
|
|
2217
|
-
if (this._chipInput.focused) {
|
|
2218
|
-
|
|
2219
|
-
}
|
|
2220
|
-
const previousTabIndex = this.tabIndex;
|
|
2221
|
-
if (this.tabIndex !== -1) {
|
|
2222
|
-
this.tabIndex = -1;
|
|
2223
|
-
setTimeout(() => {
|
|
2224
|
-
this.tabIndex = previousTabIndex;
|
|
2225
|
-
this._changeDetectorRef.markForCheck();
|
|
2226
|
-
});
|
|
1978
|
+
if (!this._chipInput.focused) {
|
|
1979
|
+
super._allowFocusEscape();
|
|
2227
1980
|
}
|
|
2228
1981
|
}
|
|
2229
1982
|
/** Handles custom keyboard events. */
|
|
2230
1983
|
_keydown(event) {
|
|
2231
|
-
|
|
2232
|
-
const keyCode = event.keyCode;
|
|
2233
|
-
const manager = this._keyManager;
|
|
2234
|
-
if (keyCode === TAB && target.id !== this._chipInput.id) {
|
|
1984
|
+
if (event.keyCode === TAB && event.target.id !== this._chipInput.id) {
|
|
2235
1985
|
this._allowFocusEscape();
|
|
2236
1986
|
}
|
|
2237
|
-
else if (this._originatesFromEditingChip(event)) {
|
|
2238
|
-
// No-op, let the editing chip handle all keyboard events except for Tab.
|
|
2239
|
-
}
|
|
2240
|
-
else if (this._originatesFromChip(event)) {
|
|
2241
|
-
manager.onKeydown(event);
|
|
2242
|
-
}
|
|
2243
1987
|
this.stateChanges.next();
|
|
2244
1988
|
}
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
this._chipBlurSubscription.unsubscribe();
|
|
2250
|
-
this._chipBlurSubscription = null;
|
|
2251
|
-
}
|
|
2252
|
-
if (this._chipFocusSubscription) {
|
|
2253
|
-
this._chipFocusSubscription.unsubscribe();
|
|
2254
|
-
this._chipFocusSubscription = null;
|
|
2255
|
-
}
|
|
2256
|
-
}
|
|
2257
|
-
/** Subscribes to events on the child chips. */
|
|
2258
|
-
_subscribeToChipEvents() {
|
|
2259
|
-
super._subscribeToChipEvents();
|
|
2260
|
-
this._listenToChipsFocus();
|
|
2261
|
-
this._listenToChipsBlur();
|
|
2262
|
-
}
|
|
2263
|
-
/** Initializes the key manager to manage focus. */
|
|
2264
|
-
_initKeyManager() {
|
|
2265
|
-
this._keyManager = new GridFocusKeyManager(this._chips)
|
|
2266
|
-
.withHomeAndEnd()
|
|
2267
|
-
.withDirectionality(this._dir ? this._dir.value : 'ltr');
|
|
2268
|
-
if (this._dir) {
|
|
2269
|
-
this._dir.change
|
|
2270
|
-
.pipe(takeUntil(this._destroyed))
|
|
2271
|
-
.subscribe(dir => this._keyManager.withDirectionality(dir));
|
|
2272
|
-
}
|
|
2273
|
-
}
|
|
2274
|
-
/** Subscribes to chip focus events. */
|
|
2275
|
-
_listenToChipsFocus() {
|
|
2276
|
-
this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
|
|
2277
|
-
let chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
2278
|
-
if (this._isValidIndex(chipIndex)) {
|
|
2279
|
-
this._keyManager.updateActiveCell({ row: chipIndex, column: 0 });
|
|
2280
|
-
}
|
|
2281
|
-
});
|
|
2282
|
-
}
|
|
2283
|
-
/** Subscribes to chip blur events. */
|
|
2284
|
-
_listenToChipsBlur() {
|
|
2285
|
-
this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
|
|
2286
|
-
this._blur();
|
|
2287
|
-
this.stateChanges.next();
|
|
2288
|
-
});
|
|
1989
|
+
_focusLastChip() {
|
|
1990
|
+
if (this._chips.length) {
|
|
1991
|
+
this._chips.last.primaryAction.focus();
|
|
1992
|
+
}
|
|
2289
1993
|
}
|
|
2290
1994
|
/** Emits change event to set the model value. */
|
|
2291
1995
|
_propagateChanges() {
|
|
@@ -2310,10 +2014,7 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2310
2014
|
if (this._lastDestroyedChipIndex != null) {
|
|
2311
2015
|
if (this._chips.length) {
|
|
2312
2016
|
const newChipIndex = Math.min(this._lastDestroyedChipIndex, this._chips.length - 1);
|
|
2313
|
-
this.
|
|
2314
|
-
row: newChipIndex,
|
|
2315
|
-
column: Math.max(this._keyManager.activeColumnIndex, 0),
|
|
2316
|
-
});
|
|
2017
|
+
this._chips.toArray()[newChipIndex].focus();
|
|
2317
2018
|
}
|
|
2318
2019
|
else {
|
|
2319
2020
|
this.focus();
|
|
@@ -2326,12 +2027,20 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2326
2027
|
this._chipInput.focus();
|
|
2327
2028
|
}
|
|
2328
2029
|
}
|
|
2329
|
-
MatChipGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
2330
|
-
MatChipGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0
|
|
2331
|
-
|
|
2030
|
+
MatChipGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipGrid, deps: [{ token: i1.LiveAnnouncer }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2031
|
+
MatChipGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatChipGrid, selector: "mat-chip-grid", inputs: { tabIndex: "tabIndex", disabled: "disabled", placeholder: "placeholder", required: "required", value: "value", errorStateMatcher: "errorStateMatcher" }, outputs: { change: "change", valueChange: "valueChange" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "attr.role": "role", "tabIndex": "_chips && _chips.length === 0 ? -1 : tabIndex", "attr.aria-describedby": "_ariaDescribedby || null", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.mat-mdc-chip-list-disabled": "disabled", "class.mat-mdc-chip-list-invalid": "errorState", "class.mat-mdc-chip-list-required": "required" }, classAttribute: "mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set" }, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], queries: [{ propertyName: "_chips", predicate: MatChipRow, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
2032
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
2033
|
+
<ng-content></ng-content>
|
|
2034
|
+
</span>
|
|
2035
|
+
`, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipGrid, decorators: [{
|
|
2332
2037
|
type: Component,
|
|
2333
|
-
args: [{ selector: 'mat-chip-grid', template:
|
|
2334
|
-
|
|
2038
|
+
args: [{ selector: 'mat-chip-grid', template: `
|
|
2039
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
2040
|
+
<ng-content></ng-content>
|
|
2041
|
+
</span>
|
|
2042
|
+
`, inputs: ['tabIndex'], host: {
|
|
2043
|
+
'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set',
|
|
2335
2044
|
'[attr.role]': 'role',
|
|
2336
2045
|
'[tabIndex]': '_chips && _chips.length === 0 ? -1 : tabIndex',
|
|
2337
2046
|
// TODO: replace this binding with use of AriaDescriber
|
|
@@ -2344,12 +2053,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
2344
2053
|
'(focus)': 'focus()',
|
|
2345
2054
|
'(blur)': '_blur()',
|
|
2346
2055
|
'(keydown)': '_keydown($event)',
|
|
2347
|
-
|
|
2348
|
-
}, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
2056
|
+
}, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"] }]
|
|
2349
2057
|
}], ctorParameters: function () {
|
|
2350
|
-
return [{ type:
|
|
2351
|
-
type:
|
|
2352
|
-
|
|
2058
|
+
return [{ type: i1.LiveAnnouncer }, { type: undefined, decorators: [{
|
|
2059
|
+
type: Inject,
|
|
2060
|
+
args: [DOCUMENT]
|
|
2061
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm, decorators: [{
|
|
2353
2062
|
type: Optional
|
|
2354
2063
|
}] }, { type: i2$1.FormGroupDirective, decorators: [{
|
|
2355
2064
|
type: Optional
|
|
@@ -2362,8 +2071,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
2362
2071
|
type: Input
|
|
2363
2072
|
}], placeholder: [{
|
|
2364
2073
|
type: Input
|
|
2365
|
-
}, {
|
|
2366
|
-
type: Input
|
|
2367
2074
|
}], required: [{
|
|
2368
2075
|
type: Input
|
|
2369
2076
|
}], value: [{
|
|
@@ -2470,18 +2177,11 @@ class MatChipInput {
|
|
|
2470
2177
|
/** Utility method to make host definition/tests more clear. */
|
|
2471
2178
|
_keydown(event) {
|
|
2472
2179
|
if (event) {
|
|
2473
|
-
// Allow the user's focus to escape when they're tabbing forward. Note that we don't
|
|
2474
|
-
// want to do this when going backwards, because focus should go back to the first chip.
|
|
2475
|
-
if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
|
|
2476
|
-
this._chipGrid._allowFocusEscape();
|
|
2477
|
-
}
|
|
2478
2180
|
// To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
|
|
2479
2181
|
// We focus the last chip on backspace only after the user has released the backspace button,
|
|
2480
2182
|
// And the input is empty (see behaviour in _keyup)
|
|
2481
2183
|
if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
|
|
2482
|
-
|
|
2483
|
-
this._chipGrid._keyManager.setLastCellActive();
|
|
2484
|
-
}
|
|
2184
|
+
this._chipGrid._focusLastChip();
|
|
2485
2185
|
event.preventDefault();
|
|
2486
2186
|
return;
|
|
2487
2187
|
}
|
|
@@ -2550,9 +2250,9 @@ class MatChipInput {
|
|
|
2550
2250
|
return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
|
|
2551
2251
|
}
|
|
2552
2252
|
}
|
|
2553
|
-
MatChipInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
2554
|
-
MatChipInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0
|
|
2555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
2253
|
+
MatChipInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipInput, deps: [{ token: i0.ElementRef }, { token: MAT_CHIPS_DEFAULT_OPTIONS }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2254
|
+
MatChipInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatChipInput, selector: "input[matChipInputFor]", inputs: { chipGrid: ["matChipInputFor", "chipGrid"], addOnBlur: ["matChipInputAddOnBlur", "addOnBlur"], separatorKeyCodes: ["matChipInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", disabled: "disabled" }, outputs: { chipEnd: "matChipInputTokenEnd" }, host: { listeners: { "keydown": "_keydown($event)", "keyup": "_keyup($event)", "blur": "_blur()", "focus": "_focus()", "input": "_onInput()" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null", "attr.aria-invalid": "_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null", "attr.aria-required": "_chipGrid && _chipGrid.required || null", "attr.required": "_chipGrid && _chipGrid.required || null" }, classAttribute: "mat-mdc-chip-input mat-mdc-input-element mdc-text-field__input mat-input-element" }, exportAs: ["matChipInput", "matChipInputFor"], usesOnChanges: true, ngImport: i0 });
|
|
2255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipInput, decorators: [{
|
|
2556
2256
|
type: Directive,
|
|
2557
2257
|
args: [{
|
|
2558
2258
|
selector: 'input[matChipInputFor]',
|
|
@@ -2615,7 +2315,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
2615
2315
|
const CHIP_DECLARATIONS = [
|
|
2616
2316
|
MatChip,
|
|
2617
2317
|
MatChipAvatar,
|
|
2618
|
-
MatChipCssInternalOnly,
|
|
2619
2318
|
MatChipEditInput,
|
|
2620
2319
|
MatChipGrid,
|
|
2621
2320
|
MatChipInput,
|
|
@@ -2628,10 +2327,9 @@ const CHIP_DECLARATIONS = [
|
|
|
2628
2327
|
];
|
|
2629
2328
|
class MatChipsModule {
|
|
2630
2329
|
}
|
|
2631
|
-
MatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0
|
|
2632
|
-
MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0
|
|
2330
|
+
MatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2331
|
+
MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipsModule, declarations: [MatChipAction, MatChip,
|
|
2633
2332
|
MatChipAvatar,
|
|
2634
|
-
MatChipCssInternalOnly,
|
|
2635
2333
|
MatChipEditInput,
|
|
2636
2334
|
MatChipGrid,
|
|
2637
2335
|
MatChipInput,
|
|
@@ -2642,7 +2340,6 @@ MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2642
2340
|
MatChipSet,
|
|
2643
2341
|
MatChipTrailingIcon], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatCommonModule, MatChip,
|
|
2644
2342
|
MatChipAvatar,
|
|
2645
|
-
MatChipCssInternalOnly,
|
|
2646
2343
|
MatChipEditInput,
|
|
2647
2344
|
MatChipGrid,
|
|
2648
2345
|
MatChipInput,
|
|
@@ -2652,7 +2349,7 @@ MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2652
2349
|
MatChipRow,
|
|
2653
2350
|
MatChipSet,
|
|
2654
2351
|
MatChipTrailingIcon] });
|
|
2655
|
-
MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0
|
|
2352
|
+
MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipsModule, providers: [
|
|
2656
2353
|
ErrorStateMatcher,
|
|
2657
2354
|
{
|
|
2658
2355
|
provide: MAT_CHIPS_DEFAULT_OPTIONS,
|
|
@@ -2661,12 +2358,12 @@ MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
2661
2358
|
},
|
|
2662
2359
|
},
|
|
2663
2360
|
], imports: [[MatCommonModule, CommonModule, MatRippleModule], MatCommonModule] });
|
|
2664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0
|
|
2361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipsModule, decorators: [{
|
|
2665
2362
|
type: NgModule,
|
|
2666
2363
|
args: [{
|
|
2667
2364
|
imports: [MatCommonModule, CommonModule, MatRippleModule],
|
|
2668
2365
|
exports: [MatCommonModule, CHIP_DECLARATIONS],
|
|
2669
|
-
declarations: CHIP_DECLARATIONS,
|
|
2366
|
+
declarations: [MatChipAction, CHIP_DECLARATIONS],
|
|
2670
2367
|
providers: [
|
|
2671
2368
|
ErrorStateMatcher,
|
|
2672
2369
|
{
|
|
@@ -2699,5 +2396,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0-next.3",
|
|
|
2699
2396
|
* Generated bundle index. Do not edit.
|
|
2700
2397
|
*/
|
|
2701
2398
|
|
|
2702
|
-
export { MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar,
|
|
2399
|
+
export { MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
|
|
2703
2400
|
//# sourceMappingURL=mdc-chips.mjs.map
|