@m3e/chips 1.2.1 → 1.3.0

package/dist/index.min.js

@@ -42,5 +42,5 @@ function he(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ue=globalThis,Oe=Ue.trustedTypes,Le=Oe?Oe.createPolicy("lit-html",{createHTML:e=>e}):void 0,He="$lit$",Ne=`lit$${Math.random().toFixed(9).slice(2)}$`,Re="?"+Ne,We=`<${Re}>`,ze=document,je=()=>ze.createComment(""),De=e=>null===e||"object"!=typeof e&&"function"!=typeof e,Be=Array.isArray,qe="[ \t\n\f\r]",Ve=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Fe=/-->/g,Ke=/>/g,Ze=RegExp(`>|${qe}(?:([^\\s"'>=/]+)(${qe}*=${qe}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Ge=/'/g,Je=/"/g,Qe=/^(?:script|style|textarea|title)$/i,Xe=Symbol.for("lit-noChange"),Ye=Symbol.for("lit-nothing"),et=new WeakMap,tt=ze.createTreeWalker(ze,129);function it(e,t){if(!Be(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==Le?Le.createHTML(t):t}const st=(e,t)=>{const i=e.length-1,s=[];let o,n=2===t?"<svg>":3===t?"<math>":"",r=Ve;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===Ve?"!--"===l[1]?r=Fe:void 0!==l[1]?r=Ke:void 0!==l[2]?(Qe.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=Ze):void 0!==l[3]&&(r=Ze):r===Ze?">"===l[0]?(r=o??Ve,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?Ze:'"'===l[3]?Je:Ge):r===Je||r===Ge?r=Ze:r===Fe||r===Ke?r=Ve:(r=Ze,o=void 0);const d=r===Ze&&e[t+1].startsWith("/>")?" ":"";n+=r===Ve?i+We:c>=0?(s.push(a),i.slice(0,c)+He+i.slice(c)+Ne+d):i+Ne+(-2===c?t:d)}return[it(e,n+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]};class ot{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]=st(e,t);if(this.el=ot.createElement(l,i),tt.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=tt.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(He)){const t=c[n++],i=s.getAttribute(e).split(Ne),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:o,name:r[2],strings:i,ctor:"."===r[1]?ct:"?"===r[1]?ht:"@"===r[1]?dt:lt}),s.removeAttribute(e)}else e.startsWith(Ne)&&(a.push({type:6,index:o}),s.removeAttribute(e));if(Qe.test(s.tagName)){const e=s.textContent.split(Ne),t=e.length-1;if(t>0){s.textContent=Oe?Oe.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],je()),tt.nextNode(),a.push({type:2,index:++o});s.append(e[t],je())}}}else if(8===s.nodeType)if(s.data===Re)a.push({type:2,index:o});else{let e=-1;for(;-1!==(e=s.data.indexOf(Ne,e+1));)a.push({type:7,index:o}),e+=Ne.length-1}o++}}static createElement(e,t){const i=ze.createElement("template");return i.innerHTML=e,i}}function nt(e,t,i=e,s){if(t===Xe)return t;let o=void 0!==s?i._$Co?.[s]:i._$Cl;const n=De(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=nt(e,o._$AS(e,t.values),o,s)),t}class rt{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??ze).importNode(t,!0);tt.currentNode=s;let o=tt.nextNode(),n=0,r=0,a=i[0];for(;void 0!==a;){if(n===a.index){let t;2===a.type?t=new at(o,o.nextSibling,this,e):1===a.type?t=new a.ctor(o,a.name,a.strings,this,e):6===a.type&&(t=new pt(o,this,e)),this._$AV.push(t),a=i[++r]}n!==a?.index&&(o=tt.nextNode(),n++)}return tt.currentNode=ze,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 at{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,s){this.type=2,this._$AH=Ye,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=nt(this,e,t),De(e)?e===Ye||null==e||""===e?(this._$AH!==Ye&&this._$AR(),this._$AH=Ye):e!==this._$AH&&e!==Xe&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>Be(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!==Ye&&De(this._$AH)?this._$AA.nextSibling.data=e:this.T(ze.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=ot.createElement(it(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(t);else{const e=new rt(s,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=et.get(e.strings);return void 0===t&&et.set(e.strings,t=new ot(e)),t}k(e){Be(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 at(this.O(je()),this.O(je()),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 lt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,s,o){this.type=1,this._$AH=Ye,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=Ye}_$AI(e,t=this,i,s){const o=this.strings;let n=!1;if(void 0===o)e=nt(this,e,t,0),n=!De(e)||e!==this._$AH&&e!==Xe,n&&(this._$AH=e);else{const s=e;let r,a;for(e=o[0],r=0;r<o.length-1;r++)a=nt(this,s[i+r],t,r),a===Xe&&(a=this._$AH[r]),n||=!De(a)||a!==this._$AH[r],a===Ye?e=Ye:e!==Ye&&(e+=(a??"")+o[r+1]),this._$AH[r]=a}n&&!s&&this.j(e)}j(e){e===Ye?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ct extends lt{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Ye?void 0:e}}class ht extends lt{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Ye)}}class dt extends lt{constructor(e,t,i,s,o){super(e,t,i,s,o),this.type=5}_$AI(e,t=this){if((e=nt(this,e,t,0)??Ye)===Xe)return;const i=this._$AH,s=e===Ye&&i!==Ye||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Ye&&(i===Ye||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 pt{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){nt(this,e)}}const ut=Ue.litHtmlPolyfillSupport;ut?.(ot,at),(Ue.litHtmlVersions??=[]).push("3.3.1");var vt,mt,ft,bt;let gt=class extends(C(b(g(u($(ge,"row"),!0))),"remove")){constructor(){super(...arguments),vt.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"><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="${(e=>e??Ye)(this.disabled?void 0:"-1")}" @keydown="${N(this,vt,"m",bt)}"><slot name="avatar" @slotchange="${N(this,vt,"m",mt)}"></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?o`<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="${N(this,vt,"m",ft)}"><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>`:s}};var $t,yt,wt,_t,At,Et,St,xt,Ct,kt,Pt,Mt,Tt,It,Ut,Ot,Lt,Ht,Nt,Rt,Wt,zt,jt,Dt;vt=new WeakSet,mt=function(e){this.classList.toggle("-with-avatar",h(e.target))},ft=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},bt=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},gt.styles=[ge.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) + ${n.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, ${n.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; } }`],H([he(".cell")],gt.prototype,"cell",void 0),H([he(".remove-button")],gt.prototype,"removeButton",void 0),H([ce({type:Boolean})],gt.prototype,"removable",void 0),H([ce({attribute:"remove-label"})],gt.prototype,"removeLabel",void 0),gt=H([W("m3e-input-chip")],gt);let Bt=class extends(k(P(M(A(E(S(g(u($(ye,"grid")))))))))){constructor(){super(...arguments),$t.add(this),yt.set(this,void 0),wt.set(this,()=>N(this,$t,"m",jt).call(this)),_t.set(this,e=>N(this,$t,"m",Dt).call(this,e)),At.set(this,()=>N(this,$t,"m",Ht).call(this)),Et.set(this,()=>N(this,$t,"m",Nt).call(this)),St.set(this,()=>N(this,$t,"m",Rt).call(this)),xt.set(this,e=>N(this,$t,"m",Wt).call(this,e)),Ct.set(this,e=>N(this,$t,"m",zt).call(this,e)),kt.set(this,new U),Pt.set(this,(new O).onActiveItemChange(()=>N(this,Pt,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex")).withDirectionality(L.current)),Mt.set(this,!1),Tt.set(this,null),It.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[(yt=new WeakMap,wt=new WeakMap,_t=new WeakMap,At=new WeakMap,Et=new WeakMap,St=new WeakMap,xt=new WeakMap,Ct=new WeakMap,kt=new WeakMap,Pt=new WeakMap,Mt=new WeakMap,Tt=new WeakMap,It=new WeakMap,$t=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(){N(this,Tt,"f")?.focus()}connectedCallback(){super.connectedCallback(),this.closest("m3e-form-field")?.notifyControlStateChange(),R(this,It,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",N(this,At,"f")),this.addEventListener("focusin",N(this,Et,"f")),this.addEventListener("focusout",N(this,St,"f")),R(this,yt,L.observe(()=>N(this,Pt,"f").directionality=L.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",N(this,At,"f")),this.removeEventListener("focusin",N(this,Et,"f")),this.removeEventListener("focusout",N(this,St,"f")),N(this,yt,"f")?.call(this)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${N(this,It,"f")}`)}update(e){super.update(e),e.has("vertical")&&(this.ariaOrientation=null),e.has("disabled")&&(N(this,kt,"f").items.forEach(e=>e.disabled=this.disabled),N(this,Tt,"f")&&(N(this,Tt,"f").disabled=this.disabled))}render(){return o`<slot @keydown="${N(this,$t,"m",Ut)}" @slotchange="${N(this,$t,"m",Ot)}"></slot><span role="row"><span role="gridcell"><slot name="input" @slotchange="${N(this,$t,"m",Lt)}"></slot></span></span>`}};Ut=function(e){N(this,Pt,"f").onKeyDown(e)},Ot=async function(){const{added:e,removed:t}=N(this,kt,"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",N(this,xt,"f")),t.cell.addEventListener("click",N(this,Ct,"f"));t.forEach(e=>{e.removeEventListener("remove",N(this,xt,"f")),e.cell.removeEventListener("click",N(this,Ct,"f"))}),N(this,Pt,"f").setItems(N(this,kt,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),N(this,Pt,"f").activeItem||N(this,Pt,"f").updateActiveItem(N(this,Pt,"f").items.find(e=>e.hasAttribute("tabindex")))},Lt=function(){const e=this.querySelector("input");if(N(this,Tt,"f")&&(N(this,Tt,"f").removeEventListener("change",N(this,wt,"f")),N(this,Tt,"f").removeEventListener("keydown",N(this,_t,"f"))),R(this,Tt,e,"f"),N(this,Tt,"f")){N(this,Tt,"f").disabled=this.disabled,N(this,Tt,"f").addEventListener("change",N(this,wt,"f")),N(this,Tt,"f").addEventListener("keydown",N(this,_t,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(e,"value",{get:()=>t.get?.call(e),set:i=>{t.set?.call(e,i),N(this,Tt,"f")!==e||N(this,Mt,"f")||N(this,$t,"m",jt).call(this)}})}},Ht=function(){setTimeout(()=>(N(this,Pt,"f").activeItem??N(this,Tt,"f"))?.focus())},Nt=function(){this.setAttribute("tabindex","-1")},Rt=function(){this.setAttribute("tabindex",`${N(this,It,"f")}`)},Wt=function(e){const t=e.target,i=N(this,kt,"f").items.indexOf(t),s=N(this,kt,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),N(this,Pt,"f").setActiveItem(N(this,Pt,"f").items.find(e=>e===s?.removeButton)),N(this,Pt,"f").activeItem||N(this,Tt,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},zt=function(e){N(this,Pt,"f").updateActiveItem(e.composedPath().find(e=>e instanceof gt)?.cell)},jt=function(){const e=N(this,Tt,"f")?.value;e&&setTimeout(()=>{const e=N(this,Tt,"f")?.value;if(!e)return;const t=document.createElement("m3e-input-chip");if(t.removable=!0,t.appendChild(document.createTextNode(e)),this.appendChild(t),N(this,Tt,"f"))try{R(this,Mt,!0,"f"),N(this,Tt,"f").value=""}finally{R(this,Mt,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))})},Dt=function(e){if("Backspace"===e.key&&!N(this,Tt,"f")?.value){const e=[...N(this,kt,"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 ${n.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]}})(),Bt.styles=[ye.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; }`],Bt=H([W("m3e-input-chip-set")],Bt);let qt=class extends(p(u(v(m(f(b(g($(ge,"button")))))),!0))){_renderTrailingIcon(){return s}};qt=H([W("m3e-suggestion-chip")],qt);export{$e as M3eAssistChipElement,ge as M3eChipElement,ye as M3eChipSetElement,Ee as M3eFilterChipElement,Ie as M3eFilterChipSetElement,gt as M3eInputChipElement,Bt as M3eInputChipSetElement,qt as M3eSuggestionChipElement};
+const Ue=globalThis,Oe=Ue.trustedTypes,Le=Oe?Oe.createPolicy("lit-html",{createHTML:e=>e}):void 0,He="$lit$",Ne=`lit$${Math.random().toFixed(9).slice(2)}$`,Re="?"+Ne,We=`<${Re}>`,ze=document,je=()=>ze.createComment(""),De=e=>null===e||"object"!=typeof e&&"function"!=typeof e,Be=Array.isArray,qe="[ \t\n\f\r]",Ve=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Fe=/-->/g,Ke=/>/g,Ze=RegExp(`>|${qe}(?:([^\\s"'>=/]+)(${qe}*=${qe}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Ge=/'/g,Je=/"/g,Qe=/^(?:script|style|textarea|title)$/i,Xe=Symbol.for("lit-noChange"),Ye=Symbol.for("lit-nothing"),et=new WeakMap,tt=ze.createTreeWalker(ze,129);function it(e,t){if(!Be(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==Le?Le.createHTML(t):t}const st=(e,t)=>{const i=e.length-1,s=[];let o,n=2===t?"<svg>":3===t?"<math>":"",r=Ve;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===Ve?"!--"===l[1]?r=Fe:void 0!==l[1]?r=Ke:void 0!==l[2]?(Qe.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=Ze):void 0!==l[3]&&(r=Ze):r===Ze?">"===l[0]?(r=o??Ve,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?Ze:'"'===l[3]?Je:Ge):r===Je||r===Ge?r=Ze:r===Fe||r===Ke?r=Ve:(r=Ze,o=void 0);const d=r===Ze&&e[t+1].startsWith("/>")?" ":"";n+=r===Ve?i+We:c>=0?(s.push(a),i.slice(0,c)+He+i.slice(c)+Ne+d):i+Ne+(-2===c?t:d)}return[it(e,n+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]};class ot{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]=st(e,t);if(this.el=ot.createElement(l,i),tt.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=tt.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(He)){const t=c[n++],i=s.getAttribute(e).split(Ne),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:o,name:r[2],strings:i,ctor:"."===r[1]?ct:"?"===r[1]?ht:"@"===r[1]?dt:lt}),s.removeAttribute(e)}else e.startsWith(Ne)&&(a.push({type:6,index:o}),s.removeAttribute(e));if(Qe.test(s.tagName)){const e=s.textContent.split(Ne),t=e.length-1;if(t>0){s.textContent=Oe?Oe.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],je()),tt.nextNode(),a.push({type:2,index:++o});s.append(e[t],je())}}}else if(8===s.nodeType)if(s.data===Re)a.push({type:2,index:o});else{let e=-1;for(;-1!==(e=s.data.indexOf(Ne,e+1));)a.push({type:7,index:o}),e+=Ne.length-1}o++}}static createElement(e,t){const i=ze.createElement("template");return i.innerHTML=e,i}}function nt(e,t,i=e,s){if(t===Xe)return t;let o=void 0!==s?i._$Co?.[s]:i._$Cl;const n=De(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=nt(e,o._$AS(e,t.values),o,s)),t}class rt{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??ze).importNode(t,!0);tt.currentNode=s;let o=tt.nextNode(),n=0,r=0,a=i[0];for(;void 0!==a;){if(n===a.index){let t;2===a.type?t=new at(o,o.nextSibling,this,e):1===a.type?t=new a.ctor(o,a.name,a.strings,this,e):6===a.type&&(t=new pt(o,this,e)),this._$AV.push(t),a=i[++r]}n!==a?.index&&(o=tt.nextNode(),n++)}return tt.currentNode=ze,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 at{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,s){this.type=2,this._$AH=Ye,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=nt(this,e,t),De(e)?e===Ye||null==e||""===e?(this._$AH!==Ye&&this._$AR(),this._$AH=Ye):e!==this._$AH&&e!==Xe&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>Be(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!==Ye&&De(this._$AH)?this._$AA.nextSibling.data=e:this.T(ze.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=ot.createElement(it(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(t);else{const e=new rt(s,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=et.get(e.strings);return void 0===t&&et.set(e.strings,t=new ot(e)),t}k(e){Be(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 at(this.O(je()),this.O(je()),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 lt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,s,o){this.type=1,this._$AH=Ye,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=Ye}_$AI(e,t=this,i,s){const o=this.strings;let n=!1;if(void 0===o)e=nt(this,e,t,0),n=!De(e)||e!==this._$AH&&e!==Xe,n&&(this._$AH=e);else{const s=e;let r,a;for(e=o[0],r=0;r<o.length-1;r++)a=nt(this,s[i+r],t,r),a===Xe&&(a=this._$AH[r]),n||=!De(a)||a!==this._$AH[r],a===Ye?e=Ye:e!==Ye&&(e+=(a??"")+o[r+1]),this._$AH[r]=a}n&&!s&&this.j(e)}j(e){e===Ye?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ct extends lt{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Ye?void 0:e}}class ht extends lt{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Ye)}}class dt extends lt{constructor(e,t,i,s,o){super(e,t,i,s,o),this.type=5}_$AI(e,t=this){if((e=nt(this,e,t,0)??Ye)===Xe)return;const i=this._$AH,s=e===Ye&&i!==Ye||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Ye&&(i===Ye||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 pt{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){nt(this,e)}}const ut=Ue.litHtmlPolyfillSupport;ut?.(ot,at),(Ue.litHtmlVersions??=[]).push("3.3.1");var vt,mt,ft,bt;let gt=class extends(C(b(g(u($(ge,"row"),!0))),"remove")){constructor(){super(...arguments),vt.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"><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="${(e=>e??Ye)(this.disabled?void 0:"-1")}" @keydown="${N(this,vt,"m",bt)}"><slot name="avatar" @slotchange="${N(this,vt,"m",mt)}"></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?o`<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="${N(this,vt,"m",ft)}"><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>`:s}};var $t,yt,wt,_t,At,Et,St,xt,Ct,kt,Pt,Mt,Tt,It,Ut,Ot,Lt,Ht,Nt,Rt,Wt,zt,jt,Dt;vt=new WeakSet,mt=function(e){this.classList.toggle("-with-avatar",h(e.target))},ft=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},bt=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},gt.styles=[ge.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) + ${n.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, ${n.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; } }`],H([he(".cell")],gt.prototype,"cell",void 0),H([he(".remove-button")],gt.prototype,"removeButton",void 0),H([ce({type:Boolean})],gt.prototype,"removable",void 0),H([ce({attribute:"remove-label"})],gt.prototype,"removeLabel",void 0),gt=H([W("m3e-input-chip")],gt);let Bt=class extends(k(P(M(A(E(S(g(u($(ye,"grid")))))))))){constructor(){super(...arguments),$t.add(this),yt.set(this,void 0),wt.set(this,()=>N(this,$t,"m",jt).call(this)),_t.set(this,e=>N(this,$t,"m",Dt).call(this,e)),At.set(this,()=>N(this,$t,"m",Ht).call(this)),Et.set(this,()=>N(this,$t,"m",Nt).call(this)),St.set(this,()=>N(this,$t,"m",Rt).call(this)),xt.set(this,e=>N(this,$t,"m",Wt).call(this,e)),Ct.set(this,e=>N(this,$t,"m",zt).call(this,e)),kt.set(this,new U),Pt.set(this,(new O).onActiveItemChange(()=>N(this,Pt,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex")).withDirectionality(L.current)),Mt.set(this,!1),Tt.set(this,null),It.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[(yt=new WeakMap,wt=new WeakMap,_t=new WeakMap,At=new WeakMap,Et=new WeakMap,St=new WeakMap,xt=new WeakMap,Ct=new WeakMap,kt=new WeakMap,Pt=new WeakMap,Mt=new WeakMap,Tt=new WeakMap,It=new WeakMap,$t=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(){N(this,Tt,"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()}),R(this,It,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",N(this,At,"f")),this.addEventListener("focusin",N(this,Et,"f")),this.addEventListener("focusout",N(this,St,"f")),R(this,yt,L.observe(()=>N(this,Pt,"f").directionality=L.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",N(this,At,"f")),this.removeEventListener("focusin",N(this,Et,"f")),this.removeEventListener("focusout",N(this,St,"f")),N(this,yt,"f")?.call(this)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${N(this,It,"f")}`)}update(e){super.update(e),e.has("vertical")&&(this.ariaOrientation=null),e.has("disabled")&&(N(this,kt,"f").items.forEach(e=>e.disabled=this.disabled),N(this,Tt,"f")&&(N(this,Tt,"f").disabled=this.disabled))}render(){return o`<slot @keydown="${N(this,$t,"m",Ut)}" @slotchange="${N(this,$t,"m",Ot)}"></slot><span role="row"><span role="gridcell"><slot name="input" @slotchange="${N(this,$t,"m",Lt)}"></slot></span></span>`}};Ut=function(e){N(this,Pt,"f").onKeyDown(e)},Ot=async function(){const{added:e,removed:t}=N(this,kt,"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",N(this,xt,"f")),t.cell.addEventListener("click",N(this,Ct,"f"));t.forEach(e=>{e.removeEventListener("remove",N(this,xt,"f")),e.cell.removeEventListener("click",N(this,Ct,"f"))}),N(this,Pt,"f").setItems(N(this,kt,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),N(this,Pt,"f").activeItem||N(this,Pt,"f").updateActiveItem(N(this,Pt,"f").items.find(e=>e.hasAttribute("tabindex")))},Lt=function(){const e=this.querySelector("input");if(N(this,Tt,"f")&&(N(this,Tt,"f").removeEventListener("change",N(this,wt,"f")),N(this,Tt,"f").removeEventListener("keydown",N(this,_t,"f"))),R(this,Tt,e,"f"),N(this,Tt,"f")){N(this,Tt,"f").disabled=this.disabled,N(this,Tt,"f").addEventListener("change",N(this,wt,"f")),N(this,Tt,"f").addEventListener("keydown",N(this,_t,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(e,"value",{get:()=>t.get?.call(e),set:i=>{t.set?.call(e,i),N(this,Tt,"f")!==e||N(this,Mt,"f")||N(this,$t,"m",jt).call(this)}})}},Ht=function(){setTimeout(()=>(N(this,Pt,"f").activeItem??N(this,Tt,"f"))?.focus())},Nt=function(){this.setAttribute("tabindex","-1")},Rt=function(){this.setAttribute("tabindex",`${N(this,It,"f")}`)},Wt=function(e){const t=e.target,i=N(this,kt,"f").items.indexOf(t),s=N(this,kt,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),N(this,Pt,"f").setActiveItem(N(this,Pt,"f").items.find(e=>e===s?.removeButton)),N(this,Pt,"f").activeItem||N(this,Tt,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},zt=function(e){N(this,Pt,"f").updateActiveItem(e.composedPath().find(e=>e instanceof gt)?.cell)},jt=function(){const e=N(this,Tt,"f")?.value;e&&setTimeout(()=>{const e=N(this,Tt,"f")?.value;if(!e)return;const t=document.createElement("m3e-input-chip");if(t.removable=!0,t.appendChild(document.createTextNode(e)),this.appendChild(t),N(this,Tt,"f"))try{R(this,Mt,!0,"f"),N(this,Tt,"f").value=""}finally{R(this,Mt,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))})},Dt=function(e){if("Backspace"===e.key&&!N(this,Tt,"f")?.value){const e=[...N(this,kt,"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 ${n.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]}})(),Bt.styles=[ye.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; }`],Bt=H([W("m3e-input-chip-set")],Bt);let qt=class extends(p(u(v(m(f(b(g($(ge,"button")))))),!0))){_renderTrailingIcon(){return s}};qt=H([W("m3e-suggestion-chip")],qt);export{$e as M3eAssistChipElement,ge as M3eChipElement,ye as M3eChipSetElement,Ee as M3eFilterChipElement,Ie as M3eFilterChipSetElement,gt as M3eInputChipElement,Bt as M3eInputChipSetElement,qt as M3eSuggestionChipElement};
 //# sourceMappingURL=index.min.js.map