@m3e/web 2.0.3 → 2.0.5

package/dist/chips.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{unsafeCSS as e,css as t,LitElement as i,nothing as o,html as s}from"lit";import{query as a,property as n,customElement as l}from"lit/decorators.js";import{DesignToken as r,isDisabledMixin as c,isDisabledInteractiveMixin as d,isLinkButtonMixin as h,renderPseudoLink as p,hasAssignedNodes as v,getTextContent as m,FormSubmitter as u,AttachInternals as b,LinkButton as f,KeyboardClick as g,Focusable as w,DisabledInteractive as y,Disabled as x,Role as $,Vertical as k,Selected as S,Labelled as E,Dirty as C,Touched as I,FormAssociated as L,formValue as T,EventAttribute as W,RequiredConstraintValidation as _,Required as A,ConstraintValidation as M}from"@m3e/web/core";import{selectionManager as z,SelectionManager as B,ListManager as P,ListKeyManager as j}from"@m3e/web/core/a11y";import{M3eDirectionality as D}from"@m3e/web/core/bidi";import{ifDefined as O}from"lit/directives/if-defined.js";function R(e,t,i,o){var s,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(a<3?s(n):a>3?s(t,i,n):s(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n}function V(e,t,i,o){if("a"===i&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?o:"a"===i?o.call(e):o?o.value:t.get(e)}function U(e,t,i,o,s){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?s.call(e,i):s?s.value=i:t.set(e,i),i}var q,F,H,G,K,N,Z;"function"==typeof SuppressedError&&SuppressedError;let J=class extends i{constructor(){super(...arguments),q.add(this),F.set(this,void 0),H.set(this,""),this.variant="outlined"}get value(){return V(this,F,"f")??V(this,H,"f")}set value(e){U(this,F,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=!c(this)||this.disabled,t=d(this)&&this.disabledInteractive;return s`<div class="base"><m3e-elevation class="elevation" ?disabled="${e||t}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${e||t}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${e}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${e||t}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${h(this)?this[p]():o}<div class="wrapper">${V(this,q,"m",G).call(this)}</div></div>`}_renderIcon(){return s`<slot name="icon" aria-hidden="true" @slotchange="${V(this,q,"m",K)}"></slot>`}_renderTrailingIcon(){return s`<slot name="trailing-icon" aria-hidden="true" @slotchange="${V(this,q,"m",N)}"></slot>`}_renderSlot(){return s`<slot @slotchange="${V(this,q,"m",Z)}"></slot>`}};F=new WeakMap,H=new WeakMap,q=new WeakSet,G=function(){return s`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`},K=function(e){this.classList.toggle("-with-icon",v(e.target))},N=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},Z=function(e){U(this,H,m(e.target),"f")},J.styles=t`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${e(`background-color ${r.motion.duration.short4} ${r.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${r.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${r.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${r.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${r.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${r.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${r.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${r.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${r.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${r.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${r.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${r.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${r.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${r.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(.-with-icon) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(.-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(.-with-trailing-icon) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(.-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${r.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${r.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${r.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${r.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${r.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${r.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`,R([a(".elevation")],J.prototype,"_elevation",void 0),R([a(".focus-ring")],J.prototype,"_focusRing",void 0),R([a(".state-layer")],J.prototype,"_stateLayer",void 0),R([a(".ripple")],J.prototype,"_ripple",void 0),R([n({reflect:!0})],J.prototype,"variant",void 0),R([n()],J.prototype,"value",null),J=R([l("m3e-chip")],J);let Q=class extends(u(b(f(g(w(y(x($(J,"button")))))),!0))){_renderTrailingIcon(){return o}};Q=R([l("m3e-assist-chip")],Q);let X=class extends(k(i)){render(){return s`<slot></slot>`}};var Y,ee,te;X.styles=t`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`,X=R([l("m3e-chip-set")],X);let ie=class extends(S(g(w(y(x(b($(J,"radio"),!0))))))){constructor(){super(...arguments),Y.add(this),ee.set(this,e=>V(this,Y,"m",te).call(this,e))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",V(this,ee,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",V(this,ee,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[z].notifySelectionChange(this)}_renderIcon(){return s`<div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg> ${super._renderIcon()}</div>`}};var oe,se,ae,ne,le,re,ce;ee=new WeakMap,Y=new WeakSet,te=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")?.[z].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},ie.styles=[J.styles,t`:host([selected]:not(.-hide-selection)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${r.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${r.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(.-hide-selection)) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${r.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${r.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${r.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${r.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${r.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${r.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${r.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${r.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${r.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${r.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${r.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${r.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${r.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${r.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${r.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${r.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(.-with-icon)) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`],ie=R([l("m3e-filter-chip")],ie);let de=class extends(E(C(I(L(x(b($(X,"radiogroup")))))))){constructor(){super(...arguments),oe.add(this),se.set(this,void 0),this[ce]=(new B).onActiveItemChange(()=>this[z].activeItem?.focus()).withWrap().withDirectionality(D.current),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[z]?.items??[]}get selected(){return this[z]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(se=new WeakMap,oe=new WeakSet,ce=z,T)](){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}connectedCallback(){super.connectedCallback(),U(this,se,D.observe(()=>this[z].directionality=D.current),"f")}disconnectedCallback(){super.disconnectedCallback(),V(this,se,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(this[z].vertical=this.vertical),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[z].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",V(this,oe,"m",re).call(this),this[z].multi=this.multi,this[z].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.chips.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator))}render(){return s`<slot @slotchange="${V(this,oe,"m",ae)}" @keydown="${V(this,oe,"m",ne)}" @change="${V(this,oe,"m",le)}"></slot>`}};var he,pe,ve,me;ae=function(){const{added:e}=this[z].setItems([...this.querySelectorAll("m3e-filter-chip")]);e.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator)),V(this,oe,"m",re).call(this)},ne=function(e){this.multi||this[z].onKeyDown(e)},le=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},re=function(){this.chips.forEach(e=>e.role=this.multi?"button":"radio")},R([n({type:Boolean})],de.prototype,"multi",void 0),R([n({attribute:"hide-selection-indicator",type:Boolean})],de.prototype,"hideSelectionIndicator",void 0),de=R([l("m3e-filter-chip-set")],de);let ue=class extends(W(y(x(b($(J,"row"),!0))),"remove")){constructor(){super(...arguments),he.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 s`<div class="base"><m3e-elevation class="elevation" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" for="cell" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="wrapper"><div id="cell" class="cell" role="gridcell" tabindex="${O(this.disabled?void 0:"-1")}" @keydown="${V(this,he,"m",me)}"><slot name="avatar" @slotchange="${V(this,he,"m",pe)}"></slot>${this._renderIcon()}<div class="label">${this._renderSlot()}</div><div class="touch" aria-hidden="true"></div></div>${this._renderTrailingIcon()}</div></div>`}_renderTrailingIcon(){return this.removable?s`<span role="gridcell" class="remove"><m3e-icon-button class="remove-button" aria-label="${this.removeLabel}" size="extra-small" tabindex="-1" ?disabled="${this.disabled}" ?disabled-interactive="${this.disabledInteractive}" @click="${V(this,he,"m",ve)}"><slot name="remove-icon"><svg class="remove-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button></span>`:o}};var be,fe,ge,we,ye,xe,$e,ke,Se,Ee,Ce,Ie,Le,Te,We,_e,Ae,Me,ze,Be,Pe,je,De,Oe;he=new WeakSet,pe=function(e){this.classList.toggle("-with-avatar",v(e.target))},ve=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},me=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},ue.styles=[J.styles,t`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${r.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${r.color.onSurface}); } :host(.-with-avatar) ::slotted([slot="icon"]) { display: none; } :host(.-with-avatar) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`],R([a(".cell")],ue.prototype,"cell",void 0),R([a(".remove-button")],ue.prototype,"removeButton",void 0),R([n({type:Boolean})],ue.prototype,"removable",void 0),R([n({attribute:"remove-label"})],ue.prototype,"removeLabel",void 0),ue=R([l("m3e-input-chip")],ue);let Re=class extends(_(A(M(C(I(L(x(b($(X,"grid")))))))))){constructor(){super(...arguments),be.add(this),fe.set(this,void 0),ge.set(this,()=>V(this,be,"m",De).call(this)),we.set(this,e=>V(this,be,"m",Oe).call(this,e)),ye.set(this,()=>V(this,be,"m",Me).call(this)),xe.set(this,()=>V(this,be,"m",ze).call(this)),$e.set(this,()=>V(this,be,"m",Be).call(this)),ke.set(this,e=>V(this,be,"m",Pe).call(this,e)),Se.set(this,e=>V(this,be,"m",je).call(this,e)),Ee.set(this,new P),Ce.set(this,(new j).onActiveItemChange(()=>V(this,Ce,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex")).withDirectionality(D.current)),Ie.set(this,!1),Le.set(this,null),Te.set(this,0)}get chips(){return[...this.querySelectorAll("m3e-input-chip")]}get value(){const e=this.chips.filter(e=>!e.disabled).map(e=>e.value);return 0==e.length?null:e}get[(fe=new WeakMap,ge=new WeakMap,we=new WeakMap,ye=new WeakMap,xe=new WeakMap,$e=new WeakMap,ke=new WeakMap,Se=new WeakMap,Ee=new WeakMap,Ce=new WeakMap,Ie=new WeakMap,Le=new WeakMap,Te=new WeakMap,be=new WeakSet,T)](){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(){V(this,Le,"f")?.focus()}connectedCallback(){super.connectedCallback(),customElements.get("m3e-form-field")?this.closest("m3e-form-field")?.notifyControlStateChange():customElements.whenDefined("m3e-form-field").then(()=>{this.closest("m3e-form-field")?.notifyControlStateChange()}),U(this,Te,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",V(this,ye,"f")),this.addEventListener("focusin",V(this,xe,"f")),this.addEventListener("focusout",V(this,$e,"f")),U(this,fe,D.observe(()=>V(this,Ce,"f").directionality=D.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",V(this,ye,"f")),this.removeEventListener("focusin",V(this,xe,"f")),this.removeEventListener("focusout",V(this,$e,"f")),V(this,fe,"f")?.call(this)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${V(this,Te,"f")}`)}update(e){super.update(e),e.has("vertical")&&(this.ariaOrientation=null),e.has("disabled")&&(V(this,Ee,"f").items.forEach(e=>e.disabled=this.disabled),V(this,Le,"f")&&(V(this,Le,"f").disabled=this.disabled))}render(){return s`<slot @keydown="${V(this,be,"m",We)}" @slotchange="${V(this,be,"m",_e)}"></slot><span role="row"><span role="gridcell"><slot name="input" @slotchange="${V(this,be,"m",Ae)}"></slot></span></span>`}};We=function(e){V(this,Ce,"f").onKeyDown(e)},_e=async function(){const{added:e,removed:t}=V(this,Ee,"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",V(this,ke,"f")),t.cell.addEventListener("click",V(this,Se,"f"));t.forEach(e=>{e.removeEventListener("remove",V(this,ke,"f")),e.cell.removeEventListener("click",V(this,Se,"f"))}),V(this,Ce,"f").setItems(V(this,Ee,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),V(this,Ce,"f").activeItem||V(this,Ce,"f").updateActiveItem(V(this,Ce,"f").items.find(e=>e.hasAttribute("tabindex")))},Ae=function(){const e=this.querySelector("input");if(V(this,Le,"f")&&(V(this,Le,"f").removeEventListener("change",V(this,ge,"f")),V(this,Le,"f").removeEventListener("keydown",V(this,we,"f"))),U(this,Le,e,"f"),V(this,Le,"f")){V(this,Le,"f").disabled=this.disabled,V(this,Le,"f").addEventListener("change",V(this,ge,"f")),V(this,Le,"f").addEventListener("keydown",V(this,we,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(e,"value",{get:()=>t.get?.call(e),set:i=>{t.set?.call(e,i),V(this,Le,"f")!==e||V(this,Ie,"f")||V(this,be,"m",De).call(this)}})}},Me=function(){setTimeout(()=>(V(this,Ce,"f").activeItem??V(this,Le,"f"))?.focus())},ze=function(){this.setAttribute("tabindex","-1")},Be=function(){this.setAttribute("tabindex",`${V(this,Te,"f")}`)},Pe=function(e){const t=e.target,i=V(this,Ee,"f").items.indexOf(t),o=V(this,Ee,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),V(this,Ce,"f").setActiveItem(V(this,Ce,"f").items.find(e=>e===o?.removeButton)),V(this,Ce,"f").activeItem||V(this,Le,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},je=function(e){V(this,Ce,"f").updateActiveItem(e.composedPath().find(e=>e instanceof ue)?.cell)},De=function(){const e=V(this,Le,"f")?.value;e&&setTimeout(()=>{const e=V(this,Le,"f")?.value;if(!e)return;const t=document.createElement("m3e-input-chip");if(t.removable=!0,t.appendChild(document.createTextNode(e)),this.appendChild(t),V(this,Le,"f"))try{U(this,Ie,!0,"f"),V(this,Le,"f").value=""}finally{U(this,Ie,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))})},Oe=function(e){if("Backspace"===e.key&&!V(this,Le,"f")?.value){const e=[...V(this,Ee,"f").items].reverse().find(e=>!e.disabled&&!e.disabledInteractive&&e.removable);e&&e.dispatchEvent(new Event("remove"))}},(()=>{if(document){const e=new CSSStyleSheet;e.replaceSync(t`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${r.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}})(),Re.styles=[X.styles,t`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`],Re=R([l("m3e-input-chip-set")],Re);let Ve=class extends(u(b(f(g(w(y(x($(J,"button")))))),!0))){_renderTrailingIcon(){return o}};Ve=R([l("m3e-suggestion-chip")],Ve);export{Q as M3eAssistChipElement,J as M3eChipElement,X as M3eChipSetElement,ie as M3eFilterChipElement,de as M3eFilterChipSetElement,ue as M3eInputChipElement,Re as M3eInputChipSetElement,Ve as M3eSuggestionChipElement};
+import{LitElement as e,nothing as t,html as i,unsafeCSS as o,css as a}from"lit";import{AttachInternals as s,isDisabledMixin as n,isDisabledInteractiveMixin as l,isLinkButtonMixin as r,renderPseudoLink as c,DesignToken as d,customElement as h,setCustomState as p,hasAssignedNodes as v,getTextContent as m,FormSubmitter as u,LinkButton as b,KeyboardClick as f,Focusable as g,DisabledInteractive as w,Disabled as y,Role as $,Vertical as x,Selected as k,Labelled as S,Dirty as E,Touched as C,FormAssociated as I,formValue as A,EventAttribute as L,RequiredConstraintValidation as W,Required as z,ConstraintValidation as T}from"@m3e/web/core";import{query as _,property as M}from"lit/decorators.js";import{selectionManager as P,SelectionManager as B,ListManager as j,ListKeyManager as D}from"@m3e/web/core/a11y";import{M3eDirectionality as O}from"@m3e/web/core/bidi";import{ifDefined as R}from"lit/directives/if-defined.js";function U(e,t,i,o){var a,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(n=(s<3?a(n):s>3?a(t,i,n):a(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n}function V(e,t,i,o){if("a"===i&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?o:"a"===i?o.call(e):o?o.value:t.get(e)}function q(e,t,i,o,a){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?a.call(e,i):a?a.value=i:t.set(e,i),i}var F,H,G,K,N,Z,J;"function"==typeof SuppressedError&&SuppressedError;let Q=class extends(s(e)){constructor(){super(...arguments),F.add(this),H.set(this,void 0),G.set(this,""),this.variant="outlined"}get value(){return V(this,H,"f")??V(this,G,"f")}set value(e){q(this,H,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=!n(this)||this.disabled,o=l(this)&&this.disabledInteractive;return i`<div class="base"><m3e-elevation class="elevation" ?disabled="${e||o}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${e||o}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${e}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${e||o}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${r(this)?this[c]():t}<div class="wrapper">${V(this,F,"m",K).call(this)}</div></div>`}_renderIcon(){return i`<slot name="icon" aria-hidden="true" @slotchange="${V(this,F,"m",N)}"></slot>`}_renderTrailingIcon(){return i`<slot name="trailing-icon" aria-hidden="true" @slotchange="${V(this,F,"m",Z)}"></slot>`}_renderSlot(){return i`<slot @slotchange="${V(this,F,"m",J)}"></slot>`}};H=new WeakMap,G=new WeakMap,F=new WeakSet,K=function(){return i`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`},N=function(e){p(this,"-with-icon",v(e.target))},Z=function(e){p(this,"-with-trailing-icon",v(e.target))},J=function(e){q(this,G,m(e.target),"f")},Q.styles=a`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${o(`background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${d.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${d.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${d.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${d.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${d.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${d.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${d.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${d.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${d.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${d.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${d.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${d.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${d.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:state(-with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:state(-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:state(-with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${d.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${d.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${d.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${d.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${d.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${d.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`,U([_(".elevation")],Q.prototype,"_elevation",void 0),U([_(".focus-ring")],Q.prototype,"_focusRing",void 0),U([_(".state-layer")],Q.prototype,"_stateLayer",void 0),U([_(".ripple")],Q.prototype,"_ripple",void 0),U([M({reflect:!0})],Q.prototype,"variant",void 0),U([M()],Q.prototype,"value",null),Q=U([h("m3e-chip")],Q);let X=class extends(u(b(f(g(w(y($(Q,"button")))))))){_renderTrailingIcon(){return t}};X.formAssociated=!0,X=U([h("m3e-assist-chip")],X);let Y=class extends(x(e)){render(){return i`<slot></slot>`}};var ee,te,ie;Y.styles=a`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`,Y=U([h("m3e-chip-set")],Y);let oe=class extends(k(f(g(w(y($(Q,"radio"))))))){constructor(){super(...arguments),ee.add(this),te.set(this,e=>V(this,ee,"m",ie).call(this,e))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",V(this,te,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",V(this,te,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[P].notifySelectionChange(this)}_renderIcon(){return i`<div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg> ${super._renderIcon()}</div>`}};var ae,se,ne,le,re,ce,de;te=new WeakMap,ee=new WeakSet,ie=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")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},oe.formAssociated=!0,oe.styles=[Q.styles,a`:host([selected]:not(:state(-hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${d.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${d.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${d.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${d.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${d.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${d.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${d.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${d.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${d.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${d.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${d.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${d.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${d.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${d.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${d.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${d.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${d.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:state(-with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`],oe=U([h("m3e-filter-chip")],oe);let he=class extends(S(E(C(I(y(s($(Y,"radiogroup")))))))){constructor(){super(...arguments),ae.add(this),se.set(this,void 0),this[de]=(new B).onActiveItemChange(()=>this[P].activeItem?.focus()).withWrap().withDirectionality(O.current),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[P]?.items??[]}get selected(){return this[P]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(se=new WeakMap,ae=new WeakSet,de=P,A)](){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}connectedCallback(){super.connectedCallback(),q(this,se,O.observe(()=>this[P].directionality=O.current),"f")}disconnectedCallback(){super.disconnectedCallback(),V(this,se,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(this[P].vertical=this.vertical),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[P].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",V(this,ae,"m",ce).call(this),this[P].multi=this.multi,this[P].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.chips.forEach(e=>p(e,"-hide-selection",this.hideSelectionIndicator))}render(){return i`<slot @slotchange="${V(this,ae,"m",ne)}" @keydown="${V(this,ae,"m",le)}" @change="${V(this,ae,"m",re)}"></slot>`}};var pe,ve,me,ue;ne=function(){const{added:e}=this[P].setItems([...this.querySelectorAll("m3e-filter-chip")]);e.forEach(e=>p(e,"-hide-selection",this.hideSelectionIndicator)),V(this,ae,"m",ce).call(this)},le=function(e){this.multi||this[P].onKeyDown(e)},re=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},ce=function(){this.chips.forEach(e=>e.role=this.multi?"button":"radio")},U([M({type:Boolean})],he.prototype,"multi",void 0),U([M({attribute:"hide-selection-indicator",type:Boolean})],he.prototype,"hideSelectionIndicator",void 0),he=U([h("m3e-filter-chip-set")],he);let be=class extends(L(w(y($(Q,"row"))),"remove")){constructor(){super(...arguments),pe.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")&&p(this,"-with-trailing-icon",this.removable)}render(){return i`<div class="base"><m3e-elevation class="elevation" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" for="cell" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="wrapper"><div id="cell" class="cell" role="gridcell" tabindex="${R(this.disabled?void 0:"-1")}" @keydown="${V(this,pe,"m",ue)}"><slot name="avatar" @slotchange="${V(this,pe,"m",ve)}"></slot>${this._renderIcon()}<div class="label">${this._renderSlot()}</div><div class="touch" aria-hidden="true"></div></div>${this._renderTrailingIcon()}</div></div>`}_renderTrailingIcon(){return this.removable?i`<span role="gridcell" class="remove"><m3e-icon-button class="remove-button" aria-label="${this.removeLabel}" size="extra-small" tabindex="-1" ?disabled="${this.disabled}" ?disabled-interactive="${this.disabledInteractive}" @click="${V(this,pe,"m",me)}"><slot name="remove-icon"><svg class="remove-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button></span>`:t}};var fe,ge,we,ye,$e,xe,ke,Se,Ee,Ce,Ie,Ae,Le,We,ze,Te,_e,Me,Pe,Be,je,De,Oe,Re;pe=new WeakSet,ve=function(e){p(this,"-with-avatar",v(e.target))},me=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},ue=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},be.formAssociated=!0,be.styles=[Q.styles,a`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${d.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${d.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${d.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${d.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${d.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${d.color.onSurface}); } :host(:state(-with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:state(-with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`],U([_(".cell")],be.prototype,"cell",void 0),U([_(".remove-button")],be.prototype,"removeButton",void 0),U([M({type:Boolean})],be.prototype,"removable",void 0),U([M({attribute:"remove-label"})],be.prototype,"removeLabel",void 0),be=U([h("m3e-input-chip")],be);let Ue=class extends(W(z(T(E(C(I(y(s($(Y,"grid")))))))))){constructor(){super(...arguments),fe.add(this),ge.set(this,void 0),we.set(this,()=>V(this,fe,"m",Oe).call(this)),ye.set(this,e=>V(this,fe,"m",Re).call(this,e)),$e.set(this,()=>V(this,fe,"m",Me).call(this)),xe.set(this,()=>V(this,fe,"m",Pe).call(this)),ke.set(this,()=>V(this,fe,"m",Be).call(this)),Se.set(this,e=>V(this,fe,"m",je).call(this,e)),Ee.set(this,e=>V(this,fe,"m",De).call(this,e)),Ce.set(this,new j),Ie.set(this,(new D).onActiveItemChange(()=>V(this,Ie,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex")).withDirectionality(O.current)),Ae.set(this,!1),Le.set(this,null),We.set(this,0)}get chips(){return[...this.querySelectorAll("m3e-input-chip")]}get value(){const e=this.chips.filter(e=>!e.disabled).map(e=>e.value);return 0==e.length?null:e}get[(ge=new WeakMap,we=new WeakMap,ye=new WeakMap,$e=new WeakMap,xe=new WeakMap,ke=new WeakMap,Se=new WeakMap,Ee=new WeakMap,Ce=new WeakMap,Ie=new WeakMap,Ae=new WeakMap,Le=new WeakMap,We=new WeakMap,fe=new WeakSet,A)](){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(){V(this,Le,"f")?.focus()}connectedCallback(){super.connectedCallback(),customElements.get("m3e-form-field")?this.closest("m3e-form-field")?.notifyControlStateChange():customElements.whenDefined("m3e-form-field").then(()=>{this.closest("m3e-form-field")?.notifyControlStateChange()}),q(this,We,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",V(this,$e,"f")),this.addEventListener("focusin",V(this,xe,"f")),this.addEventListener("focusout",V(this,ke,"f")),q(this,ge,O.observe(()=>V(this,Ie,"f").directionality=O.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",V(this,$e,"f")),this.removeEventListener("focusin",V(this,xe,"f")),this.removeEventListener("focusout",V(this,ke,"f")),V(this,ge,"f")?.call(this)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${V(this,We,"f")}`)}update(e){super.update(e),e.has("vertical")&&(this.ariaOrientation=null),e.has("disabled")&&(V(this,Ce,"f").items.forEach(e=>e.disabled=this.disabled),V(this,Le,"f")&&(V(this,Le,"f").disabled=this.disabled))}render(){return i`<slot @keydown="${V(this,fe,"m",ze)}" @slotchange="${V(this,fe,"m",Te)}"></slot><span role="row"><span role="gridcell"><slot name="input" @slotchange="${V(this,fe,"m",_e)}"></slot></span></span>`}};ze=function(e){V(this,Ie,"f").onKeyDown(e)},Te=async function(){const{added:e,removed:t}=V(this,Ce,"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",V(this,Se,"f")),t.cell.addEventListener("click",V(this,Ee,"f"));t.forEach(e=>{e.removeEventListener("remove",V(this,Se,"f")),e.cell.removeEventListener("click",V(this,Ee,"f"))}),V(this,Ie,"f").setItems(V(this,Ce,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),V(this,Ie,"f").activeItem||V(this,Ie,"f").updateActiveItem(V(this,Ie,"f").items.find(e=>e.hasAttribute("tabindex")))},_e=function(){const e=this.querySelector("input");if(V(this,Le,"f")&&(V(this,Le,"f").removeEventListener("change",V(this,we,"f")),V(this,Le,"f").removeEventListener("keydown",V(this,ye,"f"))),q(this,Le,e,"f"),V(this,Le,"f")){V(this,Le,"f").disabled=this.disabled,V(this,Le,"f").addEventListener("change",V(this,we,"f")),V(this,Le,"f").addEventListener("keydown",V(this,ye,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(e,"value",{get:()=>t.get?.call(e),set:i=>{t.set?.call(e,i),V(this,Le,"f")!==e||V(this,Ae,"f")||V(this,fe,"m",Oe).call(this)}})}},Me=function(){setTimeout(()=>(V(this,Ie,"f").activeItem??V(this,Le,"f"))?.focus())},Pe=function(){this.setAttribute("tabindex","-1")},Be=function(){this.setAttribute("tabindex",`${V(this,We,"f")}`)},je=function(e){const t=e.target,i=V(this,Ce,"f").items.indexOf(t),o=V(this,Ce,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),V(this,Ie,"f").setActiveItem(V(this,Ie,"f").items.find(e=>e===o?.removeButton)),V(this,Ie,"f").activeItem||V(this,Le,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},De=function(e){V(this,Ie,"f").updateActiveItem(e.composedPath().find(e=>e instanceof be)?.cell)},Oe=async function(){const e=V(this,Le,"f")?.value;if(!e)return;const t=document.createElement("m3e-input-chip");if(t.removable=!0,t.appendChild(document.createTextNode(e)),this.appendChild(t),t.isUpdatePending&&await t.updateComplete,V(this,Le,"f"))try{q(this,Ae,!0,"f"),V(this,Le,"f").value=""}finally{q(this,Ae,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))},Re=function(e){if("Backspace"===e.key&&!V(this,Le,"f")?.value){const e=[...V(this,Ce,"f").items].reverse().find(e=>!e.disabled&&!e.disabledInteractive&&e.removable);e&&e.dispatchEvent(new Event("remove"))}},(()=>{if("undefined"!=typeof window){const e=new CSSStyleSheet;e.replaceSync(a`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${d.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}})(),Ue.styles=[Y.styles,a`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`],Ue=U([h("m3e-input-chip-set")],Ue);let Ve=class extends(u(b(f(g(w(y($(Q,"button")))))))){_renderTrailingIcon(){return t}};Ve.formAssociated=!0,Ve=U([h("m3e-suggestion-chip")],Ve);export{X as M3eAssistChipElement,Q as M3eChipElement,Y as M3eChipSetElement,oe as M3eFilterChipElement,he as M3eFilterChipSetElement,be as M3eInputChipElement,Ue as M3eInputChipSetElement,Ve as M3eSuggestionChipElement};
 //# sourceMappingURL=chips.min.js.map