@luzmo/analytics-components-kit 1.0.9-beta.9 → 1.2.1

package/standalone/chunks/item-option-position-picker-Bkc4JvJX.js

@@ -0,0 +1,14 @@
+
+import{r as e}from"./version-BW4Ixl63.js";import{t}from"./item-option-base-CRUxNhJQ.js";import{html as n,nothing as r,property as i,unsafeCSS as a}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/text-field.js";var o=`:host{height:var(--luzmo-item-option-position-picker-grid-height,var(--item-option-position-picker-grid-height));align-items:center;display:flex}.luzmo-item-option{height:var(--luzmo-item-option-position-picker-grid-height,var(--item-option-position-picker-grid-height))}.position-grid{gap:var(--luzmo-item-option-position-picker-grid-gap,var(--item-option-position-picker-grid-gap));width:var(--luzmo-item-option-position-picker-grid-width,var(--item-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-item-option-position-picker-grid-border-color,var(--luzmo-border-color));padding:var(--luzmo-item-option-position-picker-grid-padding,var(--item-option-position-picker-grid-padding));border-radius:var(--luzmo-item-option-position-picker-grid-border-radius,var(--item-option-position-picker-grid-border-radius));grid-template-columns:repeat(3,1fr);display:grid}.position-item{width:100%;height:var(--luzmo-item-option-position-picker-item-height,var(--item-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-item-option-position-picker-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-item-option-position-picker-border-radius,var(--item-option-position-picker-border-radius));background:var(--luzmo-item-option-position-picker-background,var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-item-option-position-picker-animation-duration,var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-item-option-position-picker-background-hover,var(--luzmo-background-color-highlight-down))}.position-item.selected,.position-item.selected:hover,.position-item.selected:active,.position-item.selected:focus{background-color:var(--luzmo-item-option-position-picker-background-selected,var(--luzmo-primary));transition:background-color var(--luzmo-item-option-position-picker-selected-animation-duration,0) ease-in-out}.position-item:focus-visible{outline:2px solid var(--luzmo-item-option-position-picker-focus-color,var(--luzmo-primary));outline-offset:1px}.position-item.position-item-not-allowed{opacity:0;pointer-events:none}:host{--item-option-position-picker-grid-height:7rem;--item-option-position-picker-grid-width:7rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-padding:.25rem;--item-option-position-picker-item-height:1.75rem;--item-option-position-picker-grid-gap:.25rem}:host([size=s]){--item-option-position-picker-grid-height:5.125rem;--item-option-position-picker-grid-width:5.625rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-s);--item-option-position-picker-grid-padding:.125rem;--item-option-position-picker-item-height:1.5rem;--item-option-position-picker-grid-gap:.125rem}:host([size=l]){--item-option-position-picker-grid-height:8rem;--item-option-position-picker-grid-width:8rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius-l);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-l);--item-option-position-picker-grid-padding:.3rem;--item-option-position-picker-item-height:2rem;--item-option-position-picker-grid-gap:.25rem}:host([size=xl]){--item-option-position-picker-grid-height:9rem;--item-option-position-picker-grid-width:9rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius-xl);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-xl);--item-option-position-picker-grid-padding:.375rem;--item-option-position-picker-item-height:2.25rem;--item-option-position-picker-grid-gap:.275rem}`,s=[`topLeft`,`top`,`topRight`,`left`,`center`,`right`,`bottomLeft`,`bottom`,`bottomRight`],c=s.filter(e=>e!==`center`),l={topLeft:`Top left`,top:`Top center`,topRight:`Top right`,left:`Center left`,center:`Center`,right:`Center right`,bottomLeft:`Bottom left`,bottom:`Bottom center`,bottomRight:`Bottom right`},u=class extends t{constructor(...e){super(...e),this.default=`topRight`,this.positions=c,this.readonly=!1}static{this.styles=[super.styles,a(o)]}_handleEvent(){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}}))}_handleClick(e){this.positions?.includes(e)&&(this.value=e,this._handleEvent())}_handleKeyDown(e,t){if(t.key===`Enter`||t.key===` `){t.preventDefault(),this._handleClick(e);return}let n=s.filter(e=>this.positions?.includes(e)),r=n.indexOf(e);if(r===-1)return;let i=-1;if(t.key===`ArrowRight`||t.key===`ArrowDown`?(t.preventDefault(),i=(r+1)%n.length):(t.key===`ArrowLeft`||t.key===`ArrowUp`)&&(t.preventDefault(),i=(r-1+n.length)%n.length),i>=0){let e=n[i];(this.shadowRoot?.querySelector(`[data-position="${e}"]`))?.focus()}}willUpdate(){this.value=this.value??this.default??`topRight`,this.positions=this.positions??c}renderController(){let e=s.map(e=>{let t=this.positions?.includes(e)??!1,i=this.value===e,a=t&&i,o=a||t&&!s.some(e=>this.positions?.includes(e)&&this.value===e);return n`
+        <div
+          class="position-item ${t?`position-item-allowed`:`position-item-not-allowed`} ${i?`selected`:``}"
+          role="radio"
+          aria-checked=${i?`true`:`false`}
+          aria-disabled=${t?`false`:`true`}
+          aria-label=${l[e]??e}
+          data-position=${e}
+          tabindex=${t?a||o?`0`:`-1`:r}
+          @click=${this._handleClick.bind(this,e)}
+          @keydown=${t?this._handleKeyDown.bind(this,e):r}
+        ></div>
+      `});return n` <div class="position-grid" role="radiogroup" aria-label=${this.label??`Position`} id="luzmo-item-option-control">${e}</div> `}};e([i({type:String,reflect:!0})],u.prototype,`value`,void 0),e([i({type:String,reflect:!0,attribute:`default-position`})],u.prototype,`default`,void 0),e([i({type:Array,reflect:!0})],u.prototype,`positions`,void 0),e([i({type:Boolean,reflect:!0})],u.prototype,`readonly`,void 0),customElements.get(`luzmo-item-option-position-picker`)||customElements.define(`luzmo-item-option-position-picker`,u);export{u as LuzmoItemOptionPositionPicker};

package/standalone/chunks/item-option-positions-number-field-Dr_315TE.js

@@ -0,0 +1,31 @@
+
+import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoLockOutline-Dctb86HR.js";import{t as r}from"./luzmo-icon-markup-ByaNI6dg.js";import{t as i}from"./item-option-base-CRUxNhJQ.js";import{html as a,property as o,state as s,unsafeCSS as c}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/number-field.js";var l=`:host{--item-option-positions-number-field-container-row-gap:var(--luzmo-spacing-2);--item-option-positions-number-field-container-column-gap:var(--luzmo-spacing-2);--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height) * 1.5)}:host([size=s]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-s) * 1.5)}:host([size=l]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-l) * 1.5)}:host([size=xl]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-xl) * 1.5)}.positions-container{max-width:var(--luzmo-item-option-positions-number-field-container-max-width,var(--item-option-positions-number-field-container-max-width));row-gap:var(--luzmo-item-option-positions-number-field-container-row-gap,var(--item-option-positions-number-field-container-row-gap));column-gap:var(--luzmo-item-option-positions-number-field-container-column-gap,var(--item-option-positions-number-field-container-column-gap));grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid}.position,.sync-button{justify-content:center;align-items:center;display:flex}.sync-button{cursor:pointer;border-radius:var(--luzmo-item-option-positions-number-field-sync-border-radius,var(--luzmo-border-radius));height:var(--luzmo-item-option-positions-number-field-sync-height,var(--item-option-positions-number-field-sync-height));font:inherit;color:inherit;background:0 0;border:none;padding:0}.sync-button:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-item-option-positions-number-field-sync-border-color,var(--luzmo-indicator-color));outline-offset:1px}.no-sync-center{border:var(--luzmo-item-option-positions-number-field-no-sync-center-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-positions-number-field-no-sync-center-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-item-option-positions-number-field-no-sync-center-border-radius,var(--luzmo-border-radius));height:var(--luzmo-item-option-positions-number-field-sync-height,var(--item-option-positions-number-field-sync-height));background-color:var(--luzmo-item-option-positions-number-field-no-sync-center-background-color,var(--luzmo-background-color-highlight))}`,u=class extends i{constructor(...e){super(...e),this.canSync=!0,this.invalid=!1,this.readonly=!1,this.debounce=200,this._positions=[[`top-left`,`top`,`top-right`],[`left`,`center`,`right`],[`bottom-left`,`bottom`,`bottom-right`]]}static get styles(){return[c(l)]}_calculateSyncedValue(){let e,t={};return this.positions?.forEach(n=>{t[n]=this.values?.[n]??this.positionConfiguration?.[n]?.default??0,e=typeof e==`number`&&t[n]?Math.min(e,t[n]):t[n]}),e}toggleSync(){if(this.sync=!this.sync,this.sync&&(this.syncedValue=this._calculateSyncedValue(),typeof this.syncedValue==`number`)){this.values={...this.values};for(let e of this.positions??[])this.values[e]=this.syncedValue}}_handleEvent(e){let t=e.target.getAttribute(`position`),n=e.target.value,r={};if(t&&typeof n==`number`){if(this.canSync&&this.sync&&t===`center`){this.syncedValue=n;for(let e of this.positions??[])r[e]=n}else r={...this.values,[t]:n};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{let e=Object.keys(this.values??{}),t=Object.keys(r),n=!0;e.length!==t.length&&(n=!1);for(let t of e)this.values?.[t]!==r[t]&&(n=!1);n||(this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...r}}})),this.values=r)},this.debounce??200)}}_renderNumberField(t){return this.positions?.includes(t)||t===`center`?this.canSync&&(this.sync&&t!==`center`||!this.sync&&t===`center`)?a`<button
+          class="sync-button ${this.sync?``:`sync`}"
+          position=${t}
+          aria-label=${e(`Toggle sync`,{desc:`Aria label for sync toggle button`})}
+          aria-pressed=${this.sync?`true`:`false`}
+          @click=${this.toggleSync}
+        >
+          ${r(n)}
+        </button>`:!this.canSync&&!this.positions?.includes(`center`)&&t===`center`?a`
+          <div class="no-sync-center"></div>
+        `:a`<div class="position">
+        <luzmo-number-field
+          label=${t}
+          position=${t}
+          .value=${this.sync&&this.canSync?this.syncedValue??0:this.values?.[t]??this.positionConfiguration?.[t]?.default??0}
+          .disabled=${this.disabled}
+          .size=${this.size}
+          .min=${this.positionConfiguration?.[t]?.min??0}
+          .max=${this.positionConfiguration?.[t]?.max??100}
+          .step=${this.positionConfiguration?.[t]?.step??1}
+          .invalid=${this.invalid}
+          @change=${this._handleEvent}
+          @input=${this._handleEvent}
+        >
+        </luzmo-number-field>
+      </div>`:a`
+      <div class="position"></div>
+    `}firstUpdated(){if(this.canSync&&!this.positions?.includes(`center`)){let e=this.values?.left??this.positionConfiguration?.left?.default,t=this.values?.top??this.positionConfiguration?.top?.default,n=this.values?.right??this.positionConfiguration?.right?.default,r=this.values?.bottom??this.positionConfiguration?.bottom?.default;this.sync=e===t&&t===n&&n===r}else this.sync=!1}willUpdate(){this.positions||=[`top`,`right`,`bottom`,`left`]}renderController(){this._calculateSyncedValue();let t=this._positions.map(e=>{let t=e.map(e=>this._renderNumberField(e));return a`${t}`});return a`<div class="positions-container-wrapper" id="luzmo-item-option-control" role="group" aria-label=${this.label??e(`Position values`,{desc:`Accessible label for positions number field group`})}>
+      <div class="positions-container">${t}</div>
+    </div>`}};t([o({type:Array,reflect:!0})],u.prototype,`positions`,void 0),t([o({type:Object,reflect:!0})],u.prototype,`values`,void 0),t([o({type:Boolean,reflect:!0,attribute:`can-sync`})],u.prototype,`canSync`,void 0),t([o({type:Object})],u.prototype,`positionConfiguration`,void 0),t([o({type:Boolean,reflect:!0})],u.prototype,`invalid`,void 0),t([o({type:Boolean,reflect:!0})],u.prototype,`readonly`,void 0),t([o({type:Number,reflect:!0})],u.prototype,`debounce`,void 0),t([o({type:Boolean,reflect:!0})],u.prototype,`sync`,void 0),t([s()],u.prototype,`syncedValue`,void 0),customElements.get(`luzmo-item-option-positions-number-field`)||customElements.define(`luzmo-item-option-positions-number-field`,u);export{u as LuzmoItemOptionPositionsNumberField};

package/standalone/chunks/item-option-radio-button-group-BkymJq3E.js

@@ -0,0 +1,19 @@
+
+import{r as e}from"./version-BW4Ixl63.js";import{t}from"./item-option-base-CRUxNhJQ.js";import{html as n,property as r,query as i}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/action-button.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/action-group.js";var a=class extends t{constructor(...e){super(...e),this.values={},this.disabled=!1}static{this.styles=[super.styles]}generateRadioButtons(){let e=Object.entries(this.values).map(([e,t])=>n`
+        <luzmo-action-button value=${e} ?disabled=${this.disabled}>
+          ${t}
+        </luzmo-action-button>
+      `);return n` ${e} `}_handleEvent(){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(this.actionGroup?.selected?.[0]):this.actionGroup?.selected?.[0]}}))}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return n`
+      <luzmo-action-group
+        id="luzmo-item-option-control"
+        compact
+        selects="single"
+        emphasized
+        @change=${this._handleEvent}
+        .size=${this.size}
+        .selected=${e&&this.values[e]?[e]:t&&this.values[t]?[t]:[Object.keys(this.values)[0]]}
+        ?disabled=${this.disabled}
+      >
+        ${this.generateRadioButtons()}
+      </luzmo-action-group>
+    `}};e([r({type:Array})],a.prototype,`values`,void 0),e([r({type:Boolean,reflect:!0})],a.prototype,`disabled`,void 0),e([r({type:String})],a.prototype,`value`,void 0),e([r({type:String})],a.prototype,`default`,void 0),e([r()],a.prototype,`parseValue`,void 0),e([r()],a.prototype,`toValue`,void 0),e([i(`luzmo-action-group`)],a.prototype,`actionGroup`,void 0),customElements.get(`luzmo-item-option-radio-button-group`)||customElements.define(`luzmo-item-option-radio-button-group`,a);export{a as LuzmoItemOptionRadioButtonGroup};

package/standalone/chunks/item-option-slider-K_bsNci8.js

@@ -0,0 +1,18 @@
+
+import{r as e}from"./version-BW4Ixl63.js";import{t}from"./option-interaction-controller-BslAXAHF.js";import{t as n}from"./item-option-base-CRUxNhJQ.js";import{html as r,property as i,query as a,unsafeCSS as o}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/slider.js";var s=`:host{overflow:visible}luzmo-slider{contain:layout}`,c=class extends n{constructor(...e){super(...e),this.value=0,this.default=0,this.min=0,this.max=100,this.step=100,this.debounce=200,this.liveInteractions=!1,this._interaction=new t(this),this._debounceTimeout=null}static get styles(){return[...super.styles,o(s)]}willUpdate(e){super.willUpdate(e),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction())}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_clearDebounce(){this._debounceTimeout&&=(clearTimeout(this._debounceTimeout),null)}endInteraction(){this._slider?.endInteraction?.(),this._interaction.endAll()}_emitOptionChanged(e,t){let n=typeof this.toValue==`function`?this.toValue(e):e;this._lastEmittedSliderValue=e,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:t?{value:n,interaction:t}:{value:n}}))}_handleInteractionStart(e){this.liveInteractions&&this._interaction.start(e.currentTarget,e.detail,this._slider.value)}_handleInteractionEnd(e){this._interaction.end(e.currentTarget,e.detail)}_handleInteractionCancel(e){this._interaction.cancel(e.currentTarget,e.detail)}_handleEvent(e){let t=this._slider.value;this.liveInteractions?this._interaction.update(e.currentTarget,t,e=>this._emitOptionChanged(t,e)):(e.type!==`change`||this._debounceTimeout||!Object.is(t,this._lastEmittedSliderValue))&&(this._debounceTimeout&&=(clearTimeout(this._debounceTimeout),null),this.debounce>0?this._debounceTimeout=setTimeout(()=>{this._debounceTimeout=null,this._emitOptionChanged(t)},this.debounce):this._emitOptionChanged(t))}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return r`
+      <luzmo-slider
+        id="luzmo-item-option-control"
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .value=${e??t}
+        .step=${this.step}
+        .size=${this.size}
+        .disabled=${this.disabled}
+        @input=${this._handleEvent}
+        @change=${this._handleEvent}
+        @luzmo-interaction-start=${this._handleInteractionStart}
+        @luzmo-interaction-end=${this._handleInteractionEnd}
+        @luzmo-interaction-cancel=${this._handleInteractionCancel}
+      ></luzmo-slider>
+    `}};e([i({type:Number,reflect:!0})],c.prototype,`value`,void 0),e([i({type:Number,reflect:!0})],c.prototype,`default`,void 0),e([i({type:Number,reflect:!0})],c.prototype,`min`,void 0),e([i({type:Number,reflect:!0})],c.prototype,`max`,void 0),e([i({type:Number,reflect:!0})],c.prototype,`step`,void 0),e([i({type:Number,reflect:!0})],c.prototype,`debounce`,void 0),e([i({type:Boolean,reflect:!0,attribute:`live-interactions`})],c.prototype,`liveInteractions`,void 0),e([i()],c.prototype,`parseValue`,void 0),e([i()],c.prototype,`toValue`,void 0),e([a(`luzmo-slider`)],c.prototype,`_slider`,void 0),customElements.get(`luzmo-item-option-slider`)||customElements.define(`luzmo-item-option-slider`,c);export{c as LuzmoItemOptionSlider};

package/standalone/chunks/item-option-switch-DeihDHhM.js

@@ -0,0 +1,12 @@
+
+import{r as e}from"./version-BW4Ixl63.js";import{t}from"./item-option-base-CRUxNhJQ.js";import{html as n,property as r,unsafeCSS as i}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/switch.js";var a=`:host{--luzmo-switch-control-label-spacing:0px}`,o=class extends t{static{this.styles=[...super.styles,i(a)]}_handleEvent(e){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(e.detail):e.detail}}))}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return n`
+      <luzmo-switch
+        id="luzmo-item-option-control"
+        thumb="overflow"
+        emphasized
+        .size=${this.size}
+        .checked=${e??t??!1}
+        .disabled=${this.disabled}
+        @change=${this._handleEvent}
+      ></luzmo-switch>
+    `}};e([r({type:Boolean,converter:{fromAttribute:e=>{if(e===`false`||e===!1)return!1;if(e===`true`||e===!0)return!0}}})],o.prototype,`value`,void 0),e([r({type:Boolean,converter:{fromAttribute:e=>{if(e===`false`||e===!1)return!1;if(e===`true`||e===!0)return!0}}})],o.prototype,`default`,void 0),e([r()],o.prototype,`parseValue`,void 0),e([r()],o.prototype,`toValue`,void 0),customElements.get(`luzmo-item-option-switch`)||customElements.define(`luzmo-item-option-switch`,o);export{o as LuzmoItemOptionSwitch};

package/standalone/chunks/item-option-text-field-D7bkuhsv.js

@@ -0,0 +1,15 @@
+
+import{r as e}from"./version-BW4Ixl63.js";import{t}from"./item-option-base-CRUxNhJQ.js";import{html as n,property as r,query as i}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/text-field.js";var a=class extends t{constructor(...e){super(...e),this.invalid=!1,this.readonly=!1,this.debounce=200,this._previousValue=``}static{this.styles=[super.styles]}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{let e=this.textFieldElement?.value??``;this._previousValue!==e&&(this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e}})),this._previousValue=e)},this.debounce??200)}renderController(){return n`
+      <luzmo-text-field
+        id="luzmo-item-option-control"
+        .value=${this.value??``}
+        .label=${this.label}
+        .disabled=${this.disabled}
+        .size=${this.size}
+        .placeholder=${this.placeholder??``}
+        .invalid=${this.invalid}
+        @change=${this._handleEvent}
+        @input=${this._handleEvent}
+      >
+      </luzmo-text-field>
+    `}};e([r({type:String,reflect:!0})],a.prototype,`value`,void 0),e([r({type:Boolean,reflect:!0})],a.prototype,`invalid`,void 0),e([r({type:Boolean,reflect:!0})],a.prototype,`readonly`,void 0),e([r({type:String,reflect:!0})],a.prototype,`placeholder`,void 0),e([r({type:Number,reflect:!0})],a.prototype,`debounce`,void 0),e([i(`luzmo-text-field`)],a.prototype,`textFieldElement`,void 0),customElements.get(`luzmo-item-option-text-field`)||customElements.define(`luzmo-item-option-text-field`,a);export{a as LuzmoItemOptionTextField};