@angular/material-experimental 13.1.2 → 13.2.0-rc.0
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/_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 +22 -19
- package/esm2020/mdc-button/button.mjs +7 -7
- package/esm2020/mdc-button/fab.mjs +13 -13
- package/esm2020/mdc-button/icon-button.mjs +7 -7
- package/esm2020/mdc-button/module.mjs +5 -5
- package/esm2020/mdc-card/card.mjs +43 -43
- package/esm2020/mdc-card/module.mjs +5 -5
- package/esm2020/mdc-checkbox/checkbox.mjs +4 -4
- 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 -94
- package/esm2020/mdc-chips/chip-icons.mjs +39 -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 +81 -89
- package/esm2020/mdc-chips/chip-set.mjs +119 -120
- package/esm2020/mdc-chips/chip.mjs +188 -180
- 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 +4 -4
- 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 +5 -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 +4 -4
- 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 +100 -12
- package/esm2020/mdc-list/testing/public-api.mjs +2 -1
- package/esm2020/mdc-list/testing/selection-list-harness.mjs +1 -5
- 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 +4 -4
- 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 +7 -7
- package/esm2020/mdc-select/module.mjs +5 -5
- package/esm2020/mdc-select/select.mjs +7 -7
- 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 +4 -4
- 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 +10 -10
- package/esm2020/mdc-snack-bar/module.mjs +7 -7
- package/esm2020/mdc-snack-bar/public-api.mjs +2 -2
- package/esm2020/mdc-snack-bar/simple-snack-bar.mjs +7 -7
- package/esm2020/mdc-snack-bar/snack-bar-container.mjs +4 -4
- package/esm2020/mdc-snack-bar/snack-bar-content.mjs +10 -10
- package/esm2020/mdc-snack-bar/snack-bar.mjs +26 -12
- 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 +7 -7
- 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 +8 -8
- package/esm2020/mdc-tabs/tab-content.mjs +4 -4
- package/esm2020/mdc-tabs/tab-group.mjs +7 -7
- package/esm2020/mdc-tabs/tab-header.mjs +5 -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 +5 -5
- 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 +7 -7
- 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 +49 -46
- package/fesm2015/mdc-button.mjs.map +1 -1
- package/fesm2015/mdc-card.mjs +46 -46
- package/fesm2015/mdc-card.mjs.map +1 -1
- package/fesm2015/mdc-checkbox.mjs +7 -7
- 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 +749 -1057
- 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 +22 -22
- 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 +8 -7
- package/fesm2015/mdc-input.mjs.map +1 -1
- package/fesm2015/mdc-list/testing.mjs +110 -18
- package/fesm2015/mdc-list/testing.mjs.map +1 -1
- package/fesm2015/mdc-list.mjs +353 -148
- 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 +7 -7
- 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 +10 -10
- package/fesm2015/mdc-radio.mjs.map +1 -1
- package/fesm2015/mdc-select.mjs +10 -10
- 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 +7 -7
- package/fesm2015/mdc-slide-toggle.mjs.map +1 -1
- package/fesm2015/mdc-slider.mjs +16 -16
- package/fesm2015/mdc-slider.mjs.map +1 -1
- package/fesm2015/mdc-snack-bar.mjs +46 -41
- package/fesm2015/mdc-snack-bar.mjs.map +1 -1
- package/fesm2015/mdc-table.mjs +55 -55
- 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 +85 -44
- package/fesm2015/mdc-tabs.mjs.map +1 -1
- package/fesm2015/mdc-tooltip.mjs +10 -10
- 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 +49 -46
- package/fesm2020/mdc-button.mjs.map +1 -1
- package/fesm2020/mdc-card.mjs +46 -46
- package/fesm2020/mdc-card.mjs.map +1 -1
- package/fesm2020/mdc-checkbox.mjs +7 -7
- 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 +729 -1062
- 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 +22 -22
- 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 +8 -7
- package/fesm2020/mdc-input.mjs.map +1 -1
- package/fesm2020/mdc-list/testing.mjs +100 -16
- package/fesm2020/mdc-list/testing.mjs.map +1 -1
- package/fesm2020/mdc-list.mjs +351 -148
- 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 +7 -7
- 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 +10 -10
- package/fesm2020/mdc-radio.mjs.map +1 -1
- package/fesm2020/mdc-select.mjs +10 -10
- 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 +7 -7
- package/fesm2020/mdc-slide-toggle.mjs.map +1 -1
- package/fesm2020/mdc-slider.mjs +16 -16
- package/fesm2020/mdc-slider.mjs.map +1 -1
- package/fesm2020/mdc-snack-bar.mjs +44 -34
- package/fesm2020/mdc-snack-bar.mjs.map +1 -1
- package/fesm2020/mdc-table.mjs +55 -55
- 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 +85 -44
- package/fesm2020/mdc-tabs.mjs.map +1 -1
- package/fesm2020/mdc-tooltip.mjs +10 -10
- 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 +5 -3
- package/mdc-checkbox/_checkbox-theme.scss +12 -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 +6 -22
- package/mdc-chips/chip-icons.d.ts +14 -37
- package/mdc-chips/chip-listbox.d.ts +4 -40
- package/mdc-chips/chip-option.d.ts +15 -11
- package/mdc-chips/chip-row.d.ts +13 -28
- package/mdc-chips/chip-set.d.ts +25 -42
- package/mdc-chips/chip.d.ts +37 -36
- 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/option/option.d.ts +3 -3
- package/mdc-core/public-api.d.ts +1 -1
- package/mdc-helpers/_focus-indicators.scss +11 -3
- package/mdc-list/_interactive-list-theme.scss +17 -11
- package/mdc-list/list-base.d.ts +56 -11
- package/mdc-list/list-item-sections.d.ts +77 -0
- package/mdc-list/list-option.d.ts +11 -8
- 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/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 +36 -3
- package/mdc-list/testing/public-api.d.ts +1 -1
- package/mdc-list/testing/selection-list-harness.d.ts +0 -2
- package/mdc-snack-bar/module.d.ts +1 -1
- package/mdc-snack-bar/public-api.d.ts +1 -1
- package/mdc-snack-bar/simple-snack-bar.d.ts +4 -4
- package/mdc-snack-bar/snack-bar.d.ts +17 -5
- package/mdc-tabs/module.d.ts +1 -1
- package/mdc-tabs/public-api.d.ts +1 -1
- package/mdc-tabs/tab-nav-bar/tab-nav-bar.d.ts +11 -0
- 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 -1
- package/mdc-theming/prebuilt/indigo-pink.css +1 -1
- package/mdc-theming/prebuilt/pink-bluegrey.css +1 -1
- package/mdc-theming/prebuilt/purple-green.css +1 -1
- package/package.json +3 -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/fesm2020/mdc-chips.mjs
CHANGED
|
@@ -1,22 +1,166 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i2 from '@angular/cdk/bidi';
|
|
2
2
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
3
3
|
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import {
|
|
5
|
+
import { Directive, Inject, Input, InjectionToken, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Attribute, Output, ContentChild, ViewChild, ContentChildren, forwardRef, Self, NgModule } from '@angular/core';
|
|
6
|
+
import * as i3$1 from '@angular/common';
|
|
7
|
+
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
6
8
|
import * as i3 from '@angular/material-experimental/mdc-core';
|
|
7
9
|
import { mixinTabIndex, mixinDisabled, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, mixinErrorState, MatCommonModule, MatRippleModule, ErrorStateMatcher } from '@angular/material-experimental/mdc-core';
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
+
import { MDCChipPrimaryActionFoundation, MDCChipActionType, MDCChipTrailingActionFoundation, MDCChipFoundation, MDCChipActionEvents, MDCChipActionInteractionTrigger, MDCChipCssClasses, MDCChipSetFoundation, MDCChipEvents } from '@material/chips';
|
|
11
|
+
import * as i1 from '@angular/cdk/a11y';
|
|
10
12
|
import { Subject, merge } from 'rxjs';
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
13
|
-
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
14
|
-
import { FocusKeyManager } from '@angular/cdk/a11y';
|
|
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.2.0-next.2", 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.2.0-next.2", 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.2.0-next.2", 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 () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
158
|
+
type: Inject,
|
|
159
|
+
args: [DOCUMENT]
|
|
160
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isInteractive: [{
|
|
161
|
+
type: Input
|
|
162
|
+
}] } });
|
|
163
|
+
|
|
20
164
|
/**
|
|
21
165
|
* @license
|
|
22
166
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -35,29 +179,20 @@ const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
|
|
|
35
179
|
* @docs-private
|
|
36
180
|
*/
|
|
37
181
|
class MatChipAvatar {
|
|
38
|
-
constructor(_changeDetectorRef, _elementRef) {
|
|
39
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
40
|
-
this._elementRef = _elementRef;
|
|
41
|
-
}
|
|
42
|
-
/** Sets whether the given CSS class should be applied to the leading icon. */
|
|
43
|
-
setClass(cssClass, active) {
|
|
44
|
-
this._elementRef.nativeElement.classList.toggle(cssClass, active);
|
|
45
|
-
this._changeDetectorRef.markForCheck();
|
|
46
|
-
}
|
|
47
182
|
}
|
|
48
|
-
MatChipAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
49
|
-
MatChipAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
183
|
+
MatChipAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
184
|
+
MatChipAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipAvatar, decorators: [{
|
|
51
186
|
type: Directive,
|
|
52
187
|
args: [{
|
|
53
188
|
selector: 'mat-chip-avatar, [matChipAvatar]',
|
|
54
189
|
host: {
|
|
55
|
-
'class': 'mat-mdc-chip-avatar mdc-chip__icon mdc-chip__icon--
|
|
190
|
+
'class': 'mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
|
|
56
191
|
'role': 'img',
|
|
57
192
|
},
|
|
58
193
|
providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }],
|
|
59
194
|
}]
|
|
60
|
-
}]
|
|
195
|
+
}] });
|
|
61
196
|
/**
|
|
62
197
|
* Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
|
|
63
198
|
* alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
|
|
@@ -68,79 +203,38 @@ const MAT_CHIP_TRAILING_ICON = new InjectionToken('MatChipTrailingIcon');
|
|
|
68
203
|
* Directive to add CSS classes to and configure attributes for chip trailing icon.
|
|
69
204
|
* @docs-private
|
|
70
205
|
*/
|
|
71
|
-
class MatChipTrailingIcon {
|
|
72
|
-
constructor(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
this.
|
|
79
|
-
this._adapter = {
|
|
80
|
-
focus: () => this._elementRef.nativeElement.focus(),
|
|
81
|
-
getAttribute: (name) => this._elementRef.nativeElement.getAttribute(name),
|
|
82
|
-
setAttribute: (name, value) => {
|
|
83
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
84
|
-
},
|
|
85
|
-
// TODO(crisbeto): there's also a `trigger` parameter that the chip isn't
|
|
86
|
-
// handling yet. Consider passing it along once MDC start using it.
|
|
87
|
-
notifyInteraction: () => {
|
|
88
|
-
// TODO(crisbeto): uncomment this code once we've inverted the
|
|
89
|
-
// dependency on `MatChip`. this._chip._notifyInteraction();
|
|
90
|
-
},
|
|
91
|
-
// TODO(crisbeto): there's also a `key` parameter that the chip isn't
|
|
92
|
-
// handling yet. Consider passing it along once MDC start using it.
|
|
93
|
-
notifyNavigation: () => {
|
|
94
|
-
// TODO(crisbeto): uncomment this code once we've inverted the
|
|
95
|
-
// dependency on `MatChip`. this._chip._notifyNavigation();
|
|
96
|
-
},
|
|
97
|
-
};
|
|
98
|
-
this._foundation = new deprecated.MDCChipTrailingActionFoundation(this._adapter);
|
|
99
|
-
}
|
|
100
|
-
ngOnDestroy() {
|
|
101
|
-
this._foundation.destroy();
|
|
102
|
-
}
|
|
103
|
-
focus() {
|
|
104
|
-
this._elementRef.nativeElement.focus();
|
|
105
|
-
}
|
|
106
|
-
/** Sets an attribute on the icon. */
|
|
107
|
-
setAttribute(name, value) {
|
|
108
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
206
|
+
class MatChipTrailingIcon extends MatChipAction {
|
|
207
|
+
constructor() {
|
|
208
|
+
super(...arguments);
|
|
209
|
+
/**
|
|
210
|
+
* MDC considers all trailing actions as a remove icon,
|
|
211
|
+
* but we support non-interactive trailing icons.
|
|
212
|
+
*/
|
|
213
|
+
this.isInteractive = false;
|
|
109
214
|
}
|
|
110
|
-
|
|
111
|
-
return
|
|
215
|
+
_createFoundation(adapter) {
|
|
216
|
+
return new MDCChipTrailingActionFoundation(adapter);
|
|
112
217
|
}
|
|
113
218
|
}
|
|
114
|
-
MatChipTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
115
|
-
MatChipTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
219
|
+
MatChipTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipTrailingIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
220
|
+
MatChipTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipTrailingIcon, decorators: [{
|
|
117
222
|
type: Directive,
|
|
118
223
|
args: [{
|
|
119
224
|
selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
|
|
120
225
|
host: {
|
|
121
|
-
'class': 'mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
|
|
122
|
-
'tabindex': '-1',
|
|
226
|
+
'class': 'mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
|
|
123
227
|
'aria-hidden': 'true',
|
|
124
228
|
},
|
|
125
229
|
providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }],
|
|
126
230
|
}]
|
|
127
|
-
}]
|
|
231
|
+
}] });
|
|
128
232
|
/**
|
|
129
233
|
* Injection token that can be used to reference instances of `MatChipRemove`. It serves as
|
|
130
234
|
* alternative token to the actual `MatChipRemove` class which could cause unnecessary
|
|
131
235
|
* retention of the class and its directive metadata.
|
|
132
236
|
*/
|
|
133
237
|
const MAT_CHIP_REMOVE = new InjectionToken('MatChipRemove');
|
|
134
|
-
/**
|
|
135
|
-
* Boilerplate for applying mixins to MatChipRemove.
|
|
136
|
-
* @docs-private
|
|
137
|
-
*/
|
|
138
|
-
class MatChipRemoveBase extends MatChipTrailingIcon {
|
|
139
|
-
constructor(elementRef) {
|
|
140
|
-
super(elementRef);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
const _MatChipRemoveMixinBase = mixinTabIndex(mixinDisabled(MatChipRemoveBase), 0);
|
|
144
238
|
/**
|
|
145
239
|
* Directive to remove the parent chip when the trailing icon is clicked or
|
|
146
240
|
* when the ENTER key is pressed on it.
|
|
@@ -156,47 +250,36 @@ const _MatChipRemoveMixinBase = mixinTabIndex(mixinDisabled(MatChipRemoveBase),
|
|
|
156
250
|
* </mat-chip>
|
|
157
251
|
* ```
|
|
158
252
|
*/
|
|
159
|
-
class MatChipRemove extends
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
/**
|
|
163
|
-
* Emits when the user interacts with the icon.
|
|
164
|
-
* @docs-private
|
|
165
|
-
*/
|
|
166
|
-
this.interaction = new Subject();
|
|
167
|
-
if (elementRef.nativeElement.nodeName === 'BUTTON') {
|
|
168
|
-
elementRef.nativeElement.setAttribute('type', 'button');
|
|
169
|
-
}
|
|
253
|
+
class MatChipRemove extends MatChipAction {
|
|
254
|
+
_createFoundation(adapter) {
|
|
255
|
+
return new MDCChipTrailingActionFoundation(adapter);
|
|
170
256
|
}
|
|
171
|
-
/** Emits a MouseEvent when the user clicks on the remove icon. */
|
|
172
257
|
_handleClick(event) {
|
|
173
|
-
|
|
258
|
+
// Some consumers bind `click` events directly on the chip
|
|
259
|
+
// which will also pick up clicks on the remove button.
|
|
174
260
|
event.stopPropagation();
|
|
261
|
+
super._handleClick(event);
|
|
175
262
|
}
|
|
176
|
-
|
|
177
|
-
|
|
263
|
+
_handleKeydown(event) {
|
|
264
|
+
event.stopPropagation();
|
|
265
|
+
super._handleKeydown(event);
|
|
178
266
|
}
|
|
179
267
|
}
|
|
180
|
-
MatChipRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
181
|
-
MatChipRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
268
|
+
MatChipRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipRemove, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
269
|
+
MatChipRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipRemove, decorators: [{
|
|
183
271
|
type: Directive,
|
|
184
272
|
args: [{
|
|
185
273
|
selector: '[matChipRemove]',
|
|
186
|
-
inputs: ['disabled', 'tabIndex'],
|
|
187
274
|
host: {
|
|
188
|
-
'class':
|
|
189
|
-
|
|
190
|
-
'[tabIndex]': 'tabIndex',
|
|
275
|
+
'class': 'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' +
|
|
276
|
+
'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
|
|
191
277
|
'role': 'button',
|
|
192
|
-
'(click)': '_handleClick($event)',
|
|
193
|
-
'(keydown)': 'interaction.next($event)',
|
|
194
|
-
// We need to remove this explicitly, because it gets inherited from MatChipTrailingIcon.
|
|
195
278
|
'[attr.aria-hidden]': 'null',
|
|
196
279
|
},
|
|
197
280
|
providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }],
|
|
198
281
|
}]
|
|
199
|
-
}]
|
|
282
|
+
}] });
|
|
200
283
|
|
|
201
284
|
/**
|
|
202
285
|
* @license
|
|
@@ -205,23 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
205
288
|
* Use of this source code is governed by an MIT-style license that can be
|
|
206
289
|
* found in the LICENSE file at https://angular.io/license
|
|
207
290
|
*/
|
|
208
|
-
let uid
|
|
209
|
-
/**
|
|
210
|
-
* Directive to add MDC CSS to non-basic chips.
|
|
211
|
-
* @docs-private
|
|
212
|
-
*/
|
|
213
|
-
class MatChipCssInternalOnly {
|
|
214
|
-
}
|
|
215
|
-
MatChipCssInternalOnly.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipCssInternalOnly, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
216
|
-
MatChipCssInternalOnly.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", 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 });
|
|
217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipCssInternalOnly, decorators: [{
|
|
218
|
-
type: Directive,
|
|
219
|
-
args: [{
|
|
220
|
-
selector: `mat-chip, mat-chip-option, mat-chip-row, [mat-chip], [mat-chip-option],
|
|
221
|
-
[mat-chip-row]`,
|
|
222
|
-
host: { 'class': 'mat-mdc-chip mdc-chip' },
|
|
223
|
-
}]
|
|
224
|
-
}] });
|
|
291
|
+
let uid = 0;
|
|
225
292
|
/**
|
|
226
293
|
* Boilerplate for applying mixins to MatChip.
|
|
227
294
|
* @docs-private
|
|
@@ -238,10 +305,11 @@ const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBas
|
|
|
238
305
|
* Extended by MatChipOption and MatChipRow for different interaction patterns.
|
|
239
306
|
*/
|
|
240
307
|
class MatChip extends _MatChipMixinBase {
|
|
241
|
-
constructor(_changeDetectorRef, elementRef, _ngZone, _dir, animationMode, _globalRippleOptions) {
|
|
308
|
+
constructor(_changeDetectorRef, elementRef, _ngZone, _focusMonitor, _document, _dir, animationMode, _globalRippleOptions, tabIndex) {
|
|
242
309
|
super(elementRef);
|
|
243
310
|
this._changeDetectorRef = _changeDetectorRef;
|
|
244
311
|
this._ngZone = _ngZone;
|
|
312
|
+
this._focusMonitor = _focusMonitor;
|
|
245
313
|
this._dir = _dir;
|
|
246
314
|
this._globalRippleOptions = _globalRippleOptions;
|
|
247
315
|
/** Whether the ripple is centered on the chip. */
|
|
@@ -250,22 +318,21 @@ class MatChip extends _MatChipMixinBase {
|
|
|
250
318
|
this._onFocus = new Subject();
|
|
251
319
|
/** Emits when the chip is blurred. */
|
|
252
320
|
this._onBlur = new Subject();
|
|
253
|
-
|
|
321
|
+
/** Role for the root of the chip. */
|
|
322
|
+
this.role = null;
|
|
254
323
|
/** Whether the chip has focus. */
|
|
255
324
|
this._hasFocusInternal = false;
|
|
256
|
-
/** Default unique id for the chip. */
|
|
257
|
-
this._uniqueId = `mat-mdc-chip-${uid$1++}`;
|
|
258
325
|
/** A unique id for the chip. If none is supplied, it will be auto-generated. */
|
|
259
|
-
this.id =
|
|
326
|
+
this.id = `mat-mdc-chip-${uid++}`;
|
|
327
|
+
/** ARIA label for the content of the chip. */
|
|
328
|
+
this.ariaLabel = null;
|
|
260
329
|
this._disabled = false;
|
|
261
330
|
this._removable = true;
|
|
262
331
|
this._highlighted = false;
|
|
263
|
-
/** Emitted when the user interacts with the chip. */
|
|
264
|
-
this.interaction = new EventEmitter();
|
|
265
|
-
/** Emitted when the chip is destroyed. */
|
|
266
|
-
this.destroyed = new EventEmitter();
|
|
267
332
|
/** Emitted when a chip is to be removed. */
|
|
268
333
|
this.removed = new EventEmitter();
|
|
334
|
+
/** Emitted when the chip is destroyed. */
|
|
335
|
+
this.destroyed = new EventEmitter();
|
|
269
336
|
/** The unstyled chip selector for this component. */
|
|
270
337
|
this.basicChipAttrName = 'mat-basic-chip';
|
|
271
338
|
/**
|
|
@@ -276,86 +343,81 @@ class MatChip extends _MatChipMixinBase {
|
|
|
276
343
|
addClass: className => this._setMdcClass(className, true),
|
|
277
344
|
removeClass: className => this._setMdcClass(className, false),
|
|
278
345
|
hasClass: className => this._elementRef.nativeElement.classList.contains(className),
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
eventTargetHasClass: (target, className) => {
|
|
282
|
-
// We need to null check the `classList`, because IE and Edge don't
|
|
283
|
-
// support it on SVG elements and Edge seems to throw for ripple
|
|
284
|
-
// elements, because they're outside the DOM.
|
|
285
|
-
return target && target.classList
|
|
286
|
-
? target.classList.contains(className)
|
|
287
|
-
: false;
|
|
346
|
+
emitEvent: (eventName, data) => {
|
|
347
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, data, true);
|
|
288
348
|
},
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
// No-op. We call dispatchSelectionEvent ourselves in MatChipOption,
|
|
292
|
-
// because we want to specify whether selection occurred via user
|
|
293
|
-
// input.
|
|
349
|
+
setStyleProperty: (propertyName, value) => {
|
|
350
|
+
this._elementRef.nativeElement.style.setProperty(propertyName, value);
|
|
294
351
|
},
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
352
|
+
isRTL: () => this._dir?.value === 'rtl',
|
|
353
|
+
getAttribute: attributeName => this._elementRef.nativeElement.getAttribute(attributeName),
|
|
354
|
+
getElementID: () => this._elementRef.nativeElement.id,
|
|
355
|
+
getOffsetWidth: () => this._elementRef.nativeElement.offsetWidth,
|
|
356
|
+
getActions: () => {
|
|
357
|
+
const result = [];
|
|
358
|
+
if (this._getAction(MDCChipActionType.PRIMARY)) {
|
|
359
|
+
result.push(MDCChipActionType.PRIMARY);
|
|
360
|
+
}
|
|
361
|
+
if (this._getAction(MDCChipActionType.TRAILING)) {
|
|
362
|
+
result.push(MDCChipActionType.TRAILING);
|
|
363
|
+
}
|
|
364
|
+
return result;
|
|
301
365
|
},
|
|
302
|
-
|
|
303
|
-
this.
|
|
304
|
-
this._changeDetectorRef.markForCheck();
|
|
366
|
+
isActionSelectable: (action) => {
|
|
367
|
+
return this._getAction(action)?.isSelectable() || false;
|
|
305
368
|
},
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
// invoked during server-side rendering. Add some extra checks just in
|
|
309
|
-
// case.
|
|
310
|
-
if (typeof window !== 'undefined' && window) {
|
|
311
|
-
const getComputedStyle = window.getComputedStyle(this._elementRef.nativeElement);
|
|
312
|
-
return getComputedStyle.getPropertyValue(propertyName);
|
|
313
|
-
}
|
|
314
|
-
return '';
|
|
369
|
+
isActionSelected: (action) => {
|
|
370
|
+
return this._getAction(action)?.isSelected() || false;
|
|
315
371
|
},
|
|
316
|
-
|
|
317
|
-
this.
|
|
372
|
+
isActionDisabled: (action) => {
|
|
373
|
+
return this._getAction(action)?.isDisabled() || false;
|
|
318
374
|
},
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
if (this.trailingIcon) {
|
|
322
|
-
return this.trailingIcon.isNavigable();
|
|
323
|
-
}
|
|
324
|
-
return false;
|
|
375
|
+
isActionFocusable: (action) => {
|
|
376
|
+
return this._getAction(action)?.isFocusable() || false;
|
|
325
377
|
},
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
// Angular Material MDC chips fully manage focus. TODO: Managing focus
|
|
329
|
-
// and handling keyboard events was added by MDC after our
|
|
330
|
-
// implementation; consider consolidating.
|
|
378
|
+
setActionSelected: (action, isSelected) => {
|
|
379
|
+
this._getAction(action)?.setSelected(isSelected);
|
|
331
380
|
},
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
setPrimaryActionAttr: (name, value) => {
|
|
335
|
-
// MDC is currently using this method to set aria-checked on choice
|
|
336
|
-
// and filter chips, which in the MDC templates have role="checkbox"
|
|
337
|
-
// and role="radio" respectively. We have role="option" on those chips
|
|
338
|
-
// instead, so we do not want aria-checked. Since we also manage the
|
|
339
|
-
// tabindex ourselves, we don't allow MDC to set it.
|
|
340
|
-
if (name === 'aria-checked' || name === 'tabindex') {
|
|
341
|
-
return;
|
|
342
|
-
}
|
|
343
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
381
|
+
setActionDisabled: (action, isDisabled) => {
|
|
382
|
+
this._getAction(action)?.setDisabled(isDisabled);
|
|
344
383
|
},
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
384
|
+
setActionFocus: (action, behavior) => {
|
|
385
|
+
this._getAction(action)?.setFocus(behavior);
|
|
386
|
+
},
|
|
387
|
+
};
|
|
388
|
+
this._handleActionInteraction = (event) => {
|
|
389
|
+
this._onChipInteraction(event);
|
|
390
|
+
};
|
|
391
|
+
this._handleActionNavigation = (event) => {
|
|
392
|
+
this._chipFoundation.handleActionNavigation(event);
|
|
393
|
+
};
|
|
394
|
+
this._handleTransitionend = (event) => {
|
|
395
|
+
if (event.target === this._elementRef.nativeElement) {
|
|
396
|
+
this._ngZone.run(() => this._chipFoundation.handleTransitionEnd());
|
|
397
|
+
}
|
|
350
398
|
};
|
|
351
|
-
this.
|
|
399
|
+
this._handleAnimationend = (event) => {
|
|
400
|
+
if (event.target === this._elementRef.nativeElement) {
|
|
401
|
+
this._ngZone.run(() => this._chipFoundation.handleAnimationEnd(event));
|
|
402
|
+
}
|
|
403
|
+
};
|
|
404
|
+
const element = elementRef.nativeElement;
|
|
405
|
+
this._document = _document;
|
|
406
|
+
this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
|
|
352
407
|
this._animationsDisabled = animationMode === 'NoopAnimations';
|
|
353
408
|
this._isBasicChip =
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
409
|
+
element.hasAttribute(this.basicChipAttrName) ||
|
|
410
|
+
element.tagName.toLowerCase() === this.basicChipAttrName;
|
|
411
|
+
element.addEventListener(MDCChipActionEvents.INTERACTION, this._handleActionInteraction);
|
|
412
|
+
element.addEventListener(MDCChipActionEvents.NAVIGATION, this._handleActionNavigation);
|
|
413
|
+
_focusMonitor.monitor(elementRef, true);
|
|
414
|
+
_ngZone.runOutsideAngular(() => {
|
|
415
|
+
element.addEventListener('transitionend', this._handleTransitionend);
|
|
416
|
+
element.addEventListener('animationend', this._handleAnimationend);
|
|
417
|
+
});
|
|
418
|
+
if (tabIndex != null) {
|
|
419
|
+
this.tabIndex = parseInt(tabIndex) ?? this.defaultTabIndex;
|
|
420
|
+
}
|
|
359
421
|
}
|
|
360
422
|
_hasFocus() {
|
|
361
423
|
return this._hasFocusInternal;
|
|
@@ -368,8 +430,12 @@ class MatChip extends _MatChipMixinBase {
|
|
|
368
430
|
if (this.removeIcon) {
|
|
369
431
|
this.removeIcon.disabled = this._disabled;
|
|
370
432
|
}
|
|
433
|
+
this._chipFoundation.setDisabled(this._disabled);
|
|
371
434
|
}
|
|
372
|
-
/**
|
|
435
|
+
/**
|
|
436
|
+
* The value of the chip. Defaults to the content inside
|
|
437
|
+
* the `mat-mdc-chip-action-label` element.
|
|
438
|
+
*/
|
|
373
439
|
get value() {
|
|
374
440
|
return this._value !== undefined ? this._value : this._textElement.textContent.trim();
|
|
375
441
|
}
|
|
@@ -394,42 +460,24 @@ class MatChip extends _MatChipMixinBase {
|
|
|
394
460
|
set highlighted(value) {
|
|
395
461
|
this._highlighted = coerceBooleanProperty(value);
|
|
396
462
|
}
|
|
397
|
-
ngAfterContentInit() {
|
|
398
|
-
this._initRemoveIcon();
|
|
399
|
-
}
|
|
400
463
|
ngAfterViewInit() {
|
|
401
464
|
this._chipFoundation.init();
|
|
402
|
-
this.
|
|
465
|
+
this._chipFoundation.setDisabled(this.disabled);
|
|
466
|
+
this._textElement = this._elementRef.nativeElement.querySelector('.mat-mdc-chip-action-label');
|
|
467
|
+
if (this._pendingFocus) {
|
|
468
|
+
this._pendingFocus = false;
|
|
469
|
+
this.focus();
|
|
470
|
+
}
|
|
403
471
|
}
|
|
404
472
|
ngOnDestroy() {
|
|
405
|
-
this.
|
|
473
|
+
const element = this._elementRef.nativeElement;
|
|
474
|
+
element.removeEventListener(MDCChipActionEvents.INTERACTION, this._handleActionInteraction);
|
|
475
|
+
element.removeEventListener(MDCChipActionEvents.NAVIGATION, this._handleActionNavigation);
|
|
476
|
+
element.removeEventListener('transitionend', this._handleTransitionend);
|
|
477
|
+
element.removeEventListener('animationend', this._handleAnimationend);
|
|
406
478
|
this._chipFoundation.destroy();
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
_initRemoveIcon() {
|
|
410
|
-
if (this.removeIcon) {
|
|
411
|
-
this._chipFoundation.setShouldRemoveOnTrailingIconClick(true);
|
|
412
|
-
this.removeIcon.disabled = this.disabled;
|
|
413
|
-
this.removeIcon.interaction.pipe(takeUntil(this.destroyed)).subscribe(event => {
|
|
414
|
-
// The MDC chip foundation calls stopPropagation() for any trailing icon interaction
|
|
415
|
-
// event, even ones it doesn't handle, so we want to avoid passing it keyboard events
|
|
416
|
-
// for which we have a custom handler. Note that we assert the type of the event using
|
|
417
|
-
// the `type`, because `instanceof KeyboardEvent` can throw during server-side rendering.
|
|
418
|
-
const isKeyboardEvent = event.type.startsWith('key');
|
|
419
|
-
if (this.disabled ||
|
|
420
|
-
(isKeyboardEvent && !this.REMOVE_ICON_HANDLED_KEYS.has(event.keyCode))) {
|
|
421
|
-
return;
|
|
422
|
-
}
|
|
423
|
-
this.remove();
|
|
424
|
-
if (isKeyboardEvent && !hasModifierKey(event)) {
|
|
425
|
-
const keyCode = event.keyCode;
|
|
426
|
-
// Prevent default space and enter presses so we don't scroll the page or submit forms.
|
|
427
|
-
if (keyCode === SPACE || keyCode === ENTER) {
|
|
428
|
-
event.preventDefault();
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
});
|
|
432
|
-
}
|
|
479
|
+
this._focusMonitor.stopMonitoring(this._elementRef);
|
|
480
|
+
this.destroyed.emit({ chip: this });
|
|
433
481
|
}
|
|
434
482
|
/**
|
|
435
483
|
* Allows for programmatic removal of the chip.
|
|
@@ -447,29 +495,6 @@ class MatChip extends _MatChipMixinBase {
|
|
|
447
495
|
active ? classes.add(cssClass) : classes.remove(cssClass);
|
|
448
496
|
this._changeDetectorRef.markForCheck();
|
|
449
497
|
}
|
|
450
|
-
/** Forwards interaction events to the MDC chip foundation. */
|
|
451
|
-
_handleInteraction(event) {
|
|
452
|
-
if (this.disabled) {
|
|
453
|
-
return;
|
|
454
|
-
}
|
|
455
|
-
if (event.type === 'click') {
|
|
456
|
-
this._chipFoundation.handleClick();
|
|
457
|
-
return;
|
|
458
|
-
}
|
|
459
|
-
if (event.type === 'dblclick') {
|
|
460
|
-
this._chipFoundation.handleDoubleClick();
|
|
461
|
-
}
|
|
462
|
-
if (event.type === 'keydown') {
|
|
463
|
-
this._chipFoundation.handleKeydown(event);
|
|
464
|
-
return;
|
|
465
|
-
}
|
|
466
|
-
if (event.type === 'focusout') {
|
|
467
|
-
this._chipFoundation.handleFocusOut(event);
|
|
468
|
-
}
|
|
469
|
-
if (event.type === 'focusin') {
|
|
470
|
-
this._chipFoundation.handleFocusIn(event);
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
498
|
/** Whether or not the ripple should be disabled. */
|
|
474
499
|
_isRippleDisabled() {
|
|
475
500
|
return (this.disabled ||
|
|
@@ -478,36 +503,88 @@ class MatChip extends _MatChipMixinBase {
|
|
|
478
503
|
this._isBasicChip ||
|
|
479
504
|
!!this._globalRippleOptions?.disabled);
|
|
480
505
|
}
|
|
481
|
-
|
|
482
|
-
|
|
506
|
+
_getAction(type) {
|
|
507
|
+
switch (type) {
|
|
508
|
+
case MDCChipActionType.PRIMARY:
|
|
509
|
+
return this.primaryAction?._getFoundation();
|
|
510
|
+
case MDCChipActionType.TRAILING:
|
|
511
|
+
return (this.removeIcon || this.trailingIcon)?._getFoundation();
|
|
512
|
+
}
|
|
513
|
+
return undefined;
|
|
514
|
+
}
|
|
515
|
+
_getFoundation() {
|
|
516
|
+
return this._chipFoundation;
|
|
483
517
|
}
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
518
|
+
_hasTrailingIcon() {
|
|
519
|
+
return !!(this.trailingIcon || this.removeIcon);
|
|
520
|
+
}
|
|
521
|
+
/** Allows for programmatic focusing of the chip. */
|
|
522
|
+
focus() {
|
|
523
|
+
if (this.disabled) {
|
|
524
|
+
return;
|
|
525
|
+
}
|
|
526
|
+
// If `focus` is called before `ngAfterViewInit`, we won't have access to the primary action.
|
|
527
|
+
// This can happen if the consumer tries to focus a chip immediately after it is added.
|
|
528
|
+
// Queue the method to be called again on init.
|
|
529
|
+
if (!this.primaryAction) {
|
|
530
|
+
this._pendingFocus = true;
|
|
531
|
+
return;
|
|
532
|
+
}
|
|
533
|
+
if (!this._hasFocus()) {
|
|
534
|
+
this._onFocus.next({ chip: this });
|
|
535
|
+
this._hasFocusInternal = true;
|
|
536
|
+
}
|
|
537
|
+
this.primaryAction.focus();
|
|
538
|
+
}
|
|
539
|
+
/** Overridden by MatChipOption. */
|
|
540
|
+
_onChipInteraction(event) {
|
|
541
|
+
const removeElement = this.removeIcon?._elementRef.nativeElement;
|
|
542
|
+
const trigger = event.detail.trigger;
|
|
543
|
+
// MDC's removal process requires an `animationend` event followed by a `transitionend`
|
|
544
|
+
// event coming from the chip, which in turn will call `remove`. While we can stub
|
|
545
|
+
// out these events in our own tests, they can be difficult to fake for consumers that are
|
|
546
|
+
// testing our components or are wrapping them. We skip the entire sequence and trigger the
|
|
547
|
+
// removal directly in order to make the component easier to deal with.
|
|
548
|
+
if (removeElement &&
|
|
549
|
+
(trigger === MDCChipActionInteractionTrigger.CLICK ||
|
|
550
|
+
trigger === MDCChipActionInteractionTrigger.ENTER_KEY ||
|
|
551
|
+
trigger === MDCChipActionInteractionTrigger.SPACEBAR_KEY) &&
|
|
552
|
+
(event.target === removeElement || removeElement.contains(event.target))) {
|
|
553
|
+
this.remove();
|
|
554
|
+
}
|
|
555
|
+
else {
|
|
556
|
+
this._chipFoundation.handleActionInteraction(event);
|
|
557
|
+
}
|
|
487
558
|
}
|
|
488
|
-
/** Overridden by MatChipRow. */
|
|
489
|
-
_onEditStart() { }
|
|
490
|
-
/** Overridden by MatChipRow. */
|
|
491
|
-
_onEditFinish() { }
|
|
492
559
|
}
|
|
493
|
-
MatChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
494
|
-
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", 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 });
|
|
495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
560
|
+
MatChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
561
|
+
MatChip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChip, decorators: [{
|
|
496
563
|
type: Component,
|
|
497
|
-
args: [{ selector: 'mat-basic-chip, mat-chip', inputs: ['color', 'disableRipple'], exportAs: 'matChip', host: {
|
|
498
|
-
'
|
|
499
|
-
'[class.
|
|
564
|
+
args: [{ selector: 'mat-basic-chip, mat-chip', inputs: ['color', 'disableRipple', 'tabIndex'], exportAs: 'matChip', host: {
|
|
565
|
+
'class': 'mat-mdc-chip',
|
|
566
|
+
'[class.mdc-evolution-chip]': '!_isBasicChip',
|
|
567
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
568
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
569
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
|
|
570
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
571
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
500
572
|
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
501
|
-
'[class.mat-mdc-chip-
|
|
573
|
+
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
574
|
+
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
502
575
|
'[class.mat-mdc-basic-chip]': '_isBasicChip',
|
|
503
576
|
'[class.mat-mdc-standard-chip]': '!_isBasicChip',
|
|
577
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
504
578
|
'[class._mat-animation-noopable]': '_animationsDisabled',
|
|
505
579
|
'[id]': 'id',
|
|
506
|
-
'[attr.
|
|
507
|
-
'[attr.
|
|
508
|
-
'
|
|
509
|
-
}, 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"] }]
|
|
510
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.
|
|
580
|
+
'[attr.role]': 'role',
|
|
581
|
+
'[attr.tabindex]': 'role ? tabIndex : null',
|
|
582
|
+
'[attr.aria-label]': 'ariaLabel',
|
|
583
|
+
}, 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"] }]
|
|
584
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
585
|
+
type: Inject,
|
|
586
|
+
args: [DOCUMENT]
|
|
587
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
511
588
|
type: Optional
|
|
512
589
|
}] }, { type: undefined, decorators: [{
|
|
513
590
|
type: Optional
|
|
@@ -519,8 +596,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
519
596
|
}, {
|
|
520
597
|
type: Inject,
|
|
521
598
|
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
522
|
-
}] }
|
|
599
|
+
}] }, { type: undefined, decorators: [{
|
|
600
|
+
type: Attribute,
|
|
601
|
+
args: ['tabindex']
|
|
602
|
+
}] }]; }, propDecorators: { role: [{
|
|
523
603
|
type: Input
|
|
604
|
+
}], id: [{
|
|
605
|
+
type: Input
|
|
606
|
+
}], ariaLabel: [{
|
|
607
|
+
type: Input,
|
|
608
|
+
args: ['aria-label']
|
|
524
609
|
}], disabled: [{
|
|
525
610
|
type: Input
|
|
526
611
|
}], value: [{
|
|
@@ -529,12 +614,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
529
614
|
type: Input
|
|
530
615
|
}], highlighted: [{
|
|
531
616
|
type: Input
|
|
532
|
-
}],
|
|
617
|
+
}], removed: [{
|
|
533
618
|
type: Output
|
|
534
619
|
}], destroyed: [{
|
|
535
620
|
type: Output
|
|
536
|
-
}], removed: [{
|
|
537
|
-
type: Output
|
|
538
621
|
}], leadingIcon: [{
|
|
539
622
|
type: ContentChild,
|
|
540
623
|
args: [MAT_CHIP_AVATAR]
|
|
@@ -547,6 +630,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
547
630
|
}], ripple: [{
|
|
548
631
|
type: ViewChild,
|
|
549
632
|
args: [MatRipple]
|
|
633
|
+
}], primaryAction: [{
|
|
634
|
+
type: ViewChild,
|
|
635
|
+
args: [MatChipAction]
|
|
550
636
|
}] } });
|
|
551
637
|
|
|
552
638
|
/**
|
|
@@ -602,16 +688,17 @@ class MatChipOption extends MatChip {
|
|
|
602
688
|
}
|
|
603
689
|
/** Whether the chip is selected. */
|
|
604
690
|
get selected() {
|
|
605
|
-
return this._chipFoundation.
|
|
691
|
+
return (this._pendingSelectedState ?? this._chipFoundation.isActionSelected(MDCChipActionType.PRIMARY));
|
|
606
692
|
}
|
|
607
693
|
set selected(value) {
|
|
608
|
-
if (
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
694
|
+
if (this.selectable) {
|
|
695
|
+
const coercedValue = coerceBooleanProperty(value);
|
|
696
|
+
if (this._isInitialized) {
|
|
697
|
+
this._setSelectedState(coercedValue, false);
|
|
698
|
+
}
|
|
699
|
+
else {
|
|
700
|
+
this._pendingSelectedState = coercedValue;
|
|
701
|
+
}
|
|
615
702
|
}
|
|
616
703
|
}
|
|
617
704
|
/** The ARIA selected applied to the chip. */
|
|
@@ -622,70 +709,45 @@ class MatChipOption extends MatChip {
|
|
|
622
709
|
? this.selected.toString()
|
|
623
710
|
: null;
|
|
624
711
|
}
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
712
|
+
ngOnInit() {
|
|
713
|
+
this.role = 'presentation';
|
|
714
|
+
}
|
|
715
|
+
ngAfterViewInit() {
|
|
716
|
+
super.ngAfterViewInit();
|
|
717
|
+
this._isInitialized = true;
|
|
718
|
+
if (this._pendingSelectedState != null) {
|
|
719
|
+
// Note that we want to clear the pending state before calling `_setSelectedState`, because
|
|
720
|
+
// we want it to read the actual selected state instead falling back to the pending one.
|
|
721
|
+
const selectedState = this._pendingSelectedState;
|
|
722
|
+
this._pendingSelectedState = undefined;
|
|
723
|
+
this._setSelectedState(selectedState, false);
|
|
629
724
|
}
|
|
630
725
|
}
|
|
631
726
|
/** Selects the chip. */
|
|
632
727
|
select() {
|
|
633
|
-
if (
|
|
634
|
-
|
|
635
|
-
}
|
|
636
|
-
else if (!this.selected) {
|
|
637
|
-
this._chipFoundation.setSelected(true);
|
|
638
|
-
this._dispatchSelectionChange();
|
|
728
|
+
if (this.selectable) {
|
|
729
|
+
this._setSelectedState(true, false);
|
|
639
730
|
}
|
|
640
731
|
}
|
|
641
732
|
/** Deselects the chip. */
|
|
642
733
|
deselect() {
|
|
643
|
-
if (
|
|
644
|
-
|
|
645
|
-
}
|
|
646
|
-
else if (this.selected) {
|
|
647
|
-
this._chipFoundation.setSelected(false);
|
|
648
|
-
this._dispatchSelectionChange();
|
|
734
|
+
if (this.selectable) {
|
|
735
|
+
this._setSelectedState(false, false);
|
|
649
736
|
}
|
|
650
737
|
}
|
|
651
738
|
/** Selects this chip and emits userInputSelection event */
|
|
652
739
|
selectViaInteraction() {
|
|
653
|
-
if (
|
|
654
|
-
|
|
655
|
-
}
|
|
656
|
-
else if (!this.selected) {
|
|
657
|
-
this._chipFoundation.setSelected(true);
|
|
658
|
-
this._dispatchSelectionChange(true);
|
|
740
|
+
if (this.selectable) {
|
|
741
|
+
this._setSelectedState(true, true);
|
|
659
742
|
}
|
|
660
743
|
}
|
|
661
744
|
/** Toggles the current selected state of this chip. */
|
|
662
745
|
toggleSelected(isUserInput = false) {
|
|
663
|
-
if (
|
|
664
|
-
|
|
746
|
+
if (this.selectable) {
|
|
747
|
+
this._setSelectedState(!this.selected, isUserInput);
|
|
665
748
|
}
|
|
666
|
-
this._chipFoundation.setSelected(!this.selected);
|
|
667
|
-
this._dispatchSelectionChange(isUserInput);
|
|
668
749
|
return this.selected;
|
|
669
750
|
}
|
|
670
|
-
/** Emits a selection change event. */
|
|
671
|
-
_dispatchSelectionChange(isUserInput = false) {
|
|
672
|
-
this.selectionChange.emit({
|
|
673
|
-
source: this,
|
|
674
|
-
isUserInput,
|
|
675
|
-
selected: this.selected,
|
|
676
|
-
});
|
|
677
|
-
}
|
|
678
|
-
/** Allows for programmatic focusing of the chip. */
|
|
679
|
-
focus() {
|
|
680
|
-
if (this.disabled) {
|
|
681
|
-
return;
|
|
682
|
-
}
|
|
683
|
-
if (!this._hasFocus()) {
|
|
684
|
-
this._elementRef.nativeElement.focus();
|
|
685
|
-
this._onFocus.next({ chip: this });
|
|
686
|
-
}
|
|
687
|
-
this._hasFocusInternal = true;
|
|
688
|
-
}
|
|
689
751
|
/** Resets the state of the chip when it loses focus. */
|
|
690
752
|
_blur() {
|
|
691
753
|
// When animations are enabled, Angular may end up removing the chip from the DOM a little
|
|
@@ -699,55 +761,68 @@ class MatChipOption extends MatChip {
|
|
|
699
761
|
});
|
|
700
762
|
});
|
|
701
763
|
}
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
764
|
+
_onChipInteraction(event) {
|
|
765
|
+
const { trigger, source } = event.detail;
|
|
766
|
+
// Non-selection interactions should work the same as other chips.
|
|
767
|
+
if (source !== MDCChipActionType.PRIMARY ||
|
|
768
|
+
(trigger !== MDCChipActionInteractionTrigger.CLICK &&
|
|
769
|
+
trigger !== MDCChipActionInteractionTrigger.ENTER_KEY &&
|
|
770
|
+
trigger !== MDCChipActionInteractionTrigger.SPACEBAR_KEY)) {
|
|
771
|
+
super._onChipInteraction(event);
|
|
772
|
+
}
|
|
773
|
+
else if (this.selectable && !this.disabled) {
|
|
774
|
+
// Otherwise only let the event through if the chip is enabled and selectable.
|
|
775
|
+
this._chipFoundation.handleActionInteraction(event);
|
|
776
|
+
this.selectionChange.emit({
|
|
777
|
+
source: this,
|
|
778
|
+
isUserInput: true,
|
|
779
|
+
selected: this.selected,
|
|
780
|
+
});
|
|
710
781
|
}
|
|
711
782
|
}
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
783
|
+
_hasLeadingGraphic() {
|
|
784
|
+
// The checkmark graphic is built in for multi-select chip lists.
|
|
785
|
+
return this.leadingIcon || (this._chipListMultiple && this.selectable);
|
|
786
|
+
}
|
|
787
|
+
_setSelectedState(isSelected, isUserInput) {
|
|
788
|
+
if (isSelected !== this.selected) {
|
|
789
|
+
this._chipFoundation.setActionSelected(MDCChipActionType.PRIMARY, isSelected);
|
|
790
|
+
this.selectionChange.emit({
|
|
791
|
+
source: this,
|
|
792
|
+
isUserInput,
|
|
793
|
+
selected: this.selected,
|
|
794
|
+
});
|
|
716
795
|
}
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
event.preventDefault();
|
|
722
|
-
break;
|
|
723
|
-
default:
|
|
724
|
-
this._handleInteraction(event);
|
|
796
|
+
// MDC won't assign the selected class until the animation finishes, but that may not
|
|
797
|
+
// happen if animations are disabled. If we detect such a case, assign the class manually.
|
|
798
|
+
if (this._animationsDisabled) {
|
|
799
|
+
this._elementRef.nativeElement.classList.toggle(MDCChipCssClasses.SELECTED, isSelected);
|
|
725
800
|
}
|
|
726
801
|
}
|
|
727
802
|
}
|
|
728
|
-
MatChipOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
729
|
-
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: { 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 });
|
|
730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
803
|
+
MatChipOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipOption, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
804
|
+
MatChipOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
805
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipOption, decorators: [{
|
|
731
806
|
type: Component,
|
|
732
807
|
args: [{ selector: 'mat-basic-chip-option, mat-chip-option', inputs: ['color', 'disableRipple', 'tabIndex'], host: {
|
|
733
|
-
'
|
|
734
|
-
'class': 'mat-mdc-focus-indicator mat-mdc-chip-option',
|
|
735
|
-
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
736
|
-
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
737
|
-
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
738
|
-
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
|
|
808
|
+
'class': 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter',
|
|
739
809
|
'[class.mat-mdc-chip-selected]': 'selected',
|
|
740
810
|
'[class.mat-mdc-chip-multiple]': '_chipListMultiple',
|
|
811
|
+
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
812
|
+
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
813
|
+
'[class.mdc-evolution-chip--selectable]': 'selectable',
|
|
814
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
815
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
816
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
|
|
817
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
818
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
819
|
+
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
820
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
821
|
+
'[attr.tabindex]': 'null',
|
|
822
|
+
'[attr.aria-label]': 'null',
|
|
823
|
+
'[attr.role]': 'role',
|
|
741
824
|
'[id]': 'id',
|
|
742
|
-
'[tabIndex]': 'tabIndex',
|
|
743
|
-
'[attr.disabled]': 'disabled || null',
|
|
744
|
-
'[attr.aria-disabled]': 'disabled.toString()',
|
|
745
|
-
'[attr.aria-selected]': 'ariaSelected',
|
|
746
|
-
'(click)': '_click($event)',
|
|
747
|
-
'(keydown)': '_keydown($event)',
|
|
748
|
-
'(focus)': 'focus()',
|
|
749
|
-
'(blur)': '_blur()',
|
|
750
|
-
}, 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"] }]
|
|
825
|
+
}, 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"] }]
|
|
751
826
|
}], propDecorators: { selectable: [{
|
|
752
827
|
type: Input
|
|
753
828
|
}], selected: [{
|
|
@@ -795,14 +870,14 @@ class MatChipEditInput {
|
|
|
795
870
|
sel.addRange(range);
|
|
796
871
|
}
|
|
797
872
|
}
|
|
798
|
-
MatChipEditInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
799
|
-
MatChipEditInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
873
|
+
MatChipEditInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipEditInput, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
874
|
+
MatChipEditInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-next.2", type: MatChipEditInput, selector: "span[matChipEditInput]", host: { attributes: { "role": "textbox", "tabindex": "-1", "contenteditable": "true" }, classAttribute: "mat-chip-edit-input" }, ngImport: i0 });
|
|
875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipEditInput, decorators: [{
|
|
801
876
|
type: Directive,
|
|
802
877
|
args: [{
|
|
803
878
|
selector: 'span[matChipEditInput]',
|
|
804
879
|
host: {
|
|
805
|
-
'class': '
|
|
880
|
+
'class': 'mat-chip-edit-input',
|
|
806
881
|
'role': 'textbox',
|
|
807
882
|
'tabindex': '-1',
|
|
808
883
|
'contenteditable': 'true',
|
|
@@ -825,121 +900,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
825
900
|
* the matChipInputFor directive.
|
|
826
901
|
*/
|
|
827
902
|
class MatChipRow extends MatChip {
|
|
828
|
-
constructor(
|
|
829
|
-
super(changeDetectorRef, elementRef, ngZone, dir, animationMode, globalRippleOptions);
|
|
830
|
-
this._document = _document;
|
|
903
|
+
constructor(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, dir, animationMode, globalRippleOptions, tabIndex) {
|
|
904
|
+
super(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, dir, animationMode, globalRippleOptions, tabIndex);
|
|
831
905
|
this.basicChipAttrName = 'mat-basic-chip-row';
|
|
832
906
|
this.editable = false;
|
|
833
907
|
/** Emitted when the chip is edited. */
|
|
834
908
|
this.edited = new EventEmitter();
|
|
909
|
+
this._isEditing = false;
|
|
910
|
+
this.role = 'row';
|
|
835
911
|
}
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
// Defer setting the value in order to avoid the "Expression
|
|
840
|
-
// has changed after it was checked" errors from Angular.
|
|
841
|
-
setTimeout(() => {
|
|
842
|
-
// removeIcon has tabIndex 0 for regular chips, but should only be focusable by
|
|
843
|
-
// the GridFocusKeyManager for row chips.
|
|
844
|
-
this.removeIcon.tabIndex = -1;
|
|
845
|
-
});
|
|
846
|
-
}
|
|
847
|
-
}
|
|
848
|
-
ngAfterViewInit() {
|
|
849
|
-
super.ngAfterViewInit();
|
|
850
|
-
this.cells = this.removeIcon
|
|
851
|
-
? [this.chipContent.nativeElement, this.removeIcon._elementRef.nativeElement]
|
|
852
|
-
: [this.chipContent.nativeElement];
|
|
853
|
-
}
|
|
854
|
-
/**
|
|
855
|
-
* Allows for programmatic focusing of the chip.
|
|
856
|
-
* Sends focus to the first grid cell. The row chip element itself
|
|
857
|
-
* is never focused.
|
|
858
|
-
*/
|
|
859
|
-
focus() {
|
|
860
|
-
if (this.disabled) {
|
|
861
|
-
return;
|
|
862
|
-
}
|
|
863
|
-
if (!this._hasFocusInternal) {
|
|
864
|
-
this._onFocus.next({ chip: this });
|
|
865
|
-
}
|
|
866
|
-
this.chipContent.nativeElement.focus();
|
|
912
|
+
_hasTrailingIcon() {
|
|
913
|
+
// The trailing icon is hidden while editing.
|
|
914
|
+
return !this._isEditing && super._hasTrailingIcon();
|
|
867
915
|
}
|
|
868
916
|
/**
|
|
869
917
|
* Emits a blur event when one of the gridcells loses focus, unless focus moved
|
|
870
918
|
* to the other gridcell.
|
|
871
919
|
*/
|
|
872
|
-
_focusout(
|
|
920
|
+
_focusout() {
|
|
873
921
|
if (this._focusoutTimeout) {
|
|
874
922
|
clearTimeout(this._focusoutTimeout);
|
|
875
923
|
}
|
|
876
924
|
// Wait to see if focus moves to the other gridcell
|
|
877
925
|
this._focusoutTimeout = window.setTimeout(() => {
|
|
926
|
+
if (this._isEditing) {
|
|
927
|
+
this._onEditFinish();
|
|
928
|
+
}
|
|
878
929
|
this._hasFocusInternal = false;
|
|
879
930
|
this._onBlur.next({ chip: this });
|
|
880
|
-
this._handleInteraction(event);
|
|
881
931
|
});
|
|
882
932
|
}
|
|
883
933
|
/** Records that the chip has focus when one of the gridcells is focused. */
|
|
884
|
-
_focusin(
|
|
934
|
+
_focusin() {
|
|
885
935
|
if (this._focusoutTimeout) {
|
|
886
936
|
clearTimeout(this._focusoutTimeout);
|
|
887
937
|
this._focusoutTimeout = null;
|
|
888
938
|
}
|
|
889
939
|
this._hasFocusInternal = true;
|
|
890
|
-
this._handleInteraction(event);
|
|
891
940
|
}
|
|
892
941
|
/** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
|
|
893
942
|
_mousedown(event) {
|
|
894
|
-
if (this._isEditing
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
943
|
+
if (!this._isEditing) {
|
|
944
|
+
if (!this.disabled) {
|
|
945
|
+
this.focus();
|
|
946
|
+
}
|
|
947
|
+
event.preventDefault();
|
|
899
948
|
}
|
|
900
|
-
event.preventDefault();
|
|
901
|
-
}
|
|
902
|
-
_dblclick(event) {
|
|
903
|
-
this._handleInteraction(event);
|
|
904
949
|
}
|
|
905
950
|
/** Handles custom key presses. */
|
|
906
951
|
_keydown(event) {
|
|
907
952
|
if (this.disabled) {
|
|
908
953
|
return;
|
|
909
954
|
}
|
|
910
|
-
if (this._isEditing()) {
|
|
911
|
-
this._handleInteraction(event);
|
|
912
|
-
return;
|
|
913
|
-
}
|
|
914
955
|
switch (event.keyCode) {
|
|
956
|
+
case ENTER:
|
|
957
|
+
if (this._isEditing) {
|
|
958
|
+
event.preventDefault();
|
|
959
|
+
// Wrap in a timeout so the timing is consistent as when it is emitted in `focusout`.
|
|
960
|
+
setTimeout(() => this._onEditFinish());
|
|
961
|
+
}
|
|
962
|
+
else if (this.editable) {
|
|
963
|
+
this._startEditing();
|
|
964
|
+
}
|
|
965
|
+
break;
|
|
915
966
|
case DELETE:
|
|
916
967
|
case BACKSPACE:
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
968
|
+
if (!this._isEditing) {
|
|
969
|
+
// Remove the focused chip
|
|
970
|
+
this.remove();
|
|
971
|
+
// Always prevent so page navigation does not occur
|
|
972
|
+
event.preventDefault();
|
|
973
|
+
}
|
|
921
974
|
break;
|
|
922
|
-
default:
|
|
923
|
-
this._handleInteraction(event);
|
|
924
975
|
}
|
|
925
976
|
}
|
|
926
|
-
|
|
927
|
-
|
|
977
|
+
_doubleclick() {
|
|
978
|
+
if (!this.disabled && this.editable) {
|
|
979
|
+
this._startEditing();
|
|
980
|
+
}
|
|
928
981
|
}
|
|
929
|
-
|
|
982
|
+
_startEditing() {
|
|
983
|
+
// The value depends on the DOM so we need to extract it before we flip the flag.
|
|
984
|
+
const value = this.value;
|
|
985
|
+
// Make the primary action non-interactive so that it doesn't
|
|
986
|
+
// navigate when the user presses the arrow keys while editing.
|
|
987
|
+
this.primaryAction.isInteractive = false;
|
|
988
|
+
this._isEditing = true;
|
|
930
989
|
// Defer initializing the input so it has time to be added to the DOM.
|
|
931
|
-
setTimeout(() =>
|
|
932
|
-
this._getEditInput().initialize(this.value);
|
|
933
|
-
});
|
|
990
|
+
setTimeout(() => this._getEditInput().initialize(value));
|
|
934
991
|
}
|
|
935
992
|
_onEditFinish() {
|
|
936
993
|
// If the edit input is still focused or focus was returned to the body after it was destroyed,
|
|
937
994
|
// return focus to the chip contents.
|
|
938
995
|
if (this._document.activeElement === this._getEditInput().getNativeElement() ||
|
|
939
996
|
this._document.activeElement === this._document.body) {
|
|
940
|
-
this.
|
|
997
|
+
this.primaryAction.focus();
|
|
941
998
|
}
|
|
942
999
|
this.edited.emit({ chip: this, value: this._getEditInput().getValue() });
|
|
1000
|
+
this.primaryAction.isInteractive = true;
|
|
1001
|
+
this._isEditing = false;
|
|
943
1002
|
}
|
|
944
1003
|
/**
|
|
945
1004
|
* Gets the projected chip edit input, or the default input if none is projected in. One of these
|
|
@@ -949,32 +1008,37 @@ class MatChipRow extends MatChip {
|
|
|
949
1008
|
return this.contentEditInput || this.defaultEditInput;
|
|
950
1009
|
}
|
|
951
1010
|
}
|
|
952
|
-
MatChipRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
953
|
-
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: { 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 });
|
|
954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
1011
|
+
MatChipRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
1012
|
+
MatChipRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
1013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipRow, decorators: [{
|
|
955
1014
|
type: Component,
|
|
956
1015
|
args: [{ selector: 'mat-chip-row, mat-basic-chip-row', inputs: ['color', 'disableRipple', 'tabIndex'], host: {
|
|
957
|
-
'
|
|
958
|
-
'class
|
|
1016
|
+
'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
|
|
1017
|
+
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
959
1018
|
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
1019
|
+
'[class.mat-mdc-chip-editing]': '_isEditing',
|
|
1020
|
+
'[class.mat-mdc-chip-editable]': 'editable',
|
|
1021
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
1022
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
1023
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
|
|
1024
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
1025
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
960
1026
|
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
961
|
-
'[class.mat-mdc-chip-with-
|
|
962
|
-
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
|
|
963
|
-
'[class.mdc-chip--editable]': 'editable',
|
|
1027
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
964
1028
|
'[id]': 'id',
|
|
965
|
-
'[attr.
|
|
966
|
-
'[attr.aria-
|
|
967
|
-
'[
|
|
1029
|
+
'[attr.tabindex]': 'null',
|
|
1030
|
+
'[attr.aria-label]': 'null',
|
|
1031
|
+
'[attr.role]': 'role',
|
|
968
1032
|
'(mousedown)': '_mousedown($event)',
|
|
969
|
-
'(dblclick)': '_dblclick($event)',
|
|
970
1033
|
'(keydown)': '_keydown($event)',
|
|
1034
|
+
'(dblclick)': '_doubleclick()',
|
|
971
1035
|
'(focusin)': '_focusin($event)',
|
|
972
1036
|
'(focusout)': '_focusout($event)',
|
|
973
|
-
}, 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"] }]
|
|
974
|
-
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1037
|
+
}, 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"] }]
|
|
1038
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
975
1039
|
type: Inject,
|
|
976
1040
|
args: [DOCUMENT]
|
|
977
|
-
}] }, { type:
|
|
1041
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
978
1042
|
type: Optional
|
|
979
1043
|
}] }, { type: undefined, decorators: [{
|
|
980
1044
|
type: Optional
|
|
@@ -986,13 +1050,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
986
1050
|
}, {
|
|
987
1051
|
type: Inject,
|
|
988
1052
|
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
1053
|
+
}] }, { type: undefined, decorators: [{
|
|
1054
|
+
type: Attribute,
|
|
1055
|
+
args: ['tabindex']
|
|
989
1056
|
}] }]; }, propDecorators: { editable: [{
|
|
990
1057
|
type: Input
|
|
991
1058
|
}], edited: [{
|
|
992
1059
|
type: Output
|
|
993
|
-
}], chipContent: [{
|
|
994
|
-
type: ViewChild,
|
|
995
|
-
args: ['chipContent']
|
|
996
1060
|
}], defaultEditInput: [{
|
|
997
1061
|
type: ViewChild,
|
|
998
1062
|
args: [MatChipEditInput]
|
|
@@ -1008,7 +1072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
1008
1072
|
* Use of this source code is governed by an MIT-style license that can be
|
|
1009
1073
|
* found in the LICENSE file at https://angular.io/license
|
|
1010
1074
|
*/
|
|
1011
|
-
let uid = 0;
|
|
1012
1075
|
/**
|
|
1013
1076
|
* Boilerplate for applying mixins to MatChipSet.
|
|
1014
1077
|
* @docs-private
|
|
@@ -1023,11 +1086,12 @@ const _MatChipSetMixinBase = mixinTabIndex(MatChipSetBase);
|
|
|
1023
1086
|
* Extended by MatChipListbox and MatChipGrid for different interaction patterns.
|
|
1024
1087
|
*/
|
|
1025
1088
|
class MatChipSet extends _MatChipSetMixinBase {
|
|
1026
|
-
constructor(_elementRef, _changeDetectorRef
|
|
1089
|
+
constructor(_liveAnnouncer, _document, _elementRef, _changeDetectorRef) {
|
|
1027
1090
|
super(_elementRef);
|
|
1091
|
+
this._liveAnnouncer = _liveAnnouncer;
|
|
1092
|
+
this._document = _document;
|
|
1028
1093
|
this._elementRef = _elementRef;
|
|
1029
1094
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1030
|
-
this._dir = _dir;
|
|
1031
1095
|
/**
|
|
1032
1096
|
* When a chip is destroyed, we store the index of the destroyed chip until the chips
|
|
1033
1097
|
* query list notifies about the update. This is necessary because we cannot determine an
|
|
@@ -1041,23 +1105,42 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1041
1105
|
* These methods are called by the chip set foundation.
|
|
1042
1106
|
*/
|
|
1043
1107
|
this._chipSetAdapter = {
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1108
|
+
announceMessage: message => this._liveAnnouncer.announce(message),
|
|
1109
|
+
emitEvent: (eventName, eventDetail) => {
|
|
1110
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, eventDetail, true);
|
|
1111
|
+
},
|
|
1112
|
+
getAttribute: name => this._elementRef.nativeElement.getAttribute(name),
|
|
1113
|
+
getChipActionsAtIndex: index => this._chipFoundation(index)?.getActions() || [],
|
|
1114
|
+
getChipCount: () => this._chips.length,
|
|
1115
|
+
getChipIdAtIndex: index => this._chipFoundation(index)?.getElementID() || '',
|
|
1116
|
+
getChipIndexById: id => {
|
|
1117
|
+
return this._chips.toArray().findIndex(chip => chip._getFoundation().getElementID() === id);
|
|
1118
|
+
},
|
|
1119
|
+
isChipFocusableAtIndex: (index, actionType) => {
|
|
1120
|
+
return this._chipFoundation(index)?.isActionFocusable(actionType) || false;
|
|
1121
|
+
},
|
|
1122
|
+
isChipSelectableAtIndex: (index, actionType) => {
|
|
1123
|
+
return this._chipFoundation(index)?.isActionSelectable(actionType) || false;
|
|
1124
|
+
},
|
|
1125
|
+
isChipSelectedAtIndex: (index, actionType) => {
|
|
1126
|
+
return this._chipFoundation(index)?.isActionSelected(actionType) || false;
|
|
1127
|
+
},
|
|
1128
|
+
removeChipAtIndex: index => this._chips.toArray()[index]?.remove(),
|
|
1129
|
+
setChipFocusAtIndex: (index, action, behavior) => {
|
|
1130
|
+
this._chipFoundation(index)?.setActionFocus(action, behavior);
|
|
1131
|
+
},
|
|
1132
|
+
setChipSelectedAtIndex: (index, actionType, isSelected) => {
|
|
1133
|
+
// Setting the trailing action as deselected ends up deselecting the entire chip.
|
|
1134
|
+
// This is working as expected, but it's not something we want so we only apply the
|
|
1135
|
+
// selected state to the primary chip.
|
|
1136
|
+
if (actionType === MDCChipActionType.PRIMARY) {
|
|
1137
|
+
this._chipFoundation(index)?.setActionSelected(actionType, isSelected);
|
|
1138
|
+
}
|
|
1139
|
+
},
|
|
1140
|
+
startChipAnimationAtIndex: (index, animation) => {
|
|
1141
|
+
this._chipFoundation(index)?.startAnimation(animation);
|
|
1142
|
+
},
|
|
1058
1143
|
};
|
|
1059
|
-
/** Uid of the chip set */
|
|
1060
|
-
this._uid = `mat-mdc-chip-set-${uid++}`;
|
|
1061
1144
|
/**
|
|
1062
1145
|
* Map from class to whether the class is enabled.
|
|
1063
1146
|
* Enabled classes are set on the MDC chip-set div.
|
|
@@ -1065,7 +1148,24 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1065
1148
|
this._mdcClasses = {};
|
|
1066
1149
|
this._disabled = false;
|
|
1067
1150
|
this._role = null;
|
|
1068
|
-
this.
|
|
1151
|
+
this._handleChipAnimation = (event) => {
|
|
1152
|
+
this._chipSetFoundation.handleChipAnimation(event);
|
|
1153
|
+
};
|
|
1154
|
+
this._handleChipInteraction = (event) => {
|
|
1155
|
+
this._chipSetFoundation.handleChipInteraction(event);
|
|
1156
|
+
};
|
|
1157
|
+
this._handleChipNavigation = (event) => {
|
|
1158
|
+
this._chipSetFoundation.handleChipNavigation(event);
|
|
1159
|
+
};
|
|
1160
|
+
const element = _elementRef.nativeElement;
|
|
1161
|
+
this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
|
|
1162
|
+
element.addEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
|
|
1163
|
+
element.addEventListener(MDCChipEvents.INTERACTION, this._handleChipInteraction);
|
|
1164
|
+
element.addEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
|
|
1165
|
+
}
|
|
1166
|
+
/** Combined stream of all of the child chips' remove events. */
|
|
1167
|
+
get chipDestroyedChanges() {
|
|
1168
|
+
return this._getChipStream(chip => chip.destroyed);
|
|
1069
1169
|
}
|
|
1070
1170
|
/** Whether the chip set is disabled. */
|
|
1071
1171
|
get disabled() {
|
|
@@ -1095,18 +1195,6 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1095
1195
|
get focused() {
|
|
1096
1196
|
return this._hasFocusedChip();
|
|
1097
1197
|
}
|
|
1098
|
-
/** Combined stream of all of the child chips' remove events. */
|
|
1099
|
-
get chipRemoveChanges() {
|
|
1100
|
-
return merge(...this._chips.map(chip => chip.removed));
|
|
1101
|
-
}
|
|
1102
|
-
/** Combined stream of all of the child chips' remove events. */
|
|
1103
|
-
get chipDestroyedChanges() {
|
|
1104
|
-
return merge(...this._chips.map(chip => chip.destroyed));
|
|
1105
|
-
}
|
|
1106
|
-
/** Combined stream of all of the child chips' interaction events. */
|
|
1107
|
-
get chipInteractionChanges() {
|
|
1108
|
-
return merge(...this._chips.map(chip => chip.interaction));
|
|
1109
|
-
}
|
|
1110
1198
|
ngAfterViewInit() {
|
|
1111
1199
|
this._chipSetFoundation.init();
|
|
1112
1200
|
}
|
|
@@ -1119,11 +1207,23 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1119
1207
|
this._syncChipsState();
|
|
1120
1208
|
});
|
|
1121
1209
|
}
|
|
1122
|
-
|
|
1210
|
+
});
|
|
1211
|
+
this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event) => {
|
|
1212
|
+
const chip = event.chip;
|
|
1213
|
+
const chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1214
|
+
// In case the chip that will be removed is currently focused, we temporarily store
|
|
1215
|
+
// the index in order to be able to determine an appropriate sibling chip that will
|
|
1216
|
+
// receive focus.
|
|
1217
|
+
if (this._isValidIndex(chipIndex) && chip._hasFocus()) {
|
|
1218
|
+
this._lastDestroyedChipIndex = chipIndex;
|
|
1219
|
+
}
|
|
1123
1220
|
});
|
|
1124
1221
|
}
|
|
1125
1222
|
ngOnDestroy() {
|
|
1126
|
-
this.
|
|
1223
|
+
const element = this._elementRef.nativeElement;
|
|
1224
|
+
element.removeEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
|
|
1225
|
+
element.removeEventListener(MDCChipEvents.INTERACTION, this._handleChipInteraction);
|
|
1226
|
+
element.removeEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
|
|
1127
1227
|
this._destroyed.next();
|
|
1128
1228
|
this._destroyed.complete();
|
|
1129
1229
|
this._chipSetFoundation.destroy();
|
|
@@ -1141,71 +1241,6 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1141
1241
|
});
|
|
1142
1242
|
}
|
|
1143
1243
|
}
|
|
1144
|
-
/** Sets whether the given CSS class should be applied to the MDC chip. */
|
|
1145
|
-
_setMdcClass(cssClass, active) {
|
|
1146
|
-
const classes = this._elementRef.nativeElement.classList;
|
|
1147
|
-
active ? classes.add(cssClass) : classes.remove(cssClass);
|
|
1148
|
-
this._changeDetectorRef.markForCheck();
|
|
1149
|
-
}
|
|
1150
|
-
/** Adapter method that returns true if the chip set has the given MDC class. */
|
|
1151
|
-
_hasMdcClass(className) {
|
|
1152
|
-
return this._elementRef.nativeElement.classList.contains(className);
|
|
1153
|
-
}
|
|
1154
|
-
/** Updates subscriptions to chip events. */
|
|
1155
|
-
_resetChips() {
|
|
1156
|
-
this._dropSubscriptions();
|
|
1157
|
-
this._subscribeToChipEvents();
|
|
1158
|
-
}
|
|
1159
|
-
/** Subscribes to events on the child chips. */
|
|
1160
|
-
_subscribeToChipEvents() {
|
|
1161
|
-
this._listenToChipsRemove();
|
|
1162
|
-
this._listenToChipsDestroyed();
|
|
1163
|
-
this._listenToChipsInteraction();
|
|
1164
|
-
}
|
|
1165
|
-
/** Subscribes to chip removal events. */
|
|
1166
|
-
_listenToChipsRemove() {
|
|
1167
|
-
this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((event) => {
|
|
1168
|
-
this._chipSetFoundation.handleChipRemoval({
|
|
1169
|
-
chipId: event.chip.id,
|
|
1170
|
-
// TODO(mmalerba): Add removal message.
|
|
1171
|
-
removedAnnouncement: null,
|
|
1172
|
-
});
|
|
1173
|
-
});
|
|
1174
|
-
}
|
|
1175
|
-
/** Subscribes to chip destroyed events. */
|
|
1176
|
-
_listenToChipsDestroyed() {
|
|
1177
|
-
this._chipDestroyedSubscription = this.chipDestroyedChanges.subscribe((event) => {
|
|
1178
|
-
const chip = event.chip;
|
|
1179
|
-
const chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1180
|
-
// In case the chip that will be removed is currently focused, we temporarily store
|
|
1181
|
-
// the index in order to be able to determine an appropriate sibling chip that will
|
|
1182
|
-
// receive focus.
|
|
1183
|
-
if (this._isValidIndex(chipIndex) && chip._hasFocus()) {
|
|
1184
|
-
this._lastDestroyedChipIndex = chipIndex;
|
|
1185
|
-
}
|
|
1186
|
-
});
|
|
1187
|
-
}
|
|
1188
|
-
/** Subscribes to chip interaction events. */
|
|
1189
|
-
_listenToChipsInteraction() {
|
|
1190
|
-
this._chipInteractionSubscription = this.chipInteractionChanges.subscribe((id) => {
|
|
1191
|
-
this._chipSetFoundation.handleChipInteraction({ chipId: id });
|
|
1192
|
-
});
|
|
1193
|
-
}
|
|
1194
|
-
/** Unsubscribes from all chip events. */
|
|
1195
|
-
_dropSubscriptions() {
|
|
1196
|
-
if (this._chipRemoveSubscription) {
|
|
1197
|
-
this._chipRemoveSubscription.unsubscribe();
|
|
1198
|
-
this._chipRemoveSubscription = null;
|
|
1199
|
-
}
|
|
1200
|
-
if (this._chipInteractionSubscription) {
|
|
1201
|
-
this._chipInteractionSubscription.unsubscribe();
|
|
1202
|
-
this._chipInteractionSubscription = null;
|
|
1203
|
-
}
|
|
1204
|
-
if (this._chipDestroyedSubscription) {
|
|
1205
|
-
this._chipDestroyedSubscription.unsubscribe();
|
|
1206
|
-
this._chipDestroyedSubscription = null;
|
|
1207
|
-
}
|
|
1208
|
-
}
|
|
1209
1244
|
/** Dummy method for subclasses to override. Base chip set cannot be focused. */
|
|
1210
1245
|
focus() { }
|
|
1211
1246
|
/**
|
|
@@ -1219,14 +1254,29 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1219
1254
|
}
|
|
1220
1255
|
/** Checks whether an event comes from inside a chip element. */
|
|
1221
1256
|
_originatesFromChip(event) {
|
|
1222
|
-
return this._checkForClassInHierarchy(event, 'mdc-chip');
|
|
1257
|
+
return this._checkForClassInHierarchy(event, 'mdc-evolution-chip');
|
|
1258
|
+
}
|
|
1259
|
+
/**
|
|
1260
|
+
* Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
|
|
1261
|
+
* user to tab out of it. This prevents the grid from capturing focus and redirecting
|
|
1262
|
+
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
1263
|
+
*/
|
|
1264
|
+
_allowFocusEscape() {
|
|
1265
|
+
const previousTabIndex = this.tabIndex;
|
|
1266
|
+
if (this.tabIndex !== -1) {
|
|
1267
|
+
this.tabIndex = -1;
|
|
1268
|
+
setTimeout(() => {
|
|
1269
|
+
this.tabIndex = previousTabIndex;
|
|
1270
|
+
this._changeDetectorRef.markForCheck();
|
|
1271
|
+
});
|
|
1272
|
+
}
|
|
1223
1273
|
}
|
|
1224
1274
|
/**
|
|
1225
|
-
*
|
|
1226
|
-
*
|
|
1275
|
+
* Gets a stream of events from all the chips within the set.
|
|
1276
|
+
* The stream will automatically incorporate any newly-added chips.
|
|
1227
1277
|
*/
|
|
1228
|
-
|
|
1229
|
-
return this.
|
|
1278
|
+
_getChipStream(mappingFunction) {
|
|
1279
|
+
return this._chips.changes.pipe(startWith(null), switchMap(() => merge(...this._chips.map(mappingFunction))));
|
|
1230
1280
|
}
|
|
1231
1281
|
_checkForClassInHierarchy(event, className) {
|
|
1232
1282
|
let currentElement = event.target;
|
|
@@ -1239,21 +1289,32 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1239
1289
|
}
|
|
1240
1290
|
return false;
|
|
1241
1291
|
}
|
|
1292
|
+
_chipFoundation(index) {
|
|
1293
|
+
return this._chips.toArray()[index]?._getFoundation();
|
|
1294
|
+
}
|
|
1242
1295
|
}
|
|
1243
|
-
MatChipSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
1244
|
-
MatChipSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
1245
|
-
|
|
1296
|
+
MatChipSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipSet, deps: [{ token: i1.LiveAnnouncer }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1297
|
+
MatChipSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-next.2", 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: `
|
|
1298
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1299
|
+
<ng-content></ng-content>
|
|
1300
|
+
</span>
|
|
1301
|
+
`, 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 });
|
|
1302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipSet, decorators: [{
|
|
1246
1303
|
type: Component,
|
|
1247
|
-
args: [{ selector: 'mat-chip-set', template:
|
|
1248
|
-
|
|
1304
|
+
args: [{ selector: 'mat-chip-set', template: `
|
|
1305
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1306
|
+
<ng-content></ng-content>
|
|
1307
|
+
</span>
|
|
1308
|
+
`, host: {
|
|
1309
|
+
'class': 'mat-mdc-chip-set mdc-evolution-chip-set',
|
|
1249
1310
|
'[attr.role]': 'role',
|
|
1250
1311
|
// TODO: replace this binding with use of AriaDescriber
|
|
1251
1312
|
'[attr.aria-describedby]': '_ariaDescribedby || null',
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
}] }]; }, propDecorators: { disabled: [{
|
|
1313
|
+
}, 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"] }]
|
|
1314
|
+
}], ctorParameters: function () { return [{ type: i1.LiveAnnouncer }, { type: undefined, decorators: [{
|
|
1315
|
+
type: Inject,
|
|
1316
|
+
args: [DOCUMENT]
|
|
1317
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
1257
1318
|
type: Input
|
|
1258
1319
|
}], role: [{
|
|
1259
1320
|
type: Input
|
|
@@ -1299,8 +1360,8 @@ const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR = {
|
|
|
1299
1360
|
* Used with MatChipOption chips.
|
|
1300
1361
|
*/
|
|
1301
1362
|
class MatChipListbox extends MatChipSet {
|
|
1302
|
-
constructor(
|
|
1303
|
-
super(
|
|
1363
|
+
constructor() {
|
|
1364
|
+
super(...arguments);
|
|
1304
1365
|
/**
|
|
1305
1366
|
* Function when touched. Set as part of ControlValueAccessor implementation.
|
|
1306
1367
|
* @docs-private
|
|
@@ -1319,14 +1380,9 @@ class MatChipListbox extends MatChipSet {
|
|
|
1319
1380
|
this._required = false;
|
|
1320
1381
|
/** Event emitted when the selected chip listbox value has been changed by the user. */
|
|
1321
1382
|
this.change = new EventEmitter();
|
|
1322
|
-
this._chipSetAdapter.selectChipAtIndex = (index, selected) => {
|
|
1323
|
-
this._setSelected(index, selected);
|
|
1324
|
-
};
|
|
1325
|
-
// Reinitialize the foundation with our overridden adapter
|
|
1326
|
-
this._chipSetFoundation = new deprecated.MDCChipSetFoundation(this._chipSetAdapter);
|
|
1327
|
-
this._updateMdcSelectionClasses();
|
|
1328
1383
|
}
|
|
1329
1384
|
/** The ARIA role applied to the chip listbox. */
|
|
1385
|
+
// TODO: MDC uses `grid` here
|
|
1330
1386
|
get role() {
|
|
1331
1387
|
return this.empty ? null : 'listbox';
|
|
1332
1388
|
}
|
|
@@ -1336,7 +1392,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1336
1392
|
}
|
|
1337
1393
|
set multiple(value) {
|
|
1338
1394
|
this._multiple = coerceBooleanProperty(value);
|
|
1339
|
-
this._updateMdcSelectionClasses();
|
|
1340
1395
|
this._syncListboxProperties();
|
|
1341
1396
|
}
|
|
1342
1397
|
/** The array of selected chips inside the chip listbox. */
|
|
@@ -1355,7 +1410,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1355
1410
|
}
|
|
1356
1411
|
set selectable(value) {
|
|
1357
1412
|
this._selectable = coerceBooleanProperty(value);
|
|
1358
|
-
this._updateMdcSelectionClasses();
|
|
1359
1413
|
this._syncListboxProperties();
|
|
1360
1414
|
}
|
|
1361
1415
|
/**
|
|
@@ -1379,15 +1433,15 @@ class MatChipListbox extends MatChipSet {
|
|
|
1379
1433
|
}
|
|
1380
1434
|
/** Combined stream of all of the child chips' selection change events. */
|
|
1381
1435
|
get chipSelectionChanges() {
|
|
1382
|
-
return
|
|
1436
|
+
return this._getChipStream(chip => chip.selectionChange);
|
|
1383
1437
|
}
|
|
1384
1438
|
/** Combined stream of all of the child chips' focus events. */
|
|
1385
1439
|
get chipFocusChanges() {
|
|
1386
|
-
return
|
|
1440
|
+
return this._getChipStream(chip => chip._onFocus);
|
|
1387
1441
|
}
|
|
1388
1442
|
/** Combined stream of all of the child chips' blur events. */
|
|
1389
1443
|
get chipBlurChanges() {
|
|
1390
|
-
return
|
|
1444
|
+
return this._getChipStream(chip => chip._onBlur);
|
|
1391
1445
|
}
|
|
1392
1446
|
/** The value of the listbox, which is the combined value of the selected chips. */
|
|
1393
1447
|
get value() {
|
|
@@ -1399,7 +1453,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1399
1453
|
}
|
|
1400
1454
|
ngAfterContentInit() {
|
|
1401
1455
|
super.ngAfterContentInit();
|
|
1402
|
-
this._initKeyManager();
|
|
1403
1456
|
this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
|
|
1404
1457
|
// Update listbox selectable/multiple properties on chips
|
|
1405
1458
|
this._syncListboxProperties();
|
|
@@ -1408,6 +1461,12 @@ class MatChipListbox extends MatChipSet {
|
|
|
1408
1461
|
// Check to see if we have a destroyed chip and need to refocus
|
|
1409
1462
|
this._updateFocusForDestroyedChips();
|
|
1410
1463
|
});
|
|
1464
|
+
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
|
|
1465
|
+
this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {
|
|
1466
|
+
if (event.isUserInput) {
|
|
1467
|
+
this._propagateChanges();
|
|
1468
|
+
}
|
|
1469
|
+
});
|
|
1411
1470
|
}
|
|
1412
1471
|
/**
|
|
1413
1472
|
* Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
|
|
@@ -1419,11 +1478,14 @@ class MatChipListbox extends MatChipSet {
|
|
|
1419
1478
|
}
|
|
1420
1479
|
const firstSelectedChip = this._getFirstSelectedChip();
|
|
1421
1480
|
if (firstSelectedChip) {
|
|
1422
|
-
|
|
1423
|
-
this._keyManager.setActiveItem(firstSelectedChipIndex);
|
|
1481
|
+
firstSelectedChip.focus();
|
|
1424
1482
|
}
|
|
1425
1483
|
else if (this._chips.length > 0) {
|
|
1426
|
-
|
|
1484
|
+
// MDC sets the tabindex directly on the DOM node when the user is navigating which means
|
|
1485
|
+
// that we may end up with a `0` value from a previous interaction. We reset it manually
|
|
1486
|
+
// here to ensure that the state is correct.
|
|
1487
|
+
this._chips.forEach(chip => chip.primaryAction._updateTabindex(-1));
|
|
1488
|
+
this._chips.first.primaryAction.focus();
|
|
1427
1489
|
}
|
|
1428
1490
|
}
|
|
1429
1491
|
/**
|
|
@@ -1463,60 +1525,24 @@ class MatChipListbox extends MatChipSet {
|
|
|
1463
1525
|
value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
|
|
1464
1526
|
}
|
|
1465
1527
|
else {
|
|
1466
|
-
|
|
1467
|
-
// Shift focus to the active item. Note that we shouldn't do this in multiple
|
|
1468
|
-
// mode, because we don't know what chip the user interacted with last.
|
|
1469
|
-
if (correspondingChip) {
|
|
1470
|
-
if (isUserInput) {
|
|
1471
|
-
this._keyManager.setActiveItem(correspondingChip);
|
|
1472
|
-
}
|
|
1473
|
-
}
|
|
1474
|
-
}
|
|
1475
|
-
}
|
|
1476
|
-
/** Selects or deselects a chip by id. */
|
|
1477
|
-
_setSelected(index, selected) {
|
|
1478
|
-
const chip = this._chips.toArray()[index];
|
|
1479
|
-
if (chip && chip.selected != selected) {
|
|
1480
|
-
chip.toggleSelected(true);
|
|
1528
|
+
this._selectValue(value, isUserInput);
|
|
1481
1529
|
}
|
|
1482
1530
|
}
|
|
1483
1531
|
/** When blurred, marks the field as touched when focus moved outside the chip listbox. */
|
|
1484
1532
|
_blur() {
|
|
1485
|
-
if (this.disabled) {
|
|
1486
|
-
|
|
1487
|
-
}
|
|
1488
|
-
if (!this.focused) {
|
|
1489
|
-
this._keyManager.setActiveItem(-1);
|
|
1490
|
-
}
|
|
1491
|
-
// Wait to see if focus moves to an indivdual chip.
|
|
1492
|
-
setTimeout(() => {
|
|
1493
|
-
if (!this.focused) {
|
|
1494
|
-
this._propagateChanges();
|
|
1495
|
-
this._markAsTouched();
|
|
1496
|
-
}
|
|
1497
|
-
});
|
|
1498
|
-
}
|
|
1499
|
-
/**
|
|
1500
|
-
* Removes the `tabindex` from the chip listbox and resets it back afterwards, allowing the
|
|
1501
|
-
* user to tab out of it. This prevents the listbox from capturing focus and redirecting
|
|
1502
|
-
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
1503
|
-
*/
|
|
1504
|
-
_allowFocusEscape() {
|
|
1505
|
-
const previousTabIndex = this.tabIndex;
|
|
1506
|
-
if (this.tabIndex !== -1) {
|
|
1507
|
-
this.tabIndex = -1;
|
|
1533
|
+
if (!this.disabled) {
|
|
1534
|
+
// Wait to see if focus moves to an individual chip.
|
|
1508
1535
|
setTimeout(() => {
|
|
1509
|
-
this.
|
|
1510
|
-
|
|
1536
|
+
if (!this.focused) {
|
|
1537
|
+
this._propagateChanges();
|
|
1538
|
+
this._markAsTouched();
|
|
1539
|
+
}
|
|
1511
1540
|
});
|
|
1512
1541
|
}
|
|
1513
1542
|
}
|
|
1514
|
-
/**
|
|
1515
|
-
* Handles custom keyboard shortcuts, and passes other keyboard events to the keyboard manager.
|
|
1516
|
-
*/
|
|
1517
1543
|
_keydown(event) {
|
|
1518
|
-
if (
|
|
1519
|
-
|
|
1544
|
+
if (event.keyCode === TAB) {
|
|
1545
|
+
super._allowFocusEscape();
|
|
1520
1546
|
}
|
|
1521
1547
|
}
|
|
1522
1548
|
/** Marks the field as touched */
|
|
@@ -1525,13 +1551,13 @@ class MatChipListbox extends MatChipSet {
|
|
|
1525
1551
|
this._changeDetectorRef.markForCheck();
|
|
1526
1552
|
}
|
|
1527
1553
|
/** Emits change event to set the model value. */
|
|
1528
|
-
_propagateChanges(
|
|
1554
|
+
_propagateChanges() {
|
|
1529
1555
|
let valueToEmit = null;
|
|
1530
1556
|
if (Array.isArray(this.selected)) {
|
|
1531
1557
|
valueToEmit = this.selected.map(chip => chip.value);
|
|
1532
1558
|
}
|
|
1533
1559
|
else {
|
|
1534
|
-
valueToEmit = this.selected ? this.selected.value :
|
|
1560
|
+
valueToEmit = this.selected ? this.selected.value : undefined;
|
|
1535
1561
|
}
|
|
1536
1562
|
this._value = valueToEmit;
|
|
1537
1563
|
this.change.emit(new MatChipListboxChange(this, valueToEmit));
|
|
@@ -1545,9 +1571,9 @@ class MatChipListbox extends MatChipSet {
|
|
|
1545
1571
|
setTimeout(() => {
|
|
1546
1572
|
// Defer setting the value in order to avoid the "Expression
|
|
1547
1573
|
// has changed after it was checked" errors from Angular.
|
|
1548
|
-
this._chips.forEach(chip => {
|
|
1574
|
+
this._chips.forEach((chip, index) => {
|
|
1549
1575
|
if (chip.selected) {
|
|
1550
|
-
this._chipSetFoundation.
|
|
1576
|
+
this._chipSetFoundation.setChipSelected(index, MDCChipActionType.PRIMARY, true);
|
|
1551
1577
|
}
|
|
1552
1578
|
});
|
|
1553
1579
|
});
|
|
@@ -1590,27 +1616,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1590
1616
|
});
|
|
1591
1617
|
}
|
|
1592
1618
|
}
|
|
1593
|
-
/** Sets the mdc classes for single vs multi selection. */
|
|
1594
|
-
_updateMdcSelectionClasses() {
|
|
1595
|
-
this._setMdcClass('mdc-chip-set--filter', this.selectable && this.multiple);
|
|
1596
|
-
this._setMdcClass('mdc-chip-set--choice', this.selectable && !this.multiple);
|
|
1597
|
-
}
|
|
1598
|
-
/** Initializes the key manager to manage focus. */
|
|
1599
|
-
_initKeyManager() {
|
|
1600
|
-
this._keyManager = new FocusKeyManager(this._chips)
|
|
1601
|
-
.withWrap()
|
|
1602
|
-
.withVerticalOrientation()
|
|
1603
|
-
.withHomeAndEnd()
|
|
1604
|
-
.withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
|
|
1605
|
-
if (this._dir) {
|
|
1606
|
-
this._dir.change
|
|
1607
|
-
.pipe(takeUntil(this._destroyed))
|
|
1608
|
-
.subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
|
|
1609
|
-
}
|
|
1610
|
-
this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
1611
|
-
this._allowFocusEscape();
|
|
1612
|
-
});
|
|
1613
|
-
}
|
|
1614
1619
|
/** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
|
|
1615
1620
|
_getFirstSelectedChip() {
|
|
1616
1621
|
if (Array.isArray(this.selected)) {
|
|
@@ -1620,57 +1625,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1620
1625
|
return this.selected;
|
|
1621
1626
|
}
|
|
1622
1627
|
}
|
|
1623
|
-
/** Unsubscribes from all chip events. */
|
|
1624
|
-
_dropSubscriptions() {
|
|
1625
|
-
super._dropSubscriptions();
|
|
1626
|
-
if (this._chipSelectionSubscription) {
|
|
1627
|
-
this._chipSelectionSubscription.unsubscribe();
|
|
1628
|
-
this._chipSelectionSubscription = null;
|
|
1629
|
-
}
|
|
1630
|
-
if (this._chipBlurSubscription) {
|
|
1631
|
-
this._chipBlurSubscription.unsubscribe();
|
|
1632
|
-
this._chipBlurSubscription = null;
|
|
1633
|
-
}
|
|
1634
|
-
if (this._chipFocusSubscription) {
|
|
1635
|
-
this._chipFocusSubscription.unsubscribe();
|
|
1636
|
-
this._chipFocusSubscription = null;
|
|
1637
|
-
}
|
|
1638
|
-
}
|
|
1639
|
-
/** Subscribes to events on the child chips. */
|
|
1640
|
-
_subscribeToChipEvents() {
|
|
1641
|
-
super._subscribeToChipEvents();
|
|
1642
|
-
this._listenToChipsSelection();
|
|
1643
|
-
this._listenToChipsFocus();
|
|
1644
|
-
this._listenToChipsBlur();
|
|
1645
|
-
}
|
|
1646
|
-
/** Subscribes to chip focus events. */
|
|
1647
|
-
_listenToChipsFocus() {
|
|
1648
|
-
this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
|
|
1649
|
-
let chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1650
|
-
if (this._isValidIndex(chipIndex)) {
|
|
1651
|
-
this._keyManager.updateActiveItem(chipIndex);
|
|
1652
|
-
}
|
|
1653
|
-
});
|
|
1654
|
-
}
|
|
1655
|
-
/** Subscribes to chip blur events. */
|
|
1656
|
-
_listenToChipsBlur() {
|
|
1657
|
-
this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
|
|
1658
|
-
this._blur();
|
|
1659
|
-
});
|
|
1660
|
-
}
|
|
1661
|
-
/** Subscribes to selection changes in the option chips. */
|
|
1662
|
-
_listenToChipsSelection() {
|
|
1663
|
-
this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((chipSelectionChange) => {
|
|
1664
|
-
this._chipSetFoundation.handleChipSelection({
|
|
1665
|
-
chipId: chipSelectionChange.source.id,
|
|
1666
|
-
selected: chipSelectionChange.selected,
|
|
1667
|
-
shouldIgnore: false,
|
|
1668
|
-
});
|
|
1669
|
-
if (chipSelectionChange.isUserInput) {
|
|
1670
|
-
this._propagateChanges();
|
|
1671
|
-
}
|
|
1672
|
-
});
|
|
1673
|
-
}
|
|
1674
1628
|
/**
|
|
1675
1629
|
* If the amount of chips changed, we need to update the
|
|
1676
1630
|
* key manager state and focus the next closest chip.
|
|
@@ -1680,7 +1634,7 @@ class MatChipListbox extends MatChipSet {
|
|
|
1680
1634
|
if (this._lastDestroyedChipIndex != null) {
|
|
1681
1635
|
if (this._chips.length) {
|
|
1682
1636
|
const newChipIndex = Math.min(this._lastDestroyedChipIndex, this._chips.length - 1);
|
|
1683
|
-
this.
|
|
1637
|
+
this._chips.toArray()[newChipIndex].focus();
|
|
1684
1638
|
}
|
|
1685
1639
|
else {
|
|
1686
1640
|
this.focus();
|
|
@@ -1689,12 +1643,20 @@ class MatChipListbox extends MatChipSet {
|
|
|
1689
1643
|
this._lastDestroyedChipIndex = null;
|
|
1690
1644
|
}
|
|
1691
1645
|
}
|
|
1692
|
-
MatChipListbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
1693
|
-
MatChipListbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
1694
|
-
|
|
1646
|
+
MatChipListbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipListbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1647
|
+
MatChipListbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-next.2", 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: `
|
|
1648
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1649
|
+
<ng-content></ng-content>
|
|
1650
|
+
</span>
|
|
1651
|
+
`, 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 });
|
|
1652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipListbox, decorators: [{
|
|
1695
1653
|
type: Component,
|
|
1696
|
-
args: [{ selector: 'mat-chip-listbox', template:
|
|
1697
|
-
|
|
1654
|
+
args: [{ selector: 'mat-chip-listbox', template: `
|
|
1655
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1656
|
+
<ng-content></ng-content>
|
|
1657
|
+
</span>
|
|
1658
|
+
`, inputs: ['tabIndex'], host: {
|
|
1659
|
+
'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',
|
|
1698
1660
|
'[attr.role]': 'role',
|
|
1699
1661
|
'[tabIndex]': 'empty ? -1 : tabIndex',
|
|
1700
1662
|
// TODO: replace this binding with use of AriaDescriber
|
|
@@ -1708,11 +1670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
1708
1670
|
'(focus)': 'focus()',
|
|
1709
1671
|
'(blur)': '_blur()',
|
|
1710
1672
|
'(keydown)': '_keydown($event)',
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Directionality, decorators: [{
|
|
1714
|
-
type: Optional
|
|
1715
|
-
}] }]; }, propDecorators: { multiple: [{
|
|
1673
|
+
}, 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"] }]
|
|
1674
|
+
}], propDecorators: { multiple: [{
|
|
1716
1675
|
type: Input
|
|
1717
1676
|
}], ariaOrientation: [{
|
|
1718
1677
|
type: Input,
|
|
@@ -1736,241 +1695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
1736
1695
|
}]
|
|
1737
1696
|
}] } });
|
|
1738
1697
|
|
|
1739
|
-
/**
|
|
1740
|
-
* @license
|
|
1741
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1742
|
-
*
|
|
1743
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1744
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1745
|
-
*/
|
|
1746
|
-
/** The keys handled by the GridKeyManager keydown method. */
|
|
1747
|
-
const NAVIGATION_KEYS = [DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW];
|
|
1748
|
-
/**
|
|
1749
|
-
* This class manages keyboard events for grids. If you pass it a query list
|
|
1750
|
-
* of GridKeyManagerRow, it will set the active cell correctly when arrow events occur.
|
|
1751
|
-
*
|
|
1752
|
-
* GridKeyManager expects that rows may change dynamically, but the cells for a given row are
|
|
1753
|
-
* static. It also expects that all rows have the same number of cells.
|
|
1754
|
-
*/
|
|
1755
|
-
class GridKeyManager {
|
|
1756
|
-
constructor(_rows) {
|
|
1757
|
-
this._rows = _rows;
|
|
1758
|
-
this._activeRowIndex = -1;
|
|
1759
|
-
this._activeColumnIndex = -1;
|
|
1760
|
-
this._activeRow = null;
|
|
1761
|
-
this._activeCell = null;
|
|
1762
|
-
this._dir = 'ltr';
|
|
1763
|
-
this._homeAndEnd = false;
|
|
1764
|
-
/** Stream that emits whenever the active cell of the grid manager changes. */
|
|
1765
|
-
this.change = new Subject();
|
|
1766
|
-
// We allow for the rows to be an array because, in some cases, the consumer may
|
|
1767
|
-
// not have access to a QueryList of the rows they want to manage (e.g. when the
|
|
1768
|
-
// rows aren't being collected via `ViewChildren` or `ContentChildren`).
|
|
1769
|
-
if (_rows instanceof QueryList) {
|
|
1770
|
-
_rows.changes.subscribe((newRows) => {
|
|
1771
|
-
if (this._activeRow) {
|
|
1772
|
-
const newIndex = newRows.toArray().indexOf(this._activeRow);
|
|
1773
|
-
if (newIndex > -1 && newIndex !== this._activeRowIndex) {
|
|
1774
|
-
this._activeRowIndex = newIndex;
|
|
1775
|
-
}
|
|
1776
|
-
}
|
|
1777
|
-
});
|
|
1778
|
-
}
|
|
1779
|
-
}
|
|
1780
|
-
/**
|
|
1781
|
-
* Configures the directionality of the key manager's horizontal movement.
|
|
1782
|
-
* @param direction Direction which is considered forward movement across a row.
|
|
1783
|
-
*
|
|
1784
|
-
* If withDirectionality is not set, the default is 'ltr'.
|
|
1785
|
-
*/
|
|
1786
|
-
withDirectionality(direction) {
|
|
1787
|
-
this._dir = direction;
|
|
1788
|
-
return this;
|
|
1789
|
-
}
|
|
1790
|
-
setActiveCell(cell) {
|
|
1791
|
-
const previousRowIndex = this._activeRowIndex;
|
|
1792
|
-
const previousColumnIndex = this._activeColumnIndex;
|
|
1793
|
-
this.updateActiveCell(cell);
|
|
1794
|
-
if (this._activeRowIndex !== previousRowIndex ||
|
|
1795
|
-
this._activeColumnIndex !== previousColumnIndex) {
|
|
1796
|
-
this.change.next({ row: this._activeRowIndex, column: this._activeColumnIndex });
|
|
1797
|
-
}
|
|
1798
|
-
}
|
|
1799
|
-
/**
|
|
1800
|
-
* Configures the key manager to activate the first and last items
|
|
1801
|
-
* respectively when the Home or End key is pressed.
|
|
1802
|
-
* @param enabled Whether pressing the Home or End key activates the first/last item.
|
|
1803
|
-
*/
|
|
1804
|
-
withHomeAndEnd(enabled = true) {
|
|
1805
|
-
this._homeAndEnd = enabled;
|
|
1806
|
-
return this;
|
|
1807
|
-
}
|
|
1808
|
-
/**
|
|
1809
|
-
* Sets the active cell depending on the key event passed in.
|
|
1810
|
-
* @param event Keyboard event to be used for determining which element should be active.
|
|
1811
|
-
*/
|
|
1812
|
-
onKeydown(event) {
|
|
1813
|
-
const keyCode = event.keyCode;
|
|
1814
|
-
switch (keyCode) {
|
|
1815
|
-
case DOWN_ARROW:
|
|
1816
|
-
this.setNextRowActive();
|
|
1817
|
-
break;
|
|
1818
|
-
case UP_ARROW:
|
|
1819
|
-
this.setPreviousRowActive();
|
|
1820
|
-
break;
|
|
1821
|
-
case RIGHT_ARROW:
|
|
1822
|
-
this._dir === 'rtl' ? this.setPreviousColumnActive() : this.setNextColumnActive();
|
|
1823
|
-
break;
|
|
1824
|
-
case LEFT_ARROW:
|
|
1825
|
-
this._dir === 'rtl' ? this.setNextColumnActive() : this.setPreviousColumnActive();
|
|
1826
|
-
break;
|
|
1827
|
-
case HOME:
|
|
1828
|
-
if (this._homeAndEnd) {
|
|
1829
|
-
this.setFirstCellActive();
|
|
1830
|
-
break;
|
|
1831
|
-
}
|
|
1832
|
-
else {
|
|
1833
|
-
return;
|
|
1834
|
-
}
|
|
1835
|
-
case END:
|
|
1836
|
-
if (this._homeAndEnd) {
|
|
1837
|
-
this.setLastCellActive();
|
|
1838
|
-
break;
|
|
1839
|
-
}
|
|
1840
|
-
else {
|
|
1841
|
-
return;
|
|
1842
|
-
}
|
|
1843
|
-
default:
|
|
1844
|
-
// Note that we return here, in order to avoid preventing
|
|
1845
|
-
// the default action of non-navigational keys.
|
|
1846
|
-
return;
|
|
1847
|
-
}
|
|
1848
|
-
event.preventDefault();
|
|
1849
|
-
}
|
|
1850
|
-
/** Index of the currently active row. */
|
|
1851
|
-
get activeRowIndex() {
|
|
1852
|
-
return this._activeRowIndex;
|
|
1853
|
-
}
|
|
1854
|
-
/** Index of the currently active column. */
|
|
1855
|
-
get activeColumnIndex() {
|
|
1856
|
-
return this._activeColumnIndex;
|
|
1857
|
-
}
|
|
1858
|
-
/** The active cell. */
|
|
1859
|
-
get activeCell() {
|
|
1860
|
-
return this._activeCell;
|
|
1861
|
-
}
|
|
1862
|
-
/** Sets the active cell to the first cell in the grid. */
|
|
1863
|
-
setFirstCellActive() {
|
|
1864
|
-
this._setActiveCellByIndex(0, 0);
|
|
1865
|
-
}
|
|
1866
|
-
/** Sets the active cell to the last cell in the grid. */
|
|
1867
|
-
setLastCellActive() {
|
|
1868
|
-
const lastRowIndex = this._rows.length - 1;
|
|
1869
|
-
const lastRow = this._getRowsArray()[lastRowIndex];
|
|
1870
|
-
this._setActiveCellByIndex(lastRowIndex, lastRow.cells.length - 1);
|
|
1871
|
-
}
|
|
1872
|
-
/** Sets the active row to the next row in the grid. Active column is unchanged. */
|
|
1873
|
-
setNextRowActive() {
|
|
1874
|
-
this._activeRowIndex < 0 ? this.setFirstCellActive() : this._setActiveCellByDelta(1, 0);
|
|
1875
|
-
}
|
|
1876
|
-
/** Sets the active row to the previous row in the grid. Active column is unchanged. */
|
|
1877
|
-
setPreviousRowActive() {
|
|
1878
|
-
this._setActiveCellByDelta(-1, 0);
|
|
1879
|
-
}
|
|
1880
|
-
/**
|
|
1881
|
-
* Sets the active column to the next column in the grid.
|
|
1882
|
-
* Active row is unchanged, unless we reach the end of a row.
|
|
1883
|
-
*/
|
|
1884
|
-
setNextColumnActive() {
|
|
1885
|
-
this._activeRowIndex < 0 ? this.setFirstCellActive() : this._setActiveCellByDelta(0, 1);
|
|
1886
|
-
}
|
|
1887
|
-
/**
|
|
1888
|
-
* Sets the active column to the previous column in the grid.
|
|
1889
|
-
* Active row is unchanged, unless we reach the end of a row.
|
|
1890
|
-
*/
|
|
1891
|
-
setPreviousColumnActive() {
|
|
1892
|
-
this._setActiveCellByDelta(0, -1);
|
|
1893
|
-
}
|
|
1894
|
-
updateActiveCell(cell) {
|
|
1895
|
-
const rowArray = this._getRowsArray();
|
|
1896
|
-
if (typeof cell === 'object' &&
|
|
1897
|
-
typeof cell.row === 'number' &&
|
|
1898
|
-
typeof cell.column === 'number') {
|
|
1899
|
-
this._activeRowIndex = cell.row;
|
|
1900
|
-
this._activeColumnIndex = cell.column;
|
|
1901
|
-
this._activeRow = rowArray[cell.row] || null;
|
|
1902
|
-
this._activeCell = this._activeRow ? this._activeRow.cells[cell.column] || null : null;
|
|
1903
|
-
}
|
|
1904
|
-
else {
|
|
1905
|
-
rowArray.forEach((row, rowIndex) => {
|
|
1906
|
-
const columnIndex = row.cells.indexOf(cell);
|
|
1907
|
-
if (columnIndex !== -1) {
|
|
1908
|
-
this._activeRowIndex = rowIndex;
|
|
1909
|
-
this._activeColumnIndex = columnIndex;
|
|
1910
|
-
this._activeRow = row;
|
|
1911
|
-
this._activeCell = row.cells[columnIndex];
|
|
1912
|
-
}
|
|
1913
|
-
});
|
|
1914
|
-
}
|
|
1915
|
-
}
|
|
1916
|
-
/**
|
|
1917
|
-
* This method sets the active cell, given the row and columns deltas
|
|
1918
|
-
* between the currently active cell and the new active cell.
|
|
1919
|
-
*/
|
|
1920
|
-
_setActiveCellByDelta(rowDelta, columnDelta) {
|
|
1921
|
-
// If delta puts us past the last cell in a row, move to the first cell of the next row.
|
|
1922
|
-
if (this._activeRow && this._activeColumnIndex + columnDelta >= this._activeRow.cells.length) {
|
|
1923
|
-
this._setActiveCellByIndex(this._activeRowIndex + 1, 0);
|
|
1924
|
-
// If delta puts us prior to the first cell in a row, move to the last cell of the previous row.
|
|
1925
|
-
}
|
|
1926
|
-
else if (this._activeColumnIndex + columnDelta < 0) {
|
|
1927
|
-
const previousRowIndex = this._activeRowIndex - 1;
|
|
1928
|
-
const previousRow = this._getRowsArray()[previousRowIndex];
|
|
1929
|
-
if (previousRow) {
|
|
1930
|
-
this._setActiveCellByIndex(previousRowIndex, previousRow.cells.length - 1);
|
|
1931
|
-
}
|
|
1932
|
-
}
|
|
1933
|
-
else {
|
|
1934
|
-
this._setActiveCellByIndex(this._activeRowIndex + rowDelta, this._activeColumnIndex + columnDelta);
|
|
1935
|
-
}
|
|
1936
|
-
}
|
|
1937
|
-
/**
|
|
1938
|
-
* Sets the active cell to the cell at the indices specified, if they are valid.
|
|
1939
|
-
*/
|
|
1940
|
-
_setActiveCellByIndex(rowIndex, columnIndex) {
|
|
1941
|
-
const rows = this._getRowsArray();
|
|
1942
|
-
const targetRow = rows[rowIndex];
|
|
1943
|
-
if (!targetRow || !targetRow.cells[columnIndex]) {
|
|
1944
|
-
return;
|
|
1945
|
-
}
|
|
1946
|
-
this.setActiveCell({ row: rowIndex, column: columnIndex });
|
|
1947
|
-
}
|
|
1948
|
-
/** Returns the rows as an array. */
|
|
1949
|
-
_getRowsArray() {
|
|
1950
|
-
return this._rows instanceof QueryList ? this._rows.toArray() : this._rows;
|
|
1951
|
-
}
|
|
1952
|
-
}
|
|
1953
|
-
|
|
1954
|
-
/**
|
|
1955
|
-
* @license
|
|
1956
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1957
|
-
*
|
|
1958
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1959
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1960
|
-
*/
|
|
1961
|
-
/**
|
|
1962
|
-
* A version of GridKeyManager where the cells are HTMLElements, and focus()
|
|
1963
|
-
* is called on a cell when it becomes active.
|
|
1964
|
-
*/
|
|
1965
|
-
class GridFocusKeyManager extends GridKeyManager {
|
|
1966
|
-
setActiveCell(cell) {
|
|
1967
|
-
super.setActiveCell(cell);
|
|
1968
|
-
if (this.activeCell) {
|
|
1969
|
-
this.activeCell.focus();
|
|
1970
|
-
}
|
|
1971
|
-
}
|
|
1972
|
-
}
|
|
1973
|
-
|
|
1974
1698
|
/**
|
|
1975
1699
|
* @license
|
|
1976
1700
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -1994,10 +1718,10 @@ class MatChipGridChange {
|
|
|
1994
1718
|
* @docs-private
|
|
1995
1719
|
*/
|
|
1996
1720
|
class MatChipGridBase extends MatChipSet {
|
|
1997
|
-
constructor(
|
|
1721
|
+
constructor(liveAnnouncer, document, elementRef, changeDetectorRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup,
|
|
1998
1722
|
/** @docs-private */
|
|
1999
1723
|
ngControl) {
|
|
2000
|
-
super(
|
|
1724
|
+
super(liveAnnouncer, document, elementRef, changeDetectorRef);
|
|
2001
1725
|
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
|
|
2002
1726
|
this._parentForm = _parentForm;
|
|
2003
1727
|
this._parentFormGroup = _parentFormGroup;
|
|
@@ -2010,8 +1734,8 @@ const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase);
|
|
|
2010
1734
|
* the matChipInputFor directive.
|
|
2011
1735
|
*/
|
|
2012
1736
|
class MatChipGrid extends _MatChipGridMixinBase {
|
|
2013
|
-
constructor(
|
|
2014
|
-
super(
|
|
1737
|
+
constructor(liveAnnouncer, document, elementRef, changeDetectorRef, parentForm, parentFormGroup, defaultErrorStateMatcher, ngControl) {
|
|
1738
|
+
super(liveAnnouncer, document, elementRef, changeDetectorRef, defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
|
|
2015
1739
|
/**
|
|
2016
1740
|
* Implemented as part of MatFormFieldControl.
|
|
2017
1741
|
* @docs-private
|
|
@@ -2114,20 +1838,23 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2114
1838
|
}
|
|
2115
1839
|
/** Combined stream of all of the child chips' blur events. */
|
|
2116
1840
|
get chipBlurChanges() {
|
|
2117
|
-
return
|
|
1841
|
+
return this._getChipStream(chip => chip._onBlur);
|
|
2118
1842
|
}
|
|
2119
1843
|
/** Combined stream of all of the child chips' focus events. */
|
|
2120
1844
|
get chipFocusChanges() {
|
|
2121
|
-
return
|
|
1845
|
+
return this._getChipStream(chip => chip._onFocus);
|
|
2122
1846
|
}
|
|
2123
1847
|
ngAfterContentInit() {
|
|
2124
1848
|
super.ngAfterContentInit();
|
|
2125
|
-
this._initKeyManager();
|
|
2126
1849
|
this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
|
|
2127
1850
|
// Check to see if we have a destroyed chip and need to refocus
|
|
2128
1851
|
this._updateFocusForDestroyedChips();
|
|
2129
1852
|
this.stateChanges.next();
|
|
2130
1853
|
});
|
|
1854
|
+
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
1855
|
+
this._blur();
|
|
1856
|
+
this.stateChanges.next();
|
|
1857
|
+
});
|
|
2131
1858
|
}
|
|
2132
1859
|
ngAfterViewInit() {
|
|
2133
1860
|
super.ngAfterViewInit();
|
|
@@ -2150,14 +1877,13 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2150
1877
|
/** Associates an HTML input element with this chip grid. */
|
|
2151
1878
|
registerInput(inputElement) {
|
|
2152
1879
|
this._chipInput = inputElement;
|
|
2153
|
-
this._setMdcClass('mdc-chip-set--input', true);
|
|
2154
1880
|
}
|
|
2155
1881
|
/**
|
|
2156
1882
|
* Implemented as part of MatFormFieldControl.
|
|
2157
1883
|
* @docs-private
|
|
2158
1884
|
*/
|
|
2159
1885
|
onContainerClick(event) {
|
|
2160
|
-
if (!this.
|
|
1886
|
+
if (!this.disabled && !this._originatesFromChip(event)) {
|
|
2161
1887
|
this.focus();
|
|
2162
1888
|
}
|
|
2163
1889
|
}
|
|
@@ -2170,7 +1896,11 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2170
1896
|
return;
|
|
2171
1897
|
}
|
|
2172
1898
|
if (this._chips.length > 0) {
|
|
2173
|
-
|
|
1899
|
+
// MDC sets the tabindex directly on the DOM node when the user is navigating which means
|
|
1900
|
+
// that we may end up with a `0` value from a previous interaction. We reset it manually
|
|
1901
|
+
// here to ensure that the state is correct.
|
|
1902
|
+
this._chips.forEach(chip => chip.primaryAction._updateTabindex(-1));
|
|
1903
|
+
this._chips.first.focus();
|
|
2174
1904
|
}
|
|
2175
1905
|
else {
|
|
2176
1906
|
this._focusInput();
|
|
@@ -2225,7 +1955,6 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2225
1955
|
// Timeout is needed to wait for the focus() event trigger on chip input.
|
|
2226
1956
|
setTimeout(() => {
|
|
2227
1957
|
if (!this.focused) {
|
|
2228
|
-
this._keyManager.setActiveCell({ row: -1, column: -1 });
|
|
2229
1958
|
this._propagateChanges();
|
|
2230
1959
|
this._markAsTouched();
|
|
2231
1960
|
}
|
|
@@ -2237,78 +1966,21 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2237
1966
|
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
2238
1967
|
*/
|
|
2239
1968
|
_allowFocusEscape() {
|
|
2240
|
-
if (this._chipInput.focused) {
|
|
2241
|
-
|
|
2242
|
-
}
|
|
2243
|
-
const previousTabIndex = this.tabIndex;
|
|
2244
|
-
if (this.tabIndex !== -1) {
|
|
2245
|
-
this.tabIndex = -1;
|
|
2246
|
-
setTimeout(() => {
|
|
2247
|
-
this.tabIndex = previousTabIndex;
|
|
2248
|
-
this._changeDetectorRef.markForCheck();
|
|
2249
|
-
});
|
|
1969
|
+
if (!this._chipInput.focused) {
|
|
1970
|
+
super._allowFocusEscape();
|
|
2250
1971
|
}
|
|
2251
1972
|
}
|
|
2252
1973
|
/** Handles custom keyboard events. */
|
|
2253
1974
|
_keydown(event) {
|
|
2254
|
-
|
|
2255
|
-
const keyCode = event.keyCode;
|
|
2256
|
-
const manager = this._keyManager;
|
|
2257
|
-
if (keyCode === TAB && target.id !== this._chipInput.id) {
|
|
1975
|
+
if (event.keyCode === TAB && event.target.id !== this._chipInput.id) {
|
|
2258
1976
|
this._allowFocusEscape();
|
|
2259
1977
|
}
|
|
2260
|
-
else if (this._originatesFromEditingChip(event)) {
|
|
2261
|
-
// No-op, let the editing chip handle all keyboard events except for Tab.
|
|
2262
|
-
}
|
|
2263
|
-
else if (this._originatesFromChip(event)) {
|
|
2264
|
-
manager.onKeydown(event);
|
|
2265
|
-
}
|
|
2266
1978
|
this.stateChanges.next();
|
|
2267
1979
|
}
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
this._chipBlurSubscription.unsubscribe();
|
|
2273
|
-
this._chipBlurSubscription = null;
|
|
2274
|
-
}
|
|
2275
|
-
if (this._chipFocusSubscription) {
|
|
2276
|
-
this._chipFocusSubscription.unsubscribe();
|
|
2277
|
-
this._chipFocusSubscription = null;
|
|
2278
|
-
}
|
|
2279
|
-
}
|
|
2280
|
-
/** Subscribes to events on the child chips. */
|
|
2281
|
-
_subscribeToChipEvents() {
|
|
2282
|
-
super._subscribeToChipEvents();
|
|
2283
|
-
this._listenToChipsFocus();
|
|
2284
|
-
this._listenToChipsBlur();
|
|
2285
|
-
}
|
|
2286
|
-
/** Initializes the key manager to manage focus. */
|
|
2287
|
-
_initKeyManager() {
|
|
2288
|
-
this._keyManager = new GridFocusKeyManager(this._chips)
|
|
2289
|
-
.withHomeAndEnd()
|
|
2290
|
-
.withDirectionality(this._dir ? this._dir.value : 'ltr');
|
|
2291
|
-
if (this._dir) {
|
|
2292
|
-
this._dir.change
|
|
2293
|
-
.pipe(takeUntil(this._destroyed))
|
|
2294
|
-
.subscribe(dir => this._keyManager.withDirectionality(dir));
|
|
2295
|
-
}
|
|
2296
|
-
}
|
|
2297
|
-
/** Subscribes to chip focus events. */
|
|
2298
|
-
_listenToChipsFocus() {
|
|
2299
|
-
this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
|
|
2300
|
-
let chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
2301
|
-
if (this._isValidIndex(chipIndex)) {
|
|
2302
|
-
this._keyManager.updateActiveCell({ row: chipIndex, column: 0 });
|
|
2303
|
-
}
|
|
2304
|
-
});
|
|
2305
|
-
}
|
|
2306
|
-
/** Subscribes to chip blur events. */
|
|
2307
|
-
_listenToChipsBlur() {
|
|
2308
|
-
this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
|
|
2309
|
-
this._blur();
|
|
2310
|
-
this.stateChanges.next();
|
|
2311
|
-
});
|
|
1980
|
+
_focusLastChip() {
|
|
1981
|
+
if (this._chips.length) {
|
|
1982
|
+
this._chips.last.primaryAction.focus();
|
|
1983
|
+
}
|
|
2312
1984
|
}
|
|
2313
1985
|
/** Emits change event to set the model value. */
|
|
2314
1986
|
_propagateChanges() {
|
|
@@ -2333,10 +2005,7 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2333
2005
|
if (this._lastDestroyedChipIndex != null) {
|
|
2334
2006
|
if (this._chips.length) {
|
|
2335
2007
|
const newChipIndex = Math.min(this._lastDestroyedChipIndex, this._chips.length - 1);
|
|
2336
|
-
this.
|
|
2337
|
-
row: newChipIndex,
|
|
2338
|
-
column: Math.max(this._keyManager.activeColumnIndex, 0),
|
|
2339
|
-
});
|
|
2008
|
+
this._chips.toArray()[newChipIndex].focus();
|
|
2340
2009
|
}
|
|
2341
2010
|
else {
|
|
2342
2011
|
this.focus();
|
|
@@ -2349,12 +2018,20 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2349
2018
|
this._chipInput.focus();
|
|
2350
2019
|
}
|
|
2351
2020
|
}
|
|
2352
|
-
MatChipGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
2353
|
-
MatChipGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
2354
|
-
|
|
2021
|
+
MatChipGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
2022
|
+
MatChipGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-next.2", 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: `
|
|
2023
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
2024
|
+
<ng-content></ng-content>
|
|
2025
|
+
</span>
|
|
2026
|
+
`, 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 });
|
|
2027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipGrid, decorators: [{
|
|
2355
2028
|
type: Component,
|
|
2356
|
-
args: [{ selector: 'mat-chip-grid', template:
|
|
2357
|
-
|
|
2029
|
+
args: [{ selector: 'mat-chip-grid', template: `
|
|
2030
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
2031
|
+
<ng-content></ng-content>
|
|
2032
|
+
</span>
|
|
2033
|
+
`, inputs: ['tabIndex'], host: {
|
|
2034
|
+
'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set',
|
|
2358
2035
|
'[attr.role]': 'role',
|
|
2359
2036
|
'[tabIndex]': '_chips && _chips.length === 0 ? -1 : tabIndex',
|
|
2360
2037
|
// TODO: replace this binding with use of AriaDescriber
|
|
@@ -2367,11 +2044,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
2367
2044
|
'(focus)': 'focus()',
|
|
2368
2045
|
'(blur)': '_blur()',
|
|
2369
2046
|
'(keydown)': '_keydown($event)',
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
}] }, { type: i2$1.NgForm, decorators: [{
|
|
2047
|
+
}, 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"] }]
|
|
2048
|
+
}], ctorParameters: function () { return [{ type: i1.LiveAnnouncer }, { type: undefined, decorators: [{
|
|
2049
|
+
type: Inject,
|
|
2050
|
+
args: [DOCUMENT]
|
|
2051
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm, decorators: [{
|
|
2375
2052
|
type: Optional
|
|
2376
2053
|
}] }, { type: i2$1.FormGroupDirective, decorators: [{
|
|
2377
2054
|
type: Optional
|
|
@@ -2489,18 +2166,11 @@ class MatChipInput {
|
|
|
2489
2166
|
/** Utility method to make host definition/tests more clear. */
|
|
2490
2167
|
_keydown(event) {
|
|
2491
2168
|
if (event) {
|
|
2492
|
-
// Allow the user's focus to escape when they're tabbing forward. Note that we don't
|
|
2493
|
-
// want to do this when going backwards, because focus should go back to the first chip.
|
|
2494
|
-
if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
|
|
2495
|
-
this._chipGrid._allowFocusEscape();
|
|
2496
|
-
}
|
|
2497
2169
|
// To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
|
|
2498
2170
|
// We focus the last chip on backspace only after the user has released the backspace button,
|
|
2499
2171
|
// And the input is empty (see behaviour in _keyup)
|
|
2500
2172
|
if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
|
|
2501
|
-
|
|
2502
|
-
this._chipGrid._keyManager.setLastCellActive();
|
|
2503
|
-
}
|
|
2173
|
+
this._chipGrid._focusLastChip();
|
|
2504
2174
|
event.preventDefault();
|
|
2505
2175
|
return;
|
|
2506
2176
|
}
|
|
@@ -2569,9 +2239,9 @@ class MatChipInput {
|
|
|
2569
2239
|
return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
|
|
2570
2240
|
}
|
|
2571
2241
|
}
|
|
2572
|
-
MatChipInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
2573
|
-
MatChipInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
2574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
2242
|
+
MatChipInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipInput, deps: [{ token: i0.ElementRef }, { token: MAT_CHIPS_DEFAULT_OPTIONS }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2243
|
+
MatChipInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-next.2", 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 });
|
|
2244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipInput, decorators: [{
|
|
2575
2245
|
type: Directive,
|
|
2576
2246
|
args: [{
|
|
2577
2247
|
selector: 'input[matChipInputFor]',
|
|
@@ -2632,7 +2302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
2632
2302
|
const CHIP_DECLARATIONS = [
|
|
2633
2303
|
MatChip,
|
|
2634
2304
|
MatChipAvatar,
|
|
2635
|
-
MatChipCssInternalOnly,
|
|
2636
2305
|
MatChipEditInput,
|
|
2637
2306
|
MatChipGrid,
|
|
2638
2307
|
MatChipInput,
|
|
@@ -2645,10 +2314,9 @@ const CHIP_DECLARATIONS = [
|
|
|
2645
2314
|
];
|
|
2646
2315
|
class MatChipsModule {
|
|
2647
2316
|
}
|
|
2648
|
-
MatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
2649
|
-
MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
2317
|
+
MatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2318
|
+
MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipsModule, declarations: [MatChipAction, MatChip,
|
|
2650
2319
|
MatChipAvatar,
|
|
2651
|
-
MatChipCssInternalOnly,
|
|
2652
2320
|
MatChipEditInput,
|
|
2653
2321
|
MatChipGrid,
|
|
2654
2322
|
MatChipInput,
|
|
@@ -2659,7 +2327,6 @@ MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2659
2327
|
MatChipSet,
|
|
2660
2328
|
MatChipTrailingIcon], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatCommonModule, MatChip,
|
|
2661
2329
|
MatChipAvatar,
|
|
2662
|
-
MatChipCssInternalOnly,
|
|
2663
2330
|
MatChipEditInput,
|
|
2664
2331
|
MatChipGrid,
|
|
2665
2332
|
MatChipInput,
|
|
@@ -2669,7 +2336,7 @@ MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2669
2336
|
MatChipRow,
|
|
2670
2337
|
MatChipSet,
|
|
2671
2338
|
MatChipTrailingIcon] });
|
|
2672
|
-
MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
2339
|
+
MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipsModule, providers: [
|
|
2673
2340
|
ErrorStateMatcher,
|
|
2674
2341
|
{
|
|
2675
2342
|
provide: MAT_CHIPS_DEFAULT_OPTIONS,
|
|
@@ -2678,12 +2345,12 @@ MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
2678
2345
|
},
|
|
2679
2346
|
},
|
|
2680
2347
|
], imports: [[MatCommonModule, CommonModule, MatRippleModule], MatCommonModule] });
|
|
2681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
2348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-next.2", ngImport: i0, type: MatChipsModule, decorators: [{
|
|
2682
2349
|
type: NgModule,
|
|
2683
2350
|
args: [{
|
|
2684
2351
|
imports: [MatCommonModule, CommonModule, MatRippleModule],
|
|
2685
2352
|
exports: [MatCommonModule, CHIP_DECLARATIONS],
|
|
2686
|
-
declarations: CHIP_DECLARATIONS,
|
|
2353
|
+
declarations: [MatChipAction, CHIP_DECLARATIONS],
|
|
2687
2354
|
providers: [
|
|
2688
2355
|
ErrorStateMatcher,
|
|
2689
2356
|
{
|
|
@@ -2724,5 +2391,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
2724
2391
|
* Generated bundle index. Do not edit.
|
|
2725
2392
|
*/
|
|
2726
2393
|
|
|
2727
|
-
export { MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar,
|
|
2394
|
+
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 };
|
|
2728
2395
|
//# sourceMappingURL=mdc-chips.mjs.map
|