@m3e/chips 1.0.0-rc.2 → 1.0.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/custom-elements.json +106 -89
- package/dist/index.js +72 -22
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +42 -31
- package/dist/index.min.js.map +1 -1
- package/dist/src/AssistChipElement.d.ts +83 -0
- package/dist/src/AssistChipElement.d.ts.map +1 -0
- package/dist/src/ChipElement.d.ts +83 -0
- package/dist/src/ChipElement.d.ts.map +1 -0
- package/dist/src/ChipSetElement.d.ts +42 -0
- package/dist/src/ChipSetElement.d.ts.map +1 -0
- package/dist/src/ChipVariant.d.ts +3 -0
- package/dist/src/ChipVariant.d.ts.map +1 -0
- package/dist/src/FilterChipElement.d.ts +105 -0
- package/dist/src/FilterChipElement.d.ts.map +1 -0
- package/dist/src/FilterChipSetElement.d.ts +77 -0
- package/dist/src/FilterChipSetElement.d.ts.map +1 -0
- package/dist/src/InputChipElement.d.ts +117 -0
- package/dist/src/InputChipElement.d.ts.map +1 -0
- package/dist/src/InputChipSetElement.d.ts +74 -0
- package/dist/src/InputChipSetElement.d.ts.map +1 -0
- package/dist/src/SuggestionChipElement.d.ts +84 -0
- package/dist/src/SuggestionChipElement.d.ts.map +1 -0
- package/dist/src/index.d.ts +10 -0
- package/dist/src/index.d.ts.map +1 -0
- package/package.json +4 -4
package/dist/index.min.js
CHANGED
|
@@ -101,6 +101,16 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
101
101
|
overflow: hidden;
|
|
102
102
|
text-overflow: ellipsis;
|
|
103
103
|
}
|
|
104
|
+
a {
|
|
105
|
+
all: unset;
|
|
106
|
+
display: block;
|
|
107
|
+
position: absolute;
|
|
108
|
+
top: 0px;
|
|
109
|
+
left: 0px;
|
|
110
|
+
right: 0px;
|
|
111
|
+
bottom: 0px;
|
|
112
|
+
z-index: 1;
|
|
113
|
+
}
|
|
104
114
|
:host([variant="elevated"]) .base {
|
|
105
115
|
background-color: var(--m3e-elevated-chip-container-color, ${n.color.surfaceContainerLow});
|
|
106
116
|
|
|
@@ -221,12 +231,12 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
221
231
|
:host([vertical]) {
|
|
222
232
|
flex-direction: column;
|
|
223
233
|
}
|
|
224
|
-
`,$e=L([R("m3e-chip-set")],$e);let Ae=class extends(_(m(f(b(g(u($(be,"
|
|
234
|
+
`,$e=L([R("m3e-chip-set")],$e);let Ae=class extends(_(m(f(b(g(u($(be,"radio"),!0))))))){constructor(){super(...arguments),ye.add(this),_e.set(this,e=>H(this,ye,"m",we).call(this,e))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",H(this,_e,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",H(this,_e,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[M].notifySelectionChange(this)}_renderIcon(){return o`<div class="icon" aria-hidden="true">
|
|
225
235
|
<svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
|
|
226
236
|
<path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
|
|
227
237
|
</svg>
|
|
228
238
|
${super._renderIcon()}
|
|
229
|
-
</div>`}};var Ee,Se,xe,Ce,ke;_e=new WeakMap,ye=new WeakSet,we=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[M].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},Ae.styles=[be.styles,t`
|
|
239
|
+
</div>`}};var Ee,Se,xe,Ce,ke,Pe;_e=new WeakMap,ye=new WeakSet,we=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[M].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},Ae.styles=[be.styles,t`
|
|
230
240
|
:host([selected]:not(.-hide-selection)) .wrapper {
|
|
231
241
|
padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem);
|
|
232
242
|
}
|
|
@@ -329,17 +339,17 @@ function ce(e,t){return(t,i,s)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
329
339
|
outline-color: ButtonText;
|
|
330
340
|
}
|
|
331
341
|
}
|
|
332
|
-
`],Ae=L([R("m3e-filter-chip")],Ae);let
|
|
342
|
+
`],Ae=L([R("m3e-filter-chip")],Ae);let Te=class extends(w(A(E(S(g(u($($e,"radiogroup")))))))){constructor(){super(...arguments),Ee.add(this),this[Pe]=(new I).onActiveItemChange(()=>this[M].activeItem?.focus()).withWrap(),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[M]?.items??[]}get selected(){return this[M]?.selectedItems??[]}get value(){const e=this.selected.map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(Ee=new WeakSet,Pe=M,x)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const i of e)t.append(this.name,i);return t}return e}update(e){super.update(e),e.has("vertical")&&(this[M].vertical=this.vertical),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[M].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",H(this,Ee,"m",ke).call(this),this[M].multi=this.multi,this[M].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 o`<slot
|
|
333
343
|
@slotchange="${H(this,Ee,"m",Se)}"
|
|
334
344
|
@keydown="${H(this,Ee,"m",xe)}"
|
|
335
345
|
@change="${H(this,Ee,"m",Ce)}"
|
|
336
|
-
></slot>`}};Se=function(){const{added:e}=this[M].setItems([...this.querySelectorAll("m3e-filter-chip")]);e.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator))},xe=function(e){this.multi||this[M].onKeyDown(e)},Ce=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},L([le({type:Boolean})],
|
|
346
|
+
></slot>`}};Se=function(){const{added:e}=this[M].setItems([...this.querySelectorAll("m3e-filter-chip")]);e.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator)),H(this,Ee,"m",ke).call(this)},xe=function(e){this.multi||this[M].onKeyDown(e)},Ce=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},ke=function(){this.chips.forEach(e=>e.role=this.multi?"button":"radio")},L([le({type:Boolean})],Te.prototype,"multi",void 0),L([le({attribute:"hide-selection-indicator",type:Boolean})],Te.prototype,"hideSelectionIndicator",void 0),Te=L([R("m3e-filter-chip-set")],Te);
|
|
337
347
|
/**
|
|
338
348
|
* @license
|
|
339
349
|
* Copyright 2017 Google LLC
|
|
340
350
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
341
351
|
*/
|
|
342
|
-
const
|
|
352
|
+
const Me=globalThis,Ie=Me.trustedTypes,Ue=Ie?Ie.createPolicy("lit-html",{createHTML:e=>e}):void 0,Oe="$lit$",Le=`lit$${Math.random().toFixed(9).slice(2)}$`,He="?"+Le,Ne=`<${He}>`,Re=document,ze=()=>Re.createComment(""),We=e=>null===e||"object"!=typeof e&&"function"!=typeof e,je=Array.isArray,Be="[ \t\n\f\r]",De=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,qe=/-->/g,Ve=/>/g,Fe=RegExp(`>|${Be}(?:([^\\s"'>=/]+)(${Be}*=${Be}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Ke=/'/g,Ze=/"/g,Ge=/^(?:script|style|textarea|title)$/i,Je=Symbol.for("lit-noChange"),Qe=Symbol.for("lit-nothing"),Xe=new WeakMap,Ye=Re.createTreeWalker(Re,129);function et(e,t){if(!je(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==Ue?Ue.createHTML(t):t}const tt=(e,t)=>{const i=e.length-1,s=[];let o,n=2===t?"<svg>":3===t?"<math>":"",r=De;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===De?"!--"===l[1]?r=qe:void 0!==l[1]?r=Ve:void 0!==l[2]?(Ge.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=Fe):void 0!==l[3]&&(r=Fe):r===Fe?">"===l[0]?(r=o??De,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?Fe:'"'===l[3]?Ze:Ke):r===Ze||r===Ke?r=Fe:r===qe||r===Ve?r=De:(r=Fe,o=void 0);const d=r===Fe&&e[t+1].startsWith("/>")?" ":"";n+=r===De?i+Ne:c>=0?(s.push(a),i.slice(0,c)+Oe+i.slice(c)+Le+d):i+Le+(-2===c?t:d)}return[et(e,n+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]};class it{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]=tt(e,t);if(this.el=it.createElement(l,i),Ye.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=Ye.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(Oe)){const t=c[n++],i=s.getAttribute(e).split(Le),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:o,name:r[2],strings:i,ctor:"."===r[1]?at:"?"===r[1]?lt:"@"===r[1]?ct:rt}),s.removeAttribute(e)}else e.startsWith(Le)&&(a.push({type:6,index:o}),s.removeAttribute(e));if(Ge.test(s.tagName)){const e=s.textContent.split(Le),t=e.length-1;if(t>0){s.textContent=Ie?Ie.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],ze()),Ye.nextNode(),a.push({type:2,index:++o});s.append(e[t],ze())}}}else if(8===s.nodeType)if(s.data===He)a.push({type:2,index:o});else{let e=-1;for(;-1!==(e=s.data.indexOf(Le,e+1));)a.push({type:7,index:o}),e+=Le.length-1}o++}}static createElement(e,t){const i=Re.createElement("template");return i.innerHTML=e,i}}function st(e,t,i=e,s){if(t===Je)return t;let o=void 0!==s?i._$Co?.[s]:i._$Cl;const n=We(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=st(e,o._$AS(e,t.values),o,s)),t}class ot{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??Re).importNode(t,!0);Ye.currentNode=s;let o=Ye.nextNode(),n=0,r=0,a=i[0];for(;void 0!==a;){if(n===a.index){let t;2===a.type?t=new nt(o,o.nextSibling,this,e):1===a.type?t=new a.ctor(o,a.name,a.strings,this,e):6===a.type&&(t=new ht(o,this,e)),this._$AV.push(t),a=i[++r]}n!==a?.index&&(o=Ye.nextNode(),n++)}return Ye.currentNode=Re,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 nt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,s){this.type=2,this._$AH=Qe,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=st(this,e,t),We(e)?e===Qe||null==e||""===e?(this._$AH!==Qe&&this._$AR(),this._$AH=Qe):e!==this._$AH&&e!==Je&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>je(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!==Qe&&We(this._$AH)?this._$AA.nextSibling.data=e:this.T(Re.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=it.createElement(et(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(t);else{const e=new ot(s,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Xe.get(e.strings);return void 0===t&&Xe.set(e.strings,t=new it(e)),t}k(e){je(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 nt(this.O(ze()),this.O(ze()),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 rt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,s,o){this.type=1,this._$AH=Qe,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=Qe}_$AI(e,t=this,i,s){const o=this.strings;let n=!1;if(void 0===o)e=st(this,e,t,0),n=!We(e)||e!==this._$AH&&e!==Je,n&&(this._$AH=e);else{const s=e;let r,a;for(e=o[0],r=0;r<o.length-1;r++)a=st(this,s[i+r],t,r),a===Je&&(a=this._$AH[r]),n||=!We(a)||a!==this._$AH[r],a===Qe?e=Qe:e!==Qe&&(e+=(a??"")+o[r+1]),this._$AH[r]=a}n&&!s&&this.j(e)}j(e){e===Qe?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class at extends rt{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Qe?void 0:e}}class lt extends rt{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Qe)}}class ct extends rt{constructor(e,t,i,s,o){super(e,t,i,s,o),this.type=5}_$AI(e,t=this){if((e=st(this,e,t,0)??Qe)===Je)return;const i=this._$AH,s=e===Qe&&i!==Qe||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Qe&&(i===Qe||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 ht{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){st(this,e)}}const dt=Me.litHtmlPolyfillSupport;dt?.(it,nt),(Me.litHtmlVersions??=[]).push("3.3.1");var pt,ut,vt,mt;let ft=class extends(C(b(g(u($(be,"row"),!0))),"remove")){constructor(){super(...arguments),pt.add(this),this.removable=!1,this.removeLabel="Remove"}connectedCallback(){super.connectedCallback(),this.removeAttribute("tabindex")}update(e){super.update(e),this.removeAttribute("tabindex"),e.has("removable")&&this.classList.toggle("-with-trailing-icon",this.removable)}render(){return o`<div class="base">
|
|
343
353
|
<m3e-elevation
|
|
344
354
|
class="elevation"
|
|
345
355
|
for="cell"
|
|
@@ -357,10 +367,10 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
357
367
|
id="cell"
|
|
358
368
|
class="cell"
|
|
359
369
|
role="gridcell"
|
|
360
|
-
tabindex="${(e=>e??
|
|
361
|
-
@keydown="${H(this,
|
|
370
|
+
tabindex="${(e=>e??Qe)(this.disabled?void 0:"-1")}"
|
|
371
|
+
@keydown="${H(this,pt,"m",mt)}"
|
|
362
372
|
>
|
|
363
|
-
<slot name="avatar" @slotchange="${H(this,
|
|
373
|
+
<slot name="avatar" @slotchange="${H(this,pt,"m",ut)}"></slot>
|
|
364
374
|
${this._renderIcon()}
|
|
365
375
|
<div class="label">${this._renderSlot()}</div>
|
|
366
376
|
<div class="touch" aria-hidden="true"></div>
|
|
@@ -375,7 +385,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
375
385
|
tabindex="-1"
|
|
376
386
|
?disabled="${this.disabled}"
|
|
377
387
|
?disabled-interactive="${this.disabledInteractive}"
|
|
378
|
-
@click="${H(this,
|
|
388
|
+
@click="${H(this,pt,"m",vt)}"
|
|
379
389
|
>
|
|
380
390
|
<slot name="remove-icon">
|
|
381
391
|
<svg class="remove-icon" viewBox="0 -960 960 960" fill="currentColor">
|
|
@@ -385,7 +395,7 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
385
395
|
</svg>
|
|
386
396
|
</slot>
|
|
387
397
|
</m3e-icon-button>
|
|
388
|
-
</span>`:s}};var
|
|
398
|
+
</span>`:s}};var bt,gt,$t,yt,_t,wt,At,Et,St,xt,Ct,kt,Pt,Tt,Mt,It,Ut,Ot,Lt,Ht,Nt,Rt,zt;pt=new WeakSet,ut=function(e){this.classList.toggle("-with-avatar",h(e.target))},vt=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},mt=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},ft.styles=[be.styles,t`
|
|
389
399
|
.cell {
|
|
390
400
|
display: inline-flex;
|
|
391
401
|
align-items: center;
|
|
@@ -434,10 +444,28 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
434
444
|
color: CanvasText;
|
|
435
445
|
}
|
|
436
446
|
}
|
|
437
|
-
`],L([ce(".cell")],
|
|
447
|
+
`],L([ce(".cell")],ft.prototype,"cell",void 0),L([ce(".remove-button")],ft.prototype,"removeButton",void 0),L([le({type:Boolean})],ft.prototype,"removable",void 0),L([le({attribute:"remove-label"})],ft.prototype,"removeLabel",void 0),ft=L([R("m3e-input-chip")],ft);let Wt=class extends(k(P(T(A(E(S(g(u($($e,"grid")))))))))){constructor(){super(...arguments),bt.add(this),gt.set(this,()=>H(this,bt,"m",Rt).call(this)),$t.set(this,e=>H(this,bt,"m",zt).call(this,e)),yt.set(this,()=>H(this,bt,"m",Ut).call(this)),_t.set(this,()=>H(this,bt,"m",Ot).call(this)),wt.set(this,()=>H(this,bt,"m",Lt).call(this)),At.set(this,e=>H(this,bt,"m",Ht).call(this,e)),Et.set(this,e=>H(this,bt,"m",Nt).call(this,e)),St.set(this,new U),xt.set(this,(new O).onActiveItemChange(()=>H(this,xt,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex"))),Ct.set(this,!1),kt.set(this,null),Pt.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[(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,Pt=new WeakMap,bt=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,kt,"f")?.focus()}connectedCallback(){super.connectedCallback(),this.closest("m3e-form-field")?.notifyControlStateChange(),N(this,Pt,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",H(this,yt,"f")),this.addEventListener("focusin",H(this,_t,"f")),this.addEventListener("focusout",H(this,wt,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",H(this,yt,"f")),this.removeEventListener("focusin",H(this,_t,"f")),this.removeEventListener("focusout",H(this,wt,"f"))}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${H(this,Pt,"f")}`)}update(e){super.update(e),e.has("vertical")&&(this.ariaOrientation=null),e.has("disabled")&&(H(this,St,"f").items.forEach(e=>e.disabled=this.disabled),H(this,kt,"f")&&(H(this,kt,"f").disabled=this.disabled))}render(){return o`<slot @keydown="${H(this,bt,"m",Tt)}" @slotchange="${H(this,bt,"m",Mt)}"></slot>
|
|
438
448
|
<span role="row">
|
|
439
|
-
<span role="gridcell"><slot name="input" @slotchange="${H(this,
|
|
440
|
-
</span> `}};
|
|
449
|
+
<span role="gridcell"><slot name="input" @slotchange="${H(this,bt,"m",It)}"></slot></span>
|
|
450
|
+
</span> `}};Tt=function(e){H(this,xt,"f").onKeyDown(e)},Mt=async function(){const{added:e,removed:t}=H(this,St,"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,At,"f")),t.cell.addEventListener("click",H(this,Et,"f"));t.forEach(e=>{e.removeEventListener("remove",H(this,At,"f")),e.cell.removeEventListener("click",H(this,Et,"f"))}),H(this,xt,"f").setItems(H(this,St,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),H(this,xt,"f").activeItem||H(this,xt,"f").updateActiveItem(H(this,xt,"f").items.find(e=>e.hasAttribute("tabindex")))},It=function(){const e=this.querySelector("input");if(H(this,kt,"f")&&(H(this,kt,"f").removeEventListener("change",H(this,gt,"f")),H(this,kt,"f").removeEventListener("keydown",H(this,$t,"f"))),N(this,kt,e,"f"),H(this,kt,"f")){H(this,kt,"f").disabled=this.disabled,H(this,kt,"f").addEventListener("change",H(this,gt,"f")),H(this,kt,"f").addEventListener("keydown",H(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),H(this,kt,"f")!==e||H(this,Ct,"f")||H(this,bt,"m",Rt).call(this)}})}},Ut=function(){setTimeout(()=>(H(this,xt,"f").activeItem??H(this,kt,"f"))?.focus())},Ot=function(){this.setAttribute("tabindex","-1")},Lt=function(){this.setAttribute("tabindex",`${H(this,Pt,"f")}`)},Ht=function(e){const t=e.target,i=H(this,St,"f").items.indexOf(t),s=H(this,St,"f").items.find((e,t)=>t>i&&!e.disabled&&e.removable);t.remove(),H(this,xt,"f").setActiveItem(H(this,xt,"f").items.find(e=>e===s?.removeButton)),H(this,xt,"f").activeItem||H(this,kt,"f")?.focus(),this.dispatchEvent(new Event("change",{bubbles:!0}))},Nt=function(e){H(this,xt,"f").updateActiveItem(e.composedPath().find(e=>e instanceof ft)?.cell)},Rt=function(){const e=H(this,kt,"f")?.value;e&&setTimeout(()=>{const e=H(this,kt,"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,kt,"f"))try{N(this,Ct,!0,"f"),H(this,kt,"f").value=""}finally{N(this,Ct,!1,"f")}this.dispatchEvent(new Event("change",{bubbles:!0}))})},zt=function(e){if("Backspace"===e.key&&!H(this,kt,"f")?.value){const e=[...H(this,St,"f").items].reverse().find(e=>!e.disabled&&!e.disabledInteractive&&e.removable);e&&e.dispatchEvent(new Event("remove"))}},(()=>{const e=new CSSStyleSheet;e.replaceSync(t`
|
|
451
|
+
m3e-input-chip-set [slot="input"]::placeholder {
|
|
452
|
+
user-select: none;
|
|
453
|
+
color: currentColor;
|
|
454
|
+
transition: opacity ${n.motion.duration.extraLong1};
|
|
455
|
+
}
|
|
456
|
+
m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder {
|
|
457
|
+
opacity: 0;
|
|
458
|
+
transition: 0s;
|
|
459
|
+
}
|
|
460
|
+
m3e-input-chip-set:hover [slot="input"]::placeholder {
|
|
461
|
+
transition: 0s;
|
|
462
|
+
}
|
|
463
|
+
@media (prefers-reduced-motion) {
|
|
464
|
+
m3e-input-chip-set [slot="input"]::placeholder {
|
|
465
|
+
transition: none !important;
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]})(),Wt.styles=[$e.styles,t`
|
|
441
469
|
::slotted([slot="input"]) {
|
|
442
470
|
outline: unset;
|
|
443
471
|
border: unset;
|
|
@@ -455,26 +483,9 @@ const Te=globalThis,Me=Te.trustedTypes,Ie=Me?Me.createPolicy("lit-html",{createH
|
|
|
455
483
|
::slotted(m3e-input-chip) {
|
|
456
484
|
min-width: 0;
|
|
457
485
|
}
|
|
458
|
-
::slotted([slot="input"])::placeholder {
|
|
459
|
-
user-select: none;
|
|
460
|
-
color: currentColor;
|
|
461
|
-
transition: opacity ${n.motion.duration.extraLong1};
|
|
462
|
-
}
|
|
463
|
-
:host(:not(:focus-within)) ::slotted([slot="input"])::placeholder {
|
|
464
|
-
opacity: 0;
|
|
465
|
-
transition: 0s;
|
|
466
|
-
}
|
|
467
|
-
:host(:hover) ::slotted([slot="input"])::placeholder {
|
|
468
|
-
transition: 0s;
|
|
469
|
-
}
|
|
470
486
|
span[role="row"],
|
|
471
487
|
span[role="gridcell"] {
|
|
472
488
|
display: contents;
|
|
473
489
|
}
|
|
474
|
-
|
|
475
|
-
::slotted([slot="input"])::placeholder {
|
|
476
|
-
transition: none !important;
|
|
477
|
-
}
|
|
478
|
-
}
|
|
479
|
-
`],zt=L([R("m3e-input-chip-set")],zt);let Wt=class extends(p(u(v(m(f(b(g($(be,"button")))))),!0))){_renderTrailingIcon(){return s}};Wt=L([R("m3e-suggestion-chip")],Wt);export{ge as M3eAssistChipElement,be as M3eChipElement,$e as M3eChipSetElement,Ae as M3eFilterChipElement,Pe as M3eFilterChipSetElement,mt as M3eInputChipElement,zt as M3eInputChipSetElement,Wt as M3eSuggestionChipElement};
|
|
490
|
+
`],Wt=L([R("m3e-input-chip-set")],Wt);let jt=class extends(p(u(v(m(f(b(g($(be,"button")))))),!0))){_renderTrailingIcon(){return s}};jt=L([R("m3e-suggestion-chip")],jt);export{ge as M3eAssistChipElement,be as M3eChipElement,$e as M3eChipSetElement,Ae as M3eFilterChipElement,Te as M3eFilterChipSetElement,ft as M3eInputChipElement,Wt as M3eInputChipSetElement,jt as M3eSuggestionChipElement};
|
|
480
491
|
//# sourceMappingURL=index.min.js.map
|