@m3e/chips 1.0.0-rc.1 → 1.0.0-rc.2
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/README.md +1 -2
- package/dist/custom-elements.json +4780 -481
- package/dist/html-custom-data.json +10 -10
- package/dist/index.js +10 -12
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +60 -60
- package/dist/index.min.js.map +1 -1
- package/package.json +5 -5
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -183
- package/dist/src/AssistChipElement.d.ts +0 -82
- package/dist/src/AssistChipElement.d.ts.map +0 -1
- package/dist/src/ChipElement.d.ts +0 -86
- package/dist/src/ChipElement.d.ts.map +0 -1
- package/dist/src/ChipSetElement.d.ts +0 -43
- package/dist/src/ChipSetElement.d.ts.map +0 -1
- package/dist/src/ChipVariant.d.ts +0 -3
- package/dist/src/ChipVariant.d.ts.map +0 -1
- package/dist/src/FilterChipElement.d.ts +0 -93
- package/dist/src/FilterChipElement.d.ts.map +0 -1
- package/dist/src/FilterChipSetElement.d.ts +0 -78
- package/dist/src/FilterChipSetElement.d.ts.map +0 -1
- package/dist/src/InputChipElement.d.ts +0 -104
- package/dist/src/InputChipElement.d.ts.map +0 -1
- package/dist/src/InputChipSetElement.d.ts +0 -75
- package/dist/src/InputChipSetElement.d.ts.map +0 -1
- package/dist/src/SuggestionChipElement.d.ts +0 -83
- package/dist/src/SuggestionChipElement.d.ts.map +0 -1
- package/dist/src/index.d.ts +0 -10
- package/dist/src/index.d.ts.map +0 -1
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/AssistChipElement.ts +0 -103
- package/src/ChipElement.ts +0 -336
- package/src/ChipSetElement.ts +0 -60
- package/src/ChipVariant.ts +0 -2
- package/src/FilterChipElement.ts +0 -254
- package/src/FilterChipSetElement.ts +0 -161
- package/src/InputChipElement.ts +0 -287
- package/src/InputChipSetElement.ts +0 -360
- package/src/SuggestionChipElement.ts +0 -104
- package/src/index.ts +0 -9
- package/tsconfig.json +0 -9
package/dist/index.min.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{
|
|
6
|
+
import{unsafeCSS as e,css as t,LitElement as i,nothing as s,html as o}from"lit";import{DesignToken as n,isDisabledMixin as r,isDisabledInteractiveMixin as a,isLinkButtonMixin as l,renderPseudoLink as c,hasAssignedNodes as h,getTextContent as d,FormSubmitter as p,AttachInternals as u,LinkButton as v,KeyboardClick as m,Focusable as f,DisabledInteractive as b,Disabled as g,Role as $,Vertical as y,Selected as _,Labelled as w,Dirty as A,Touched as E,FormAssociated as S,formValue as x,EventAttribute as C,RequiredConstraintValidation as k,Required as P,ConstraintValidation as T}from"@m3e/core";import{selectionManager as M,SelectionManager as I,ListManager as U,ListKeyManager as O}from"@m3e/core/a11y";function L(e,t,i,s){var o,n=arguments.length,r=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(r=(n<3?o(r):n>3?o(t,i,r):o(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r}function H(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)}function N(e,t,i,s,o){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?o.call(e,i):o?o.value=i:t.set(e,i),i}"function"==typeof SuppressedError&&SuppressedError;
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
@@ -36,21 +36,21 @@ const re={attribute:!0,type:String,converter:ie,reflect:!1,hasChanged:se},ae=(e=
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i))(t,i,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}var he,de,pe,ue,ve,me,fe;let be=class extends
|
|
40
|
-
<m3e-elevation class="elevation" ?disabled="${e||
|
|
41
|
-
<m3e-state-layer class="state-layer" ?disabled="${e||
|
|
39
|
+
function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i))(t,i,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}var he,de,pe,ue,ve,me,fe;let be=class extends i{constructor(){super(...arguments),he.add(this),de.set(this,void 0),pe.set(this,""),this.variant="outlined"}get value(){return H(this,de,"f")??H(this,pe,"f")}set value(e){N(this,de,e,"f")}firstUpdated(e){super.firstUpdated(e),"listitem"===this.role&&this.removeAttribute("tabindex"),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>{e?.htmlFor||e?.attach(this)})}render(){const e=!r(this)||this.disabled,t=a(this)&&this.disabledInteractive;return o`<div class="base">
|
|
40
|
+
<m3e-elevation class="elevation" ?disabled="${e||t}"></m3e-elevation>
|
|
41
|
+
<m3e-state-layer class="state-layer" ?disabled="${e||t}"></m3e-state-layer>
|
|
42
42
|
<m3e-focus-ring class="focus-ring" ?disabled="${e}"></m3e-focus-ring>
|
|
43
|
-
<m3e-ripple class="ripple" ?disabled="${e||
|
|
43
|
+
<m3e-ripple class="ripple" ?disabled="${e||t}"></m3e-ripple>
|
|
44
44
|
<div class="touch" aria-hidden="true"></div>
|
|
45
|
-
${l(this)?this[c]():
|
|
45
|
+
${l(this)?this[c]():s}
|
|
46
46
|
<div class="wrapper">${H(this,he,"m",ue).call(this)}</div>
|
|
47
|
-
</div>`}_renderIcon(){return
|
|
47
|
+
</div>`}_renderIcon(){return o`<slot name="icon" aria-hidden="true" @slotchange="${H(this,he,"m",ve)}"></slot>`}_renderTrailingIcon(){return o`<slot
|
|
48
48
|
name="trailing-icon"
|
|
49
49
|
aria-hidden="true"
|
|
50
50
|
@slotchange="${H(this,he,"m",me)}"
|
|
51
|
-
></slot>`}_renderSlot(){return
|
|
51
|
+
></slot>`}_renderSlot(){return o`<slot @slotchange="${H(this,he,"m",fe)}"></slot>`}};de=new WeakMap,pe=new WeakMap,he=new WeakSet,ue=function(){return o`${this._renderIcon()}
|
|
52
52
|
<div class="label">${this._renderSlot()}</div>
|
|
53
|
-
${this._renderTrailingIcon()}`},ve=function(e){this.classList.toggle("-with-icon",
|
|
53
|
+
${this._renderTrailingIcon()}`},ve=function(e){this.classList.toggle("-with-icon",h(e.target))},me=function(e){this.classList.toggle("-with-trailing-icon",h(e.target))},fe=function(e){N(this,pe,d(e.target),"f")},be.styles=t`
|
|
54
54
|
:host {
|
|
55
55
|
display: inline-block;
|
|
56
56
|
vertical-align: middle;
|
|
@@ -64,13 +64,13 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
64
64
|
justify-content: center;
|
|
65
65
|
position: relative;
|
|
66
66
|
width: 100%;
|
|
67
|
-
transition: ${
|
|
68
|
-
border-radius: var(--m3e-chip-container-shape, ${
|
|
69
|
-
height: calc(var(--m3e-chip-container-height, 2rem) + ${
|
|
70
|
-
font-size: var(--m3e-chip-label-text-font-size, ${
|
|
71
|
-
font-weight: var(--m3e-chip-label-text-font-weight, ${
|
|
72
|
-
line-height: var(--m3e-chip-label-text-line-height, ${
|
|
73
|
-
letter-spacing: var(--m3e-chip-label-text-tracking, ${
|
|
67
|
+
transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard}`)};
|
|
68
|
+
border-radius: var(--m3e-chip-container-shape, ${n.shape.corner.small});
|
|
69
|
+
height: calc(var(--m3e-chip-container-height, 2rem) + ${n.density.calc(-2)});
|
|
70
|
+
font-size: var(--m3e-chip-label-text-font-size, ${n.typescale.standard.label.large.fontSize});
|
|
71
|
+
font-weight: var(--m3e-chip-label-text-font-weight, ${n.typescale.standard.label.large.fontWeight});
|
|
72
|
+
line-height: var(--m3e-chip-label-text-line-height, ${n.typescale.standard.label.large.lineHeight});
|
|
73
|
+
letter-spacing: var(--m3e-chip-label-text-tracking, ${n.typescale.standard.label.large.tracking});
|
|
74
74
|
}
|
|
75
75
|
:host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) {
|
|
76
76
|
cursor: pointer;
|
|
@@ -102,12 +102,12 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
102
102
|
text-overflow: ellipsis;
|
|
103
103
|
}
|
|
104
104
|
:host([variant="elevated"]) .base {
|
|
105
|
-
background-color: var(--m3e-elevated-chip-container-color, ${
|
|
105
|
+
background-color: var(--m3e-elevated-chip-container-color, ${n.color.surfaceContainerLow});
|
|
106
106
|
|
|
107
|
-
--m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${
|
|
108
|
-
--m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${
|
|
109
|
-
--m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${
|
|
110
|
-
--m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${
|
|
107
|
+
--m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${n.elevation.level1});
|
|
108
|
+
--m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${n.elevation.level2});
|
|
109
|
+
--m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${n.elevation.level1});
|
|
110
|
+
--m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${n.elevation.level1});
|
|
111
111
|
}
|
|
112
112
|
:host([variant="outlined"]) .base {
|
|
113
113
|
outline-width: var(--m3e-outlined-chip-outline-thickness, 1px);
|
|
@@ -115,13 +115,13 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
115
115
|
outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px));
|
|
116
116
|
}
|
|
117
117
|
:host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base {
|
|
118
|
-
outline-color: var(--m3e-outlined-chip-outline-color, ${
|
|
118
|
+
outline-color: var(--m3e-outlined-chip-outline-color, ${n.color.outlineVariant});
|
|
119
119
|
}
|
|
120
120
|
:host(:disabled[variant="outlined"]) .base,
|
|
121
121
|
:host([disabled-interactive][variant="outlined"]) .base {
|
|
122
122
|
outline-color: color-mix(
|
|
123
123
|
in srgb,
|
|
124
|
-
var(--m3e-outlined-chip-disabled-outline-color, ${
|
|
124
|
+
var(--m3e-outlined-chip-disabled-outline-color, ${n.color.onSurface})
|
|
125
125
|
var(--m3e-outlined-chip-disabled-outline-opacity, 12%),
|
|
126
126
|
transparent
|
|
127
127
|
);
|
|
@@ -145,17 +145,17 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
145
145
|
font-size: var(--m3e-chip-icon-size, 1.125rem) !important;
|
|
146
146
|
}
|
|
147
147
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) .base {
|
|
148
|
-
color: var(--m3e-chip-label-text-color, ${
|
|
148
|
+
color: var(--m3e-chip-label-text-color, ${n.color.onSurface});
|
|
149
149
|
}
|
|
150
150
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]),
|
|
151
151
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) {
|
|
152
|
-
color: var(--m3e-chip-icon-color, ${
|
|
152
|
+
color: var(--m3e-chip-icon-color, ${n.color.primary});
|
|
153
153
|
}
|
|
154
154
|
:host(:disabled) .base,
|
|
155
155
|
:host([disabled-interactive]) .base {
|
|
156
156
|
color: color-mix(
|
|
157
157
|
in srgb,
|
|
158
|
-
var(--m3e-chip-disabled-label-text-color, ${
|
|
158
|
+
var(--m3e-chip-disabled-label-text-color, ${n.color.onSurface})
|
|
159
159
|
var(--m3e-chip-disabled-label-text-opacity, 38%),
|
|
160
160
|
transparent
|
|
161
161
|
);
|
|
@@ -166,7 +166,7 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
166
166
|
:host([disabled-interactive]) ::slotted([slot="trailing-icon"]) {
|
|
167
167
|
color: color-mix(
|
|
168
168
|
in srgb,
|
|
169
|
-
var(--m3e-chip-disabled-icon-color, ${
|
|
169
|
+
var(--m3e-chip-disabled-icon-color, ${n.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%),
|
|
170
170
|
transparent
|
|
171
171
|
);
|
|
172
172
|
}
|
|
@@ -174,11 +174,11 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
174
174
|
:host([variant="elevated"][disabled-interactive]) .base {
|
|
175
175
|
background-color: color-mix(
|
|
176
176
|
in srgb,
|
|
177
|
-
var(--m3e-elevated-chip-disabled-container-color, ${
|
|
177
|
+
var(--m3e-elevated-chip-disabled-container-color, ${n.color.onSurface})
|
|
178
178
|
var(--m3e-elevated-chip-disabled-container-opacity, 12%),
|
|
179
179
|
transparent
|
|
180
180
|
);
|
|
181
|
-
--m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${
|
|
181
|
+
--m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${n.elevation.level0});
|
|
182
182
|
}
|
|
183
183
|
@media (prefers-reduced-motion) {
|
|
184
184
|
.base {
|
|
@@ -210,7 +210,7 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
210
210
|
outline-color: GrayText;
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
|
-
`,L([ce(".elevation")],be.prototype,"_elevation",void 0),L([ce(".focus-ring")],be.prototype,"_focusRing",void 0),L([ce(".state-layer")],be.prototype,"_stateLayer",void 0),L([ce(".ripple")],be.prototype,"_ripple",void 0),L([le({reflect:!0})],be.prototype,"variant",void 0),L([le()],be.prototype,"value",null),be=L([R("m3e-chip")],be);let ge=class extends(u(v(m(f(b(g($(
|
|
213
|
+
`,L([ce(".elevation")],be.prototype,"_elevation",void 0),L([ce(".focus-ring")],be.prototype,"_focusRing",void 0),L([ce(".state-layer")],be.prototype,"_stateLayer",void 0),L([ce(".ripple")],be.prototype,"_ripple",void 0),L([le({reflect:!0})],be.prototype,"variant",void 0),L([le()],be.prototype,"value",null),be=L([R("m3e-chip")],be);let ge=class extends(p(u(v(m(f(b(g($(be,"button")))))),!0))){_renderTrailingIcon(){return s}};ge=L([R("m3e-assist-chip")],ge);let $e=class extends(y(i)){render(){return o`<slot></slot>`}};var ye,_e,we;$e.styles=t`
|
|
214
214
|
:host {
|
|
215
215
|
display: inline-flex;
|
|
216
216
|
flex-wrap: wrap;
|
|
@@ -221,12 +221,12 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
221
221
|
:host([vertical]) {
|
|
222
222
|
flex-direction: column;
|
|
223
223
|
}
|
|
224
|
-
`,$e=L([R("m3e-chip-set")],$e);let Ae=class extends(_(f(b(g($(
|
|
224
|
+
`,$e=L([R("m3e-chip-set")],$e);let Ae=class extends(_(m(f(b(g(u($(be,"option"),!0))))))){constructor(){super(...arguments),ye.add(this),_e.set(this,e=>H(this,ye,"m",we).call(this,e))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",H(this,_e,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",H(this,_e,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[M].notifySelectionChange(this)}_renderIcon(){return o`<div class="icon" aria-hidden="true">
|
|
225
225
|
<svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
|
|
226
226
|
<path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
|
|
227
227
|
</svg>
|
|
228
228
|
${super._renderIcon()}
|
|
229
|
-
</div>`}};var Ee,Se,xe,Ce,ke;_e=new WeakMap,ye=new WeakSet,we=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[M].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},Ae.styles=[be.styles,
|
|
229
|
+
</div>`}};var Ee,Se,xe,Ce,ke;_e=new WeakMap,ye=new WeakSet,we=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[M].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},Ae.styles=[be.styles,t`
|
|
230
230
|
:host([selected]:not(.-hide-selection)) .wrapper {
|
|
231
231
|
padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem);
|
|
232
232
|
}
|
|
@@ -240,7 +240,7 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
240
240
|
font-size: var(--m3e-chip-icon-size, 1.125rem);
|
|
241
241
|
}
|
|
242
242
|
:host(:not(:disabled):not([disabled-interactive])) .check {
|
|
243
|
-
color: var(--m3e-chip-selected-leading-icon-color, ${
|
|
243
|
+
color: var(--m3e-chip-selected-leading-icon-color, ${n.color.onSecondaryContainer});
|
|
244
244
|
}
|
|
245
245
|
:host(:not([selected])) .check,
|
|
246
246
|
:host(.-hide-selection) .check,
|
|
@@ -249,7 +249,7 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
249
249
|
}
|
|
250
250
|
:host(:not(.-with-icon)) .icon {
|
|
251
251
|
margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem));
|
|
252
|
-
transition: margin-inline-start ${
|
|
252
|
+
transition: margin-inline-start ${n.motion.spring.fastEffects};
|
|
253
253
|
}
|
|
254
254
|
:host([selected]) .icon {
|
|
255
255
|
margin-inline-start: 0;
|
|
@@ -258,52 +258,52 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
258
258
|
display: none !important;
|
|
259
259
|
}
|
|
260
260
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) .base {
|
|
261
|
-
color: var(--m3e-chip-unselected-label-text-color, ${
|
|
262
|
-
--m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${
|
|
261
|
+
color: var(--m3e-chip-unselected-label-text-color, ${n.color.onSurfaceVariant});
|
|
262
|
+
--m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${n.color.onSurfaceVariant});
|
|
263
263
|
--m3e-state-layer-focus-color: var(
|
|
264
264
|
--m3e-chip-unselected-state-layer-focus-color,
|
|
265
|
-
${
|
|
265
|
+
${n.color.onSurfaceVariant}
|
|
266
266
|
);
|
|
267
267
|
--m3e-state-layer-hover-color: var(
|
|
268
268
|
--m3e-chip-unselected-state-layer-hover-color,
|
|
269
|
-
${
|
|
269
|
+
${n.color.onSurfaceVariant}
|
|
270
270
|
);
|
|
271
271
|
}
|
|
272
272
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) {
|
|
273
|
-
color: var(--m3e-chip-unselected-leading-icon-color, ${
|
|
273
|
+
color: var(--m3e-chip-unselected-leading-icon-color, ${n.color.primary});
|
|
274
274
|
}
|
|
275
275
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) {
|
|
276
|
-
color: var(--m3e-chip-unselected-trailing-icon-color, ${
|
|
276
|
+
color: var(--m3e-chip-unselected-trailing-icon-color, ${n.color.onSurfaceVariant});
|
|
277
277
|
}
|
|
278
278
|
:host(:not(:disabled):not([disabled-interactive])[selected]) .base {
|
|
279
279
|
outline-offset: unset;
|
|
280
280
|
outline-width: var(--m3e-chip-selected-outline-thickness, 0);
|
|
281
|
-
color: var(--m3e-chip-selected-label-text-color, ${
|
|
282
|
-
background-color: var(--m3e-chip-selected-container-color, ${
|
|
281
|
+
color: var(--m3e-chip-selected-label-text-color, ${n.color.onSecondaryContainer});
|
|
282
|
+
background-color: var(--m3e-chip-selected-container-color, ${n.color.secondaryContainer});
|
|
283
283
|
--m3e-state-layer-hover-color: var(
|
|
284
284
|
--m3e-chip-selected-container-hover-color,
|
|
285
|
-
${
|
|
285
|
+
${n.color.onSecondaryContainer}
|
|
286
286
|
);
|
|
287
287
|
--m3e-state-layer-focus-color: var(
|
|
288
288
|
--m3e-chip-selected-container-focus-color,
|
|
289
|
-
${
|
|
289
|
+
${n.color.onSecondaryContainer}
|
|
290
290
|
);
|
|
291
|
-
--m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${
|
|
292
|
-
--m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${
|
|
291
|
+
--m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${n.elevation.level1});
|
|
292
|
+
--m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${n.color.onSecondaryContainer});
|
|
293
293
|
--m3e-state-layer-focus-color: var(
|
|
294
294
|
--m3e-chip-selected-state-layer-focus-color,
|
|
295
|
-
${
|
|
295
|
+
${n.color.onSecondaryContainer}
|
|
296
296
|
);
|
|
297
297
|
--m3e-state-layer-hover-color: var(
|
|
298
298
|
--m3e-chip-selected-state-layer-hover-color,
|
|
299
|
-
${
|
|
299
|
+
${n.color.onSecondaryContainer}
|
|
300
300
|
);
|
|
301
301
|
}
|
|
302
302
|
:host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) {
|
|
303
|
-
color: var(--m3e-chip-selected-leading-icon-color, ${
|
|
303
|
+
color: var(--m3e-chip-selected-leading-icon-color, ${n.color.onSecondaryContainer});
|
|
304
304
|
}
|
|
305
305
|
:host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) {
|
|
306
|
-
color: var(--m3e-chip-selected-trailing-icon-color, ${
|
|
306
|
+
color: var(--m3e-chip-selected-trailing-icon-color, ${n.color.onSecondaryContainer});
|
|
307
307
|
}
|
|
308
308
|
@media (prefers-reduced-motion) {
|
|
309
309
|
.base,
|
|
@@ -329,7 +329,7 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
329
329
|
outline-color: ButtonText;
|
|
330
330
|
}
|
|
331
331
|
}
|
|
332
|
-
`],Ae=L([R("m3e-filter-chip")],Ae);let Pe=class extends(w(A(E(S(
|
|
332
|
+
`],Ae=L([R("m3e-filter-chip")],Ae);let Pe=class extends(w(A(E(S(g(u($($e,"listbox")))))))){constructor(){super(...arguments),Ee.add(this),this[ke]=(new I).onActiveItemChange(()=>this[M].activeItem?.focus()).withWrap(),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[M]?.items??[]}get selected(){return this[M]?.selectedItems??[]}get value(){const e=this.selected.map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(Ee=new WeakSet,ke=M,x)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const i of e)t.append(this.name,i);return t}return e}update(e){super.update(e),e.has("vertical")&&(this[M].vertical=this.vertical),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[M].disabled=this.disabled),e.has("multi")&&(this.ariaMultiSelectable=`${this.multi}`,this[M].multi=this.multi,this[M].disableRovingTabIndex(this.multi)),e.has("hideSelectionIndicator")&&this.chips.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator))}render(){return o`<slot
|
|
333
333
|
@slotchange="${H(this,Ee,"m",Se)}"
|
|
334
334
|
@keydown="${H(this,Ee,"m",xe)}"
|
|
335
335
|
@change="${H(this,Ee,"m",Ce)}"
|
|
@@ -339,7 +339,7 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
339
339
|
* Copyright 2017 Google LLC
|
|
340
340
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
341
341
|
*/
|
|
342
|
-
const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createHTML:e=>e}):void 0,Ue="$lit$",Oe=`lit$${Math.random().toFixed(9).slice(2)}$`,Le="?"+Oe,He=`<${Le}>`,Ne=document,Re=()=>Ne.createComment(""),ze=e=>null===e||"object"!=typeof e&&"function"!=typeof e,We=Array.isArray,je="[ \t\n\f\r]",Be=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,De=/-->/g,qe=/>/g,Ve=RegExp(`>|${je}(?:([^\\s"'>=/]+)(${je}*=${je}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Fe=/'/g,Ke=/"/g,Ze=/^(?:script|style|textarea|title)$/i,Ge=Symbol.for("lit-noChange"),Je=Symbol.for("lit-nothing"),Qe=new WeakMap,Xe=Ne.createTreeWalker(Ne,129);function Ye(e,t){if(!We(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==Ie?Ie.createHTML(t):t}const et=(e,t)=>{const i=e.length-1,s=[];let o,n=2===t?"<svg>":3===t?"<math>":"",r=Be;for(let t=0;t<i;t++){const i=e[t];let a,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===Be?"!--"===l[1]?r=De:void 0!==l[1]?r=qe:void 0!==l[2]?(Ze.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=Ve):void 0!==l[3]&&(r=Ve):r===Ve?">"===l[0]?(r=o??Be,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?Ve:'"'===l[3]?Ke:Fe):r===Ke||r===Fe?r=Ve:r===De||r===qe?r=Be:(r=Ve,o=void 0);const d=r===Ve&&e[t+1].startsWith("/>")?" ":"";n+=r===Be?i+He:c>=0?(s.push(a),i.slice(0,c)+Ue+i.slice(c)+Oe+d):i+Oe+(-2===c?t:d)}return[Ye(e,n+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]};class tt{constructor({strings:e,_$litType$:t},i){let s;this.parts=[];let o=0,n=0;const r=e.length-1,a=this.parts,[l,c]=et(e,t);if(this.el=tt.createElement(l,i),Xe.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=Xe.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(Ue)){const t=c[n++],i=s.getAttribute(e).split(Oe),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:o,name:r[2],strings:i,ctor:"."===r[1]?rt:"?"===r[1]?at:"@"===r[1]?lt:nt}),s.removeAttribute(e)}else e.startsWith(Oe)&&(a.push({type:6,index:o}),s.removeAttribute(e));if(Ze.test(s.tagName)){const e=s.textContent.split(Oe),t=e.length-1;if(t>0){s.textContent=Me?Me.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],Re()),Xe.nextNode(),a.push({type:2,index:++o});s.append(e[t],Re())}}}else if(8===s.nodeType)if(s.data===Le)a.push({type:2,index:o});else{let e=-1;for(;-1!==(e=s.data.indexOf(Oe,e+1));)a.push({type:7,index:o}),e+=Oe.length-1}o++}}static createElement(e,t){const i=Ne.createElement("template");return i.innerHTML=e,i}}function it(e,t,i=e,s){if(t===Ge)return t;let o=void 0!==s?i._$Co?.[s]:i._$Cl;const n=ze(t)?void 0:t._$litDirective$;return o?.constructor!==n&&(o?._$AO?.(!1),void 0===n?o=void 0:(o=new n(e),o._$AT(e,i,s)),void 0!==s?(i._$Co??=[])[s]=o:i._$Cl=o),void 0!==o&&(t=it(e,o._$AS(e,t.values),o,s)),t}class st{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,s=(e?.creationScope??Ne).importNode(t,!0);Xe.currentNode=s;let o=Xe.nextNode(),n=0,r=0,a=i[0];for(;void 0!==a;){if(n===a.index){let t;2===a.type?t=new ot(o,o.nextSibling,this,e):1===a.type?t=new a.ctor(o,a.name,a.strings,this,e):6===a.type&&(t=new ct(o,this,e)),this._$AV.push(t),a=i[++r]}n!==a?.index&&(o=Xe.nextNode(),n++)}return Xe.currentNode=Ne,s}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class ot{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,s){this.type=2,this._$AH=Je,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=it(this,e,t),ze(e)?e===Je||null==e||""===e?(this._$AH!==Je&&this._$AR(),this._$AH=Je):e!==this._$AH&&e!==Ge&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>We(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==Je&&ze(this._$AH)?this._$AA.nextSibling.data=e:this.T(Ne.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,s="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=tt.createElement(Ye(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(t);else{const e=new st(s,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Qe.get(e.strings);return void 0===t&&Qe.set(e.strings,t=new tt(e)),t}k(e){We(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,s=0;for(const o of e)s===t.length?t.push(i=new ot(this.O(Re()),this.O(Re()),this,this.options)):i=t[s],i._$AI(o),s++;s<t.length&&(this._$AR(i&&i._$AB.nextSibling,s),t.length=s)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class nt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,s,o){this.type=1,this._$AH=Je,this._$AN=void 0,this.element=e,this.name=t,this._$AM=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Je}_$AI(e,t=this,i,s){const o=this.strings;let n=!1;if(void 0===o)e=it(this,e,t,0),n=!ze(e)||e!==this._$AH&&e!==Ge,n&&(this._$AH=e);else{const s=e;let r,a;for(e=o[0],r=0;r<o.length-1;r++)a=it(this,s[i+r],t,r),a===Ge&&(a=this._$AH[r]),n||=!ze(a)||a!==this._$AH[r],a===Je?e=Je:e!==Je&&(e+=(a??"")+o[r+1]),this._$AH[r]=a}n&&!s&&this.j(e)}j(e){e===Je?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class rt extends nt{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Je?void 0:e}}class at extends nt{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Je)}}class lt extends nt{constructor(e,t,i,s,o){super(e,t,i,s,o),this.type=5}_$AI(e,t=this){if((e=it(this,e,t,0)??Je)===Ge)return;const i=this._$AH,s=e===Je&&i!==Je||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Je&&(i===Je||s);s&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ct{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){it(this,e)}}const ht=Te.litHtmlPolyfillSupport;ht?.(tt,ot),(Te.litHtmlVersions??=[]).push("3.3.1");var dt,pt,ut,vt;let mt=class extends(C(g($(
|
|
342
|
+
const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createHTML:e=>e}):void 0,Ue="$lit$",Oe=`lit$${Math.random().toFixed(9).slice(2)}$`,Le="?"+Oe,He=`<${Le}>`,Ne=document,Re=()=>Ne.createComment(""),ze=e=>null===e||"object"!=typeof e&&"function"!=typeof e,We=Array.isArray,je="[ \t\n\f\r]",Be=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,De=/-->/g,qe=/>/g,Ve=RegExp(`>|${je}(?:([^\\s"'>=/]+)(${je}*=${je}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Fe=/'/g,Ke=/"/g,Ze=/^(?:script|style|textarea|title)$/i,Ge=Symbol.for("lit-noChange"),Je=Symbol.for("lit-nothing"),Qe=new WeakMap,Xe=Ne.createTreeWalker(Ne,129);function Ye(e,t){if(!We(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==Ie?Ie.createHTML(t):t}const et=(e,t)=>{const i=e.length-1,s=[];let o,n=2===t?"<svg>":3===t?"<math>":"",r=Be;for(let t=0;t<i;t++){const i=e[t];let a,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===Be?"!--"===l[1]?r=De:void 0!==l[1]?r=qe:void 0!==l[2]?(Ze.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=Ve):void 0!==l[3]&&(r=Ve):r===Ve?">"===l[0]?(r=o??Be,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?Ve:'"'===l[3]?Ke:Fe):r===Ke||r===Fe?r=Ve:r===De||r===qe?r=Be:(r=Ve,o=void 0);const d=r===Ve&&e[t+1].startsWith("/>")?" ":"";n+=r===Be?i+He:c>=0?(s.push(a),i.slice(0,c)+Ue+i.slice(c)+Oe+d):i+Oe+(-2===c?t:d)}return[Ye(e,n+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]};class tt{constructor({strings:e,_$litType$:t},i){let s;this.parts=[];let o=0,n=0;const r=e.length-1,a=this.parts,[l,c]=et(e,t);if(this.el=tt.createElement(l,i),Xe.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=Xe.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(Ue)){const t=c[n++],i=s.getAttribute(e).split(Oe),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:o,name:r[2],strings:i,ctor:"."===r[1]?rt:"?"===r[1]?at:"@"===r[1]?lt:nt}),s.removeAttribute(e)}else e.startsWith(Oe)&&(a.push({type:6,index:o}),s.removeAttribute(e));if(Ze.test(s.tagName)){const e=s.textContent.split(Oe),t=e.length-1;if(t>0){s.textContent=Me?Me.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],Re()),Xe.nextNode(),a.push({type:2,index:++o});s.append(e[t],Re())}}}else if(8===s.nodeType)if(s.data===Le)a.push({type:2,index:o});else{let e=-1;for(;-1!==(e=s.data.indexOf(Oe,e+1));)a.push({type:7,index:o}),e+=Oe.length-1}o++}}static createElement(e,t){const i=Ne.createElement("template");return i.innerHTML=e,i}}function it(e,t,i=e,s){if(t===Ge)return t;let o=void 0!==s?i._$Co?.[s]:i._$Cl;const n=ze(t)?void 0:t._$litDirective$;return o?.constructor!==n&&(o?._$AO?.(!1),void 0===n?o=void 0:(o=new n(e),o._$AT(e,i,s)),void 0!==s?(i._$Co??=[])[s]=o:i._$Cl=o),void 0!==o&&(t=it(e,o._$AS(e,t.values),o,s)),t}class st{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,s=(e?.creationScope??Ne).importNode(t,!0);Xe.currentNode=s;let o=Xe.nextNode(),n=0,r=0,a=i[0];for(;void 0!==a;){if(n===a.index){let t;2===a.type?t=new ot(o,o.nextSibling,this,e):1===a.type?t=new a.ctor(o,a.name,a.strings,this,e):6===a.type&&(t=new ct(o,this,e)),this._$AV.push(t),a=i[++r]}n!==a?.index&&(o=Xe.nextNode(),n++)}return Xe.currentNode=Ne,s}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class ot{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,s){this.type=2,this._$AH=Je,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=it(this,e,t),ze(e)?e===Je||null==e||""===e?(this._$AH!==Je&&this._$AR(),this._$AH=Je):e!==this._$AH&&e!==Ge&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>We(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==Je&&ze(this._$AH)?this._$AA.nextSibling.data=e:this.T(Ne.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,s="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=tt.createElement(Ye(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(t);else{const e=new st(s,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Qe.get(e.strings);return void 0===t&&Qe.set(e.strings,t=new tt(e)),t}k(e){We(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,s=0;for(const o of e)s===t.length?t.push(i=new ot(this.O(Re()),this.O(Re()),this,this.options)):i=t[s],i._$AI(o),s++;s<t.length&&(this._$AR(i&&i._$AB.nextSibling,s),t.length=s)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class nt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,s,o){this.type=1,this._$AH=Je,this._$AN=void 0,this.element=e,this.name=t,this._$AM=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Je}_$AI(e,t=this,i,s){const o=this.strings;let n=!1;if(void 0===o)e=it(this,e,t,0),n=!ze(e)||e!==this._$AH&&e!==Ge,n&&(this._$AH=e);else{const s=e;let r,a;for(e=o[0],r=0;r<o.length-1;r++)a=it(this,s[i+r],t,r),a===Ge&&(a=this._$AH[r]),n||=!ze(a)||a!==this._$AH[r],a===Je?e=Je:e!==Je&&(e+=(a??"")+o[r+1]),this._$AH[r]=a}n&&!s&&this.j(e)}j(e){e===Je?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class rt extends nt{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Je?void 0:e}}class at extends nt{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Je)}}class lt extends nt{constructor(e,t,i,s,o){super(e,t,i,s,o),this.type=5}_$AI(e,t=this){if((e=it(this,e,t,0)??Je)===Ge)return;const i=this._$AH,s=e===Je&&i!==Je||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Je&&(i===Je||s);s&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ct{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){it(this,e)}}const ht=Te.litHtmlPolyfillSupport;ht?.(tt,ot),(Te.litHtmlVersions??=[]).push("3.3.1");var dt,pt,ut,vt;let mt=class extends(C(b(g(u($(be,"row"),!0))),"remove")){constructor(){super(...arguments),dt.add(this),this.removable=!1,this.removeLabel="Remove"}connectedCallback(){super.connectedCallback(),this.removeAttribute("tabindex")}update(e){super.update(e),this.removeAttribute("tabindex"),e.has("removable")&&this.classList.toggle("-with-trailing-icon",this.removable)}render(){return o`<div class="base">
|
|
343
343
|
<m3e-elevation
|
|
344
344
|
class="elevation"
|
|
345
345
|
for="cell"
|
|
@@ -367,7 +367,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
367
367
|
</div>
|
|
368
368
|
${this._renderTrailingIcon()}
|
|
369
369
|
</div>
|
|
370
|
-
</div>`}_renderTrailingIcon(){return this.removable?
|
|
370
|
+
</div>`}_renderTrailingIcon(){return this.removable?o`<span role="gridcell" class="remove">
|
|
371
371
|
<m3e-icon-button
|
|
372
372
|
class="remove-button"
|
|
373
373
|
aria-label="${this.removeLabel}"
|
|
@@ -385,7 +385,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
385
385
|
</svg>
|
|
386
386
|
</slot>
|
|
387
387
|
</m3e-icon-button>
|
|
388
|
-
</span>`:
|
|
388
|
+
</span>`:s}};var ft,bt,gt,$t,yt,_t,wt,At,Et,St,xt,Ct,kt,Pt,Tt,Mt,It,Ut,Ot,Lt,Ht,Nt,Rt;dt=new WeakSet,pt=function(e){this.classList.toggle("-with-avatar",h(e.target))},ut=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},vt=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},mt.styles=[be.styles,t`
|
|
389
389
|
.cell {
|
|
390
390
|
display: inline-flex;
|
|
391
391
|
align-items: center;
|
|
@@ -405,7 +405,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
405
405
|
}
|
|
406
406
|
.touch {
|
|
407
407
|
top: calc(
|
|
408
|
-
0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${
|
|
408
|
+
0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${n.density.calc(-2)})) / 2)
|
|
409
409
|
);
|
|
410
410
|
}
|
|
411
411
|
.wrapper {
|
|
@@ -420,7 +420,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
420
420
|
:host(:disabled) ::slotted([slot="avatar"]),
|
|
421
421
|
:host([disabled-interactive]) ::slotted([slot="avatar"]) {
|
|
422
422
|
opacity: var(--m3e-chip-disabled-avatar-opacity, 38%);
|
|
423
|
-
color: var(--m3e-chip-disabled-icon-color, ${
|
|
423
|
+
color: var(--m3e-chip-disabled-icon-color, ${n.color.onSurface});
|
|
424
424
|
}
|
|
425
425
|
:host(.-with-avatar) ::slotted([slot="icon"]) {
|
|
426
426
|
display: none;
|
|
@@ -434,10 +434,10 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
434
434
|
color: CanvasText;
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
|
-
`],L([ce(".cell")],mt.prototype,"cell",void 0),L([ce(".remove-button")],mt.prototype,"removeButton",void 0),L([le({type:Boolean})],mt.prototype,"removable",void 0),L([le({attribute:"remove-label"})],mt.prototype,"removeLabel",void 0),mt=L([R("m3e-input-chip")],mt);let zt=class extends(k(P(T(A(E(S(
|
|
437
|
+
`],L([ce(".cell")],mt.prototype,"cell",void 0),L([ce(".remove-button")],mt.prototype,"removeButton",void 0),L([le({type:Boolean})],mt.prototype,"removable",void 0),L([le({attribute:"remove-label"})],mt.prototype,"removeLabel",void 0),mt=L([R("m3e-input-chip")],mt);let zt=class extends(k(P(T(A(E(S(g(u($($e,"grid")))))))))){constructor(){super(...arguments),ft.add(this),bt.set(this,()=>H(this,ft,"m",Nt).call(this)),gt.set(this,e=>H(this,ft,"m",Rt).call(this,e)),$t.set(this,()=>H(this,ft,"m",It).call(this)),yt.set(this,()=>H(this,ft,"m",Ut).call(this)),_t.set(this,()=>H(this,ft,"m",Ot).call(this)),wt.set(this,e=>H(this,ft,"m",Lt).call(this,e)),At.set(this,e=>H(this,ft,"m",Ht).call(this,e)),Et.set(this,new U),St.set(this,(new O).onActiveItemChange(()=>H(this,St,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex"))),xt.set(this,!1),Ct.set(this,null),kt.set(this,0)}get chips(){return[...this.querySelectorAll("m3e-input-chip")]}get value(){const e=this.chips.map(e=>e.value);return 0==e.length?null:e}get[(bt=new WeakMap,gt=new WeakMap,$t=new WeakMap,yt=new WeakMap,_t=new WeakMap,wt=new WeakMap,At=new WeakMap,Et=new WeakMap,St=new WeakMap,xt=new WeakMap,Ct=new WeakMap,kt=new WeakMap,ft=new WeakSet,x)](){const e=this.value;if(!e)return null;const t=new FormData;for(const i of e)t.append(this.name,i);return t}get shouldLabelFloat(){return this.chips.length>0}onContainerClick(){H(this,Ct,"f")?.focus()}connectedCallback(){super.connectedCallback(),this.closest("m3e-form-field")?.notifyControlStateChange(),N(this,kt,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",H(this,$t,"f")),this.addEventListener("focusin",H(this,yt,"f")),this.addEventListener("focusout",H(this,_t,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",H(this,$t,"f")),this.removeEventListener("focusin",H(this,yt,"f")),this.removeEventListener("focusout",H(this,_t,"f"))}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${H(this,kt,"f")}`)}update(e){super.update(e),e.has("vertical")&&(this.ariaOrientation=null),e.has("disabled")&&(H(this,Et,"f").items.forEach(e=>e.disabled=this.disabled),H(this,Ct,"f")&&(H(this,Ct,"f").disabled=this.disabled))}render(){return o`<slot @keydown="${H(this,ft,"m",Pt)}" @slotchange="${H(this,ft,"m",Tt)}"></slot>
|
|
438
438
|
<span role="row">
|
|
439
439
|
<span role="gridcell"><slot name="input" @slotchange="${H(this,ft,"m",Mt)}"></slot></span>
|
|
440
|
-
</span> `}};Pt=function(e){H(this,St,"f").onKeyDown(e)},Tt=async function(){const{added:e,removed:t}=H(this,Et,"f").setItems([...this.querySelectorAll("m3e-input-chip")]);for(const t of e)t.isUpdatePending&&await t.updateComplete,this.disabled&&(t.disabled=!0),t.addEventListener("remove",H(this,wt,"f")),t.cell.addEventListener("click",H(this,At,"f"));t.forEach(e=>{e.removeEventListener("remove",H(this,wt,"f")),e.cell.removeEventListener("click",H(this,At,"f"))}),H(this,St,"f").setItems(H(this,Et,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),H(this,St,"f").activeItem||H(this,St,"f").updateActiveItem(H(this,St,"f").items.find(e=>e.hasAttribute("tabindex")))},Mt=function(){const e=this.querySelector("input");if(H(this,Ct,"f")&&(H(this,Ct,"f").removeEventListener("change",H(this,bt,"f")),H(this,Ct,"f").removeEventListener("keydown",H(this,gt,"f"))),N(this,Ct,e,"f"),H(this,Ct,"f")){H(this,Ct,"f").disabled=this.disabled,H(this,Ct,"f").addEventListener("change",H(this,bt,"f")),H(this,Ct,"f").addEventListener("keydown",H(this,gt,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(e,"value",{get:()=>t.get?.call(e),set:i=>{t.set?.call(e,i),H(this,Ct,"f")!==e||H(this,xt,"f")||H(this,ft,"m",Nt).call(this)}})}},It=function(){setTimeout(()=>(H(this,St,"f").activeItem??H(this,Ct,"f"))?.focus())},Ut=function(){this.setAttribute("tabindex","-1")},Ot=function(){this.setAttribute("tabindex",`${H(this,kt,"f")}`)},Lt=function(e){const t=e.target,i=H(this,Et,"f").items.indexOf(t),s=H(this,Et,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),H(this,St,"f").setActiveItem(H(this,St,"f").items.find(e=>e===s?.removeButton)),H(this,St,"f").activeItem||H(this,Ct,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},Ht=function(e){H(this,St,"f").updateActiveItem(e.composedPath().find(e=>e instanceof mt)?.cell)},Nt=function(){const e=H(this,Ct,"f")?.value;e&&setTimeout(()=>{const e=H(this,Ct,"f")?.value;if(!e)return;const t=document.createElement("m3e-input-chip");if(t.removable=!0,t.appendChild(document.createTextNode(e)),this.appendChild(t),H(this,Ct,"f"))try{N(this,xt,!0,"f"),H(this,Ct,"f").value=""}finally{N(this,xt,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))})},Rt=function(e){if("Backspace"===e.key&&!H(this,Ct,"f")?.value){const e=[...H(this,Et,"f").items].reverse().find(e=>!e.disabled&&!e.disabledInteractive&&e.removable);e&&e.dispatchEvent(new Event("remove"))}},zt.styles=[$e.styles,
|
|
440
|
+
</span> `}};Pt=function(e){H(this,St,"f").onKeyDown(e)},Tt=async function(){const{added:e,removed:t}=H(this,Et,"f").setItems([...this.querySelectorAll("m3e-input-chip")]);for(const t of e)t.isUpdatePending&&await t.updateComplete,this.disabled&&(t.disabled=!0),t.addEventListener("remove",H(this,wt,"f")),t.cell.addEventListener("click",H(this,At,"f"));t.forEach(e=>{e.removeEventListener("remove",H(this,wt,"f")),e.cell.removeEventListener("click",H(this,At,"f"))}),H(this,St,"f").setItems(H(this,Et,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),H(this,St,"f").activeItem||H(this,St,"f").updateActiveItem(H(this,St,"f").items.find(e=>e.hasAttribute("tabindex")))},Mt=function(){const e=this.querySelector("input");if(H(this,Ct,"f")&&(H(this,Ct,"f").removeEventListener("change",H(this,bt,"f")),H(this,Ct,"f").removeEventListener("keydown",H(this,gt,"f"))),N(this,Ct,e,"f"),H(this,Ct,"f")){H(this,Ct,"f").disabled=this.disabled,H(this,Ct,"f").addEventListener("change",H(this,bt,"f")),H(this,Ct,"f").addEventListener("keydown",H(this,gt,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(e,"value",{get:()=>t.get?.call(e),set:i=>{t.set?.call(e,i),H(this,Ct,"f")!==e||H(this,xt,"f")||H(this,ft,"m",Nt).call(this)}})}},It=function(){setTimeout(()=>(H(this,St,"f").activeItem??H(this,Ct,"f"))?.focus())},Ut=function(){this.setAttribute("tabindex","-1")},Ot=function(){this.setAttribute("tabindex",`${H(this,kt,"f")}`)},Lt=function(e){const t=e.target,i=H(this,Et,"f").items.indexOf(t),s=H(this,Et,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),H(this,St,"f").setActiveItem(H(this,St,"f").items.find(e=>e===s?.removeButton)),H(this,St,"f").activeItem||H(this,Ct,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},Ht=function(e){H(this,St,"f").updateActiveItem(e.composedPath().find(e=>e instanceof mt)?.cell)},Nt=function(){const e=H(this,Ct,"f")?.value;e&&setTimeout(()=>{const e=H(this,Ct,"f")?.value;if(!e)return;const t=document.createElement("m3e-input-chip");if(t.removable=!0,t.appendChild(document.createTextNode(e)),this.appendChild(t),H(this,Ct,"f"))try{N(this,xt,!0,"f"),H(this,Ct,"f").value=""}finally{N(this,xt,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))})},Rt=function(e){if("Backspace"===e.key&&!H(this,Ct,"f")?.value){const e=[...H(this,Et,"f").items].reverse().find(e=>!e.disabled&&!e.disabledInteractive&&e.removable);e&&e.dispatchEvent(new Event("remove"))}},zt.styles=[$e.styles,t`
|
|
441
441
|
::slotted([slot="input"]) {
|
|
442
442
|
outline: unset;
|
|
443
443
|
border: unset;
|
|
@@ -458,7 +458,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
458
458
|
::slotted([slot="input"])::placeholder {
|
|
459
459
|
user-select: none;
|
|
460
460
|
color: currentColor;
|
|
461
|
-
transition: opacity ${
|
|
461
|
+
transition: opacity ${n.motion.duration.extraLong1};
|
|
462
462
|
}
|
|
463
463
|
:host(:not(:focus-within)) ::slotted([slot="input"])::placeholder {
|
|
464
464
|
opacity: 0;
|
|
@@ -476,5 +476,5 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
476
476
|
transition: none !important;
|
|
477
477
|
}
|
|
478
478
|
}
|
|
479
|
-
`],zt=L([R("m3e-input-chip-set")],zt);let Wt=class extends(u(v(m(f(b(g($(
|
|
479
|
+
`],zt=L([R("m3e-input-chip-set")],zt);let Wt=class extends(p(u(v(m(f(b(g($(be,"button")))))),!0))){_renderTrailingIcon(){return s}};Wt=L([R("m3e-suggestion-chip")],Wt);export{ge as M3eAssistChipElement,be as M3eChipElement,$e as M3eChipSetElement,Ae as M3eFilterChipElement,Pe as M3eFilterChipSetElement,mt as M3eInputChipElement,zt as M3eInputChipSetElement,Wt as M3eSuggestionChipElement};
|
|
480
480
|
//# sourceMappingURL=index.min.js.map
|