@angular/material-experimental 13.1.3 → 13.2.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 +9 -9
- package/esm2020/mdc-button/button.mjs +9 -9
- package/esm2020/mdc-button/fab.mjs +17 -17
- package/esm2020/mdc-button/icon-button.mjs +11 -13
- 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 +9 -16
- package/esm2020/mdc-checkbox/module.mjs +6 -7
- 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 +49 -99
- 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 +5 -5
- 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 +21 -5
- package/esm2020/mdc-form-field/module.mjs +5 -5
- package/esm2020/mdc-input/input.mjs +4 -4
- package/esm2020/mdc-input/module.mjs +5 -5
- package/esm2020/mdc-list/action-list.mjs +5 -5
- package/esm2020/mdc-list/interactive-list-base.mjs +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 +8 -8
- 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 +5 -5
- package/esm2020/mdc-snack-bar/simple-snack-bar.mjs +4 -4
- 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 +4 -4
- package/esm2020/mdc-table/cell.mjs +22 -22
- package/esm2020/mdc-table/module.mjs +5 -5
- package/esm2020/mdc-table/row.mjs +22 -22
- package/esm2020/mdc-table/table.mjs +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 +48 -11
- 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 +46 -48
- 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 +13 -21
- 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 +752 -1062
- package/fesm2015/mdc-chips.mjs.map +1 -1
- package/fesm2015/mdc-core.mjs +12 -12
- 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 +50 -32
- package/fesm2015/mdc-form-field.mjs.map +1 -1
- package/fesm2015/mdc-input.mjs +7 -7
- package/fesm2015/mdc-input.mjs.map +1 -1
- package/fesm2015/mdc-list/testing.mjs +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 +11 -11
- 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 +22 -22
- 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 +86 -45
- 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 +46 -48
- 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 +13 -21
- 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 +732 -1067
- package/fesm2020/mdc-chips.mjs.map +1 -1
- package/fesm2020/mdc-core.mjs +12 -12
- 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 +48 -32
- package/fesm2020/mdc-form-field.mjs.map +1 -1
- package/fesm2020/mdc-input.mjs +7 -7
- package/fesm2020/mdc-input.mjs.map +1 -1
- package/fesm2020/mdc-list/testing.mjs +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 +11 -11
- 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 +22 -22
- 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 +86 -45
- 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.scss +28 -15
- package/mdc-button/_button-theme-private.scss +35 -28
- package/mdc-button/_button-theme.scss +115 -80
- package/mdc-button/_fab-theme.scss +31 -37
- package/mdc-button/_icon-button-theme.scss +15 -22
- package/mdc-button/button-base.d.ts +2 -2
- package/mdc-button/icon-button.d.ts +2 -2
- package/mdc-checkbox/_checkbox-theme.scss +4 -11
- package/mdc-checkbox/checkbox.d.ts +0 -6
- package/mdc-checkbox/module.d.ts +2 -3
- 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 -24
- 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-theme.scss +3 -3
- package/mdc-core/public-api.d.ts +1 -1
- package/mdc-form-field/_form-field-subscript.scss +11 -0
- package/mdc-form-field/form-field.d.ts +12 -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-radio/_radio-theme.scss +0 -6
- package/mdc-tabs/_tabs-common.scss +8 -1
- package/mdc-tabs/_tabs-theme.scss +8 -55
- 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/fesm2015/mdc-chips.mjs
CHANGED
|
@@ -1,22 +1,168 @@
|
|
|
1
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
2
2
|
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { Directive, Inject, Input, InjectionToken, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Attribute, Output, ContentChild, ViewChild, ContentChildren, forwardRef, Self, NgModule } from '@angular/core';
|
|
5
|
+
import * as i3$1 from '@angular/common';
|
|
6
|
+
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
5
7
|
import * as i3 from '@angular/material-experimental/mdc-core';
|
|
6
8
|
import { mixinTabIndex, mixinDisabled, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, mixinErrorState, MatCommonModule, MatRippleModule, ErrorStateMatcher } from '@angular/material-experimental/mdc-core';
|
|
7
|
-
import {
|
|
8
|
-
import { SPACE, ENTER, hasModifierKey, BACKSPACE, DELETE, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, END, HOME, TAB } from '@angular/cdk/keycodes';
|
|
9
|
+
import { MDCChipPrimaryActionFoundation, MDCChipActionType, MDCChipTrailingActionFoundation, MDCChipFoundation, MDCChipActionEvents, MDCChipActionInteractionTrigger, MDCChipCssClasses, MDCChipSetFoundation, MDCChipEvents } from '@material/chips';
|
|
9
10
|
import { Subject, merge } from 'rxjs';
|
|
10
|
-
import
|
|
11
|
-
import * as
|
|
12
|
-
import
|
|
13
|
-
import {
|
|
14
|
-
import { FocusKeyManager } from '@angular/cdk/a11y';
|
|
11
|
+
import * as i1 from '@angular/cdk/a11y';
|
|
12
|
+
import * as i2 from '@angular/cdk/bidi';
|
|
13
|
+
import { take, startWith, takeUntil, switchMap } from 'rxjs/operators';
|
|
14
|
+
import { BACKSPACE, DELETE, ENTER, TAB, hasModifierKey } from '@angular/cdk/keycodes';
|
|
15
15
|
import * as i2$1 from '@angular/forms';
|
|
16
16
|
import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
|
|
17
17
|
import * as i1$1 from '@angular/material-experimental/mdc-form-field';
|
|
18
18
|
import { MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material-experimental/mdc-form-field';
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* @license
|
|
22
|
+
* Copyright Google LLC All Rights Reserved.
|
|
23
|
+
*
|
|
24
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
25
|
+
* found in the LICENSE file at https://angular.io/license
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Emits a custom event from an element.
|
|
29
|
+
* @param element Element from which to emit the event.
|
|
30
|
+
* @param _document Document that the element is placed in.
|
|
31
|
+
* @param eventName Name of the event.
|
|
32
|
+
* @param data Data attached to the event.
|
|
33
|
+
* @param shouldBubble Whether the event should bubble.
|
|
34
|
+
*/
|
|
35
|
+
function emitCustomEvent(element, _document, eventName, data, shouldBubble) {
|
|
36
|
+
let event;
|
|
37
|
+
if (typeof CustomEvent === 'function') {
|
|
38
|
+
event = new CustomEvent(eventName, { bubbles: shouldBubble, detail: data });
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
event = _document.createEvent('CustomEvent');
|
|
42
|
+
event.initCustomEvent(eventName, shouldBubble, false, data);
|
|
43
|
+
}
|
|
44
|
+
element.dispatchEvent(event);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* @license
|
|
49
|
+
* Copyright Google LLC All Rights Reserved.
|
|
50
|
+
*
|
|
51
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
52
|
+
* found in the LICENSE file at https://angular.io/license
|
|
53
|
+
*/
|
|
54
|
+
const _MatChipActionMixinBase = mixinTabIndex(mixinDisabled(class {
|
|
55
|
+
}), -1);
|
|
56
|
+
/**
|
|
57
|
+
* Interactive element within a chip.
|
|
58
|
+
* @docs-private
|
|
59
|
+
*/
|
|
60
|
+
class MatChipAction extends _MatChipActionMixinBase {
|
|
61
|
+
constructor(_elementRef, _document, _changeDetectorRef) {
|
|
62
|
+
super();
|
|
63
|
+
this._elementRef = _elementRef;
|
|
64
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
65
|
+
this._adapter = {
|
|
66
|
+
focus: () => this.focus(),
|
|
67
|
+
getAttribute: (name) => this._elementRef.nativeElement.getAttribute(name),
|
|
68
|
+
setAttribute: (name, value) => {
|
|
69
|
+
// MDC tries to update the tabindex directly in the DOM when navigating using the keyboard
|
|
70
|
+
// which overrides our own handling. If we detect such a case, assign it to the same property
|
|
71
|
+
// as the Angular binding in order to maintain consistency.
|
|
72
|
+
if (name === 'tabindex') {
|
|
73
|
+
this._updateTabindex(parseInt(value));
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
this._elementRef.nativeElement.setAttribute(name, value);
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
removeAttribute: (name) => {
|
|
80
|
+
if (name !== 'tabindex') {
|
|
81
|
+
this._elementRef.nativeElement.removeAttribute(name);
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
getElementID: () => this._elementRef.nativeElement.id,
|
|
85
|
+
emitEvent: (eventName, data) => {
|
|
86
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, data, true);
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
/** Whether the action is interactive. */
|
|
90
|
+
this.isInteractive = true;
|
|
91
|
+
this._foundation = this._createFoundation(this._adapter);
|
|
92
|
+
if (_elementRef.nativeElement.nodeName === 'BUTTON') {
|
|
93
|
+
_elementRef.nativeElement.setAttribute('type', 'button');
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
_handleClick(_event) {
|
|
97
|
+
// Usually these events can't happen while the chip is disabled since the browser won't
|
|
98
|
+
// allow them which is what MDC seems to rely on, however the event can be faked in tests.
|
|
99
|
+
if (!this.disabled && this.isInteractive) {
|
|
100
|
+
this._foundation.handleClick();
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
_handleKeydown(event) {
|
|
104
|
+
// Usually these events can't happen while the chip is disabled since the browser won't
|
|
105
|
+
// allow them which is what MDC seems to rely on, however the event can be faked in tests.
|
|
106
|
+
if (!this.disabled && this.isInteractive) {
|
|
107
|
+
this._foundation.handleKeydown(event);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
_createFoundation(adapter) {
|
|
111
|
+
return new MDCChipPrimaryActionFoundation(adapter);
|
|
112
|
+
}
|
|
113
|
+
ngAfterViewInit() {
|
|
114
|
+
this._foundation.init();
|
|
115
|
+
this._foundation.setDisabled(this.disabled);
|
|
116
|
+
}
|
|
117
|
+
ngOnChanges(changes) {
|
|
118
|
+
if (changes['disabled']) {
|
|
119
|
+
this._foundation.setDisabled(this.disabled);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
ngOnDestroy() {
|
|
123
|
+
this._foundation.destroy();
|
|
124
|
+
}
|
|
125
|
+
focus() {
|
|
126
|
+
this._elementRef.nativeElement.focus();
|
|
127
|
+
}
|
|
128
|
+
_getFoundation() {
|
|
129
|
+
return this._foundation;
|
|
130
|
+
}
|
|
131
|
+
_updateTabindex(value) {
|
|
132
|
+
this.tabIndex = value;
|
|
133
|
+
this._changeDetectorRef.markForCheck();
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
MatChipAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", 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-rc.1", 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-rc.1", ngImport: i0, type: MatChipAction, decorators: [{
|
|
139
|
+
type: Directive,
|
|
140
|
+
args: [{
|
|
141
|
+
selector: '[matChipAction]',
|
|
142
|
+
inputs: ['disabled', 'tabIndex'],
|
|
143
|
+
host: {
|
|
144
|
+
'class': 'mdc-evolution-chip__action mat-mdc-chip-action',
|
|
145
|
+
'[class.mdc-evolution-chip__action--primary]': `_getFoundation().actionType() === ${MDCChipActionType.PRIMARY}`,
|
|
146
|
+
// Note that while our actions are interactive, we have to add the `--presentational` class,
|
|
147
|
+
// in order to avoid some super-specific `:hover` styles from MDC.
|
|
148
|
+
'[class.mdc-evolution-chip__action--presentational]': `_getFoundation().actionType() === ${MDCChipActionType.PRIMARY}`,
|
|
149
|
+
'[class.mdc-evolution-chip__action--trailing]': `_getFoundation().actionType() === ${MDCChipActionType.TRAILING}`,
|
|
150
|
+
'[attr.tabindex]': '(disabled || !isInteractive) ? null : tabIndex',
|
|
151
|
+
'[attr.disabled]': "disabled ? '' : null",
|
|
152
|
+
'[attr.aria-disabled]': 'disabled',
|
|
153
|
+
'(click)': '_handleClick($event)',
|
|
154
|
+
'(keydown)': '_handleKeydown($event)',
|
|
155
|
+
},
|
|
156
|
+
}]
|
|
157
|
+
}], ctorParameters: function () {
|
|
158
|
+
return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
159
|
+
type: Inject,
|
|
160
|
+
args: [DOCUMENT]
|
|
161
|
+
}] }, { type: i0.ChangeDetectorRef }];
|
|
162
|
+
}, propDecorators: { isInteractive: [{
|
|
163
|
+
type: Input
|
|
164
|
+
}] } });
|
|
165
|
+
|
|
20
166
|
/**
|
|
21
167
|
* @license
|
|
22
168
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -35,29 +181,20 @@ const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
|
|
|
35
181
|
* @docs-private
|
|
36
182
|
*/
|
|
37
183
|
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
184
|
}
|
|
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.
|
|
185
|
+
MatChipAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
186
|
+
MatChipAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]", host: { attributes: { "role": "img" }, classAttribute: "mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary" }, providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }], ngImport: i0 });
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipAvatar, decorators: [{
|
|
51
188
|
type: Directive,
|
|
52
189
|
args: [{
|
|
53
190
|
selector: 'mat-chip-avatar, [matChipAvatar]',
|
|
54
191
|
host: {
|
|
55
|
-
'class': 'mat-mdc-chip-avatar mdc-chip__icon mdc-chip__icon--
|
|
192
|
+
'class': 'mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
|
|
56
193
|
'role': 'img',
|
|
57
194
|
},
|
|
58
195
|
providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }],
|
|
59
196
|
}]
|
|
60
|
-
}]
|
|
197
|
+
}] });
|
|
61
198
|
/**
|
|
62
199
|
* Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
|
|
63
200
|
* alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
|
|
@@ -68,79 +205,38 @@ const MAT_CHIP_TRAILING_ICON = new InjectionToken('MatChipTrailingIcon');
|
|
|
68
205
|
* Directive to add CSS classes to and configure attributes for chip trailing icon.
|
|
69
206
|
* @docs-private
|
|
70
207
|
*/
|
|
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);
|
|
208
|
+
class MatChipTrailingIcon extends MatChipAction {
|
|
209
|
+
constructor() {
|
|
210
|
+
super(...arguments);
|
|
211
|
+
/**
|
|
212
|
+
* MDC considers all trailing actions as a remove icon,
|
|
213
|
+
* but we support non-interactive trailing icons.
|
|
214
|
+
*/
|
|
215
|
+
this.isInteractive = false;
|
|
109
216
|
}
|
|
110
|
-
|
|
111
|
-
return
|
|
217
|
+
_createFoundation(adapter) {
|
|
218
|
+
return new MDCChipTrailingActionFoundation(adapter);
|
|
112
219
|
}
|
|
113
220
|
}
|
|
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.
|
|
221
|
+
MatChipTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipTrailingIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
222
|
+
MatChipTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing" }, providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }], usesInheritance: true, ngImport: i0 });
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipTrailingIcon, decorators: [{
|
|
117
224
|
type: Directive,
|
|
118
225
|
args: [{
|
|
119
226
|
selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
|
|
120
227
|
host: {
|
|
121
|
-
'class': 'mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
|
|
122
|
-
'tabindex': '-1',
|
|
228
|
+
'class': 'mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
|
|
123
229
|
'aria-hidden': 'true',
|
|
124
230
|
},
|
|
125
231
|
providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }],
|
|
126
232
|
}]
|
|
127
|
-
}]
|
|
233
|
+
}] });
|
|
128
234
|
/**
|
|
129
235
|
* Injection token that can be used to reference instances of `MatChipRemove`. It serves as
|
|
130
236
|
* alternative token to the actual `MatChipRemove` class which could cause unnecessary
|
|
131
237
|
* retention of the class and its directive metadata.
|
|
132
238
|
*/
|
|
133
239
|
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
240
|
/**
|
|
145
241
|
* Directive to remove the parent chip when the trailing icon is clicked or
|
|
146
242
|
* when the ENTER key is pressed on it.
|
|
@@ -156,65 +252,38 @@ const _MatChipRemoveMixinBase = mixinTabIndex(mixinDisabled(MatChipRemoveBase),
|
|
|
156
252
|
* </mat-chip>
|
|
157
253
|
* ```
|
|
158
254
|
*/
|
|
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
|
-
}
|
|
255
|
+
class MatChipRemove extends MatChipAction {
|
|
256
|
+
_createFoundation(adapter) {
|
|
257
|
+
return new MDCChipTrailingActionFoundation(adapter);
|
|
170
258
|
}
|
|
171
|
-
/** Emits a MouseEvent when the user clicks on the remove icon. */
|
|
172
259
|
_handleClick(event) {
|
|
173
|
-
|
|
260
|
+
// Some consumers bind `click` events directly on the chip
|
|
261
|
+
// which will also pick up clicks on the remove button.
|
|
174
262
|
event.stopPropagation();
|
|
263
|
+
super._handleClick(event);
|
|
175
264
|
}
|
|
176
|
-
|
|
177
|
-
|
|
265
|
+
_handleKeydown(event) {
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
super._handleKeydown(event);
|
|
178
268
|
}
|
|
179
269
|
}
|
|
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.
|
|
270
|
+
MatChipRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipRemove, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
271
|
+
MatChipRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipRemove, selector: "[matChipRemove]", host: { attributes: { "role": "button" }, properties: { "attr.aria-hidden": "null" }, classAttribute: "mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing" }, providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }], usesInheritance: true, ngImport: i0 });
|
|
272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipRemove, decorators: [{
|
|
183
273
|
type: Directive,
|
|
184
274
|
args: [{
|
|
185
275
|
selector: '[matChipRemove]',
|
|
186
|
-
inputs: ['disabled', 'tabIndex'],
|
|
187
276
|
host: {
|
|
188
|
-
'class':
|
|
189
|
-
|
|
190
|
-
'[tabIndex]': 'tabIndex',
|
|
277
|
+
'class': 'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' +
|
|
278
|
+
'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
|
|
191
279
|
'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
280
|
'[attr.aria-hidden]': 'null',
|
|
196
281
|
},
|
|
197
282
|
providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }],
|
|
198
283
|
}]
|
|
199
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
|
|
200
|
-
|
|
201
|
-
let uid$1 = 0;
|
|
202
|
-
/**
|
|
203
|
-
* Directive to add MDC CSS to non-basic chips.
|
|
204
|
-
* @docs-private
|
|
205
|
-
*/
|
|
206
|
-
class MatChipCssInternalOnly {
|
|
207
|
-
}
|
|
208
|
-
MatChipCssInternalOnly.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipCssInternalOnly, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
209
|
-
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 });
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatChipCssInternalOnly, decorators: [{
|
|
211
|
-
type: Directive,
|
|
212
|
-
args: [{
|
|
213
|
-
selector: `mat-chip, mat-chip-option, mat-chip-row, [mat-chip], [mat-chip-option],
|
|
214
|
-
[mat-chip-row]`,
|
|
215
|
-
host: { 'class': 'mat-mdc-chip mdc-chip' },
|
|
216
|
-
}]
|
|
217
284
|
}] });
|
|
285
|
+
|
|
286
|
+
let uid = 0;
|
|
218
287
|
/**
|
|
219
288
|
* Boilerplate for applying mixins to MatChip.
|
|
220
289
|
* @docs-private
|
|
@@ -231,10 +300,12 @@ const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBas
|
|
|
231
300
|
* Extended by MatChipOption and MatChipRow for different interaction patterns.
|
|
232
301
|
*/
|
|
233
302
|
class MatChip extends _MatChipMixinBase {
|
|
234
|
-
constructor(_changeDetectorRef, elementRef, _ngZone, _dir, animationMode, _globalRippleOptions) {
|
|
303
|
+
constructor(_changeDetectorRef, elementRef, _ngZone, _focusMonitor, _document, _dir, animationMode, _globalRippleOptions, tabIndex) {
|
|
304
|
+
var _a;
|
|
235
305
|
super(elementRef);
|
|
236
306
|
this._changeDetectorRef = _changeDetectorRef;
|
|
237
307
|
this._ngZone = _ngZone;
|
|
308
|
+
this._focusMonitor = _focusMonitor;
|
|
238
309
|
this._dir = _dir;
|
|
239
310
|
this._globalRippleOptions = _globalRippleOptions;
|
|
240
311
|
/** Whether the ripple is centered on the chip. */
|
|
@@ -243,22 +314,21 @@ class MatChip extends _MatChipMixinBase {
|
|
|
243
314
|
this._onFocus = new Subject();
|
|
244
315
|
/** Emits when the chip is blurred. */
|
|
245
316
|
this._onBlur = new Subject();
|
|
246
|
-
|
|
317
|
+
/** Role for the root of the chip. */
|
|
318
|
+
this.role = null;
|
|
247
319
|
/** Whether the chip has focus. */
|
|
248
320
|
this._hasFocusInternal = false;
|
|
249
|
-
/** Default unique id for the chip. */
|
|
250
|
-
this._uniqueId = `mat-mdc-chip-${uid$1++}`;
|
|
251
321
|
/** A unique id for the chip. If none is supplied, it will be auto-generated. */
|
|
252
|
-
this.id =
|
|
322
|
+
this.id = `mat-mdc-chip-${uid++}`;
|
|
323
|
+
/** ARIA label for the content of the chip. */
|
|
324
|
+
this.ariaLabel = null;
|
|
253
325
|
this._disabled = false;
|
|
254
326
|
this._removable = true;
|
|
255
327
|
this._highlighted = false;
|
|
256
|
-
/** Emitted when the user interacts with the chip. */
|
|
257
|
-
this.interaction = new EventEmitter();
|
|
258
|
-
/** Emitted when the chip is destroyed. */
|
|
259
|
-
this.destroyed = new EventEmitter();
|
|
260
328
|
/** Emitted when a chip is to be removed. */
|
|
261
329
|
this.removed = new EventEmitter();
|
|
330
|
+
/** Emitted when the chip is destroyed. */
|
|
331
|
+
this.destroyed = new EventEmitter();
|
|
262
332
|
/** The unstyled chip selector for this component. */
|
|
263
333
|
this.basicChipAttrName = 'mat-basic-chip';
|
|
264
334
|
/**
|
|
@@ -269,86 +339,88 @@ class MatChip extends _MatChipMixinBase {
|
|
|
269
339
|
addClass: className => this._setMdcClass(className, true),
|
|
270
340
|
removeClass: className => this._setMdcClass(className, false),
|
|
271
341
|
hasClass: className => this._elementRef.nativeElement.classList.contains(className),
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
// elements, because they're outside the DOM.
|
|
278
|
-
return target && target.classList
|
|
279
|
-
? target.classList.contains(className)
|
|
280
|
-
: false;
|
|
342
|
+
emitEvent: (eventName, data) => {
|
|
343
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, data, true);
|
|
344
|
+
},
|
|
345
|
+
setStyleProperty: (propertyName, value) => {
|
|
346
|
+
this._elementRef.nativeElement.style.setProperty(propertyName, value);
|
|
281
347
|
},
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
348
|
+
isRTL: () => { var _a; return ((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl'; },
|
|
349
|
+
getAttribute: attributeName => this._elementRef.nativeElement.getAttribute(attributeName),
|
|
350
|
+
getElementID: () => this._elementRef.nativeElement.id,
|
|
351
|
+
getOffsetWidth: () => this._elementRef.nativeElement.offsetWidth,
|
|
352
|
+
getActions: () => {
|
|
353
|
+
const result = [];
|
|
354
|
+
if (this._getAction(MDCChipActionType.PRIMARY)) {
|
|
355
|
+
result.push(MDCChipActionType.PRIMARY);
|
|
356
|
+
}
|
|
357
|
+
if (this._getAction(MDCChipActionType.TRAILING)) {
|
|
358
|
+
result.push(MDCChipActionType.TRAILING);
|
|
359
|
+
}
|
|
360
|
+
return result;
|
|
287
361
|
},
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
notifyEditStart: () => {
|
|
292
|
-
this._onEditStart();
|
|
293
|
-
this._changeDetectorRef.markForCheck();
|
|
362
|
+
isActionSelectable: (action) => {
|
|
363
|
+
var _a;
|
|
364
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isSelectable()) || false;
|
|
294
365
|
},
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
this.
|
|
366
|
+
isActionSelected: (action) => {
|
|
367
|
+
var _a;
|
|
368
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isSelected()) || false;
|
|
298
369
|
},
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
// case.
|
|
303
|
-
if (typeof window !== 'undefined' && window) {
|
|
304
|
-
const getComputedStyle = window.getComputedStyle(this._elementRef.nativeElement);
|
|
305
|
-
return getComputedStyle.getPropertyValue(propertyName);
|
|
306
|
-
}
|
|
307
|
-
return '';
|
|
370
|
+
isActionDisabled: (action) => {
|
|
371
|
+
var _a;
|
|
372
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isDisabled()) || false;
|
|
308
373
|
},
|
|
309
|
-
|
|
310
|
-
|
|
374
|
+
isActionFocusable: (action) => {
|
|
375
|
+
var _a;
|
|
376
|
+
return ((_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.isFocusable()) || false;
|
|
311
377
|
},
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
return this.trailingIcon.isNavigable();
|
|
316
|
-
}
|
|
317
|
-
return false;
|
|
378
|
+
setActionSelected: (action, isSelected) => {
|
|
379
|
+
var _a;
|
|
380
|
+
(_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.setSelected(isSelected);
|
|
318
381
|
},
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
// and handling keyboard events was added by MDC after our
|
|
323
|
-
// implementation; consider consolidating.
|
|
382
|
+
setActionDisabled: (action, isDisabled) => {
|
|
383
|
+
var _a;
|
|
384
|
+
(_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.setDisabled(isDisabled);
|
|
324
385
|
},
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
// MDC is currently using this method to set aria-checked on choice
|
|
329
|
-
// and filter chips, which in the MDC templates have role="checkbox"
|
|
330
|
-
// and role="radio" respectively. We have role="option" on those chips
|
|
331
|
-
// instead, so we do not want aria-checked. Since we also manage the
|
|
332
|
-
// tabindex ourselves, we don't allow MDC to set it.
|
|
333
|
-
if (name === 'aria-checked' || name === 'tabindex') {
|
|
334
|
-
return;
|
|
335
|
-
}
|
|
336
|
-
this._elementRef.nativeElement.setAttribute(name, value);
|
|
386
|
+
setActionFocus: (action, behavior) => {
|
|
387
|
+
var _a;
|
|
388
|
+
(_a = this._getAction(action)) === null || _a === void 0 ? void 0 : _a.setFocus(behavior);
|
|
337
389
|
},
|
|
338
|
-
// The 2 functions below are used by the MDC ripple, which we aren't using,
|
|
339
|
-
// so they will never be called
|
|
340
|
-
getRootBoundingClientRect: () => this._elementRef.nativeElement.getBoundingClientRect(),
|
|
341
|
-
getCheckmarkBoundingClientRect: () => null,
|
|
342
|
-
getAttribute: attr => this._elementRef.nativeElement.getAttribute(attr),
|
|
343
390
|
};
|
|
344
|
-
this.
|
|
391
|
+
this._handleActionInteraction = (event) => {
|
|
392
|
+
this._onChipInteraction(event);
|
|
393
|
+
};
|
|
394
|
+
this._handleActionNavigation = (event) => {
|
|
395
|
+
this._chipFoundation.handleActionNavigation(event);
|
|
396
|
+
};
|
|
397
|
+
this._handleTransitionend = (event) => {
|
|
398
|
+
if (event.target === this._elementRef.nativeElement) {
|
|
399
|
+
this._ngZone.run(() => this._chipFoundation.handleTransitionEnd());
|
|
400
|
+
}
|
|
401
|
+
};
|
|
402
|
+
this._handleAnimationend = (event) => {
|
|
403
|
+
if (event.target === this._elementRef.nativeElement) {
|
|
404
|
+
this._ngZone.run(() => this._chipFoundation.handleAnimationEnd(event));
|
|
405
|
+
}
|
|
406
|
+
};
|
|
407
|
+
const element = elementRef.nativeElement;
|
|
408
|
+
this._document = _document;
|
|
409
|
+
this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
|
|
345
410
|
this._animationsDisabled = animationMode === 'NoopAnimations';
|
|
346
411
|
this._isBasicChip =
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
412
|
+
element.hasAttribute(this.basicChipAttrName) ||
|
|
413
|
+
element.tagName.toLowerCase() === this.basicChipAttrName;
|
|
414
|
+
element.addEventListener(MDCChipActionEvents.INTERACTION, this._handleActionInteraction);
|
|
415
|
+
element.addEventListener(MDCChipActionEvents.NAVIGATION, this._handleActionNavigation);
|
|
416
|
+
_focusMonitor.monitor(elementRef, true);
|
|
417
|
+
_ngZone.runOutsideAngular(() => {
|
|
418
|
+
element.addEventListener('transitionend', this._handleTransitionend);
|
|
419
|
+
element.addEventListener('animationend', this._handleAnimationend);
|
|
420
|
+
});
|
|
421
|
+
if (tabIndex != null) {
|
|
422
|
+
this.tabIndex = (_a = parseInt(tabIndex)) !== null && _a !== void 0 ? _a : this.defaultTabIndex;
|
|
423
|
+
}
|
|
352
424
|
}
|
|
353
425
|
_hasFocus() {
|
|
354
426
|
return this._hasFocusInternal;
|
|
@@ -361,8 +433,12 @@ class MatChip extends _MatChipMixinBase {
|
|
|
361
433
|
if (this.removeIcon) {
|
|
362
434
|
this.removeIcon.disabled = this._disabled;
|
|
363
435
|
}
|
|
436
|
+
this._chipFoundation.setDisabled(this._disabled);
|
|
364
437
|
}
|
|
365
|
-
/**
|
|
438
|
+
/**
|
|
439
|
+
* The value of the chip. Defaults to the content inside
|
|
440
|
+
* the `mat-mdc-chip-action-label` element.
|
|
441
|
+
*/
|
|
366
442
|
get value() {
|
|
367
443
|
return this._value !== undefined ? this._value : this._textElement.textContent.trim();
|
|
368
444
|
}
|
|
@@ -387,42 +463,24 @@ class MatChip extends _MatChipMixinBase {
|
|
|
387
463
|
set highlighted(value) {
|
|
388
464
|
this._highlighted = coerceBooleanProperty(value);
|
|
389
465
|
}
|
|
390
|
-
ngAfterContentInit() {
|
|
391
|
-
this._initRemoveIcon();
|
|
392
|
-
}
|
|
393
466
|
ngAfterViewInit() {
|
|
394
467
|
this._chipFoundation.init();
|
|
395
|
-
this.
|
|
468
|
+
this._chipFoundation.setDisabled(this.disabled);
|
|
469
|
+
this._textElement = this._elementRef.nativeElement.querySelector('.mat-mdc-chip-action-label');
|
|
470
|
+
if (this._pendingFocus) {
|
|
471
|
+
this._pendingFocus = false;
|
|
472
|
+
this.focus();
|
|
473
|
+
}
|
|
396
474
|
}
|
|
397
475
|
ngOnDestroy() {
|
|
398
|
-
this.
|
|
476
|
+
const element = this._elementRef.nativeElement;
|
|
477
|
+
element.removeEventListener(MDCChipActionEvents.INTERACTION, this._handleActionInteraction);
|
|
478
|
+
element.removeEventListener(MDCChipActionEvents.NAVIGATION, this._handleActionNavigation);
|
|
479
|
+
element.removeEventListener('transitionend', this._handleTransitionend);
|
|
480
|
+
element.removeEventListener('animationend', this._handleAnimationend);
|
|
399
481
|
this._chipFoundation.destroy();
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
_initRemoveIcon() {
|
|
403
|
-
if (this.removeIcon) {
|
|
404
|
-
this._chipFoundation.setShouldRemoveOnTrailingIconClick(true);
|
|
405
|
-
this.removeIcon.disabled = this.disabled;
|
|
406
|
-
this.removeIcon.interaction.pipe(takeUntil(this.destroyed)).subscribe(event => {
|
|
407
|
-
// The MDC chip foundation calls stopPropagation() for any trailing icon interaction
|
|
408
|
-
// event, even ones it doesn't handle, so we want to avoid passing it keyboard events
|
|
409
|
-
// for which we have a custom handler. Note that we assert the type of the event using
|
|
410
|
-
// the `type`, because `instanceof KeyboardEvent` can throw during server-side rendering.
|
|
411
|
-
const isKeyboardEvent = event.type.startsWith('key');
|
|
412
|
-
if (this.disabled ||
|
|
413
|
-
(isKeyboardEvent && !this.REMOVE_ICON_HANDLED_KEYS.has(event.keyCode))) {
|
|
414
|
-
return;
|
|
415
|
-
}
|
|
416
|
-
this.remove();
|
|
417
|
-
if (isKeyboardEvent && !hasModifierKey(event)) {
|
|
418
|
-
const keyCode = event.keyCode;
|
|
419
|
-
// Prevent default space and enter presses so we don't scroll the page or submit forms.
|
|
420
|
-
if (keyCode === SPACE || keyCode === ENTER) {
|
|
421
|
-
event.preventDefault();
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
});
|
|
425
|
-
}
|
|
482
|
+
this._focusMonitor.stopMonitoring(this._elementRef);
|
|
483
|
+
this.destroyed.emit({ chip: this });
|
|
426
484
|
}
|
|
427
485
|
/**
|
|
428
486
|
* Allows for programmatic removal of the chip.
|
|
@@ -440,29 +498,6 @@ class MatChip extends _MatChipMixinBase {
|
|
|
440
498
|
active ? classes.add(cssClass) : classes.remove(cssClass);
|
|
441
499
|
this._changeDetectorRef.markForCheck();
|
|
442
500
|
}
|
|
443
|
-
/** Forwards interaction events to the MDC chip foundation. */
|
|
444
|
-
_handleInteraction(event) {
|
|
445
|
-
if (this.disabled) {
|
|
446
|
-
return;
|
|
447
|
-
}
|
|
448
|
-
if (event.type === 'click') {
|
|
449
|
-
this._chipFoundation.handleClick();
|
|
450
|
-
return;
|
|
451
|
-
}
|
|
452
|
-
if (event.type === 'dblclick') {
|
|
453
|
-
this._chipFoundation.handleDoubleClick();
|
|
454
|
-
}
|
|
455
|
-
if (event.type === 'keydown') {
|
|
456
|
-
this._chipFoundation.handleKeydown(event);
|
|
457
|
-
return;
|
|
458
|
-
}
|
|
459
|
-
if (event.type === 'focusout') {
|
|
460
|
-
this._chipFoundation.handleFocusOut(event);
|
|
461
|
-
}
|
|
462
|
-
if (event.type === 'focusin') {
|
|
463
|
-
this._chipFoundation.handleFocusIn(event);
|
|
464
|
-
}
|
|
465
|
-
}
|
|
466
501
|
/** Whether or not the ripple should be disabled. */
|
|
467
502
|
_isRippleDisabled() {
|
|
468
503
|
var _a;
|
|
@@ -472,37 +507,91 @@ class MatChip extends _MatChipMixinBase {
|
|
|
472
507
|
this._isBasicChip ||
|
|
473
508
|
!!((_a = this._globalRippleOptions) === null || _a === void 0 ? void 0 : _a.disabled));
|
|
474
509
|
}
|
|
475
|
-
|
|
476
|
-
|
|
510
|
+
_getAction(type) {
|
|
511
|
+
var _a, _b;
|
|
512
|
+
switch (type) {
|
|
513
|
+
case MDCChipActionType.PRIMARY:
|
|
514
|
+
return (_a = this.primaryAction) === null || _a === void 0 ? void 0 : _a._getFoundation();
|
|
515
|
+
case MDCChipActionType.TRAILING:
|
|
516
|
+
return (_b = (this.removeIcon || this.trailingIcon)) === null || _b === void 0 ? void 0 : _b._getFoundation();
|
|
517
|
+
}
|
|
518
|
+
return undefined;
|
|
519
|
+
}
|
|
520
|
+
_getFoundation() {
|
|
521
|
+
return this._chipFoundation;
|
|
522
|
+
}
|
|
523
|
+
_hasTrailingIcon() {
|
|
524
|
+
return !!(this.trailingIcon || this.removeIcon);
|
|
525
|
+
}
|
|
526
|
+
/** Allows for programmatic focusing of the chip. */
|
|
527
|
+
focus() {
|
|
528
|
+
if (this.disabled) {
|
|
529
|
+
return;
|
|
530
|
+
}
|
|
531
|
+
// If `focus` is called before `ngAfterViewInit`, we won't have access to the primary action.
|
|
532
|
+
// This can happen if the consumer tries to focus a chip immediately after it is added.
|
|
533
|
+
// Queue the method to be called again on init.
|
|
534
|
+
if (!this.primaryAction) {
|
|
535
|
+
this._pendingFocus = true;
|
|
536
|
+
return;
|
|
537
|
+
}
|
|
538
|
+
if (!this._hasFocus()) {
|
|
539
|
+
this._onFocus.next({ chip: this });
|
|
540
|
+
this._hasFocusInternal = true;
|
|
541
|
+
}
|
|
542
|
+
this.primaryAction.focus();
|
|
477
543
|
}
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
544
|
+
/** Overridden by MatChipOption. */
|
|
545
|
+
_onChipInteraction(event) {
|
|
546
|
+
var _a;
|
|
547
|
+
const removeElement = (_a = this.removeIcon) === null || _a === void 0 ? void 0 : _a._elementRef.nativeElement;
|
|
548
|
+
const trigger = event.detail.trigger;
|
|
549
|
+
// MDC's removal process requires an `animationend` event followed by a `transitionend`
|
|
550
|
+
// event coming from the chip, which in turn will call `remove`. While we can stub
|
|
551
|
+
// out these events in our own tests, they can be difficult to fake for consumers that are
|
|
552
|
+
// testing our components or are wrapping them. We skip the entire sequence and trigger the
|
|
553
|
+
// removal directly in order to make the component easier to deal with.
|
|
554
|
+
if (removeElement &&
|
|
555
|
+
(trigger === MDCChipActionInteractionTrigger.CLICK ||
|
|
556
|
+
trigger === MDCChipActionInteractionTrigger.ENTER_KEY ||
|
|
557
|
+
trigger === MDCChipActionInteractionTrigger.SPACEBAR_KEY) &&
|
|
558
|
+
(event.target === removeElement || removeElement.contains(event.target))) {
|
|
559
|
+
this.remove();
|
|
560
|
+
}
|
|
561
|
+
else {
|
|
562
|
+
this._chipFoundation.handleActionInteraction(event);
|
|
563
|
+
}
|
|
481
564
|
}
|
|
482
|
-
/** Overridden by MatChipRow. */
|
|
483
|
-
_onEditStart() { }
|
|
484
|
-
/** Overridden by MatChipRow. */
|
|
485
|
-
_onEditFinish() { }
|
|
486
565
|
}
|
|
487
|
-
MatChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
488
|
-
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 });
|
|
489
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
566
|
+
MatChip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: DOCUMENT }, { token: i2.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
+
MatChip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChip, selector: "mat-basic-chip, mat-chip", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", role: "role", id: "id", ariaLabel: ["aria-label", "ariaLabel"], disabled: "disabled", value: "value", removable: "removable", highlighted: "highlighted" }, outputs: { removed: "removed", destroyed: "destroyed" }, host: { properties: { "class.mdc-evolution-chip": "!_isBasicChip", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "leadingIcon", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-basic-chip": "_isBasicChip", "class.mat-mdc-standard-chip": "!_isBasicChip", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "class._mat-animation-noopable": "_animationsDisabled", "id": "id", "attr.role": "role", "attr.tabindex": "role ? tabIndex : null", "attr.aria-label": "ariaLabel" }, classAttribute: "mat-mdc-chip" }, queries: [{ propertyName: "leadingIcon", first: true, predicate: MAT_CHIP_AVATAR, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: MAT_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "removeIcon", first: true, predicate: MAT_CHIP_REMOVE, descendants: true }], viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "primaryAction", first: true, predicate: MatChipAction, descendants: true }], exportAs: ["matChip"], usesInheritance: true, ngImport: i0, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <div matChipAction [isInteractive]=\"false\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </div>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChip, decorators: [{
|
|
490
569
|
type: Component,
|
|
491
|
-
args: [{ selector: 'mat-basic-chip, mat-chip', inputs: ['color', 'disableRipple'], exportAs: 'matChip', host: {
|
|
492
|
-
'
|
|
493
|
-
'[class.
|
|
570
|
+
args: [{ selector: 'mat-basic-chip, mat-chip', inputs: ['color', 'disableRipple', 'tabIndex'], exportAs: 'matChip', host: {
|
|
571
|
+
'class': 'mat-mdc-chip',
|
|
572
|
+
'[class.mdc-evolution-chip]': '!_isBasicChip',
|
|
573
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
574
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
575
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
|
|
576
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
577
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
494
578
|
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
495
|
-
'[class.mat-mdc-chip-
|
|
579
|
+
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
580
|
+
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
496
581
|
'[class.mat-mdc-basic-chip]': '_isBasicChip',
|
|
497
582
|
'[class.mat-mdc-standard-chip]': '!_isBasicChip',
|
|
583
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
498
584
|
'[class._mat-animation-noopable]': '_animationsDisabled',
|
|
499
585
|
'[id]': 'id',
|
|
500
|
-
'[attr.
|
|
501
|
-
'[attr.
|
|
502
|
-
'
|
|
503
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mdc-chip__ripple\"></span>\n\n<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n\n<ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n<div class=\"mdc-chip__primary-action\">\n <div class=\"mdc-chip__text\"><ng-content></ng-content></div>\n</div>\n<ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
586
|
+
'[attr.role]': 'role',
|
|
587
|
+
'[attr.tabindex]': 'role ? tabIndex : null',
|
|
588
|
+
'[attr.aria-label]': 'ariaLabel',
|
|
589
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <div matChipAction [isInteractive]=\"false\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </div>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"] }]
|
|
504
590
|
}], ctorParameters: function () {
|
|
505
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.
|
|
591
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
592
|
+
type: Inject,
|
|
593
|
+
args: [DOCUMENT]
|
|
594
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
506
595
|
type: Optional
|
|
507
596
|
}] }, { type: undefined, decorators: [{
|
|
508
597
|
type: Optional
|
|
@@ -514,9 +603,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
514
603
|
}, {
|
|
515
604
|
type: Inject,
|
|
516
605
|
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
606
|
+
}] }, { type: undefined, decorators: [{
|
|
607
|
+
type: Attribute,
|
|
608
|
+
args: ['tabindex']
|
|
517
609
|
}] }];
|
|
518
|
-
}, propDecorators: {
|
|
610
|
+
}, propDecorators: { role: [{
|
|
611
|
+
type: Input
|
|
612
|
+
}], id: [{
|
|
519
613
|
type: Input
|
|
614
|
+
}], ariaLabel: [{
|
|
615
|
+
type: Input,
|
|
616
|
+
args: ['aria-label']
|
|
520
617
|
}], disabled: [{
|
|
521
618
|
type: Input
|
|
522
619
|
}], value: [{
|
|
@@ -525,12 +622,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
525
622
|
type: Input
|
|
526
623
|
}], highlighted: [{
|
|
527
624
|
type: Input
|
|
528
|
-
}],
|
|
625
|
+
}], removed: [{
|
|
529
626
|
type: Output
|
|
530
627
|
}], destroyed: [{
|
|
531
628
|
type: Output
|
|
532
|
-
}], removed: [{
|
|
533
|
-
type: Output
|
|
534
629
|
}], leadingIcon: [{
|
|
535
630
|
type: ContentChild,
|
|
536
631
|
args: [MAT_CHIP_AVATAR]
|
|
@@ -543,6 +638,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
543
638
|
}], ripple: [{
|
|
544
639
|
type: ViewChild,
|
|
545
640
|
args: [MatRipple]
|
|
641
|
+
}], primaryAction: [{
|
|
642
|
+
type: ViewChild,
|
|
643
|
+
args: [MatChipAction]
|
|
546
644
|
}] } });
|
|
547
645
|
|
|
548
646
|
/**
|
|
@@ -598,16 +696,18 @@ class MatChipOption extends MatChip {
|
|
|
598
696
|
}
|
|
599
697
|
/** Whether the chip is selected. */
|
|
600
698
|
get selected() {
|
|
601
|
-
|
|
699
|
+
var _a;
|
|
700
|
+
return ((_a = this._pendingSelectedState) !== null && _a !== void 0 ? _a : this._chipFoundation.isActionSelected(MDCChipActionType.PRIMARY));
|
|
602
701
|
}
|
|
603
702
|
set selected(value) {
|
|
604
|
-
if (
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
703
|
+
if (this.selectable) {
|
|
704
|
+
const coercedValue = coerceBooleanProperty(value);
|
|
705
|
+
if (this._isInitialized) {
|
|
706
|
+
this._setSelectedState(coercedValue, false);
|
|
707
|
+
}
|
|
708
|
+
else {
|
|
709
|
+
this._pendingSelectedState = coercedValue;
|
|
710
|
+
}
|
|
611
711
|
}
|
|
612
712
|
}
|
|
613
713
|
/** The ARIA selected applied to the chip. */
|
|
@@ -618,70 +718,45 @@ class MatChipOption extends MatChip {
|
|
|
618
718
|
? this.selected.toString()
|
|
619
719
|
: null;
|
|
620
720
|
}
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
721
|
+
ngOnInit() {
|
|
722
|
+
this.role = 'presentation';
|
|
723
|
+
}
|
|
724
|
+
ngAfterViewInit() {
|
|
725
|
+
super.ngAfterViewInit();
|
|
726
|
+
this._isInitialized = true;
|
|
727
|
+
if (this._pendingSelectedState != null) {
|
|
728
|
+
// Note that we want to clear the pending state before calling `_setSelectedState`, because
|
|
729
|
+
// we want it to read the actual selected state instead falling back to the pending one.
|
|
730
|
+
const selectedState = this._pendingSelectedState;
|
|
731
|
+
this._pendingSelectedState = undefined;
|
|
732
|
+
this._setSelectedState(selectedState, false);
|
|
625
733
|
}
|
|
626
734
|
}
|
|
627
735
|
/** Selects the chip. */
|
|
628
736
|
select() {
|
|
629
|
-
if (
|
|
630
|
-
|
|
631
|
-
}
|
|
632
|
-
else if (!this.selected) {
|
|
633
|
-
this._chipFoundation.setSelected(true);
|
|
634
|
-
this._dispatchSelectionChange();
|
|
737
|
+
if (this.selectable) {
|
|
738
|
+
this._setSelectedState(true, false);
|
|
635
739
|
}
|
|
636
740
|
}
|
|
637
741
|
/** Deselects the chip. */
|
|
638
742
|
deselect() {
|
|
639
|
-
if (
|
|
640
|
-
|
|
641
|
-
}
|
|
642
|
-
else if (this.selected) {
|
|
643
|
-
this._chipFoundation.setSelected(false);
|
|
644
|
-
this._dispatchSelectionChange();
|
|
743
|
+
if (this.selectable) {
|
|
744
|
+
this._setSelectedState(false, false);
|
|
645
745
|
}
|
|
646
746
|
}
|
|
647
747
|
/** Selects this chip and emits userInputSelection event */
|
|
648
748
|
selectViaInteraction() {
|
|
649
|
-
if (
|
|
650
|
-
|
|
651
|
-
}
|
|
652
|
-
else if (!this.selected) {
|
|
653
|
-
this._chipFoundation.setSelected(true);
|
|
654
|
-
this._dispatchSelectionChange(true);
|
|
749
|
+
if (this.selectable) {
|
|
750
|
+
this._setSelectedState(true, true);
|
|
655
751
|
}
|
|
656
752
|
}
|
|
657
753
|
/** Toggles the current selected state of this chip. */
|
|
658
754
|
toggleSelected(isUserInput = false) {
|
|
659
|
-
if (
|
|
660
|
-
|
|
755
|
+
if (this.selectable) {
|
|
756
|
+
this._setSelectedState(!this.selected, isUserInput);
|
|
661
757
|
}
|
|
662
|
-
this._chipFoundation.setSelected(!this.selected);
|
|
663
|
-
this._dispatchSelectionChange(isUserInput);
|
|
664
758
|
return this.selected;
|
|
665
759
|
}
|
|
666
|
-
/** Emits a selection change event. */
|
|
667
|
-
_dispatchSelectionChange(isUserInput = false) {
|
|
668
|
-
this.selectionChange.emit({
|
|
669
|
-
source: this,
|
|
670
|
-
isUserInput,
|
|
671
|
-
selected: this.selected,
|
|
672
|
-
});
|
|
673
|
-
}
|
|
674
|
-
/** Allows for programmatic focusing of the chip. */
|
|
675
|
-
focus() {
|
|
676
|
-
if (this.disabled) {
|
|
677
|
-
return;
|
|
678
|
-
}
|
|
679
|
-
if (!this._hasFocus()) {
|
|
680
|
-
this._elementRef.nativeElement.focus();
|
|
681
|
-
this._onFocus.next({ chip: this });
|
|
682
|
-
}
|
|
683
|
-
this._hasFocusInternal = true;
|
|
684
|
-
}
|
|
685
760
|
/** Resets the state of the chip when it loses focus. */
|
|
686
761
|
_blur() {
|
|
687
762
|
// When animations are enabled, Angular may end up removing the chip from the DOM a little
|
|
@@ -695,55 +770,68 @@ class MatChipOption extends MatChip {
|
|
|
695
770
|
});
|
|
696
771
|
});
|
|
697
772
|
}
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
773
|
+
_onChipInteraction(event) {
|
|
774
|
+
const { trigger, source } = event.detail;
|
|
775
|
+
// Non-selection interactions should work the same as other chips.
|
|
776
|
+
if (source !== MDCChipActionType.PRIMARY ||
|
|
777
|
+
(trigger !== MDCChipActionInteractionTrigger.CLICK &&
|
|
778
|
+
trigger !== MDCChipActionInteractionTrigger.ENTER_KEY &&
|
|
779
|
+
trigger !== MDCChipActionInteractionTrigger.SPACEBAR_KEY)) {
|
|
780
|
+
super._onChipInteraction(event);
|
|
781
|
+
}
|
|
782
|
+
else if (this.selectable && !this.disabled) {
|
|
783
|
+
// Otherwise only let the event through if the chip is enabled and selectable.
|
|
784
|
+
this._chipFoundation.handleActionInteraction(event);
|
|
785
|
+
this.selectionChange.emit({
|
|
786
|
+
source: this,
|
|
787
|
+
isUserInput: true,
|
|
788
|
+
selected: this.selected,
|
|
789
|
+
});
|
|
706
790
|
}
|
|
707
791
|
}
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
792
|
+
_hasLeadingGraphic() {
|
|
793
|
+
// The checkmark graphic is built in for multi-select chip lists.
|
|
794
|
+
return this.leadingIcon || (this._chipListMultiple && this.selectable);
|
|
795
|
+
}
|
|
796
|
+
_setSelectedState(isSelected, isUserInput) {
|
|
797
|
+
if (isSelected !== this.selected) {
|
|
798
|
+
this._chipFoundation.setActionSelected(MDCChipActionType.PRIMARY, isSelected);
|
|
799
|
+
this.selectionChange.emit({
|
|
800
|
+
source: this,
|
|
801
|
+
isUserInput,
|
|
802
|
+
selected: this.selected,
|
|
803
|
+
});
|
|
712
804
|
}
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
event.preventDefault();
|
|
718
|
-
break;
|
|
719
|
-
default:
|
|
720
|
-
this._handleInteraction(event);
|
|
805
|
+
// MDC won't assign the selected class until the animation finishes, but that may not
|
|
806
|
+
// happen if animations are disabled. If we detect such a case, assign the class manually.
|
|
807
|
+
if (this._animationsDisabled) {
|
|
808
|
+
this._elementRef.nativeElement.classList.toggle(MDCChipCssClasses.SELECTED, isSelected);
|
|
721
809
|
}
|
|
722
810
|
}
|
|
723
811
|
}
|
|
724
|
-
MatChipOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
725
|
-
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 });
|
|
726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
812
|
+
MatChipOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipOption, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
+
MatChipOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipOption, selector: "mat-basic-chip-option, mat-chip-option", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", selectable: "selectable", selected: "selected" }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.mat-mdc-chip-selected": "selected", "class.mat-mdc-chip-multiple": "_chipListMultiple", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mdc-evolution-chip--selectable": "selectable", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "_hasLeadingGraphic()", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "attr.tabindex": "null", "attr.aria-label": "null", "attr.role": "role", "id": "id" }, classAttribute: "mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter" }, providers: [{ provide: MatChip, useExisting: MatChipOption }], usesInheritance: true, ngImport: i0, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"ariaSelected\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"option\"\n (blur)=\"_blur()\"\n (focus)=\"focus()\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"_hasLeadingGraphic()\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-evolution-chip__checkmark\">\n <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-evolution-chip__checkmark-path\"\n fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipOption, decorators: [{
|
|
727
815
|
type: Component,
|
|
728
816
|
args: [{ selector: 'mat-basic-chip-option, mat-chip-option', inputs: ['color', 'disableRipple', 'tabIndex'], host: {
|
|
729
|
-
'
|
|
730
|
-
'class': 'mat-mdc-focus-indicator mat-mdc-chip-option',
|
|
731
|
-
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
732
|
-
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
733
|
-
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
734
|
-
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
|
|
817
|
+
'class': 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter',
|
|
735
818
|
'[class.mat-mdc-chip-selected]': 'selected',
|
|
736
819
|
'[class.mat-mdc-chip-multiple]': '_chipListMultiple',
|
|
820
|
+
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
821
|
+
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
822
|
+
'[class.mdc-evolution-chip--selectable]': 'selectable',
|
|
823
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
824
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
825
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
|
|
826
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
827
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
828
|
+
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
829
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
830
|
+
'[attr.tabindex]': 'null',
|
|
831
|
+
'[attr.aria-label]': 'null',
|
|
832
|
+
'[attr.role]': 'role',
|
|
737
833
|
'[id]': 'id',
|
|
738
|
-
'[tabIndex]': 'tabIndex',
|
|
739
|
-
'[attr.disabled]': 'disabled || null',
|
|
740
|
-
'[attr.aria-disabled]': 'disabled.toString()',
|
|
741
|
-
'[attr.aria-selected]': 'ariaSelected',
|
|
742
|
-
'(click)': '_click($event)',
|
|
743
|
-
'(keydown)': '_keydown($event)',
|
|
744
|
-
'(focus)': 'focus()',
|
|
745
|
-
'(blur)': '_blur()',
|
|
746
|
-
}, providers: [{ provide: MatChip, useExisting: MatChipOption }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mdc-chip__ripple\"></span>\n\n<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n\n<ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n<div class=\"mdc-chip__checkmark\" *ngIf=\"_chipListMultiple\">\n <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n </svg>\n</div>\n<div class=\"mdc-chip__text\"><ng-content></ng-content></div>\n<ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
834
|
+
}, providers: [{ provide: MatChip, useExisting: MatChipOption }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"ariaSelected\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"option\"\n (blur)=\"_blur()\"\n (focus)=\"focus()\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"_hasLeadingGraphic()\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-evolution-chip__checkmark\">\n <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path class=\"mdc-evolution-chip__checkmark-path\"\n fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"] }]
|
|
747
835
|
}], propDecorators: { selectable: [{
|
|
748
836
|
type: Input
|
|
749
837
|
}], selected: [{
|
|
@@ -791,14 +879,14 @@ class MatChipEditInput {
|
|
|
791
879
|
sel.addRange(range);
|
|
792
880
|
}
|
|
793
881
|
}
|
|
794
|
-
MatChipEditInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
795
|
-
MatChipEditInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
882
|
+
MatChipEditInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipEditInput, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
883
|
+
MatChipEditInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipEditInput, selector: "span[matChipEditInput]", host: { attributes: { "role": "textbox", "tabindex": "-1", "contenteditable": "true" }, classAttribute: "mat-chip-edit-input" }, ngImport: i0 });
|
|
884
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipEditInput, decorators: [{
|
|
797
885
|
type: Directive,
|
|
798
886
|
args: [{
|
|
799
887
|
selector: 'span[matChipEditInput]',
|
|
800
888
|
host: {
|
|
801
|
-
'class': '
|
|
889
|
+
'class': 'mat-chip-edit-input',
|
|
802
890
|
'role': 'textbox',
|
|
803
891
|
'tabindex': '-1',
|
|
804
892
|
'contenteditable': 'true',
|
|
@@ -816,121 +904,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
816
904
|
* the matChipInputFor directive.
|
|
817
905
|
*/
|
|
818
906
|
class MatChipRow extends MatChip {
|
|
819
|
-
constructor(
|
|
820
|
-
super(changeDetectorRef, elementRef, ngZone, dir, animationMode, globalRippleOptions);
|
|
821
|
-
this._document = _document;
|
|
907
|
+
constructor(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, dir, animationMode, globalRippleOptions, tabIndex) {
|
|
908
|
+
super(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, dir, animationMode, globalRippleOptions, tabIndex);
|
|
822
909
|
this.basicChipAttrName = 'mat-basic-chip-row';
|
|
823
910
|
this.editable = false;
|
|
824
911
|
/** Emitted when the chip is edited. */
|
|
825
912
|
this.edited = new EventEmitter();
|
|
913
|
+
this._isEditing = false;
|
|
914
|
+
this.role = 'row';
|
|
826
915
|
}
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
// Defer setting the value in order to avoid the "Expression
|
|
831
|
-
// has changed after it was checked" errors from Angular.
|
|
832
|
-
setTimeout(() => {
|
|
833
|
-
// removeIcon has tabIndex 0 for regular chips, but should only be focusable by
|
|
834
|
-
// the GridFocusKeyManager for row chips.
|
|
835
|
-
this.removeIcon.tabIndex = -1;
|
|
836
|
-
});
|
|
837
|
-
}
|
|
838
|
-
}
|
|
839
|
-
ngAfterViewInit() {
|
|
840
|
-
super.ngAfterViewInit();
|
|
841
|
-
this.cells = this.removeIcon
|
|
842
|
-
? [this.chipContent.nativeElement, this.removeIcon._elementRef.nativeElement]
|
|
843
|
-
: [this.chipContent.nativeElement];
|
|
844
|
-
}
|
|
845
|
-
/**
|
|
846
|
-
* Allows for programmatic focusing of the chip.
|
|
847
|
-
* Sends focus to the first grid cell. The row chip element itself
|
|
848
|
-
* is never focused.
|
|
849
|
-
*/
|
|
850
|
-
focus() {
|
|
851
|
-
if (this.disabled) {
|
|
852
|
-
return;
|
|
853
|
-
}
|
|
854
|
-
if (!this._hasFocusInternal) {
|
|
855
|
-
this._onFocus.next({ chip: this });
|
|
856
|
-
}
|
|
857
|
-
this.chipContent.nativeElement.focus();
|
|
916
|
+
_hasTrailingIcon() {
|
|
917
|
+
// The trailing icon is hidden while editing.
|
|
918
|
+
return !this._isEditing && super._hasTrailingIcon();
|
|
858
919
|
}
|
|
859
920
|
/**
|
|
860
921
|
* Emits a blur event when one of the gridcells loses focus, unless focus moved
|
|
861
922
|
* to the other gridcell.
|
|
862
923
|
*/
|
|
863
|
-
_focusout(
|
|
924
|
+
_focusout() {
|
|
864
925
|
if (this._focusoutTimeout) {
|
|
865
926
|
clearTimeout(this._focusoutTimeout);
|
|
866
927
|
}
|
|
867
928
|
// Wait to see if focus moves to the other gridcell
|
|
868
929
|
this._focusoutTimeout = window.setTimeout(() => {
|
|
930
|
+
if (this._isEditing) {
|
|
931
|
+
this._onEditFinish();
|
|
932
|
+
}
|
|
869
933
|
this._hasFocusInternal = false;
|
|
870
934
|
this._onBlur.next({ chip: this });
|
|
871
|
-
this._handleInteraction(event);
|
|
872
935
|
});
|
|
873
936
|
}
|
|
874
937
|
/** Records that the chip has focus when one of the gridcells is focused. */
|
|
875
|
-
_focusin(
|
|
938
|
+
_focusin() {
|
|
876
939
|
if (this._focusoutTimeout) {
|
|
877
940
|
clearTimeout(this._focusoutTimeout);
|
|
878
941
|
this._focusoutTimeout = null;
|
|
879
942
|
}
|
|
880
943
|
this._hasFocusInternal = true;
|
|
881
|
-
this._handleInteraction(event);
|
|
882
944
|
}
|
|
883
945
|
/** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
|
|
884
946
|
_mousedown(event) {
|
|
885
|
-
if (this._isEditing
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
947
|
+
if (!this._isEditing) {
|
|
948
|
+
if (!this.disabled) {
|
|
949
|
+
this.focus();
|
|
950
|
+
}
|
|
951
|
+
event.preventDefault();
|
|
890
952
|
}
|
|
891
|
-
event.preventDefault();
|
|
892
|
-
}
|
|
893
|
-
_dblclick(event) {
|
|
894
|
-
this._handleInteraction(event);
|
|
895
953
|
}
|
|
896
954
|
/** Handles custom key presses. */
|
|
897
955
|
_keydown(event) {
|
|
898
956
|
if (this.disabled) {
|
|
899
957
|
return;
|
|
900
958
|
}
|
|
901
|
-
if (this._isEditing()) {
|
|
902
|
-
this._handleInteraction(event);
|
|
903
|
-
return;
|
|
904
|
-
}
|
|
905
959
|
switch (event.keyCode) {
|
|
960
|
+
case ENTER:
|
|
961
|
+
if (this._isEditing) {
|
|
962
|
+
event.preventDefault();
|
|
963
|
+
// Wrap in a timeout so the timing is consistent as when it is emitted in `focusout`.
|
|
964
|
+
setTimeout(() => this._onEditFinish());
|
|
965
|
+
}
|
|
966
|
+
else if (this.editable) {
|
|
967
|
+
this._startEditing();
|
|
968
|
+
}
|
|
969
|
+
break;
|
|
906
970
|
case DELETE:
|
|
907
971
|
case BACKSPACE:
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
972
|
+
if (!this._isEditing) {
|
|
973
|
+
// Remove the focused chip
|
|
974
|
+
this.remove();
|
|
975
|
+
// Always prevent so page navigation does not occur
|
|
976
|
+
event.preventDefault();
|
|
977
|
+
}
|
|
912
978
|
break;
|
|
913
|
-
default:
|
|
914
|
-
this._handleInteraction(event);
|
|
915
979
|
}
|
|
916
980
|
}
|
|
917
|
-
|
|
918
|
-
|
|
981
|
+
_doubleclick() {
|
|
982
|
+
if (!this.disabled && this.editable) {
|
|
983
|
+
this._startEditing();
|
|
984
|
+
}
|
|
919
985
|
}
|
|
920
|
-
|
|
986
|
+
_startEditing() {
|
|
987
|
+
// The value depends on the DOM so we need to extract it before we flip the flag.
|
|
988
|
+
const value = this.value;
|
|
989
|
+
// Make the primary action non-interactive so that it doesn't
|
|
990
|
+
// navigate when the user presses the arrow keys while editing.
|
|
991
|
+
this.primaryAction.isInteractive = false;
|
|
992
|
+
this._isEditing = true;
|
|
921
993
|
// Defer initializing the input so it has time to be added to the DOM.
|
|
922
|
-
setTimeout(() =>
|
|
923
|
-
this._getEditInput().initialize(this.value);
|
|
924
|
-
});
|
|
994
|
+
setTimeout(() => this._getEditInput().initialize(value));
|
|
925
995
|
}
|
|
926
996
|
_onEditFinish() {
|
|
927
997
|
// If the edit input is still focused or focus was returned to the body after it was destroyed,
|
|
928
998
|
// return focus to the chip contents.
|
|
929
999
|
if (this._document.activeElement === this._getEditInput().getNativeElement() ||
|
|
930
1000
|
this._document.activeElement === this._document.body) {
|
|
931
|
-
this.
|
|
1001
|
+
this.primaryAction.focus();
|
|
932
1002
|
}
|
|
933
1003
|
this.edited.emit({ chip: this, value: this._getEditInput().getValue() });
|
|
1004
|
+
this.primaryAction.isInteractive = true;
|
|
1005
|
+
this._isEditing = false;
|
|
934
1006
|
}
|
|
935
1007
|
/**
|
|
936
1008
|
* Gets the projected chip edit input, or the default input if none is projected in. One of these
|
|
@@ -940,33 +1012,38 @@ class MatChipRow extends MatChip {
|
|
|
940
1012
|
return this.contentEditInput || this.defaultEditInput;
|
|
941
1013
|
}
|
|
942
1014
|
}
|
|
943
|
-
MatChipRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
944
|
-
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 });
|
|
945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
1015
|
+
MatChipRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: DOCUMENT }, { token: i2.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1016
|
+
MatChipRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", editable: "editable" }, outputs: { edited: "edited" }, host: { listeners: { "mousedown": "_mousedown($event)", "keydown": "_keydown($event)", "dblclick": "_doubleclick()", "focusin": "_focusin($event)", "focusout": "_focusout($event)" }, properties: { "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-editing": "_isEditing", "class.mat-mdc-chip-editable": "editable", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "leadingIcon", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.role": "role" }, classAttribute: "mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip" }, providers: [{ provide: MatChip, useExisting: MatChipRow }], queries: [{ propertyName: "contentEditInput", first: true, predicate: MatChipEditInput, descendants: true }], viewQueries: [{ propertyName: "defaultEditInput", first: true, predicate: MatChipEditInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!_isEditing\">\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n <span class=\"mat-mdc-chip-focus-overlay\"></span>\n</ng-container>\n\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\" [ngSwitch]=\"_isEditing\">\n <ng-container *ngSwitchCase=\"false\"><ng-content></ng-content></ng-container>\n\n <ng-container *ngSwitchCase=\"true\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>\n </ng-container>\n\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatChipEditInput, selector: "span[matChipEditInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipRow, decorators: [{
|
|
946
1018
|
type: Component,
|
|
947
1019
|
args: [{ selector: 'mat-chip-row, mat-basic-chip-row', inputs: ['color', 'disableRipple', 'tabIndex'], host: {
|
|
948
|
-
'
|
|
949
|
-
'class
|
|
1020
|
+
'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
|
|
1021
|
+
'[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
|
|
950
1022
|
'[class.mat-mdc-chip-disabled]': 'disabled',
|
|
1023
|
+
'[class.mat-mdc-chip-editing]': '_isEditing',
|
|
1024
|
+
'[class.mat-mdc-chip-editable]': 'editable',
|
|
1025
|
+
'[class.mdc-evolution-chip--disabled]': 'disabled',
|
|
1026
|
+
'[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
|
|
1027
|
+
'[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
|
|
1028
|
+
'[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
|
|
1029
|
+
'[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
|
|
951
1030
|
'[class.mat-mdc-chip-highlighted]': 'highlighted',
|
|
952
|
-
'[class.mat-mdc-chip-with-
|
|
953
|
-
'[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
|
|
954
|
-
'[class.mdc-chip--editable]': 'editable',
|
|
1031
|
+
'[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
|
|
955
1032
|
'[id]': 'id',
|
|
956
|
-
'[attr.
|
|
957
|
-
'[attr.aria-
|
|
958
|
-
'[
|
|
1033
|
+
'[attr.tabindex]': 'null',
|
|
1034
|
+
'[attr.aria-label]': 'null',
|
|
1035
|
+
'[attr.role]': 'role',
|
|
959
1036
|
'(mousedown)': '_mousedown($event)',
|
|
960
|
-
'(dblclick)': '_dblclick($event)',
|
|
961
1037
|
'(keydown)': '_keydown($event)',
|
|
1038
|
+
'(dblclick)': '_doubleclick()',
|
|
962
1039
|
'(focusin)': '_focusin($event)',
|
|
963
1040
|
'(focusout)': '_focusout($event)',
|
|
964
|
-
}, providers: [{ provide: MatChip, useExisting: MatChipRow }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!_isEditing()\">\n <span class=\"mdc-chip__ripple\"></span>\n\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n</ng-container>\n\n<div class=\"mat-mdc-chip-content\">\n <div role=\"gridcell\">\n <div #chipContent tabindex=\"-1\"\n class=\"mat-mdc-chip-row-focusable-text-content mat-mdc-focus-indicator mdc-chip__primary-action\"\n [attr.role]=\"editable ? 'button' : null\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-chip__text\"><ng-content></ng-content></span>\n <ng-content select=\"mat-chip-trailing-icon,[matChipTrailingIcon]\"></ng-content>\n </div>\n </div>\n <div role=\"gridcell\" *ngIf=\"removeIcon\" class=\"mat-mdc-chip-remove-icon\">\n <ng-content select=\"[matChipRemove]\"></ng-content>\n </div>\n</div>\n\n<div *ngIf=\"_isEditing()\" role=\"gridcell\" class=\"mat-mdc-chip-edit-input-container\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput>\n <span matChipEditInput></span>\n </ng-template>\n</div>\n", styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
1041
|
+
}, providers: [{ provide: MatChip, useExisting: MatChipRow }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!_isEditing\">\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n <span class=\"mat-mdc-chip-focus-overlay\"></span>\n</ng-container>\n\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\" [ngSwitch]=\"_isEditing\">\n <ng-container *ngSwitchCase=\"false\"><ng-content></ng-content></ng-container>\n\n <ng-container *ngSwitchCase=\"true\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>\n </ng-container>\n\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip{height:32px;border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__ripple{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.mdc-evolution-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mdc-evolution-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:20px}.mdc-evolution-chip .mdc-evolution-chip__graphic{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--primary{height:20px;width:20px;font-size:20px}.mdc-evolution-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mdc-evolution-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mdc-evolution-chip .mdc-evolution-chip__focus-ring{display:none}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + 4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{z-index:1;display:block;pointer-events:none;border:2px solid transparent;border-radius:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(\n 100% + 4px\n );width:calc(\n 100% + -4px\n )}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring{border-color:CanvasText}}.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{content:\"\";border:2px solid transparent;border-radius:8px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:calc(100% + 4px);width:calc(100% + 4px)}@media screen and (forced-colors: active){.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused .mdc-evolution-chip__focus-ring::after,.mdc-evolution-chip .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus .mdc-evolution-chip__focus-ring::after{border-color:CanvasText}}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{border-radius:16px 16px 16px 16px;height:32px}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:16px 16px 16px 16px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:14px 14px 14px 14px}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:28px}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:28px;width:28px;font-size:28px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:0}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:1px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:18px;width:18px;font-size:18px}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip.cdk-focused{outline:dotted 2px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:#000 !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1}.mat-mdc-chip{position:relative}.mat-mdc-chip-action-label{text-align:left}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}\n"] }]
|
|
965
1042
|
}], ctorParameters: function () {
|
|
966
|
-
return [{ type: undefined, decorators: [{
|
|
1043
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
967
1044
|
type: Inject,
|
|
968
1045
|
args: [DOCUMENT]
|
|
969
|
-
}] }, { type:
|
|
1046
|
+
}] }, { type: i2.Directionality, decorators: [{
|
|
970
1047
|
type: Optional
|
|
971
1048
|
}] }, { type: undefined, decorators: [{
|
|
972
1049
|
type: Optional
|
|
@@ -978,14 +1055,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
978
1055
|
}, {
|
|
979
1056
|
type: Inject,
|
|
980
1057
|
args: [MAT_RIPPLE_GLOBAL_OPTIONS]
|
|
1058
|
+
}] }, { type: undefined, decorators: [{
|
|
1059
|
+
type: Attribute,
|
|
1060
|
+
args: ['tabindex']
|
|
981
1061
|
}] }];
|
|
982
1062
|
}, propDecorators: { editable: [{
|
|
983
1063
|
type: Input
|
|
984
1064
|
}], edited: [{
|
|
985
1065
|
type: Output
|
|
986
|
-
}], chipContent: [{
|
|
987
|
-
type: ViewChild,
|
|
988
|
-
args: ['chipContent']
|
|
989
1066
|
}], defaultEditInput: [{
|
|
990
1067
|
type: ViewChild,
|
|
991
1068
|
args: [MatChipEditInput]
|
|
@@ -994,7 +1071,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
994
1071
|
args: [MatChipEditInput]
|
|
995
1072
|
}] } });
|
|
996
1073
|
|
|
997
|
-
let uid = 0;
|
|
998
1074
|
/**
|
|
999
1075
|
* Boilerplate for applying mixins to MatChipSet.
|
|
1000
1076
|
* @docs-private
|
|
@@ -1009,11 +1085,12 @@ const _MatChipSetMixinBase = mixinTabIndex(MatChipSetBase);
|
|
|
1009
1085
|
* Extended by MatChipListbox and MatChipGrid for different interaction patterns.
|
|
1010
1086
|
*/
|
|
1011
1087
|
class MatChipSet extends _MatChipSetMixinBase {
|
|
1012
|
-
constructor(_elementRef, _changeDetectorRef
|
|
1088
|
+
constructor(_liveAnnouncer, _document, _elementRef, _changeDetectorRef) {
|
|
1013
1089
|
super(_elementRef);
|
|
1090
|
+
this._liveAnnouncer = _liveAnnouncer;
|
|
1091
|
+
this._document = _document;
|
|
1014
1092
|
this._elementRef = _elementRef;
|
|
1015
1093
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1016
|
-
this._dir = _dir;
|
|
1017
1094
|
/**
|
|
1018
1095
|
* When a chip is destroyed, we store the index of the destroyed chip until the chips
|
|
1019
1096
|
* query list notifies about the update. This is necessary because we cannot determine an
|
|
@@ -1027,23 +1104,48 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1027
1104
|
* These methods are called by the chip set foundation.
|
|
1028
1105
|
*/
|
|
1029
1106
|
this._chipSetAdapter = {
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1107
|
+
announceMessage: message => this._liveAnnouncer.announce(message),
|
|
1108
|
+
emitEvent: (eventName, eventDetail) => {
|
|
1109
|
+
emitCustomEvent(this._elementRef.nativeElement, this._document, eventName, eventDetail, true);
|
|
1110
|
+
},
|
|
1111
|
+
getAttribute: name => this._elementRef.nativeElement.getAttribute(name),
|
|
1112
|
+
getChipActionsAtIndex: index => { var _a; return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.getActions()) || []; },
|
|
1113
|
+
getChipCount: () => this._chips.length,
|
|
1114
|
+
getChipIdAtIndex: index => { var _a; return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.getElementID()) || ''; },
|
|
1115
|
+
getChipIndexById: id => {
|
|
1116
|
+
return this._chips.toArray().findIndex(chip => chip._getFoundation().getElementID() === id);
|
|
1117
|
+
},
|
|
1118
|
+
isChipFocusableAtIndex: (index, actionType) => {
|
|
1119
|
+
var _a;
|
|
1120
|
+
return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.isActionFocusable(actionType)) || false;
|
|
1121
|
+
},
|
|
1122
|
+
isChipSelectableAtIndex: (index, actionType) => {
|
|
1123
|
+
var _a;
|
|
1124
|
+
return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.isActionSelectable(actionType)) || false;
|
|
1125
|
+
},
|
|
1126
|
+
isChipSelectedAtIndex: (index, actionType) => {
|
|
1127
|
+
var _a;
|
|
1128
|
+
return ((_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.isActionSelected(actionType)) || false;
|
|
1129
|
+
},
|
|
1130
|
+
removeChipAtIndex: index => { var _a; return (_a = this._chips.toArray()[index]) === null || _a === void 0 ? void 0 : _a.remove(); },
|
|
1131
|
+
setChipFocusAtIndex: (index, action, behavior) => {
|
|
1132
|
+
var _a;
|
|
1133
|
+
(_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.setActionFocus(action, behavior);
|
|
1134
|
+
},
|
|
1135
|
+
setChipSelectedAtIndex: (index, actionType, isSelected) => {
|
|
1136
|
+
var _a;
|
|
1137
|
+
// Setting the trailing action as deselected ends up deselecting the entire chip.
|
|
1138
|
+
// This is working as expected, but it's not something we want so we only apply the
|
|
1139
|
+
// selected state to the primary chip.
|
|
1140
|
+
if (actionType === MDCChipActionType.PRIMARY) {
|
|
1141
|
+
(_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.setActionSelected(actionType, isSelected);
|
|
1142
|
+
}
|
|
1143
|
+
},
|
|
1144
|
+
startChipAnimationAtIndex: (index, animation) => {
|
|
1145
|
+
var _a;
|
|
1146
|
+
(_a = this._chipFoundation(index)) === null || _a === void 0 ? void 0 : _a.startAnimation(animation);
|
|
1147
|
+
},
|
|
1044
1148
|
};
|
|
1045
|
-
/** Uid of the chip set */
|
|
1046
|
-
this._uid = `mat-mdc-chip-set-${uid++}`;
|
|
1047
1149
|
/**
|
|
1048
1150
|
* Map from class to whether the class is enabled.
|
|
1049
1151
|
* Enabled classes are set on the MDC chip-set div.
|
|
@@ -1051,7 +1153,24 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1051
1153
|
this._mdcClasses = {};
|
|
1052
1154
|
this._disabled = false;
|
|
1053
1155
|
this._role = null;
|
|
1054
|
-
this.
|
|
1156
|
+
this._handleChipAnimation = (event) => {
|
|
1157
|
+
this._chipSetFoundation.handleChipAnimation(event);
|
|
1158
|
+
};
|
|
1159
|
+
this._handleChipInteraction = (event) => {
|
|
1160
|
+
this._chipSetFoundation.handleChipInteraction(event);
|
|
1161
|
+
};
|
|
1162
|
+
this._handleChipNavigation = (event) => {
|
|
1163
|
+
this._chipSetFoundation.handleChipNavigation(event);
|
|
1164
|
+
};
|
|
1165
|
+
const element = _elementRef.nativeElement;
|
|
1166
|
+
this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
|
|
1167
|
+
element.addEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
|
|
1168
|
+
element.addEventListener(MDCChipEvents.INTERACTION, this._handleChipInteraction);
|
|
1169
|
+
element.addEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
|
|
1170
|
+
}
|
|
1171
|
+
/** Combined stream of all of the child chips' remove events. */
|
|
1172
|
+
get chipDestroyedChanges() {
|
|
1173
|
+
return this._getChipStream(chip => chip.destroyed);
|
|
1055
1174
|
}
|
|
1056
1175
|
/** Whether the chip set is disabled. */
|
|
1057
1176
|
get disabled() {
|
|
@@ -1081,18 +1200,6 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1081
1200
|
get focused() {
|
|
1082
1201
|
return this._hasFocusedChip();
|
|
1083
1202
|
}
|
|
1084
|
-
/** Combined stream of all of the child chips' remove events. */
|
|
1085
|
-
get chipRemoveChanges() {
|
|
1086
|
-
return merge(...this._chips.map(chip => chip.removed));
|
|
1087
|
-
}
|
|
1088
|
-
/** Combined stream of all of the child chips' remove events. */
|
|
1089
|
-
get chipDestroyedChanges() {
|
|
1090
|
-
return merge(...this._chips.map(chip => chip.destroyed));
|
|
1091
|
-
}
|
|
1092
|
-
/** Combined stream of all of the child chips' interaction events. */
|
|
1093
|
-
get chipInteractionChanges() {
|
|
1094
|
-
return merge(...this._chips.map(chip => chip.interaction));
|
|
1095
|
-
}
|
|
1096
1203
|
ngAfterViewInit() {
|
|
1097
1204
|
this._chipSetFoundation.init();
|
|
1098
1205
|
}
|
|
@@ -1105,11 +1212,23 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1105
1212
|
this._syncChipsState();
|
|
1106
1213
|
});
|
|
1107
1214
|
}
|
|
1108
|
-
|
|
1215
|
+
});
|
|
1216
|
+
this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event) => {
|
|
1217
|
+
const chip = event.chip;
|
|
1218
|
+
const chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1219
|
+
// In case the chip that will be removed is currently focused, we temporarily store
|
|
1220
|
+
// the index in order to be able to determine an appropriate sibling chip that will
|
|
1221
|
+
// receive focus.
|
|
1222
|
+
if (this._isValidIndex(chipIndex) && chip._hasFocus()) {
|
|
1223
|
+
this._lastDestroyedChipIndex = chipIndex;
|
|
1224
|
+
}
|
|
1109
1225
|
});
|
|
1110
1226
|
}
|
|
1111
1227
|
ngOnDestroy() {
|
|
1112
|
-
this.
|
|
1228
|
+
const element = this._elementRef.nativeElement;
|
|
1229
|
+
element.removeEventListener(MDCChipEvents.ANIMATION, this._handleChipAnimation);
|
|
1230
|
+
element.removeEventListener(MDCChipEvents.INTERACTION, this._handleChipInteraction);
|
|
1231
|
+
element.removeEventListener(MDCChipEvents.NAVIGATION, this._handleChipNavigation);
|
|
1113
1232
|
this._destroyed.next();
|
|
1114
1233
|
this._destroyed.complete();
|
|
1115
1234
|
this._chipSetFoundation.destroy();
|
|
@@ -1127,71 +1246,6 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1127
1246
|
});
|
|
1128
1247
|
}
|
|
1129
1248
|
}
|
|
1130
|
-
/** Sets whether the given CSS class should be applied to the MDC chip. */
|
|
1131
|
-
_setMdcClass(cssClass, active) {
|
|
1132
|
-
const classes = this._elementRef.nativeElement.classList;
|
|
1133
|
-
active ? classes.add(cssClass) : classes.remove(cssClass);
|
|
1134
|
-
this._changeDetectorRef.markForCheck();
|
|
1135
|
-
}
|
|
1136
|
-
/** Adapter method that returns true if the chip set has the given MDC class. */
|
|
1137
|
-
_hasMdcClass(className) {
|
|
1138
|
-
return this._elementRef.nativeElement.classList.contains(className);
|
|
1139
|
-
}
|
|
1140
|
-
/** Updates subscriptions to chip events. */
|
|
1141
|
-
_resetChips() {
|
|
1142
|
-
this._dropSubscriptions();
|
|
1143
|
-
this._subscribeToChipEvents();
|
|
1144
|
-
}
|
|
1145
|
-
/** Subscribes to events on the child chips. */
|
|
1146
|
-
_subscribeToChipEvents() {
|
|
1147
|
-
this._listenToChipsRemove();
|
|
1148
|
-
this._listenToChipsDestroyed();
|
|
1149
|
-
this._listenToChipsInteraction();
|
|
1150
|
-
}
|
|
1151
|
-
/** Subscribes to chip removal events. */
|
|
1152
|
-
_listenToChipsRemove() {
|
|
1153
|
-
this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((event) => {
|
|
1154
|
-
this._chipSetFoundation.handleChipRemoval({
|
|
1155
|
-
chipId: event.chip.id,
|
|
1156
|
-
// TODO(mmalerba): Add removal message.
|
|
1157
|
-
removedAnnouncement: null,
|
|
1158
|
-
});
|
|
1159
|
-
});
|
|
1160
|
-
}
|
|
1161
|
-
/** Subscribes to chip destroyed events. */
|
|
1162
|
-
_listenToChipsDestroyed() {
|
|
1163
|
-
this._chipDestroyedSubscription = this.chipDestroyedChanges.subscribe((event) => {
|
|
1164
|
-
const chip = event.chip;
|
|
1165
|
-
const chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1166
|
-
// In case the chip that will be removed is currently focused, we temporarily store
|
|
1167
|
-
// the index in order to be able to determine an appropriate sibling chip that will
|
|
1168
|
-
// receive focus.
|
|
1169
|
-
if (this._isValidIndex(chipIndex) && chip._hasFocus()) {
|
|
1170
|
-
this._lastDestroyedChipIndex = chipIndex;
|
|
1171
|
-
}
|
|
1172
|
-
});
|
|
1173
|
-
}
|
|
1174
|
-
/** Subscribes to chip interaction events. */
|
|
1175
|
-
_listenToChipsInteraction() {
|
|
1176
|
-
this._chipInteractionSubscription = this.chipInteractionChanges.subscribe((id) => {
|
|
1177
|
-
this._chipSetFoundation.handleChipInteraction({ chipId: id });
|
|
1178
|
-
});
|
|
1179
|
-
}
|
|
1180
|
-
/** Unsubscribes from all chip events. */
|
|
1181
|
-
_dropSubscriptions() {
|
|
1182
|
-
if (this._chipRemoveSubscription) {
|
|
1183
|
-
this._chipRemoveSubscription.unsubscribe();
|
|
1184
|
-
this._chipRemoveSubscription = null;
|
|
1185
|
-
}
|
|
1186
|
-
if (this._chipInteractionSubscription) {
|
|
1187
|
-
this._chipInteractionSubscription.unsubscribe();
|
|
1188
|
-
this._chipInteractionSubscription = null;
|
|
1189
|
-
}
|
|
1190
|
-
if (this._chipDestroyedSubscription) {
|
|
1191
|
-
this._chipDestroyedSubscription.unsubscribe();
|
|
1192
|
-
this._chipDestroyedSubscription = null;
|
|
1193
|
-
}
|
|
1194
|
-
}
|
|
1195
1249
|
/** Dummy method for subclasses to override. Base chip set cannot be focused. */
|
|
1196
1250
|
focus() { }
|
|
1197
1251
|
/**
|
|
@@ -1205,14 +1259,29 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1205
1259
|
}
|
|
1206
1260
|
/** Checks whether an event comes from inside a chip element. */
|
|
1207
1261
|
_originatesFromChip(event) {
|
|
1208
|
-
return this._checkForClassInHierarchy(event, 'mdc-chip');
|
|
1262
|
+
return this._checkForClassInHierarchy(event, 'mdc-evolution-chip');
|
|
1263
|
+
}
|
|
1264
|
+
/**
|
|
1265
|
+
* Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
|
|
1266
|
+
* user to tab out of it. This prevents the grid from capturing focus and redirecting
|
|
1267
|
+
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
1268
|
+
*/
|
|
1269
|
+
_allowFocusEscape() {
|
|
1270
|
+
const previousTabIndex = this.tabIndex;
|
|
1271
|
+
if (this.tabIndex !== -1) {
|
|
1272
|
+
this.tabIndex = -1;
|
|
1273
|
+
setTimeout(() => {
|
|
1274
|
+
this.tabIndex = previousTabIndex;
|
|
1275
|
+
this._changeDetectorRef.markForCheck();
|
|
1276
|
+
});
|
|
1277
|
+
}
|
|
1209
1278
|
}
|
|
1210
1279
|
/**
|
|
1211
|
-
*
|
|
1212
|
-
*
|
|
1280
|
+
* Gets a stream of events from all the chips within the set.
|
|
1281
|
+
* The stream will automatically incorporate any newly-added chips.
|
|
1213
1282
|
*/
|
|
1214
|
-
|
|
1215
|
-
return this.
|
|
1283
|
+
_getChipStream(mappingFunction) {
|
|
1284
|
+
return this._chips.changes.pipe(startWith(null), switchMap(() => merge(...this._chips.map(mappingFunction))));
|
|
1216
1285
|
}
|
|
1217
1286
|
_checkForClassInHierarchy(event, className) {
|
|
1218
1287
|
let currentElement = event.target;
|
|
@@ -1225,22 +1294,34 @@ class MatChipSet extends _MatChipSetMixinBase {
|
|
|
1225
1294
|
}
|
|
1226
1295
|
return false;
|
|
1227
1296
|
}
|
|
1297
|
+
_chipFoundation(index) {
|
|
1298
|
+
var _a;
|
|
1299
|
+
return (_a = this._chips.toArray()[index]) === null || _a === void 0 ? void 0 : _a._getFoundation();
|
|
1300
|
+
}
|
|
1228
1301
|
}
|
|
1229
|
-
MatChipSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
1230
|
-
MatChipSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
1231
|
-
|
|
1302
|
+
MatChipSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipSet, deps: [{ token: i1.LiveAnnouncer }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1303
|
+
MatChipSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipSet, selector: "mat-chip-set", inputs: { disabled: "disabled", role: "role" }, host: { properties: { "attr.role": "role", "attr.aria-describedby": "_ariaDescribedby || null" }, classAttribute: "mat-mdc-chip-set mdc-evolution-chip-set" }, queries: [{ propertyName: "_chips", predicate: MatChip, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1304
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1305
|
+
<ng-content></ng-content>
|
|
1306
|
+
</span>
|
|
1307
|
+
`, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipSet, decorators: [{
|
|
1232
1309
|
type: Component,
|
|
1233
|
-
args: [{ selector: 'mat-chip-set', template:
|
|
1234
|
-
|
|
1310
|
+
args: [{ selector: 'mat-chip-set', template: `
|
|
1311
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1312
|
+
<ng-content></ng-content>
|
|
1313
|
+
</span>
|
|
1314
|
+
`, host: {
|
|
1315
|
+
'class': 'mat-mdc-chip-set mdc-evolution-chip-set',
|
|
1235
1316
|
'[attr.role]': 'role',
|
|
1236
1317
|
// TODO: replace this binding with use of AriaDescriber
|
|
1237
1318
|
'[attr.aria-describedby]': '_ariaDescribedby || null',
|
|
1238
|
-
|
|
1239
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
1319
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"] }]
|
|
1240
1320
|
}], ctorParameters: function () {
|
|
1241
|
-
return [{ type:
|
|
1242
|
-
type:
|
|
1243
|
-
|
|
1321
|
+
return [{ type: i1.LiveAnnouncer }, { type: undefined, decorators: [{
|
|
1322
|
+
type: Inject,
|
|
1323
|
+
args: [DOCUMENT]
|
|
1324
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
|
|
1244
1325
|
}, propDecorators: { disabled: [{
|
|
1245
1326
|
type: Input
|
|
1246
1327
|
}], role: [{
|
|
@@ -1287,8 +1368,8 @@ const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR = {
|
|
|
1287
1368
|
* Used with MatChipOption chips.
|
|
1288
1369
|
*/
|
|
1289
1370
|
class MatChipListbox extends MatChipSet {
|
|
1290
|
-
constructor(
|
|
1291
|
-
super(
|
|
1371
|
+
constructor() {
|
|
1372
|
+
super(...arguments);
|
|
1292
1373
|
/**
|
|
1293
1374
|
* Function when touched. Set as part of ControlValueAccessor implementation.
|
|
1294
1375
|
* @docs-private
|
|
@@ -1307,14 +1388,9 @@ class MatChipListbox extends MatChipSet {
|
|
|
1307
1388
|
this._required = false;
|
|
1308
1389
|
/** Event emitted when the selected chip listbox value has been changed by the user. */
|
|
1309
1390
|
this.change = new EventEmitter();
|
|
1310
|
-
this._chipSetAdapter.selectChipAtIndex = (index, selected) => {
|
|
1311
|
-
this._setSelected(index, selected);
|
|
1312
|
-
};
|
|
1313
|
-
// Reinitialize the foundation with our overridden adapter
|
|
1314
|
-
this._chipSetFoundation = new deprecated.MDCChipSetFoundation(this._chipSetAdapter);
|
|
1315
|
-
this._updateMdcSelectionClasses();
|
|
1316
1391
|
}
|
|
1317
1392
|
/** The ARIA role applied to the chip listbox. */
|
|
1393
|
+
// TODO: MDC uses `grid` here
|
|
1318
1394
|
get role() {
|
|
1319
1395
|
return this.empty ? null : 'listbox';
|
|
1320
1396
|
}
|
|
@@ -1324,7 +1400,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1324
1400
|
}
|
|
1325
1401
|
set multiple(value) {
|
|
1326
1402
|
this._multiple = coerceBooleanProperty(value);
|
|
1327
|
-
this._updateMdcSelectionClasses();
|
|
1328
1403
|
this._syncListboxProperties();
|
|
1329
1404
|
}
|
|
1330
1405
|
/** The array of selected chips inside the chip listbox. */
|
|
@@ -1343,7 +1418,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1343
1418
|
}
|
|
1344
1419
|
set selectable(value) {
|
|
1345
1420
|
this._selectable = coerceBooleanProperty(value);
|
|
1346
|
-
this._updateMdcSelectionClasses();
|
|
1347
1421
|
this._syncListboxProperties();
|
|
1348
1422
|
}
|
|
1349
1423
|
/**
|
|
@@ -1367,15 +1441,15 @@ class MatChipListbox extends MatChipSet {
|
|
|
1367
1441
|
}
|
|
1368
1442
|
/** Combined stream of all of the child chips' selection change events. */
|
|
1369
1443
|
get chipSelectionChanges() {
|
|
1370
|
-
return
|
|
1444
|
+
return this._getChipStream(chip => chip.selectionChange);
|
|
1371
1445
|
}
|
|
1372
1446
|
/** Combined stream of all of the child chips' focus events. */
|
|
1373
1447
|
get chipFocusChanges() {
|
|
1374
|
-
return
|
|
1448
|
+
return this._getChipStream(chip => chip._onFocus);
|
|
1375
1449
|
}
|
|
1376
1450
|
/** Combined stream of all of the child chips' blur events. */
|
|
1377
1451
|
get chipBlurChanges() {
|
|
1378
|
-
return
|
|
1452
|
+
return this._getChipStream(chip => chip._onBlur);
|
|
1379
1453
|
}
|
|
1380
1454
|
/** The value of the listbox, which is the combined value of the selected chips. */
|
|
1381
1455
|
get value() {
|
|
@@ -1387,7 +1461,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1387
1461
|
}
|
|
1388
1462
|
ngAfterContentInit() {
|
|
1389
1463
|
super.ngAfterContentInit();
|
|
1390
|
-
this._initKeyManager();
|
|
1391
1464
|
this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
|
|
1392
1465
|
// Update listbox selectable/multiple properties on chips
|
|
1393
1466
|
this._syncListboxProperties();
|
|
@@ -1396,6 +1469,12 @@ class MatChipListbox extends MatChipSet {
|
|
|
1396
1469
|
// Check to see if we have a destroyed chip and need to refocus
|
|
1397
1470
|
this._updateFocusForDestroyedChips();
|
|
1398
1471
|
});
|
|
1472
|
+
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
|
|
1473
|
+
this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {
|
|
1474
|
+
if (event.isUserInput) {
|
|
1475
|
+
this._propagateChanges();
|
|
1476
|
+
}
|
|
1477
|
+
});
|
|
1399
1478
|
}
|
|
1400
1479
|
/**
|
|
1401
1480
|
* Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
|
|
@@ -1407,11 +1486,14 @@ class MatChipListbox extends MatChipSet {
|
|
|
1407
1486
|
}
|
|
1408
1487
|
const firstSelectedChip = this._getFirstSelectedChip();
|
|
1409
1488
|
if (firstSelectedChip) {
|
|
1410
|
-
|
|
1411
|
-
this._keyManager.setActiveItem(firstSelectedChipIndex);
|
|
1489
|
+
firstSelectedChip.focus();
|
|
1412
1490
|
}
|
|
1413
1491
|
else if (this._chips.length > 0) {
|
|
1414
|
-
|
|
1492
|
+
// MDC sets the tabindex directly on the DOM node when the user is navigating which means
|
|
1493
|
+
// that we may end up with a `0` value from a previous interaction. We reset it manually
|
|
1494
|
+
// here to ensure that the state is correct.
|
|
1495
|
+
this._chips.forEach(chip => chip.primaryAction._updateTabindex(-1));
|
|
1496
|
+
this._chips.first.primaryAction.focus();
|
|
1415
1497
|
}
|
|
1416
1498
|
}
|
|
1417
1499
|
/**
|
|
@@ -1451,60 +1533,24 @@ class MatChipListbox extends MatChipSet {
|
|
|
1451
1533
|
value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
|
|
1452
1534
|
}
|
|
1453
1535
|
else {
|
|
1454
|
-
|
|
1455
|
-
// Shift focus to the active item. Note that we shouldn't do this in multiple
|
|
1456
|
-
// mode, because we don't know what chip the user interacted with last.
|
|
1457
|
-
if (correspondingChip) {
|
|
1458
|
-
if (isUserInput) {
|
|
1459
|
-
this._keyManager.setActiveItem(correspondingChip);
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
}
|
|
1463
|
-
}
|
|
1464
|
-
/** Selects or deselects a chip by id. */
|
|
1465
|
-
_setSelected(index, selected) {
|
|
1466
|
-
const chip = this._chips.toArray()[index];
|
|
1467
|
-
if (chip && chip.selected != selected) {
|
|
1468
|
-
chip.toggleSelected(true);
|
|
1536
|
+
this._selectValue(value, isUserInput);
|
|
1469
1537
|
}
|
|
1470
1538
|
}
|
|
1471
1539
|
/** When blurred, marks the field as touched when focus moved outside the chip listbox. */
|
|
1472
1540
|
_blur() {
|
|
1473
|
-
if (this.disabled) {
|
|
1474
|
-
|
|
1475
|
-
}
|
|
1476
|
-
if (!this.focused) {
|
|
1477
|
-
this._keyManager.setActiveItem(-1);
|
|
1478
|
-
}
|
|
1479
|
-
// Wait to see if focus moves to an indivdual chip.
|
|
1480
|
-
setTimeout(() => {
|
|
1481
|
-
if (!this.focused) {
|
|
1482
|
-
this._propagateChanges();
|
|
1483
|
-
this._markAsTouched();
|
|
1484
|
-
}
|
|
1485
|
-
});
|
|
1486
|
-
}
|
|
1487
|
-
/**
|
|
1488
|
-
* Removes the `tabindex` from the chip listbox and resets it back afterwards, allowing the
|
|
1489
|
-
* user to tab out of it. This prevents the listbox from capturing focus and redirecting
|
|
1490
|
-
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
1491
|
-
*/
|
|
1492
|
-
_allowFocusEscape() {
|
|
1493
|
-
const previousTabIndex = this.tabIndex;
|
|
1494
|
-
if (this.tabIndex !== -1) {
|
|
1495
|
-
this.tabIndex = -1;
|
|
1541
|
+
if (!this.disabled) {
|
|
1542
|
+
// Wait to see if focus moves to an individual chip.
|
|
1496
1543
|
setTimeout(() => {
|
|
1497
|
-
this.
|
|
1498
|
-
|
|
1544
|
+
if (!this.focused) {
|
|
1545
|
+
this._propagateChanges();
|
|
1546
|
+
this._markAsTouched();
|
|
1547
|
+
}
|
|
1499
1548
|
});
|
|
1500
1549
|
}
|
|
1501
1550
|
}
|
|
1502
|
-
/**
|
|
1503
|
-
* Handles custom keyboard shortcuts, and passes other keyboard events to the keyboard manager.
|
|
1504
|
-
*/
|
|
1505
1551
|
_keydown(event) {
|
|
1506
|
-
if (
|
|
1507
|
-
|
|
1552
|
+
if (event.keyCode === TAB) {
|
|
1553
|
+
super._allowFocusEscape();
|
|
1508
1554
|
}
|
|
1509
1555
|
}
|
|
1510
1556
|
/** Marks the field as touched */
|
|
@@ -1513,13 +1559,13 @@ class MatChipListbox extends MatChipSet {
|
|
|
1513
1559
|
this._changeDetectorRef.markForCheck();
|
|
1514
1560
|
}
|
|
1515
1561
|
/** Emits change event to set the model value. */
|
|
1516
|
-
_propagateChanges(
|
|
1562
|
+
_propagateChanges() {
|
|
1517
1563
|
let valueToEmit = null;
|
|
1518
1564
|
if (Array.isArray(this.selected)) {
|
|
1519
1565
|
valueToEmit = this.selected.map(chip => chip.value);
|
|
1520
1566
|
}
|
|
1521
1567
|
else {
|
|
1522
|
-
valueToEmit = this.selected ? this.selected.value :
|
|
1568
|
+
valueToEmit = this.selected ? this.selected.value : undefined;
|
|
1523
1569
|
}
|
|
1524
1570
|
this._value = valueToEmit;
|
|
1525
1571
|
this.change.emit(new MatChipListboxChange(this, valueToEmit));
|
|
@@ -1533,9 +1579,9 @@ class MatChipListbox extends MatChipSet {
|
|
|
1533
1579
|
setTimeout(() => {
|
|
1534
1580
|
// Defer setting the value in order to avoid the "Expression
|
|
1535
1581
|
// has changed after it was checked" errors from Angular.
|
|
1536
|
-
this._chips.forEach(chip => {
|
|
1582
|
+
this._chips.forEach((chip, index) => {
|
|
1537
1583
|
if (chip.selected) {
|
|
1538
|
-
this._chipSetFoundation.
|
|
1584
|
+
this._chipSetFoundation.setChipSelected(index, MDCChipActionType.PRIMARY, true);
|
|
1539
1585
|
}
|
|
1540
1586
|
});
|
|
1541
1587
|
});
|
|
@@ -1578,27 +1624,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1578
1624
|
});
|
|
1579
1625
|
}
|
|
1580
1626
|
}
|
|
1581
|
-
/** Sets the mdc classes for single vs multi selection. */
|
|
1582
|
-
_updateMdcSelectionClasses() {
|
|
1583
|
-
this._setMdcClass('mdc-chip-set--filter', this.selectable && this.multiple);
|
|
1584
|
-
this._setMdcClass('mdc-chip-set--choice', this.selectable && !this.multiple);
|
|
1585
|
-
}
|
|
1586
|
-
/** Initializes the key manager to manage focus. */
|
|
1587
|
-
_initKeyManager() {
|
|
1588
|
-
this._keyManager = new FocusKeyManager(this._chips)
|
|
1589
|
-
.withWrap()
|
|
1590
|
-
.withVerticalOrientation()
|
|
1591
|
-
.withHomeAndEnd()
|
|
1592
|
-
.withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
|
|
1593
|
-
if (this._dir) {
|
|
1594
|
-
this._dir.change
|
|
1595
|
-
.pipe(takeUntil(this._destroyed))
|
|
1596
|
-
.subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
|
|
1597
|
-
}
|
|
1598
|
-
this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
1599
|
-
this._allowFocusEscape();
|
|
1600
|
-
});
|
|
1601
|
-
}
|
|
1602
1627
|
/** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
|
|
1603
1628
|
_getFirstSelectedChip() {
|
|
1604
1629
|
if (Array.isArray(this.selected)) {
|
|
@@ -1608,57 +1633,6 @@ class MatChipListbox extends MatChipSet {
|
|
|
1608
1633
|
return this.selected;
|
|
1609
1634
|
}
|
|
1610
1635
|
}
|
|
1611
|
-
/** Unsubscribes from all chip events. */
|
|
1612
|
-
_dropSubscriptions() {
|
|
1613
|
-
super._dropSubscriptions();
|
|
1614
|
-
if (this._chipSelectionSubscription) {
|
|
1615
|
-
this._chipSelectionSubscription.unsubscribe();
|
|
1616
|
-
this._chipSelectionSubscription = null;
|
|
1617
|
-
}
|
|
1618
|
-
if (this._chipBlurSubscription) {
|
|
1619
|
-
this._chipBlurSubscription.unsubscribe();
|
|
1620
|
-
this._chipBlurSubscription = null;
|
|
1621
|
-
}
|
|
1622
|
-
if (this._chipFocusSubscription) {
|
|
1623
|
-
this._chipFocusSubscription.unsubscribe();
|
|
1624
|
-
this._chipFocusSubscription = null;
|
|
1625
|
-
}
|
|
1626
|
-
}
|
|
1627
|
-
/** Subscribes to events on the child chips. */
|
|
1628
|
-
_subscribeToChipEvents() {
|
|
1629
|
-
super._subscribeToChipEvents();
|
|
1630
|
-
this._listenToChipsSelection();
|
|
1631
|
-
this._listenToChipsFocus();
|
|
1632
|
-
this._listenToChipsBlur();
|
|
1633
|
-
}
|
|
1634
|
-
/** Subscribes to chip focus events. */
|
|
1635
|
-
_listenToChipsFocus() {
|
|
1636
|
-
this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
|
|
1637
|
-
let chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
1638
|
-
if (this._isValidIndex(chipIndex)) {
|
|
1639
|
-
this._keyManager.updateActiveItem(chipIndex);
|
|
1640
|
-
}
|
|
1641
|
-
});
|
|
1642
|
-
}
|
|
1643
|
-
/** Subscribes to chip blur events. */
|
|
1644
|
-
_listenToChipsBlur() {
|
|
1645
|
-
this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
|
|
1646
|
-
this._blur();
|
|
1647
|
-
});
|
|
1648
|
-
}
|
|
1649
|
-
/** Subscribes to selection changes in the option chips. */
|
|
1650
|
-
_listenToChipsSelection() {
|
|
1651
|
-
this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((chipSelectionChange) => {
|
|
1652
|
-
this._chipSetFoundation.handleChipSelection({
|
|
1653
|
-
chipId: chipSelectionChange.source.id,
|
|
1654
|
-
selected: chipSelectionChange.selected,
|
|
1655
|
-
shouldIgnore: false,
|
|
1656
|
-
});
|
|
1657
|
-
if (chipSelectionChange.isUserInput) {
|
|
1658
|
-
this._propagateChanges();
|
|
1659
|
-
}
|
|
1660
|
-
});
|
|
1661
|
-
}
|
|
1662
1636
|
/**
|
|
1663
1637
|
* If the amount of chips changed, we need to update the
|
|
1664
1638
|
* key manager state and focus the next closest chip.
|
|
@@ -1668,7 +1642,7 @@ class MatChipListbox extends MatChipSet {
|
|
|
1668
1642
|
if (this._lastDestroyedChipIndex != null) {
|
|
1669
1643
|
if (this._chips.length) {
|
|
1670
1644
|
const newChipIndex = Math.min(this._lastDestroyedChipIndex, this._chips.length - 1);
|
|
1671
|
-
this.
|
|
1645
|
+
this._chips.toArray()[newChipIndex].focus();
|
|
1672
1646
|
}
|
|
1673
1647
|
else {
|
|
1674
1648
|
this.focus();
|
|
@@ -1677,12 +1651,20 @@ class MatChipListbox extends MatChipSet {
|
|
|
1677
1651
|
this._lastDestroyedChipIndex = null;
|
|
1678
1652
|
}
|
|
1679
1653
|
}
|
|
1680
|
-
MatChipListbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
1681
|
-
MatChipListbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
1682
|
-
|
|
1654
|
+
MatChipListbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipListbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1655
|
+
MatChipListbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatChipListbox, selector: "mat-chip-listbox", inputs: { tabIndex: "tabIndex", multiple: "multiple", ariaOrientation: ["aria-orientation", "ariaOrientation"], selectable: "selectable", compareWith: "compareWith", required: "required", value: "value" }, outputs: { change: "change" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "attr.role": "role", "tabIndex": "empty ? -1 : tabIndex", "attr.aria-describedby": "_ariaDescribedby || null", "attr.aria-required": "role ? required : null", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "ariaOrientation", "class.mat-mdc-chip-list-disabled": "disabled", "class.mat-mdc-chip-list-required": "required" }, classAttribute: "mdc-evolution-chip-set mat-mdc-chip-listbox" }, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "_chips", predicate: MatChipOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1656
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1657
|
+
<ng-content></ng-content>
|
|
1658
|
+
</span>
|
|
1659
|
+
`, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipListbox, decorators: [{
|
|
1683
1661
|
type: Component,
|
|
1684
|
-
args: [{ selector: 'mat-chip-listbox', template:
|
|
1685
|
-
|
|
1662
|
+
args: [{ selector: 'mat-chip-listbox', template: `
|
|
1663
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
1664
|
+
<ng-content></ng-content>
|
|
1665
|
+
</span>
|
|
1666
|
+
`, inputs: ['tabIndex'], host: {
|
|
1667
|
+
'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',
|
|
1686
1668
|
'[attr.role]': 'role',
|
|
1687
1669
|
'[tabIndex]': 'empty ? -1 : tabIndex',
|
|
1688
1670
|
// TODO: replace this binding with use of AriaDescriber
|
|
@@ -1696,13 +1678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
1696
1678
|
'(focus)': 'focus()',
|
|
1697
1679
|
'(blur)': '_blur()',
|
|
1698
1680
|
'(keydown)': '_keydown($event)',
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
}], ctorParameters: function () {
|
|
1702
|
-
return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Directionality, decorators: [{
|
|
1703
|
-
type: Optional
|
|
1704
|
-
}] }];
|
|
1705
|
-
}, propDecorators: { multiple: [{
|
|
1681
|
+
}, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}\n"] }]
|
|
1682
|
+
}], propDecorators: { multiple: [{
|
|
1706
1683
|
type: Input
|
|
1707
1684
|
}], ariaOrientation: [{
|
|
1708
1685
|
type: Input,
|
|
@@ -1733,234 +1710,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
1733
1710
|
* Use of this source code is governed by an MIT-style license that can be
|
|
1734
1711
|
* found in the LICENSE file at https://angular.io/license
|
|
1735
1712
|
*/
|
|
1736
|
-
/** The keys handled by the GridKeyManager keydown method. */
|
|
1737
|
-
const NAVIGATION_KEYS = [DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW];
|
|
1738
|
-
/**
|
|
1739
|
-
* This class manages keyboard events for grids. If you pass it a query list
|
|
1740
|
-
* of GridKeyManagerRow, it will set the active cell correctly when arrow events occur.
|
|
1741
|
-
*
|
|
1742
|
-
* GridKeyManager expects that rows may change dynamically, but the cells for a given row are
|
|
1743
|
-
* static. It also expects that all rows have the same number of cells.
|
|
1744
|
-
*/
|
|
1745
|
-
class GridKeyManager {
|
|
1746
|
-
constructor(_rows) {
|
|
1747
|
-
this._rows = _rows;
|
|
1748
|
-
this._activeRowIndex = -1;
|
|
1749
|
-
this._activeColumnIndex = -1;
|
|
1750
|
-
this._activeRow = null;
|
|
1751
|
-
this._activeCell = null;
|
|
1752
|
-
this._dir = 'ltr';
|
|
1753
|
-
this._homeAndEnd = false;
|
|
1754
|
-
/** Stream that emits whenever the active cell of the grid manager changes. */
|
|
1755
|
-
this.change = new Subject();
|
|
1756
|
-
// We allow for the rows to be an array because, in some cases, the consumer may
|
|
1757
|
-
// not have access to a QueryList of the rows they want to manage (e.g. when the
|
|
1758
|
-
// rows aren't being collected via `ViewChildren` or `ContentChildren`).
|
|
1759
|
-
if (_rows instanceof QueryList) {
|
|
1760
|
-
_rows.changes.subscribe((newRows) => {
|
|
1761
|
-
if (this._activeRow) {
|
|
1762
|
-
const newIndex = newRows.toArray().indexOf(this._activeRow);
|
|
1763
|
-
if (newIndex > -1 && newIndex !== this._activeRowIndex) {
|
|
1764
|
-
this._activeRowIndex = newIndex;
|
|
1765
|
-
}
|
|
1766
|
-
}
|
|
1767
|
-
});
|
|
1768
|
-
}
|
|
1769
|
-
}
|
|
1770
|
-
/**
|
|
1771
|
-
* Configures the directionality of the key manager's horizontal movement.
|
|
1772
|
-
* @param direction Direction which is considered forward movement across a row.
|
|
1773
|
-
*
|
|
1774
|
-
* If withDirectionality is not set, the default is 'ltr'.
|
|
1775
|
-
*/
|
|
1776
|
-
withDirectionality(direction) {
|
|
1777
|
-
this._dir = direction;
|
|
1778
|
-
return this;
|
|
1779
|
-
}
|
|
1780
|
-
setActiveCell(cell) {
|
|
1781
|
-
const previousRowIndex = this._activeRowIndex;
|
|
1782
|
-
const previousColumnIndex = this._activeColumnIndex;
|
|
1783
|
-
this.updateActiveCell(cell);
|
|
1784
|
-
if (this._activeRowIndex !== previousRowIndex ||
|
|
1785
|
-
this._activeColumnIndex !== previousColumnIndex) {
|
|
1786
|
-
this.change.next({ row: this._activeRowIndex, column: this._activeColumnIndex });
|
|
1787
|
-
}
|
|
1788
|
-
}
|
|
1789
|
-
/**
|
|
1790
|
-
* Configures the key manager to activate the first and last items
|
|
1791
|
-
* respectively when the Home or End key is pressed.
|
|
1792
|
-
* @param enabled Whether pressing the Home or End key activates the first/last item.
|
|
1793
|
-
*/
|
|
1794
|
-
withHomeAndEnd(enabled = true) {
|
|
1795
|
-
this._homeAndEnd = enabled;
|
|
1796
|
-
return this;
|
|
1797
|
-
}
|
|
1798
|
-
/**
|
|
1799
|
-
* Sets the active cell depending on the key event passed in.
|
|
1800
|
-
* @param event Keyboard event to be used for determining which element should be active.
|
|
1801
|
-
*/
|
|
1802
|
-
onKeydown(event) {
|
|
1803
|
-
const keyCode = event.keyCode;
|
|
1804
|
-
switch (keyCode) {
|
|
1805
|
-
case DOWN_ARROW:
|
|
1806
|
-
this.setNextRowActive();
|
|
1807
|
-
break;
|
|
1808
|
-
case UP_ARROW:
|
|
1809
|
-
this.setPreviousRowActive();
|
|
1810
|
-
break;
|
|
1811
|
-
case RIGHT_ARROW:
|
|
1812
|
-
this._dir === 'rtl' ? this.setPreviousColumnActive() : this.setNextColumnActive();
|
|
1813
|
-
break;
|
|
1814
|
-
case LEFT_ARROW:
|
|
1815
|
-
this._dir === 'rtl' ? this.setNextColumnActive() : this.setPreviousColumnActive();
|
|
1816
|
-
break;
|
|
1817
|
-
case HOME:
|
|
1818
|
-
if (this._homeAndEnd) {
|
|
1819
|
-
this.setFirstCellActive();
|
|
1820
|
-
break;
|
|
1821
|
-
}
|
|
1822
|
-
else {
|
|
1823
|
-
return;
|
|
1824
|
-
}
|
|
1825
|
-
case END:
|
|
1826
|
-
if (this._homeAndEnd) {
|
|
1827
|
-
this.setLastCellActive();
|
|
1828
|
-
break;
|
|
1829
|
-
}
|
|
1830
|
-
else {
|
|
1831
|
-
return;
|
|
1832
|
-
}
|
|
1833
|
-
default:
|
|
1834
|
-
// Note that we return here, in order to avoid preventing
|
|
1835
|
-
// the default action of non-navigational keys.
|
|
1836
|
-
return;
|
|
1837
|
-
}
|
|
1838
|
-
event.preventDefault();
|
|
1839
|
-
}
|
|
1840
|
-
/** Index of the currently active row. */
|
|
1841
|
-
get activeRowIndex() {
|
|
1842
|
-
return this._activeRowIndex;
|
|
1843
|
-
}
|
|
1844
|
-
/** Index of the currently active column. */
|
|
1845
|
-
get activeColumnIndex() {
|
|
1846
|
-
return this._activeColumnIndex;
|
|
1847
|
-
}
|
|
1848
|
-
/** The active cell. */
|
|
1849
|
-
get activeCell() {
|
|
1850
|
-
return this._activeCell;
|
|
1851
|
-
}
|
|
1852
|
-
/** Sets the active cell to the first cell in the grid. */
|
|
1853
|
-
setFirstCellActive() {
|
|
1854
|
-
this._setActiveCellByIndex(0, 0);
|
|
1855
|
-
}
|
|
1856
|
-
/** Sets the active cell to the last cell in the grid. */
|
|
1857
|
-
setLastCellActive() {
|
|
1858
|
-
const lastRowIndex = this._rows.length - 1;
|
|
1859
|
-
const lastRow = this._getRowsArray()[lastRowIndex];
|
|
1860
|
-
this._setActiveCellByIndex(lastRowIndex, lastRow.cells.length - 1);
|
|
1861
|
-
}
|
|
1862
|
-
/** Sets the active row to the next row in the grid. Active column is unchanged. */
|
|
1863
|
-
setNextRowActive() {
|
|
1864
|
-
this._activeRowIndex < 0 ? this.setFirstCellActive() : this._setActiveCellByDelta(1, 0);
|
|
1865
|
-
}
|
|
1866
|
-
/** Sets the active row to the previous row in the grid. Active column is unchanged. */
|
|
1867
|
-
setPreviousRowActive() {
|
|
1868
|
-
this._setActiveCellByDelta(-1, 0);
|
|
1869
|
-
}
|
|
1870
|
-
/**
|
|
1871
|
-
* Sets the active column to the next column in the grid.
|
|
1872
|
-
* Active row is unchanged, unless we reach the end of a row.
|
|
1873
|
-
*/
|
|
1874
|
-
setNextColumnActive() {
|
|
1875
|
-
this._activeRowIndex < 0 ? this.setFirstCellActive() : this._setActiveCellByDelta(0, 1);
|
|
1876
|
-
}
|
|
1877
|
-
/**
|
|
1878
|
-
* Sets the active column to the previous column in the grid.
|
|
1879
|
-
* Active row is unchanged, unless we reach the end of a row.
|
|
1880
|
-
*/
|
|
1881
|
-
setPreviousColumnActive() {
|
|
1882
|
-
this._setActiveCellByDelta(0, -1);
|
|
1883
|
-
}
|
|
1884
|
-
updateActiveCell(cell) {
|
|
1885
|
-
const rowArray = this._getRowsArray();
|
|
1886
|
-
if (typeof cell === 'object' &&
|
|
1887
|
-
typeof cell.row === 'number' &&
|
|
1888
|
-
typeof cell.column === 'number') {
|
|
1889
|
-
this._activeRowIndex = cell.row;
|
|
1890
|
-
this._activeColumnIndex = cell.column;
|
|
1891
|
-
this._activeRow = rowArray[cell.row] || null;
|
|
1892
|
-
this._activeCell = this._activeRow ? this._activeRow.cells[cell.column] || null : null;
|
|
1893
|
-
}
|
|
1894
|
-
else {
|
|
1895
|
-
rowArray.forEach((row, rowIndex) => {
|
|
1896
|
-
const columnIndex = row.cells.indexOf(cell);
|
|
1897
|
-
if (columnIndex !== -1) {
|
|
1898
|
-
this._activeRowIndex = rowIndex;
|
|
1899
|
-
this._activeColumnIndex = columnIndex;
|
|
1900
|
-
this._activeRow = row;
|
|
1901
|
-
this._activeCell = row.cells[columnIndex];
|
|
1902
|
-
}
|
|
1903
|
-
});
|
|
1904
|
-
}
|
|
1905
|
-
}
|
|
1906
|
-
/**
|
|
1907
|
-
* This method sets the active cell, given the row and columns deltas
|
|
1908
|
-
* between the currently active cell and the new active cell.
|
|
1909
|
-
*/
|
|
1910
|
-
_setActiveCellByDelta(rowDelta, columnDelta) {
|
|
1911
|
-
// If delta puts us past the last cell in a row, move to the first cell of the next row.
|
|
1912
|
-
if (this._activeRow && this._activeColumnIndex + columnDelta >= this._activeRow.cells.length) {
|
|
1913
|
-
this._setActiveCellByIndex(this._activeRowIndex + 1, 0);
|
|
1914
|
-
// If delta puts us prior to the first cell in a row, move to the last cell of the previous row.
|
|
1915
|
-
}
|
|
1916
|
-
else if (this._activeColumnIndex + columnDelta < 0) {
|
|
1917
|
-
const previousRowIndex = this._activeRowIndex - 1;
|
|
1918
|
-
const previousRow = this._getRowsArray()[previousRowIndex];
|
|
1919
|
-
if (previousRow) {
|
|
1920
|
-
this._setActiveCellByIndex(previousRowIndex, previousRow.cells.length - 1);
|
|
1921
|
-
}
|
|
1922
|
-
}
|
|
1923
|
-
else {
|
|
1924
|
-
this._setActiveCellByIndex(this._activeRowIndex + rowDelta, this._activeColumnIndex + columnDelta);
|
|
1925
|
-
}
|
|
1926
|
-
}
|
|
1927
|
-
/**
|
|
1928
|
-
* Sets the active cell to the cell at the indices specified, if they are valid.
|
|
1929
|
-
*/
|
|
1930
|
-
_setActiveCellByIndex(rowIndex, columnIndex) {
|
|
1931
|
-
const rows = this._getRowsArray();
|
|
1932
|
-
const targetRow = rows[rowIndex];
|
|
1933
|
-
if (!targetRow || !targetRow.cells[columnIndex]) {
|
|
1934
|
-
return;
|
|
1935
|
-
}
|
|
1936
|
-
this.setActiveCell({ row: rowIndex, column: columnIndex });
|
|
1937
|
-
}
|
|
1938
|
-
/** Returns the rows as an array. */
|
|
1939
|
-
_getRowsArray() {
|
|
1940
|
-
return this._rows instanceof QueryList ? this._rows.toArray() : this._rows;
|
|
1941
|
-
}
|
|
1942
|
-
}
|
|
1943
|
-
|
|
1944
|
-
/**
|
|
1945
|
-
* @license
|
|
1946
|
-
* Copyright Google LLC All Rights Reserved.
|
|
1947
|
-
*
|
|
1948
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
1949
|
-
* found in the LICENSE file at https://angular.io/license
|
|
1950
|
-
*/
|
|
1951
|
-
/**
|
|
1952
|
-
* A version of GridKeyManager where the cells are HTMLElements, and focus()
|
|
1953
|
-
* is called on a cell when it becomes active.
|
|
1954
|
-
*/
|
|
1955
|
-
class GridFocusKeyManager extends GridKeyManager {
|
|
1956
|
-
setActiveCell(cell) {
|
|
1957
|
-
super.setActiveCell(cell);
|
|
1958
|
-
if (this.activeCell) {
|
|
1959
|
-
this.activeCell.focus();
|
|
1960
|
-
}
|
|
1961
|
-
}
|
|
1962
|
-
}
|
|
1963
|
-
|
|
1964
1713
|
/** Change event object that is emitted when the chip grid value has changed. */
|
|
1965
1714
|
class MatChipGridChange {
|
|
1966
1715
|
constructor(
|
|
@@ -1977,10 +1726,10 @@ class MatChipGridChange {
|
|
|
1977
1726
|
* @docs-private
|
|
1978
1727
|
*/
|
|
1979
1728
|
class MatChipGridBase extends MatChipSet {
|
|
1980
|
-
constructor(
|
|
1729
|
+
constructor(liveAnnouncer, document, elementRef, changeDetectorRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup,
|
|
1981
1730
|
/** @docs-private */
|
|
1982
1731
|
ngControl) {
|
|
1983
|
-
super(
|
|
1732
|
+
super(liveAnnouncer, document, elementRef, changeDetectorRef);
|
|
1984
1733
|
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
|
|
1985
1734
|
this._parentForm = _parentForm;
|
|
1986
1735
|
this._parentFormGroup = _parentFormGroup;
|
|
@@ -1993,8 +1742,8 @@ const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase);
|
|
|
1993
1742
|
* the matChipInputFor directive.
|
|
1994
1743
|
*/
|
|
1995
1744
|
class MatChipGrid extends _MatChipGridMixinBase {
|
|
1996
|
-
constructor(
|
|
1997
|
-
super(
|
|
1745
|
+
constructor(liveAnnouncer, document, elementRef, changeDetectorRef, parentForm, parentFormGroup, defaultErrorStateMatcher, ngControl) {
|
|
1746
|
+
super(liveAnnouncer, document, elementRef, changeDetectorRef, defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
|
|
1998
1747
|
/**
|
|
1999
1748
|
* Implemented as part of MatFormFieldControl.
|
|
2000
1749
|
* @docs-private
|
|
@@ -2098,20 +1847,23 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2098
1847
|
}
|
|
2099
1848
|
/** Combined stream of all of the child chips' blur events. */
|
|
2100
1849
|
get chipBlurChanges() {
|
|
2101
|
-
return
|
|
1850
|
+
return this._getChipStream(chip => chip._onBlur);
|
|
2102
1851
|
}
|
|
2103
1852
|
/** Combined stream of all of the child chips' focus events. */
|
|
2104
1853
|
get chipFocusChanges() {
|
|
2105
|
-
return
|
|
1854
|
+
return this._getChipStream(chip => chip._onFocus);
|
|
2106
1855
|
}
|
|
2107
1856
|
ngAfterContentInit() {
|
|
2108
1857
|
super.ngAfterContentInit();
|
|
2109
|
-
this._initKeyManager();
|
|
2110
1858
|
this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
|
|
2111
1859
|
// Check to see if we have a destroyed chip and need to refocus
|
|
2112
1860
|
this._updateFocusForDestroyedChips();
|
|
2113
1861
|
this.stateChanges.next();
|
|
2114
1862
|
});
|
|
1863
|
+
this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
1864
|
+
this._blur();
|
|
1865
|
+
this.stateChanges.next();
|
|
1866
|
+
});
|
|
2115
1867
|
}
|
|
2116
1868
|
ngAfterViewInit() {
|
|
2117
1869
|
super.ngAfterViewInit();
|
|
@@ -2134,14 +1886,13 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2134
1886
|
/** Associates an HTML input element with this chip grid. */
|
|
2135
1887
|
registerInput(inputElement) {
|
|
2136
1888
|
this._chipInput = inputElement;
|
|
2137
|
-
this._setMdcClass('mdc-chip-set--input', true);
|
|
2138
1889
|
}
|
|
2139
1890
|
/**
|
|
2140
1891
|
* Implemented as part of MatFormFieldControl.
|
|
2141
1892
|
* @docs-private
|
|
2142
1893
|
*/
|
|
2143
1894
|
onContainerClick(event) {
|
|
2144
|
-
if (!this.
|
|
1895
|
+
if (!this.disabled && !this._originatesFromChip(event)) {
|
|
2145
1896
|
this.focus();
|
|
2146
1897
|
}
|
|
2147
1898
|
}
|
|
@@ -2154,10 +1905,16 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2154
1905
|
return;
|
|
2155
1906
|
}
|
|
2156
1907
|
if (this._chips.length > 0) {
|
|
2157
|
-
|
|
1908
|
+
// MDC sets the tabindex directly on the DOM node when the user is navigating which means
|
|
1909
|
+
// that we may end up with a `0` value from a previous interaction. We reset it manually
|
|
1910
|
+
// here to ensure that the state is correct.
|
|
1911
|
+
this._chips.forEach(chip => chip.primaryAction._updateTabindex(-1));
|
|
1912
|
+
this._chips.first.focus();
|
|
2158
1913
|
}
|
|
2159
1914
|
else {
|
|
2160
|
-
this
|
|
1915
|
+
// Delay until the next tick, because this can cause a "changed after checked"
|
|
1916
|
+
// error if the input does something on focus (e.g. opens an autocomplete).
|
|
1917
|
+
Promise.resolve().then(() => this._chipInput.focus());
|
|
2161
1918
|
}
|
|
2162
1919
|
this.stateChanges.next();
|
|
2163
1920
|
}
|
|
@@ -2209,7 +1966,6 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2209
1966
|
// Timeout is needed to wait for the focus() event trigger on chip input.
|
|
2210
1967
|
setTimeout(() => {
|
|
2211
1968
|
if (!this.focused) {
|
|
2212
|
-
this._keyManager.setActiveCell({ row: -1, column: -1 });
|
|
2213
1969
|
this._propagateChanges();
|
|
2214
1970
|
this._markAsTouched();
|
|
2215
1971
|
}
|
|
@@ -2221,78 +1977,21 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2221
1977
|
* it back to the first chip, creating a focus trap, if it user tries to tab away.
|
|
2222
1978
|
*/
|
|
2223
1979
|
_allowFocusEscape() {
|
|
2224
|
-
if (this._chipInput.focused) {
|
|
2225
|
-
|
|
2226
|
-
}
|
|
2227
|
-
const previousTabIndex = this.tabIndex;
|
|
2228
|
-
if (this.tabIndex !== -1) {
|
|
2229
|
-
this.tabIndex = -1;
|
|
2230
|
-
setTimeout(() => {
|
|
2231
|
-
this.tabIndex = previousTabIndex;
|
|
2232
|
-
this._changeDetectorRef.markForCheck();
|
|
2233
|
-
});
|
|
1980
|
+
if (!this._chipInput.focused) {
|
|
1981
|
+
super._allowFocusEscape();
|
|
2234
1982
|
}
|
|
2235
1983
|
}
|
|
2236
1984
|
/** Handles custom keyboard events. */
|
|
2237
1985
|
_keydown(event) {
|
|
2238
|
-
|
|
2239
|
-
const keyCode = event.keyCode;
|
|
2240
|
-
const manager = this._keyManager;
|
|
2241
|
-
if (keyCode === TAB && target.id !== this._chipInput.id) {
|
|
1986
|
+
if (event.keyCode === TAB && event.target.id !== this._chipInput.id) {
|
|
2242
1987
|
this._allowFocusEscape();
|
|
2243
1988
|
}
|
|
2244
|
-
else if (this._originatesFromEditingChip(event)) {
|
|
2245
|
-
// No-op, let the editing chip handle all keyboard events except for Tab.
|
|
2246
|
-
}
|
|
2247
|
-
else if (this._originatesFromChip(event)) {
|
|
2248
|
-
manager.onKeydown(event);
|
|
2249
|
-
}
|
|
2250
1989
|
this.stateChanges.next();
|
|
2251
1990
|
}
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
this._chipBlurSubscription.unsubscribe();
|
|
2257
|
-
this._chipBlurSubscription = null;
|
|
2258
|
-
}
|
|
2259
|
-
if (this._chipFocusSubscription) {
|
|
2260
|
-
this._chipFocusSubscription.unsubscribe();
|
|
2261
|
-
this._chipFocusSubscription = null;
|
|
2262
|
-
}
|
|
2263
|
-
}
|
|
2264
|
-
/** Subscribes to events on the child chips. */
|
|
2265
|
-
_subscribeToChipEvents() {
|
|
2266
|
-
super._subscribeToChipEvents();
|
|
2267
|
-
this._listenToChipsFocus();
|
|
2268
|
-
this._listenToChipsBlur();
|
|
2269
|
-
}
|
|
2270
|
-
/** Initializes the key manager to manage focus. */
|
|
2271
|
-
_initKeyManager() {
|
|
2272
|
-
this._keyManager = new GridFocusKeyManager(this._chips)
|
|
2273
|
-
.withHomeAndEnd()
|
|
2274
|
-
.withDirectionality(this._dir ? this._dir.value : 'ltr');
|
|
2275
|
-
if (this._dir) {
|
|
2276
|
-
this._dir.change
|
|
2277
|
-
.pipe(takeUntil(this._destroyed))
|
|
2278
|
-
.subscribe(dir => this._keyManager.withDirectionality(dir));
|
|
2279
|
-
}
|
|
2280
|
-
}
|
|
2281
|
-
/** Subscribes to chip focus events. */
|
|
2282
|
-
_listenToChipsFocus() {
|
|
2283
|
-
this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
|
|
2284
|
-
let chipIndex = this._chips.toArray().indexOf(event.chip);
|
|
2285
|
-
if (this._isValidIndex(chipIndex)) {
|
|
2286
|
-
this._keyManager.updateActiveCell({ row: chipIndex, column: 0 });
|
|
2287
|
-
}
|
|
2288
|
-
});
|
|
2289
|
-
}
|
|
2290
|
-
/** Subscribes to chip blur events. */
|
|
2291
|
-
_listenToChipsBlur() {
|
|
2292
|
-
this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
|
|
2293
|
-
this._blur();
|
|
2294
|
-
this.stateChanges.next();
|
|
2295
|
-
});
|
|
1991
|
+
_focusLastChip() {
|
|
1992
|
+
if (this._chips.length) {
|
|
1993
|
+
this._chips.last.primaryAction.focus();
|
|
1994
|
+
}
|
|
2296
1995
|
}
|
|
2297
1996
|
/** Emits change event to set the model value. */
|
|
2298
1997
|
_propagateChanges() {
|
|
@@ -2317,10 +2016,7 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2317
2016
|
if (this._lastDestroyedChipIndex != null) {
|
|
2318
2017
|
if (this._chips.length) {
|
|
2319
2018
|
const newChipIndex = Math.min(this._lastDestroyedChipIndex, this._chips.length - 1);
|
|
2320
|
-
this.
|
|
2321
|
-
row: newChipIndex,
|
|
2322
|
-
column: Math.max(this._keyManager.activeColumnIndex, 0),
|
|
2323
|
-
});
|
|
2019
|
+
this._chips.toArray()[newChipIndex].focus();
|
|
2324
2020
|
}
|
|
2325
2021
|
else {
|
|
2326
2022
|
this.focus();
|
|
@@ -2328,17 +2024,21 @@ class MatChipGrid extends _MatChipGridMixinBase {
|
|
|
2328
2024
|
}
|
|
2329
2025
|
this._lastDestroyedChipIndex = null;
|
|
2330
2026
|
}
|
|
2331
|
-
/** Focus input element. */
|
|
2332
|
-
_focusInput() {
|
|
2333
|
-
this._chipInput.focus();
|
|
2334
|
-
}
|
|
2335
2027
|
}
|
|
2336
|
-
MatChipGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
2337
|
-
MatChipGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
2338
|
-
|
|
2028
|
+
MatChipGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", 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 });
|
|
2029
|
+
MatChipGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", 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: `
|
|
2030
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
2031
|
+
<ng-content></ng-content>
|
|
2032
|
+
</span>
|
|
2033
|
+
`, 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 });
|
|
2034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipGrid, decorators: [{
|
|
2339
2035
|
type: Component,
|
|
2340
|
-
args: [{ selector: 'mat-chip-grid', template:
|
|
2341
|
-
|
|
2036
|
+
args: [{ selector: 'mat-chip-grid', template: `
|
|
2037
|
+
<span class="mdc-evolution-chip-set__chips" role="presentation">
|
|
2038
|
+
<ng-content></ng-content>
|
|
2039
|
+
</span>
|
|
2040
|
+
`, inputs: ['tabIndex'], host: {
|
|
2041
|
+
'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set',
|
|
2342
2042
|
'[attr.role]': 'role',
|
|
2343
2043
|
'[tabIndex]': '_chips && _chips.length === 0 ? -1 : tabIndex',
|
|
2344
2044
|
// TODO: replace this binding with use of AriaDescriber
|
|
@@ -2351,12 +2051,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
2351
2051
|
'(focus)': 'focus()',
|
|
2352
2052
|
'(blur)': '_blur()',
|
|
2353
2053
|
'(keydown)': '_keydown($event)',
|
|
2354
|
-
|
|
2355
|
-
}, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip{border-radius:16px;height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-chip{cursor:default}.mat-mdc-chip._mat-animation-noopable{animation:none;transition:none}.mat-mdc-chip._mat-animation-noopable .mdc-chip__checkmark-svg{transition:none}.cdk-high-contrast-active .mat-mdc-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-chip:focus{outline:dotted 2px}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-chip__ripple::after,.mdc-chip__ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;content:\"\";pointer-events:none;opacity:0;border-radius:inherit}._mat-animation-noopable .mdc-chip__ripple::after,._mat-animation-noopable .mdc-chip__ripple::before{transition:none}.mat-mdc-chip-disabled.mat-mdc-chip{opacity:.4}.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-trailing-icon,.mat-mdc-chip-disabled.mat-mdc-chip .mat-mdc-chip-row-focusable-text-content{pointer-events:none}.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::after,.mat-mdc-chip-disabled.mat-mdc-chip .mdc-chip__ripple::before{display:none}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}input.mat-mdc-chip-input{flex:1 0 150px}.mat-mdc-chip-grid{margin:-4px}.mat-mdc-chip-grid input.mat-mdc-chip-input{margin:4px}._mat-animation-noopable .mdc-chip__checkmark-path{transition:none}.cdk-high-contrast-black-on-white .mdc-chip__checkmark-path{stroke:#000 !important}.mat-mdc-chip-row-focusable-text-content{position:relative}.mat-mdc-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-row-focusable-text-content,.mat-mdc-chip-remove-icon{display:flex;align-items:center}.mat-mdc-chip-content{display:inline-flex}.mdc-chip--editing{background-color:transparent;display:flex;flex-direction:column}.mdc-chip--editing .mat-mdc-chip-content{pointer-events:none;height:0;overflow:hidden}.mat-chip-edit-input{cursor:text;display:inline-block}.mat-mdc-chip-edit-input-container{width:100%;height:100%;display:flex;align-items:center}\n"] }]
|
|
2054
|
+
}, 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"] }]
|
|
2356
2055
|
}], ctorParameters: function () {
|
|
2357
|
-
return [{ type:
|
|
2358
|
-
type:
|
|
2359
|
-
|
|
2056
|
+
return [{ type: i1.LiveAnnouncer }, { type: undefined, decorators: [{
|
|
2057
|
+
type: Inject,
|
|
2058
|
+
args: [DOCUMENT]
|
|
2059
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm, decorators: [{
|
|
2360
2060
|
type: Optional
|
|
2361
2061
|
}] }, { type: i2$1.FormGroupDirective, decorators: [{
|
|
2362
2062
|
type: Optional
|
|
@@ -2475,18 +2175,11 @@ class MatChipInput {
|
|
|
2475
2175
|
/** Utility method to make host definition/tests more clear. */
|
|
2476
2176
|
_keydown(event) {
|
|
2477
2177
|
if (event) {
|
|
2478
|
-
// Allow the user's focus to escape when they're tabbing forward. Note that we don't
|
|
2479
|
-
// want to do this when going backwards, because focus should go back to the first chip.
|
|
2480
|
-
if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
|
|
2481
|
-
this._chipGrid._allowFocusEscape();
|
|
2482
|
-
}
|
|
2483
2178
|
// To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
|
|
2484
2179
|
// We focus the last chip on backspace only after the user has released the backspace button,
|
|
2485
2180
|
// And the input is empty (see behaviour in _keyup)
|
|
2486
2181
|
if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
|
|
2487
|
-
|
|
2488
|
-
this._chipGrid._keyManager.setLastCellActive();
|
|
2489
|
-
}
|
|
2182
|
+
this._chipGrid._focusLastChip();
|
|
2490
2183
|
event.preventDefault();
|
|
2491
2184
|
return;
|
|
2492
2185
|
}
|
|
@@ -2555,9 +2248,9 @@ class MatChipInput {
|
|
|
2555
2248
|
return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
|
|
2556
2249
|
}
|
|
2557
2250
|
}
|
|
2558
|
-
MatChipInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
2559
|
-
MatChipInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
2560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
2251
|
+
MatChipInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipInput, deps: [{ token: i0.ElementRef }, { token: MAT_CHIPS_DEFAULT_OPTIONS }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2252
|
+
MatChipInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", 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 });
|
|
2253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipInput, decorators: [{
|
|
2561
2254
|
type: Directive,
|
|
2562
2255
|
args: [{
|
|
2563
2256
|
selector: 'input[matChipInputFor]',
|
|
@@ -2620,7 +2313,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
2620
2313
|
const CHIP_DECLARATIONS = [
|
|
2621
2314
|
MatChip,
|
|
2622
2315
|
MatChipAvatar,
|
|
2623
|
-
MatChipCssInternalOnly,
|
|
2624
2316
|
MatChipEditInput,
|
|
2625
2317
|
MatChipGrid,
|
|
2626
2318
|
MatChipInput,
|
|
@@ -2633,10 +2325,9 @@ const CHIP_DECLARATIONS = [
|
|
|
2633
2325
|
];
|
|
2634
2326
|
class MatChipsModule {
|
|
2635
2327
|
}
|
|
2636
|
-
MatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
2637
|
-
MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
2328
|
+
MatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2329
|
+
MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipsModule, declarations: [MatChipAction, MatChip,
|
|
2638
2330
|
MatChipAvatar,
|
|
2639
|
-
MatChipCssInternalOnly,
|
|
2640
2331
|
MatChipEditInput,
|
|
2641
2332
|
MatChipGrid,
|
|
2642
2333
|
MatChipInput,
|
|
@@ -2647,7 +2338,6 @@ MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2647
2338
|
MatChipSet,
|
|
2648
2339
|
MatChipTrailingIcon], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatCommonModule, MatChip,
|
|
2649
2340
|
MatChipAvatar,
|
|
2650
|
-
MatChipCssInternalOnly,
|
|
2651
2341
|
MatChipEditInput,
|
|
2652
2342
|
MatChipGrid,
|
|
2653
2343
|
MatChipInput,
|
|
@@ -2657,7 +2347,7 @@ MatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2657
2347
|
MatChipRow,
|
|
2658
2348
|
MatChipSet,
|
|
2659
2349
|
MatChipTrailingIcon] });
|
|
2660
|
-
MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
2350
|
+
MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipsModule, providers: [
|
|
2661
2351
|
ErrorStateMatcher,
|
|
2662
2352
|
{
|
|
2663
2353
|
provide: MAT_CHIPS_DEFAULT_OPTIONS,
|
|
@@ -2666,12 +2356,12 @@ MatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
2666
2356
|
},
|
|
2667
2357
|
},
|
|
2668
2358
|
], imports: [[MatCommonModule, CommonModule, MatRippleModule], MatCommonModule] });
|
|
2669
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
2359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatChipsModule, decorators: [{
|
|
2670
2360
|
type: NgModule,
|
|
2671
2361
|
args: [{
|
|
2672
2362
|
imports: [MatCommonModule, CommonModule, MatRippleModule],
|
|
2673
2363
|
exports: [MatCommonModule, CHIP_DECLARATIONS],
|
|
2674
|
-
declarations: CHIP_DECLARATIONS,
|
|
2364
|
+
declarations: [MatChipAction, CHIP_DECLARATIONS],
|
|
2675
2365
|
providers: [
|
|
2676
2366
|
ErrorStateMatcher,
|
|
2677
2367
|
{
|
|
@@ -2704,5 +2394,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
2704
2394
|
* Generated bundle index. Do not edit.
|
|
2705
2395
|
*/
|
|
2706
2396
|
|
|
2707
|
-
export { MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar,
|
|
2397
|
+
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 };
|
|
2708
2398
|
//# sourceMappingURL=mdc-chips.mjs.map
|