@luzmo/analytics-components-kit 1.0.1-alpha.3 → 1.0.1-alpha.4

package/lib/index-CvX-HLY1.cjs

@@ -0,0 +1,322 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const C=require("./get-css-variable-D439CdH9.cjs"),e=require("./if-defined-V7yEJWI3.cjs"),h=require("./index-Bo1DpZ-1.cjs"),m=require("./directive-helpers-BSB0tfc9.cjs"),G=require("./divider.module-DEy88Ieh.cjs");require("./progress-circle/index.cjs");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let Q;function X(n){return(t,o)=>e.e$1(t,o,{get(){return(this.renderRoot??Q??(Q=document.createDocumentFragment())).querySelectorAll(n)}})}const J=":host{box-sizing:border-box;min-block-size:var(--luzmo-field-label-min-height, var(--field-label-min-height));padding-block:var(--luzmo-field-label-padding-block, var(--luzmo-field-label-top-to-text, var(--field-label-top-to-text)) var(--luzmo-field-label-bottom-to-text, var(--field-label-bottom-to-text)));padding-inline:0;padding-inline:var(--luzmo-field-label-padding-inline, 0);margin-block:0;margin-block:var(--luzmo-field-label-margin-block, var(--luzmo-field-label-margin-block-start, 0) var(--luzmo-field-label-margin-block-end, 0));margin-inline:0;margin-inline:var(--luzmo-field-label-margin-inline, var(--luzmo-field-label-margin-inline-start, 0) var(--luzmo-field-label-margin-inline-end, 0));font-size:var(--luzmo-field-label-font-size, var(--field-label-font-size));font-weight:var(--luzmo-field-label-font-weight, var(--field-label-font-weight));line-height:var(--luzmo-field-label-line-height, var(--field-label-line-height));-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;color:var(--luzmo-field-label-color, var(--field-label-color));display:block;font-family:var(--luzmo-field-label-font-family, var(--luzmo-font-family))}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){--luzmo-field-label-line-height: var( --luzmo-field-label-line-height-cjk, var(--field-label-line-height-cjk) )}:host([disabled]),:host([disabled]) .required-icon{--luzmo-field-label-color: var( --highcontrast-field-label-disabled-content-color, var( --luzmo-disabled-content-color, var(--field-label-disabled-content-color) ) )}.required-icon{display:inline-block;margin-block:0;margin-inline:var(--luzmo-field-label-text-to-asterisk, var(--field-label-text-to-asterisk)) 0;vertical-align:initial;vertical-align:var(--luzmo-field-label-asterisk-vertical-align, baseline)}:host([side-aligned=start]),:host([side-aligned=end]){vertical-align:top;margin-block-start:0;margin-block-end:0;margin-inline-end:var(--luzmo-field-label-side-padding-right, var(--field-label-side-padding-right));display:inline-flex;align-items:center;font-size:var(--luzmo-field-label-side-aligned-font-size, var(--field-label-side-aligned-font-size));block-size:var(--luzmo-field-label-side-aligned-height, var(--field-label-side-aligned-height))}:host([side-aligned=end]){text-align:end}@media (forced-colors: active){:host{--highcontrast-field-label-disabled-content-color: GrayText}}:host{--field-label-color: var(--luzmo-font-color);--field-label-font-weight: var(--luzmo-font-weight);--field-label-line-height: var(--luzmo-line-height);--field-label-line-height-cjk: 1.5;--field-label-disabled-content-color: var(--luzmo-font-color-disabled)}:host{--field-label-min-height: var(--luzmo-component-height-xs);--field-label-side-aligned-height: var(--luzmo-component-height);--field-label-top-to-text: calc(var(--luzmo-spacing-2));--field-label-bottom-to-text: var(--luzmo-spacing-2);--field-label-side-aligned-font-size: var(--luzmo-font-size);--field-label-font-size: var(--luzmo-font-size-s);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: 0px}:host([size=s]){--field-label-min-height: var(--luzmo-component-height-xxs);--field-label-side-aligned-height: var(--luzmo-component-height-s);--field-label-top-to-text: calc(var(--luzmo-spacing-1));--field-label-bottom-to-text: var(--luzmo-spacing-1);--field-label-side-aligned-font-size: var(--luzmo-font-size-s);--field-label-font-size: var(--luzmo-font-size-xs);--field-label-side-padding-right: var(--luzmo-spacing-3);--field-label-text-to-asterisk: 0px}:host([size=l]){--field-label-min-height: var(--luzmo-component-height-xs);--field-label-side-aligned-height: var(--luzmo-component-height-l);--field-label-top-to-text: var(--luzmo-spacing-3);--field-label-bottom-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--field-label-side-aligned-font-size: var(--luzmo-font-size-l);--field-label-font-size: var(--luzmo-font-size);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: var(--luzmo-spacing-1)}:host([size=xl]){--field-label-min-height: var(--luzmo-component-height-s);--field-label-side-aligned-height: var(--luzmo-component-height-xl);--field-label-top-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--field-label-bottom-to-text: var(--luzmo-spacing-3);--field-label-side-aligned-font-size: var(--luzmo-font-size-xl);--field-label-font-size: var(--luzmo-font-size-l);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: var(--luzmo-spacing-1)}label{display:inline-block}";var tt=Object.defineProperty,I=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&tt(t,o,l),l};const et=()=>e.x`
+  <div class="icon-container required-icon">*</div>
+`;class S extends e.SizedMixin(e.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.id="",this.for="",this.required=!1,this.resolvedElement=new m.ElementResolutionController(this)}static get styles(){return[e.r(J)]}handleClick(t){if(!this.target||this.disabled||t.defaultPrevented)return;this.target.focus();const o=this.getRootNode(),i=this.target,l=i.getRootNode(),a=l.host;l===o&&i.forceFocusVisible?i.forceFocusVisible():a&&a.forceFocusVisible&&a.forceFocusVisible()}applyTargetLabel(t){if(this.target=t||this.target,this.target){const o=this.target.applyFocusElementLabel,i=this.target.focusElement||this.target,l=i.getRootNode();o!==void 0?o(this.labelText,this):l===this.getRootNode()?(t?m.conditionAttributeWithId:m.conditionAttributeWithoutId)(i,"aria-labelledby",[this.id]):t?i.setAttribute("aria-label",this.labelText):i.removeAttribute("aria-label")}}async manageTarget(){this.applyTargetLabel();const t=this.resolvedElement.element;if(!t){this.target=t;return}t.localName.search("-")>0&&await customElements.whenDefined(t.localName),t.updateComplete!==void 0&&await t.updateComplete,this.applyTargetLabel(t)}get labelText(){const t=this.slotEl.assignedNodes({flatten:!0});return t.length===0?"":t.map(i=>(i.textContent||"").trim()).join(" ")}render(){return e.x`
+      <label>
+        <slot></slot>
+        ${this.required?e.x` ${et()} `:e.E}
+      </label>
+    `}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this.handleClick)}willUpdate(t){this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${m.randomID()}`),t.has("for")&&(this.resolvedElement.selector=this.for?`#${this.for}`:""),(t.has("id")||t.has(m.elementResolverUpdatedSymbol))&&this.manageTarget()}}I([e.n({type:Boolean,reflect:!0})],S.prototype,"disabled");I([e.n({type:String})],S.prototype,"id");I([e.n({type:String})],S.prototype,"for");I([e.n({type:Boolean,reflect:!0})],S.prototype,"required");I([e.e("slot")],S.prototype,"slotEl");I([e.n({type:String,reflect:!0,attribute:"side-aligned"})],S.prototype,"sideAligned");/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const ot=m.e(class extends m.i{constructor(n){if(super(n),n.type!==m.t.PROPERTY&&n.type!==m.t.ATTRIBUTE&&n.type!==m.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!m.f(n))throw Error("`live` bindings can only contain a single expression")}render(n){return n}update(n,[t]){if(t===e.T||t===e.E)return t;const o=n.element,i=n.name;if(n.type===m.t.PROPERTY){if(t===o[i])return e.T}else if(n.type===m.t.BOOLEAN_ATTRIBUTE){if(!!t===o.hasAttribute(i))return e.T}else if(n.type===m.t.ATTRIBUTE&&o.getAttribute(i)===t+"")return e.T;return m.m(n),t}});class lt{constructor(t,{mode:o}={mode:"internal"}){this.mode="internal",this.handleSlotchange=({target:i})=>{this.handleHelpText(i),this.handleNegativeHelpText(i)},this.host=t,this.id=`luzmo-help-text-${m.randomID()}`,this.mode=o}get isInternal(){return this.mode==="internal"}render(t){return e.x`
+      <div
+        id=${e.o(this.isInternal?this.id:void 0)}
+        aria-live="assertive"
+      >
+        <slot
+          name=${t?"negative-help-text":`pass-through-help-text-${m.randomID()}`}
+          @slotchange=${this.handleSlotchange}
+        >
+          <slot name="help-text"></slot>
+        </slot>
+      </div>
+    `}addId(){const t=this.helpTextElement?this.helpTextElement.id:this.id;this.conditionId=m.conditionAttributeWithId(this.host,"aria-describedby",t),this.host.hasAttribute("tabindex")&&(this.previousTabindex=Number.parseFloat(this.host.getAttribute("tabindex"))),this.host.tabIndex=0}removeId(){this.conditionId&&(this.conditionId(),delete this.conditionId),!this.helpTextElement&&(this.previousTabindex?this.host.tabIndex=this.previousTabindex:this.host.removeAttribute("tabindex"))}handleHelpText(t){if(this.isInternal)return;this.helpTextElement&&this.helpTextElement.id===this.id&&this.helpTextElement.removeAttribute("id"),this.removeId();const i=t.assignedElements()[0];this.helpTextElement=i,i&&(i.id||(i.id=this.id),this.addId())}handleNegativeHelpText(t){if(t.name!=="negative-help-text")return;t.assignedElements().forEach(i=>i.variant="negative")}}function B(n,{mode:t}={mode:"internal"}){class o extends n{constructor(){super(...arguments),this.helpTextManager=new lt(this,{mode:t})}get helpTextId(){return this.helpTextManager.id}renderHelpText(l){return this.helpTextManager.render(l)}}return o}const it='#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, 240px);grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-color-positive)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-color-negative)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-color-disabled)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-color-disabled)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(luzmo-danger-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(luzmo-danger-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(luzmo-danger-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-color-disabled)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-color-disabled)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-color-disabled)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-color-disabled)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(luzmo-danger-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(luzmo-danger-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, 240px)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';var nt=Object.defineProperty,at=Object.getOwnPropertyDescriptor,p=(n,t,o,i)=>{for(var l=i>1?void 0:i?at(t,o):t,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=(i?r(t,o,l):r(l))||l);return i&&l&&nt(t,o,l),l};const rt=["text","url","tel","email","password"];class u extends B(e.SizedMixin(G.Focusable,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.focused=!1,this.invalid=!1,this.label="",this.placeholder="",this._type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.valid=!1,this._value="",this.quiet=!1,this.required=!1}static get styles(){return[e.r(it)]}set type(t){const o=this._type;this._type=t,this.requestUpdate("type",o)}get type(){return rt.find(t=>t===this._type)??"text"}set value(t){if(t===this.value)return;const o=this._value;this._value=t,this.requestUpdate("value",o)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(t,o,i="none"){this.inputElement.setSelectionRange(t,o,i)}select(){this.inputElement.select()}handleInput(t){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const l=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(l,l);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(t){this.focused=!this.readonly&&!1}handleInputElementPointerdown(){}renderStateIcons(){return this.invalid?e.x`
+        <div id="invalid" class="icon">${h.O2(h.I)}</div>
+      `:this.valid?e.x`
+        <div id="valid" class="icon">${h.O2(h.F)}</div>
+      `:e.E}get displayValue(){return this.value.toString()}get renderMultiline(){return e.x`
+      ${this.multiline&&this.grows&&this.rows===-1?e.x`
+          <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
+          </div>
+        `:e.E}
+      <!-- @ts-ignore -->
+      <textarea
+        name=${e.o(this.name||void 0)}
+        aria-describedby=${this.helpTextId}
+        aria-label=${this.label||this.appliedLabel||this.placeholder}
+        aria-invalid=${e.o(this.invalid||void 0)}
+        class="input"
+        maxlength=${e.o(this.maxlength>-1?this.maxlength:void 0)}
+        minlength=${e.o(this.minlength>-1?this.minlength:void 0)}
+        title=${this.invalid?"":e.E}
+        pattern=${e.o(this.pattern)}
+        placeholder=${this.placeholder}
+        .value=${this.displayValue}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        rows=${e.o(this.rows>-1?this.rows:void 0)}
+        autocomplete=${e.o(this.autocomplete)}
+      ></textarea>
+    `}get renderInput(){return e.x`
+      <!-- @ts-ignore -->
+      <input
+        name=${e.o(this.name||void 0)}
+        type=${this.type}
+        aria-describedby=${this.helpTextId}
+        aria-label=${this.label||this.appliedLabel||this.placeholder}
+        aria-invalid=${e.o(this.invalid||void 0)}
+        class="input"
+        title=${this.invalid?"":e.E}
+        maxlength=${e.o(this.maxlength>-1?this.maxlength:void 0)}
+        minlength=${e.o(this.minlength>-1?this.minlength:void 0)}
+        pattern=${e.o(this.pattern)}
+        placeholder=${this.placeholder}
+        .value=${ot(this.displayValue)}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        @pointerdown=${this.handleInputElementPointerdown}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        autocomplete=${e.o(this.autocomplete)}
+      />
+    `}renderField(){return e.x`
+      ${this.renderStateIcons()}
+      ${this.multiline?this.renderMultiline:this.renderInput}
+    `}render(){return e.x`
+      <div id="text-field">${this.renderField()}</div>
+      ${this.renderHelpText(this.invalid)}
+    `}update(t){(t.has("value")||t.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(t)}checkValidity(){let t=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(t=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(t=t&&this.value.toString().length>=this.minlength),this.valid=t,this.invalid=!t),t}}p([m.r()],u.prototype,"appliedLabel",2);p([e.n({attribute:"allowed-keys"})],u.prototype,"allowedKeys",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"focused",2);p([e.e(".input:not(#sizer)")],u.prototype,"inputElement",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"invalid",2);p([e.n()],u.prototype,"label",2);p([e.n({type:String,reflect:!0})],u.prototype,"name",2);p([e.n()],u.prototype,"placeholder",2);p([m.r()],u.prototype,"type",1);p([e.n({attribute:"type",reflect:!0})],u.prototype,"_type",2);p([e.n()],u.prototype,"pattern",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"grows",2);p([e.n({type:Number})],u.prototype,"maxlength",2);p([e.n({type:Number})],u.prototype,"minlength",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"multiline",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"readonly",2);p([e.n({type:Number})],u.prototype,"rows",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"valid",2);p([e.n({type:String})],u.prototype,"value",1);p([e.n({type:Boolean,reflect:!0})],u.prototype,"quiet",2);p([e.n({type:Boolean,reflect:!0})],u.prototype,"required",2);p([e.n({type:String,reflect:!0})],u.prototype,"autocomplete",2);class F extends u{constructor(){super(...arguments),this._value=""}set value(t){if(t===this.value)return;const o=this._value;this._value=t,this.requestUpdate("value",o)}get value(){return this._value}}p([e.n({type:String})],F.prototype,"value",1);var st=Object.defineProperty,K=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&st(t,o,l),l};const U=class U extends e.SizedMixin(e.LuzmoElement,{validSizes:["s","m","l"],noDefaultSize:!0}){constructor(){super(...arguments),this.vertical=!1}render(){return e.x``}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","separator")}updated(t){super.updated(t),t.has("vertical")&&(this.vertical?this.setAttribute("aria-orientation","vertical"):this.removeAttribute("aria-orientation"))}};U.styles=[e.r(G.styles)];let P=U;K([e.n({type:Boolean,reflect:!0})],P.prototype,"vertical");K([e.n({type:String,reflect:!0,attribute:"static-color"})],P.prototype,"staticColor");customElements.get("luzmo-divider")||customElements.define("luzmo-divider",P);/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const dt=Symbol();class R{get taskComplete(){return this.t||(this.i===1?this.t=new Promise((t,o)=>{this.o=t,this.h=o}):this.i===3?this.t=Promise.reject(this.l):this.t=Promise.resolve(this.u)),this.t}constructor(t,o,i){var a;this.p=0,this.i=0,(this._=t).addController(this);const l=typeof o=="object"?o:{task:o,args:i};this.v=l.task,this.j=l.args,this.m=l.argsEqual??ct,this.k=l.onComplete,this.A=l.onError,this.autoRun=l.autoRun??!0,"initialValue"in l&&(this.u=l.initialValue,this.i=2,this.O=(a=this.T)==null?void 0:a.call(this))}hostUpdate(){this.autoRun===!0&&this.S()}hostUpdated(){this.autoRun==="afterUpdate"&&this.S()}T(){if(this.j===void 0)return;const t=this.j();if(!Array.isArray(t))throw Error("The args function must return an array");return t}async S(){const t=this.T(),o=this.O;this.O=t,t===o||t===void 0||o!==void 0&&this.m(o,t)||await this.run(t)}async run(t){var r,s,d,c,f;let o,i;t??(t=this.T()),this.O=t,this.i===1?(r=this.q)==null||r.abort():(this.t=void 0,this.o=void 0,this.h=void 0),this.i=1,this.autoRun==="afterUpdate"?queueMicrotask(()=>this._.requestUpdate()):this._.requestUpdate();const l=++this.p;this.q=new AbortController;let a=!1;try{o=await this.v(t,{signal:this.q.signal})}catch(v){a=!0,i=v}if(this.p===l){if(o===dt)this.i=0;else{if(a===!1){try{(s=this.k)==null||s.call(this,o)}catch{}this.i=2,(d=this.o)==null||d.call(this,o)}else{try{(c=this.A)==null||c.call(this,i)}catch{}this.i=3,(f=this.h)==null||f.call(this,i)}this.u=o,this.l=i}this._.requestUpdate()}}abort(t){var o;this.i===1&&((o=this.q)==null||o.abort(t))}get value(){return this.u}get error(){return this.l}get status(){return this.i}render(t){var o,i,l,a;switch(this.i){case 0:return(o=t.initial)==null?void 0:o.call(t);case 1:return(i=t.pending)==null?void 0:i.call(t);case 2:return(l=t.complete)==null?void 0:l.call(t,this.value);case 3:return(a=t.error)==null?void 0:a.call(t,this.error);default:throw Error("Unexpected status: "+this.i)}}}const ct=(n,t)=>n===t||n.length===t.length&&n.every((o,i)=>!e.f(o,t[i]));customElements.get("luzmo-field-label")||customElements.define("luzmo-field-label",S);const ut="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-size:var(var(--luzmo-helptext-font-size, var(--helptext-font-size)), 12px);min-block-size:var(var(--luzmo-helptext-min-height, var(--helptext-min-height)), 24px);display:flex}.icon{block-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);inline-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);flex-shrink:0;margin-inline-end:var(var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual)), 7px);padding-block-start:var(var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon)), 3px);padding-block-end:var(var(--luzmo-helptext-bottom-to-workflow-icon, --helptext-bottom-to-workflow-icon), 3px)}.text{line-height:var(var(--luzmo-helptext-line-height, var(--helptext-line-height), 1.3));padding-block-start:var(var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text)), 4px);padding-block-end:var(var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text)), 5px)}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk)), 1.4)}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-color-negative));--helptext-icon-color-default: var(var(--luzmo-color-negative))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var pt=Object.defineProperty,W=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&pt(t,o,l),l};class A extends e.SizedMixin(e.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[e.r(ut)]}render(){return e.x`
+      ${this.variant==="negative"&&this.icon?e.x` ${h.O2(h.x)} `:e.E}
+      <div class="text"><slot></slot></div>
+    `}}W([e.n({type:Boolean,reflect:!0})],A.prototype,"icon");W([e.n({reflect:!0})],A.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",F);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",A);const ht=":host{display:inline-block}:host luzmo-text-field{width:100%}";var mt=Object.defineProperty,b=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&mt(t,o,l),l};class g extends B(e.SizedMixin(e.LuzmoElement,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.i18nPlaceholder={},this.type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.rows=-1,this.quiet=!1,this.disabled=!1,this.required=!1,this.readonly=!1,this.language="en",this.defaultLanguage="en",this.value={}}static get styles(){return[e.r(ht)]}get _localizedValue(){const t={...this.value};return t[this.language]??t[this.defaultLanguage]??Object.values(t)[0]??""}get _localizedPlaceholder(){const t={...this.i18nPlaceholder};return t[this.language]??t[this.defaultLanguage]??Object.values(t)[0]??""}handleChange(t){t.stopPropagation(),t.preventDefault();const o=t.target;this.value[this.language]!==o.value&&(this.value={...this.value,[this.language]:o.value},this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}})))}render(){return e.x`
+      <luzmo-text-field
+        .value=${this._localizedValue}
+        .size=${this.size}
+        .placeholder=${this._localizedPlaceholder}
+        .name=${this.name}
+        .allowedKeys=${this.allowedKeys}
+        .type=${this.type}
+        .pattern=${this.pattern}
+        .maxlength=${this.maxlength}
+        .minlength=${this.minlength}
+        ?multiline=${this.multiline}
+        ?grows=${this.grows}
+        .rows=${this.rows}
+        ?quiet=${this.quiet}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @input=${this.handleChange}
+        @change=${this.handleChange}
+      ></luzmo-text-field>
+    `}}b([e.n({attribute:"allowed-keys"})],g.prototype,"allowedKeys");b([e.n({type:String,reflect:!0})],g.prototype,"name");b([e.n({type:Object,attribute:"i18n-placeholder"})],g.prototype,"i18nPlaceholder");b([e.n({attribute:"type",reflect:!0})],g.prototype,"type");b([e.n()],g.prototype,"pattern");b([e.n({type:Boolean,reflect:!0})],g.prototype,"grows");b([e.n({type:Number})],g.prototype,"maxlength");b([e.n({type:Number})],g.prototype,"minlength");b([e.n({type:Boolean,reflect:!0})],g.prototype,"multiline");b([e.n({type:Number})],g.prototype,"rows");b([e.n({type:Boolean,reflect:!0})],g.prototype,"quiet");b([e.n({type:Boolean,reflect:!0})],g.prototype,"disabled");b([e.n({type:Boolean,reflect:!0})],g.prototype,"required");b([e.n({type:Boolean,reflect:!0})],g.prototype,"readonly");b([e.n({type:String,reflect:!0})],g.prototype,"autocomplete");b([e.n({type:String,reflect:!0})],g.prototype,"language");b([e.n({type:String,reflect:!0})],g.prototype,"defaultLanguage");b([e.n({type:Object,reflect:!0})],g.prototype,"value");customElements.get("luzmo-multi-language-field")||customElements.define("luzmo-multi-language-field",g);const gt=":host{font-family:var(--luzmo-display-settings-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-font-size, var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color, var(--luzmo-font-color))}.settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}.settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-gap, var(--display-settings-gap))}luzmo-divider{margin:var(--luzmo-display-settings-ids-container-vertical-margin, var(--display-settings-ids-container-vertical-margin)) 0}.setting{display:flex;align-items:center}.label-action-container{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-display-settings-info-to-remove-icon-gap, var(--display-settings-info-to-remove-icon-gap))}.id-button,.remove-button{outline:none;cursor:pointer;border:none;background:none;font-size:var(--luzmo-display-settings-font-size, var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color, var(--luzmo-font-color))}.remove-button{display:block;width:var(--luzmo-display-settings-remove-button-size, var(--display-settings-remove-button-size));height:var(--luzmo-display-settings-remove-button-size, var(--display-settings-remove-button-size));border-radius:var(--luzmo-display-settings-remove-button-border-radius, 50%)}.remove-button:hover{background-color:var(--luzmo-display-settings-remove-button-background-color-hover, var(--luzmo-background-color-hover))}.remove-button:active,.remove-button:focus{background-color:var(--luzmo-display-settings-remove-button-background-color-down, var(--luzmo-background-color-down))}.remove-button:focus-visible{box-shadow:0 0 0 var(--luzmo-display-settings-remove-button-indicator-thickness, var(--display-settings-remove-button-indicator-thickness)) var(--highcontrast-remove-button-indicator-color, var(--luzmo-display-settings-remove-button-indicator-color, var(--display-settings-remove-button-indicator-color)))}.ids-container{display:flex;flex-direction:column;gap:var(--luzmo-display-settings-gap, var(--display-settings-gap));border-radius:50%}.id-label{text-transform:var(--luzmo-display-settings-id-label-text-transform, var(--display-settings-id-label-text-transform));font-size:var(--luzmo-display-settings-id-label-font-size, var(--display-settings-id-label-font-size));color:var(--luzmo-display-settings-id-label-color, var(--display-settings-id-label-color))}:host{--display-settings-font-family: var(--luzmo-font-family);--display-settings-id-label-text-transform: uppercase;--display-settings-id-label-color: var(--luzmo-secondary);--display-settings-remove-button-indicator-color: var(--luzmo-primary);--display-settings-remove-button-indicator-thickness: var( --luzmo-border-width )}:host{--display-settings-font-size: var(--luzmo-font-size);--display-settings-id-label-font-size: var(--luzmo-font-size-s);--display-settings-gap: var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-4);--display-settings-info-to-remove-icon-gap: var(--luzmo-spacing-5);--display-settings-remove-button-size: var(--luzmo-component-height)}:host([size=s]){--display-settings-id-label-font-size: var(--luzmo-font-size-s);--display-settings-font-size: var(--luzmo-font-size-s);--display-settings-gap: var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-3);--display-settings-info-to-remove-icon-gap: var(--luzmo-spacing-4);--display-settings-remove-button-size: var(--luzmo-component-height-s)}:host([size=l]){--display-settings-id-label-font-size: var(--luzmo-font-size);--display-settings-font-size: var(--luzmo-font-size-l);--display-settings-gap: var(--luzmo-spacing-4);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-5);--display-settings-info-to-remove-icon-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--display-settings-remove-button-size: var(--luzmo-component-height-l)}:host([size=xl]){--display-settings-id-label-font-size: var(--luzmo-font-size-l);--display-settings-font-size: var(--luzmo-font-size-xl);--display-settings-gap: var(--luzmo-spacing-5);--display-settings-ids-container-vertical-margin: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--display-settings-info-to-remove-icon-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--display-settings-remove-button-size: var(--luzmo-component-height-xl)}";var vt=Object.defineProperty,w=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&vt(t,o,l),l};class x extends e.SizedMixin(e.LuzmoElement,{validSizes:Object.values(e.ElementSizes)}){constructor(){super(...arguments),this._loadDisplaySettings=new R(this,{task:async([t,o,i])=>{const l=[];this.grandTotals&&l.push("grandTotals"),this.periodOverPeriod&&l.push("periodOverPeriod"),(o==="numeric"||o==="mixed"&&(t==null?void 0:t.type)==="numeric")&&l.push("numeric"),o!=="numeric"&&(t==null?void 0:t.type)==="datetime"&&l.push("datetime"),!["numeric","mixed"].includes(o??"")&&(t==null?void 0:t.type)==="numeric"&&!this.binningDisabled&&l.push("binning"),l.length>0&&(l.includes("numeric")&&!this._settingsTypeLoaded.numeric?(await Promise.resolve().then(()=>require("./index-BDXFsKUM.cjs")),this._settingsTypeLoaded.numeric=!0):l.includes("datetime")&&!this._settingsTypeLoaded.datetime?(await Promise.resolve().then(()=>require("./en-BDBzmAXX.cjs")).then(a=>a.index),this._settingsTypeLoaded.periodOverPeriod=!0):l.includes("binning")&&!this._settingsTypeLoaded.binning?(await Promise.resolve().then(()=>require("./index-v8ZTprPO.cjs")),this._settingsTypeLoaded.binning=!0):l.includes("grandTotals")&&!this._settingsTypeLoaded.grandTotals?(await Promise.resolve().then(()=>require("./index-C4ePDYEC.cjs")),this._settingsTypeLoaded.grandTotals=!0):l.includes("periodOverPeriod")&&!this._settingsTypeLoaded.periodOverPeriod&&(await Promise.resolve().then(()=>require("./index-D5puKlcm.cjs")).then(a=>a.index),this._settingsTypeLoaded.periodOverPeriod=!0))},args:()=>[this.slotContent,this.slotType,this.hideDisplaySettings]}),this.language="en",this.contentLanguage="en",this.slotType="numeric",this.slotContent={},this._showIds=!1,this.measureColumns=[],this._settingsTypeLoaded={binning:!1,datetime:!1,numeric:!1,grandTotals:!1,periodOverPeriod:!1,hierarchy:!0},this._currentSlotContent={}}static get styles(){return[e.r(gt)]}willUpdate(t){t.has("slotContent")&&(this._currentSlotContent=structuredClone(this.slotContent))}_onSlotContentChange(t){t.stopPropagation(),t.preventDefault(),this._currentSlotContent=structuredClone(t.detail.slotContent),this._sendEvent()}_onLabelChange(){this._currentSlotContent=structuredClone(this._currentSlotContent),this._currentSlotContent.label=this._multiLanguageFieldElement.value||{},this._sendEvent()}_sendEvent(){this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:{...this._currentSlotContent}}}))}_removeEvent(){this.dispatchEvent(new CustomEvent("remove-slot-content",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:this._currentSlotContent}}))}_toggleIds(){this._showIds=!this._showIds}_renderDisplaySettings(){return e.x`<div class="settings-container">
+        <div class="settings-row">
+          <div class="setting">
+            <div class="label-container">
+              <luzmo-field-label side-aligned="start" .size=${this.size}
+                >Label:</luzmo-field-label
+              >
+              <luzmo-multi-language-field
+                .language=${this.language}
+                .value=${this._currentSlotContent.label}
+                .size=${this.size}
+                debounce="200"
+                @change=${this._onLabelChange}
+              ></luzmo-multi-language-field>
+            </div>
+            <div class="label-action-container">
+              <button class="id-button" @click=${this._toggleIds}>
+                ${h.O2(h.p1)}
+                <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                  Show dataset and column id's
+                </luzmo-tooltip>
+              </button>
+              ${this.showRemoveButton?e.x`<button
+                    class="remove-button"
+                    @click=${this._removeEvent}
+                  >
+                    ${h.O2(h.v1)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      Remove
+                    </luzmo-tooltip>
+                  </button>`:""}
+            </div>
+          </div>
+        </div>
+        ${this.grandTotals?e.x`<luzmo-display-settings-grand-totals
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-grand-totals>`:""}
+        ${this.slotType==="numeric"||this.slotType==="mixed"&&this.slotContent.type==="numeric"?e.x`<luzmo-display-settings-numeric
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              .measureColumns=${this.measureColumns}
+              @slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-numeric>`:""}
+        ${this.slotType!=="numeric"&&this.slotContent.type==="datetime"?e.x`<luzmo-display-settings-datetime
+              .language=${this.language}
+              .contentLanguage=${this.contentLanguage}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-datetime>`:""}
+        ${!["numeric","mixed"].includes(this.slotType??"")&&this.slotContent.type==="numeric"&&!this.binningDisabled?e.x`<luzmo-display-settings-binning
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-binning>`:""}
+        ${this.periodOverPeriod?e.x`<luzmo-display-settings-period-over-period
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-period-over-period>`:""}
+      </div>
+      ${this._showIds?e.x` <luzmo-divider></luzmo-divider>
+            <div class="ids-container">
+              <div>
+                <span class="id-label">Column: </span>
+                ${this._currentSlotContent.columnId??this._currentSlotContent.column}
+              </div>
+              <div>
+                <span class="id-label">Dataset: </span>
+                ${this._currentSlotContent.datasetId??this._currentSlotContent.set}
+              </div>
+              <div></div>
+            </div>`:""}`}render(){return this._loadDisplaySettings.render({pending:()=>e.x`<luzmo-progress-circle
+          indeterminate
+          .size=${this.size}
+        ></luzmo-progress-circle>`,complete:()=>this._renderDisplaySettings(),error:t=>this._renderDisplaySettings()})}}w([e.n({type:String})],x.prototype,"language");w([e.n({type:String,attribute:"content-language"})],x.prototype,"contentLanguage");w([e.n({type:Boolean,attribute:"hide-display-settings"})],x.prototype,"hideDisplaySettings");w([e.n({type:Boolean,attribute:"binning-disabled"})],x.prototype,"binningDisabled");w([e.n({type:Boolean,attribute:"grand-totals"})],x.prototype,"grandTotals");w([e.n({type:Boolean,attribute:"period-over-period"})],x.prototype,"periodOverPeriod");w([e.n({type:Boolean,attribute:"show-remove-button"})],x.prototype,"showRemoveButton");w([e.n({type:String,attribute:"slot-type"})],x.prototype,"slotType");w([e.n()],x.prototype,"slotContent");w([m.r()],x.prototype,"_showIds");w([e.n({type:Array,reflect:!1})],x.prototype,"measureColumns");w([e.e("luzmo-multi-language-field")],x.prototype,"_multiLanguageFieldElement");customElements.get("luzmo-display-settings")||customElements.define("luzmo-display-settings",x);var ft={large:700};function bt(n){n.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:ft.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function V(n,t){var o=Object.keys(n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);t&&(i=i.filter(function(l){return Object.getOwnPropertyDescriptor(n,l).enumerable})),o.push.apply(o,i)}return o}function H(n){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?V(Object(o),!0).forEach(function(i){C._defineProperty(n,i,o[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):V(Object(o)).forEach(function(i){Object.defineProperty(n,i,Object.getOwnPropertyDescriptor(o,i))})}return n}var zt={top:function(t,o){return Math.abs(o.y-t.top)},right:function(t,o){return Math.abs(t.right-o.x)},bottom:function(t,o){return Math.abs(t.bottom-o.y)},left:function(t,o){return Math.abs(o.x-t.left)}},Y=Symbol("closestEdge");function xt(n,t){var o,i,l=t.element,a=t.input,r=t.allowedEdges,s={x:a.clientX,y:a.clientY},d=l.getBoundingClientRect(),c=r.map(function(v){return{edge:v,value:zt[v](d,s)}}),f=(o=(i=c.sort(function(v,k){return v.value-k.value})[0])===null||i===void 0?void 0:i.edge)!==null&&o!==void 0?o:null;return H(H({},n),{},C._defineProperty({},Y,f))}function M(n){var t;return(t=n[Y])!==null&&t!==void 0?t:null}const yt=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var wt=Object.defineProperty,D=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&wt(t,o,l),l};class q extends e.SizedMixin(e.LuzmoElement,{validSizes:Object.values(e.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const o=this._sendChangeEvent.bind(this),i=this,l=C.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:r}){C.setCustomNativeDragPreview({nativeSetDragImage:r,render({container:s}){var f;const d=document.createElement("div");d.classList.add("drag-preview");const c={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([v,k,T])=>{const E=C.getCssVariableValue(t,k)||C.getCssVariableValue(t,T);c[v]=E}),d.textContent=((f=t.querySelector("[data-task-content]"))==null?void 0:f.textContent)??t.textContent,Object.assign(d.style,{border:`1px solid ${c.borderColor}`,backgroundColor:c.backgroundColor,borderRadius:c.borderRadius,fontFamily:c.fontFamily,fontSize:c.fontSize,color:c.color,paddingInline:`${c.horizontalPadding}`,paddingBlock:`${c.verticalPadding}`}),s.append(d)}})},getInitialData(){var d;const r=t.parentElement;let s=0;return r&&(s=[...((d=r.parentElement)==null?void 0:d.children)??[]].indexOf(r)),{index:s}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(l);const a=C.dropTargetForElements({element:t,canDrop({source:r}){var s;return r.element===t?!1:(s=r==null?void 0:r.element)==null?void 0:s.classList.contains("draggable-slot-content")},getData(r){return xt({},{element:t,input:r.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:r}){const s=M(r.data);if(!s)return;const d=document.createElement("div");d.classList.add("drop-indicator"),d.dataset.edge=s,t.after(d)},onDrag({self:r}){var c,f,v;const s=M(r.data);if(!s){(c=t.nextElementSibling)==null||c.remove();return}if(((f=t.nextElementSibling)==null?void 0:f.getAttribute("data-edge"))===s)return;(v=t.nextElementSibling)==null||v.remove();const d=document.createElement("div");d.classList.add("drop-indicator"),d.dataset.edge=s,t.after(d)},onDragLeave(){var r;(r=t.nextElementSibling)==null||r.remove()},onDrop({self:r,source:s}){var f,v,k,T;(f=t.nextElementSibling)==null||f.remove();const d=M(r.data),c=r.element.parentElement;if(typeof s.data.index=="number"&&c){let E=[...((v=c.parentElement)==null?void 0:v.children)??[]].indexOf(c);d==="bottom"&&s.data.index>=E&&E<(((T=(k=c==null?void 0:c.parentElement)==null?void 0:k.children)==null?void 0:T.length)??0)-1?E+=1:d==="top"&&E>s.data.index&&(E-=1);const L=i.activeIndex,O=s.data.index,j=E,Z=i.slotContents[O];i.slotContents.splice(O,1),i.slotContents.splice(j,0,Z),O===L?i.activeIndex=j:O<L&&j>=L?i.activeIndex=L-1:O>L&&j<=L&&(i.activeIndex=L+1)}d&&(bt(s.element),i.requestUpdate(),o())}});this._cleanupFns.push(a)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[e.r(yt)]}willUpdate(t){this._detachAll()}updated(t){this._attachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((o,i)=>i!==t),this.activeIndex===t?this.activeIndex=t:this.slotContents.length>0&&this.activeIndex>t&&this.activeIndex--,this._sendChangeEvent()}render(){const t=this.slotContents.map((o,i)=>{const l=C.localize(o.label,this.contentLanguage);return e.x`<li class=${i===this.activeIndex?"active":""}>
+          <div class="draggable-slot-content">
+            <div
+              class="draggable-slot-content-label"
+              @click=${this.setActiveIndex.bind(this,i)}
+            >
+              ${l}
+            </div>
+            <div
+              class="draggable-slot-content-remove"
+              @click=${this.removeSlotContent.bind(this,i)}
+            >
+              ${h.O2(h.v1)}
+            </div>
+          </div>
+        </li>`});return e.x`<div>${t}</div>`}}D([e.n({type:String,reflect:!0})],q.prototype,"language");D([e.n({type:String,attribute:"content-language",reflect:!0})],q.prototype,"contentLanguage");D([X(".draggable-slot-content")],q.prototype,"_draggableSlotContentElements");D([e.n()],q.prototype,"slotContents");D([e.n({type:Number})],q.prototype,"activeIndex");customElements.get("luzmo-slot-menu-list")||customElements.define("luzmo-slot-menu-list",q);const kt=":host{font-family:var(--luzmo-slot-menu-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-font-size, var(--slot-menu-font-size));color:var(--luzmo-slot-menu-font-color, var(--luzmo-font-color));display:block;width:fit-content}luzmo-slot-menu-list{min-width:var(--luzmo-slot-menu-list-min-width, var(--slot-menu-list-min-width));max-width:var(--luzmo-slot-menu-list-max-width, var(--slot-menu-list-max-width))}.slot-contents-container{position:relative;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));background:var(--luzmo-slot-menu-background-color, var(--luzmo-background-color));border-top-left-radius:0}.slot-contents-container .inner-container{display:flex}.slot-contents-container .inner-container luzmo-display-settings{min-width:var(--luzmo-slot-menu-display-settings-min-width, var(--slot-menu-display-settings-min-width));padding:var(--luzmo-slot-menu-display-settings-vertical-padding, var(--slot-menu-display-settings-vertical-padding)) var(--luzmo-slot-menu-display-settings-horizontal-padding, var(--slot-menu-display-settings-horizontal-padding))}:host([variant=popup]) .slot-contents-container{overflow:hidden;border-top-left-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));--slot-menu-popup-filter: drop-shadow( var( --luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal) ) var( --luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical) ) var( --luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur) ) var( --luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color) ) );filter:var(--luzmo-slot-menu-popup-filter, var(--slot-menu-popup-filter))}.slot-menu-top-menu{display:flex;align-items:center;border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;width:fit-content}.drag-handle{background-color:var(--luzmo-slot-menu-drag-handle-background-color, var(--luzmo-background-color-highlight));cursor:grab;width:fit-content;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-drag-handle-size, var(--slot-menu-drag-handle-size));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.drag-handle:hover{background-color:var(--luzmo-slot-menu-drag-handle-background-color-hover, var(--luzmo-background-color-highlight-hover))}.slot-content-action{display:flex;flex:0 1 auto;max-width:var(--luzmo-slot-menu-top-menu-label-max-width, var(--slot-menu-top-menu-label-max-width));gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));background-color:var(--luzmo-slot-menu-content-label-background-color, var(--luzmo-primary));color:var(--luzmo-slot-menu-content-label-color, var(--luzmo-primary-inverse-color));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-content-label-border-color, var(--luzmo-primary));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.slot-content-action:hover{background-color:var(--luzmo-slot-menu-content-label-background-color-hover, var(--luzmo-primary-hover))}.slot-content-action:focus{background-color:var(--luzmo-slot-menu-content-label-background-color-focus, var(--luzmo-primary-focus))}.slot-content-action .slot-content-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-content-action .slot-content-remove{flex:0 0 auto;cursor:pointer}.close{position:absolute;right:1rem;cursor:pointer;top:calc(-2 * var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)));background-color:var(--luzmo-slot-menu-close-button-background-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-close-button-size, var(--slot-menu-close-button-size));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-top-left-radius:0;border-top-right-radius:0;padding:var(--luzmo-slot-menu-close-button-vertical-padding, var(--slot-menu-close-button-vertical-padding)) var(--luzmo-slot-menu-close-button-horizontal-padding, var(--slot-menu-close-button-horizontal-padding))}.close:hover{background-color:var(--luzmo-slot-menu-close-button-background-color-hover, var(--luzmo-background-color-highlight-hover))}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-display-settings-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-4);--slot-menu-top-menu-label-max-width: 12rem;--slot-menu-list-min-width: 8rem;--slot-menu-list-max-width: 12rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3);--slot-menu-drag-handle-size: var(--luzmo-font-size);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-s);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-popup-shadow-horizontal: 0;--slot-menu-popup-shadow-vertical: 1px;--slot-menu-popup-shadow-blur: 4px;--slot-menu-popup-shadow-color: var(--luzmo-border-color)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-display-settings-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-3);--slot-menu-top-menu-label-max-width: 10rem;--slot-menu-list-min-width: 6rem;--slot-menu-list-max-width: 10rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2);--slot-menu-drag-handle-size: var(--luzmo-font-size-s);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-xs);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 14rem;--slot-menu-list-min-width: 9rem;--slot-menu-list-max-width: 14rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4);--slot-menu-drag-handle-size: var(--luzmo-font-size-l);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size);--slot-menu-close-button-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 16rem;--slot-menu-list-min-width: 10rem;--slot-menu-list-max-width: 16rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5);--slot-menu-drag-handle-size: var(--luzmo-font-size-xl);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-close-button-size: var(--luzmo-font-size-l);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-3);--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}";var Ct=Object.defineProperty,_=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&Ct(t,o,l),l};class y extends e.SizedMixin(e.LuzmoElement,{validSizes:Object.values(e.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotType="numeric",this.variant="draggable",this.slotContents=[],this._slotListData=[],this._slotContents=[],this._currentSlotContent={},this._activeIndex=0}static get styles(){return[e.r(kt)]}disconnectedCallback(){super.disconnectedCallback()}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:[...this._slotContents]}}))}_sendCloseEvent(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,cancelable:!0}))}willUpdate(t){var o;t.has("slotContents")&&(this._slotContents=structuredClone(this.slotContents),this._slotListData=structuredClone(this.slotContents),this._currentSlotContent=((o=this._slotContents)==null?void 0:o[this._activeIndex??0])??{})}updated(t){this.updateContentLabel()}_handleSlotListChange(t){var i;this._slotContents=structuredClone(t.detail.slotContents);const o=t.detail.activeIndex;o!==this._activeIndex&&(this._activeIndex=o),this._currentSlotContent=((i=this._slotContents)==null?void 0:i[this._activeIndex??0])??{},this.displaySettingsElement.slotContent=this._currentSlotContent,this._slotContents.length<=1&&this.requestUpdate(),this._sendChangeEvent()}_handleSlotContentChange(t){this._slotContents[this._activeIndex]=structuredClone(t.detail.slotContent),this._slotListData=structuredClone(this._slotContents),this.slotMenuListElement&&(this.slotMenuListElement.slotContents=this._slotListData),this.updateContentLabel(),this._sendChangeEvent()}updateContentLabel(){if(this.slotContentLabelElement){const t=C.localize(this._slotContents[this._activeIndex].label,this.contentLanguage);this.slotContentLabelElement.textContent=t}}removeSlotContent(t){this._slotContents=this._slotContents.filter((o,i)=>i!==t),this._currentSlotContent={},this._sendChangeEvent(),this._sendCloseEvent(),this.requestUpdate()}close(){this._sendCloseEvent()}_removeActiveSlotContent(){this.removeSlotContent(this._activeIndex)}render(){return e.x`<div class="slot-menu-top-menu">
+        ${this.variant==="draggable"?e.x`<div class="drag-handle">${h.O2(h.W)}</div>`:""}
+        ${this._slotContents.length===1&&this.variant!=="popup"?e.x` <div class="slot-content-action">
+              <div class="slot-content-label"></div>
+              <div
+                class="slot-content-remove"
+                @click=${this.removeSlotContent.bind(this,0)}
+              >
+                ${h.O2(h.v1)}
+              </div>
+            </div>`:""}
+      </div>
+      <div
+        class="slot-contents-container ${this._slotContents.length>1?"multiple":""}"
+      >
+        ${this.variant==="popup"?"":e.x`<div class="close" @click=${this.close}>
+              ${h.O2(h.B)}
+            </div>`}
+        <div class="inner-container">
+          ${this._slotContents.length>1?e.x`<luzmo-slot-menu-list
+                .slotContents=${this._slotListData}
+                .activeIndex=${this._activeIndex}
+                @slot-list-changed=${this._handleSlotListChange}
+              ></luzmo-slot-menu-list>`:""}
+          <luzmo-display-settings
+            .size=${this.size}
+            .language=${this.language}
+            .contentLanguage=${this.contentLanguage}
+            .slotContent=${this._currentSlotContent}
+            .slotType=${this.slotType}
+            .showRemoveButton=${this.variant==="popup"&&this._slotContents.length===1}
+            @slot-content-changed=${this._handleSlotContentChange}
+            @remove-slot-content=${this._removeActiveSlotContent}
+          ></luzmo-display-settings>
+        </div>
+      </div>`}}_([e.n({type:String,reflect:!0})],y.prototype,"language");_([e.n({type:String,attribute:"content-language",reflect:!0})],y.prototype,"contentLanguage");_([e.n({type:String,attribute:"slot-type",reflect:!0})],y.prototype,"slotType");_([e.n({type:Boolean,attribute:"no-drag",reflect:!0})],y.prototype,"noDrag");_([e.n({type:Boolean,attribute:"no-close",reflect:!0})],y.prototype,"noClose");_([e.n({type:String,reflect:!0})],y.prototype,"variant");_([e.n({type:Boolean,attribute:"no-top-menu-label",reflect:!0})],y.prototype,"noTopMenuLabel");_([e.n()],y.prototype,"slotContents");_([e.e(".slot-content-label")],y.prototype,"slotContentLabelElement");_([e.e("luzmo-display-settings")],y.prototype,"displaySettingsElement");_([e.e("luzmo-slot-menu-list")],y.prototype,"slotMenuListElement");customElements.get("luzmo-slot-menu")||customElements.define("luzmo-slot-menu",y);const _t=":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family))}.droppable-slot[filled]{cursor:pointer;border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color))}.droppable-slot{color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));gap:var(--luzmo-spacing-5);border-radius:var(--luzmo-border-radius);height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height));cursor:move}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));flex-grow:1;margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled )}:host([accept-drag]){--droppable-slot-filled-background-color: var(--luzmo-color-positive);--droppable-slot-filled-color: white;--droppable-slot-filled-border-color: var(--luzmo-color-positive-down);--droppable-slot-controls-background-color: var(--luzmo-color-positive-down);--droppable-slot-controls-color: white;--droppable-slot-background-color: var(--luzmo-color-positive);--droppable-slot-font-color: white}:host{--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var(--luzmo-component-height-s);--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var(--luzmo-component-height-l);--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var(--luzmo-component-height-xl);--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}";var $t=Object.defineProperty,$=(n,t,o,i)=>{for(var l=void 0,a=n.length-1,r;a>=0;a--)(r=n[a])&&(l=r(t,o,l)||l);return l&&$t(t,o,l),l};const N=class N extends e.SizedMixin(e.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this._loadSlotsConfig=new R(this,{task:async([t])=>{if(t&&t!==this._itemTypeLoaded){const o=Object.assign({"./item-slots-configs/area-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("./area-chart-slots.config-BLxiYX05.cjs")),"./item-slots-configs/bar-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("./bar-chart-slots.config-Jx1PveTM.cjs")),"./item-slots-configs/donut-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("./donut-chart-slots.config-DIp-24lO.cjs"))});if(o[`./item-slots-configs/${t}-slots.config.ts`]){const i=await o[`./item-slots-configs/${t}-slots.config.ts`]();this._slotsConfig=(i==null?void 0:i.default)??{}}return this._slotsConfig}},args:()=>[this.itemType,this.language]}),this.slotConfiguration={},this.slotContents=[],this.language="en",this.menu="default",this.placement="bottom-end",this.changedSlotContents=t=>{this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:t}}))},this._currentSlotContents=[]}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDroppable()}emptySlotContents(t){t.preventDefault(),t.stopPropagation(),this.slotContents=[],this.changedSlotContents([])}willUpdate(t){t.has("slotContents")&&(this._currentSlotContents=structuredClone(this.slotContents))}firstUpdated(t){this._cleanupDroppable||(this._cleanupDroppable=C.dropTargetForElements({element:this,onDrop:o=>{var r,s,d,c;const i={...(r=o.source)==null?void 0:r.data},l={...(i==null?void 0:i.label)??{en:"Untitled"}},a=i==null?void 0:i.type;if(a==="datetime"&&!i.level&&(i.level=i.lowestLevel??(i.subtype==="date"?5:9)),a==="datetime"&&((d=(s=o==null?void 0:o.source)==null?void 0:s.element)!=null&&d.hasAttribute("sublevel"))){const f=["(Yr)","(Qtr)","(Mth)","(Wk)","(Date)","(Hr)","(Min)","(Sec)","(Msec)"],v=(i==null?void 0:i.level)??1,k=Object.keys(l);for(const T of k)l[T]=`${l[T]} ${f[v-1]}`;i.label=l}this.slotContents=(c=this.slotConfiguration)!=null&&c.canAcceptMultipleColumns?[...this.slotContents??[],i]:[i],this.removeAttribute("accept-drag"),this.changedSlotContents(this.slotContents)},canDrop:({source:o})=>{var l,a,r,s,d,c,f,v,k;if(!["LUZMO-DRAGGABLE-DATA-ITEM-LEVEL","LUZMO-DRAGGABLE-DATA-ITEM"].includes((l=o.element)==null?void 0:l.tagName))return!1;const i=((r=(a=this.slotConfiguration)==null?void 0:a.acceptableColumnTypes)==null?void 0:r.length)>0?this.slotConfiguration.acceptableColumnTypes:["numeric","hierarchy","datetime"];return(s=o==null?void 0:o.data)!=null&&s.type&&!i.includes((d=o==null?void 0:o.data)==null?void 0:d.type)?!1:!((c=o==null?void 0:o.data)!=null&&c.subtype&&((v=(f=this.slotConfiguration)==null?void 0:f.acceptableColumnSubtypes)==null?void 0:v.length)>0&&!this.slotConfiguration.acceptableColumnSubtypes.includes((k=o==null?void 0:o.data)==null?void 0:k.subtype))},getDropEffect:()=>"link",onDragEnter:o=>{this.setAttribute("accept-drag","")},onDragLeave:o=>{this.removeAttribute("accept-drag")}}))}updated(t){this.createFullLabel()}_onSlotMenuChanges(t){var o;t.preventDefault(),t.stopPropagation(),this.slotContents.length===((o=t.detail.slotContents)==null?void 0:o.length)?(this._currentSlotContents=t.detail.slotContents,this.createFullLabel(),this.changedSlotContents(this._currentSlotContents)):(this.slotContents=t.detail.slotContents,this.changedSlotContents(this.slotContents))}createFullLabel(){var i,l,a,r,s,d,c;let t="";((i=this._currentSlotContents)==null?void 0:i.length)===1?t=C.localize((a=(l=this._currentSlotContents)==null?void 0:l[0])==null?void 0:a.label,this.language)??"Untitled":((r=this._currentSlotContents)==null?void 0:r.length)>1&&(t=`${this._currentSlotContents.length} items`);let o="";this.label?o=this.label:(s=this.slotConfiguration)!=null&&s.label&&(o=this.slotConfiguration.label),o=o||"Untitled",((d=this._currentSlotContents)==null?void 0:d.length)>0&&(o+=((c=this._currentSlotContents)==null?void 0:c.length)>1?`: ${this._currentSlotContents.length} items`:`: ${t}`),this._droppableSlotLabelElement&&(this._droppableSlotLabelElement.textContent=o)}droppableSlotMarkup(){var t,o,i,l;return e.x`
+      <div
+        class="droppable-slot"
+        ?filled=${((t=this.slotContents)==null?void 0:t.length)>0}
+        id="trigger"
+      >
+        <div class="droppable-slot-label"></div>
+        ${((o=this.slotContents)==null?void 0:o.length)>0&&!(this.hideConfiguration&&this.hideDelete)?e.x`<div class="controls">
+              ${this.hideConfiguration?"":e.x`<div>
+                    ${h.O2(h.M1)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      edit
+                    </luzmo-tooltip>
+                  </div> `}
+              ${this.hideDelete?"":e.x`<div @click=${this.emptySlotContents}>
+                    ${h.O2(h.v1)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      Delete
+                    </luzmo-tooltip>
+                  </div>`}
+            </div>`:""}
+        ${((i=this.slotContents)==null?void 0:i.length)>0?e.x`<luzmo-overlay
+              trigger="trigger@click"
+              .placement=${this.placement}
+            >
+              <luzmo-slot-menu
+                language=${this.language}
+                content-language=${this.language}
+                slot-type=${(l=this.slotConfiguration)==null?void 0:l.type}
+                .slotContents=${this._currentSlotContents}
+                variant="popup"
+                .size=${this.size}
+                @slot-contents-changed=${this._onSlotMenuChanges}
+              ></luzmo-slot-menu>
+            </luzmo-overlay>`:""}
+      </div>
+    `}render(){return this._loadSlotsConfig.render({pending:()=>e.x`<p>Loading...</p>`,complete:t=>{if(this.slotName&&this.itemType&&t){const o=t.find(i=>i.name===this.slotName);o&&(this.slotConfiguration=o)}return this.droppableSlotMarkup()},error:t=>e.x`
+        <div>
+          Could not load droppable slot: '${this.slotName}' of chart
+          '${this.itemType}': ${t}.
+        </div>
+      `})}};N.styles=e.r(_t);let z=N;$([e.n({type:String,reflect:!0,attribute:"item-type"})],z.prototype,"itemType");$([e.n({type:String,reflect:!0,attribute:"slot-name"})],z.prototype,"slotName");$([e.n({type:Object})],z.prototype,"slotConfiguration");$([e.n({type:Object})],z.prototype,"slotContents");$([e.n({type:String,reflect:!0})],z.prototype,"label");$([e.n({type:String,reflect:!0})],z.prototype,"language");$([e.n({type:String,reflect:!0})],z.prototype,"menu");$([e.n({type:String,reflect:!0})],z.prototype,"placement");$([e.n({type:Boolean,reflect:!0,attribute:"hide-delete"})],z.prototype,"hideDelete");$([e.n({type:Boolean,reflect:!0,attribute:"hide-configuration"})],z.prototype,"hideConfiguration");$([e.e(".droppable-slot-label")],z.prototype,"_droppableSlotLabelElement");customElements.get("luzmo-droppable-slot")||customElements.define("luzmo-droppable-slot",z);exports.Divider=P;exports.FieldLabel=S;exports.HelpText=A;exports.LuzmoDisplaySettings=x;exports.LuzmoDroppableSlot=z;exports.LuzmoMultiLangField=g;exports.LuzmoSlotMenu=y;exports.LuzmoSlotMenuList=q;exports.LuzmoTextField=F;exports.LuzmoTextFieldBase=u;exports.ManageHelpText=B;exports.h=R;