@m3e/chips 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/index.min.js

@@ -101,6 +101,16 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
       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, ${n.color.surfaceContainerLow});
 
@@ -437,7 +447,25 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
     `],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>
       <span role="row">
         <span role="gridcell"><slot name="input" @slotchange="${H(this,ft,"m",Mt)}"></slot></span>
-      </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`
+      </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"))}},(()=>{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]})(),zt.styles=[$e.styles,t`
       ::slotted([slot="input"]) {
         outline: unset;
         border: unset;
@@ -455,26 +483,9 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
       ::slotted(m3e-input-chip) {
         min-width: 0;
       }
-      ::slotted([slot="input"])::placeholder {
-        user-select: none;
-        color: currentColor;
-        transition: opacity ${n.motion.duration.extraLong1};
-      }
-      :host(:not(:focus-within)) ::slotted([slot="input"])::placeholder {
-        opacity: 0;
-        transition: 0s;
-      }
-      :host(:hover) ::slotted([slot="input"])::placeholder {
-        transition: 0s;
-      }
       span[role="row"],
       span[role="gridcell"] {
         display: contents;
       }
-      @media (prefers-reduced-motion) {
-        ::slotted([slot="input"])::placeholder {
-          transition: none !important;
-        }
-      }
     `],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};
 //# sourceMappingURL=index.min.js.map