@cas-smartdesign/stage 3.0.2 → 3.1.1

package/dist/stage.mjs

@@ -1,26 +1,26 @@
-import { LitElement as K, css as X, unsafeCSS as J, html as g } from "lit";
+import { LitElement as q, unsafeCSS as G, css as X, html as g } from "lit";
 import { property as S } from "lit/decorators/property.js";
-import { repeat as Q } from "lit/directives/repeat.js";
+import { repeat as J } from "lit/directives/repeat.js";
 import { ifDefined as I } from "lit/directives/if-defined.js";
-import { ValidationLevel as Y } from "@cas-smartdesign/field-validation-message";
-const Z = ':host{--component-stage-border-color: var(--color-base-grey-400, #cccccc);--component-stage-border-focus-color: var(--color-base-black, black);--component-stage-border-highlight-color: var(--color-base-white, white);--component-stage-inactive-color: var(--color-base-white, white);--component-stage-active-color: var(--color-base-green-200, #deedbc);--component-stage-selected-color: var(--color-base-green-400, #bedb79);--component-stage-hover-color: var(--color-base-green-300, #cee49c);--component-stage-focus-color: var(--color-base-green-300, #cee49c);--component-stage-font-color: var(--color-base-grey-900, #555555);--component-stage-font-inactive-color: var(--color-base-grey-900, #555555);--component-stage-font-selected-color: var(--color-base-grey-900, #555555);--component-stage-font-hover-color: var(--color-base-grey-900, #555555);--component-stage-font-focus-color: var(--color-base-grey-900, #555555);--component-stage-font-size: var(--size-font-medium, 13px);--component-stage-font-family: var(--font-family-base, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);--component-stage-transition-time: var(--time-transition-short, 275ms);display:flex;flex-direction:column;width:100%;margin:0;box-sizing:border-box;font-size:var(--component-stage-font-size);font-family:var(--component-stage-font-family);color:var(--component-stage-font-color)}@media (prefers-reduced-motion){:host{--component-stage-transition-time: 1ms}}:host *{box-sizing:border-box}:host *:before,:host *:after{box-sizing:border-box}:host .sections{width:100%;overflow:hidden;display:flex;-webkit-user-select:none;user-select:none}:host .sections .section:first-child{margin-left:0}:host .sections .section:first-child .content{padding-left:0}:host .section{display:flex;flex:1 1 80px;box-sizing:border-box;height:48px;cursor:pointer;overflow:visible;position:relative}:host .section.placeholder{flex:0 0 48px}:host .section.placeholder .index{display:none}:host .section.placeholder .content .label{top:18px;padding:0 16px}:host .section .content{height:100%;flex:1 1 0;overflow:hidden;transition:background-color var(--component-stage-transition-time) ease-in,color var(--component-stage-transition-time) ease-in}:host .section .content .label{position:absolute;top:25px;min-width:28px;width:100%;padding:0 8px 0 16px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .section .content .index{position:absolute;bottom:25px;width:100%;padding:0 8px 0 16px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .section .arrow{flex:0 0 auto;position:absolute;right:0;top:0;z-index:1;box-sizing:border-box;height:48px;width:48px;margin-right:-24px;transform-origin:center center;border:3px solid var(--component-stage-border-highlight-color);border-left:0px;border-bottom:0px;transform:scaleX(.5) scale(.707) rotate(45deg);transition:background-color var(--component-stage-transition-time) ease-in}:host .section:last-of-type .arrow{display:none}:host .section:last-of-type .content{margin-right:0}:host .section.inactive:last-of-type .content{border-right:1px solid var(--component-stage-border-color)}:host .section.inactive:first-child .content{border-left:1px solid var(--component-stage-border-color)}:host .section.inactive .arrow{border-color:var(--component-stage-border-color)}:host .section.inactive .content{color:var(--component-stage-font-inactive-color);background:var(--component-stage-inactive-color);border-top:1px solid var(--component-stage-border-color);border-bottom:1px solid var(--component-stage-border-color)}:host .section.inactive .content,:host .section.inactive .arrow{background:var(--component-stage-inactive-color)}:host .section.active .content,:host .section.active .arrow{color:var(--component-stage-font-color);background:var(--component-stage-active-color)}:host .section.selected .content,:host .section.selected .arrow{color:var(--component-stage-font-selected-color);background:var(--component-stage-selected-color)}:host .hidden{flex:0 1 0px;margin:0;overflow:hidden}:host ::slotted(*){display:none}:host(.readonly) .section{cursor:default}:host(:focus){outline:none}@media (hover: hover){:host(:not(.readonly)) .section:hover .content,:host(:not(.readonly)) .section:hover .arrow{color:var(--component-stage-font-hover-color);background:var(--component-stage-hover-color)}}:host(:not(.readonly)) .section.focused:focus-visible{outline:none}:host(:not(.readonly)) .section.focused:focus-visible .content{border-top:1px solid var(--component-stage-border-focus-color);border-bottom:1px solid var(--component-stage-border-focus-color)}:host(:not(.readonly)) .section.focused:focus-visible .content,:host(:not(.readonly)) .section.focused:focus-visible .arrow{color:var(--component-stage-font-focus-color);background:var(--component-stage-focus-color)}';
-var ee = Object.defineProperty, te = Object.getOwnPropertyDescriptor, O = (l, t, o, i) => {
-  for (var r = i > 1 ? void 0 : i ? te(t, o) : t, s = l.length - 1, p; s >= 0; s--)
-    (p = l[s]) && (r = (i ? p(t, o, r) : p(r)) || r);
-  return i && r && ee(t, o, r), r;
+import { ValidationLevel as Q } from "@cas-smartdesign/field-validation-message";
+const Y = ':host{--component-stage-border-color: var(--color-base-grey-400, #cccccc);--component-stage-border-focus-color: var(--color-base-black, black);--component-stage-border-highlight-color: var(--color-base-white, white);--component-stage-inactive-color: var(--color-base-white, white);--component-stage-active-color: var(--color-base-green-200, #deedbc);--component-stage-selected-color: var(--color-base-green-400, #bedb79);--component-stage-hover-color: var(--color-base-green-300, #cee49c);--component-stage-focus-color: var(--color-base-green-300, #cee49c);--component-stage-font-color: var(--color-base-grey-900, #555555);--component-stage-font-inactive-color: var(--color-base-grey-900, #555555);--component-stage-font-selected-color: var(--color-base-grey-900, #555555);--component-stage-font-hover-color: var(--color-base-grey-900, #555555);--component-stage-font-focus-color: var(--color-base-grey-900, #555555);--component-stage-font-size: var(--size-font-medium, 13px);--component-stage-font-family: var(--font-family-base, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);--component-stage-transition-time: var(--time-transition-short, 275ms);display:flex;flex-direction:column;width:100%;margin:0;box-sizing:border-box;font-size:var(--component-stage-font-size);font-family:var(--component-stage-font-family);color:var(--component-stage-font-color)}@media (prefers-reduced-motion){:host{--component-stage-transition-time: 1ms}}:host *{box-sizing:border-box}:host *:before,:host *:after{box-sizing:border-box}:host .sections{width:100%;overflow:hidden;display:flex;-webkit-user-select:none;user-select:none}:host .sections .section:first-child{margin-left:0}:host .sections .section:first-child .content{padding-left:0}:host .section{display:flex;flex:1 1 80px;box-sizing:border-box;height:48px;cursor:pointer;overflow:visible;position:relative}:host .section.placeholder{flex:0 0 48px}:host .section.placeholder .index{display:none}:host .section.placeholder .content .label{top:18px;padding:0 16px}:host .section .content{height:100%;flex:1 1 0;overflow:hidden;transition:background-color var(--component-stage-transition-time) ease-in,color var(--component-stage-transition-time) ease-in}:host .section .content .label{position:absolute;top:25px;min-width:28px;width:100%;padding:0 8px 0 16px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .section .content .index{position:absolute;bottom:25px;width:100%;padding:0 8px 0 16px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .section .arrow{flex:0 0 auto;position:absolute;right:0;top:0;z-index:1;box-sizing:border-box;height:48px;width:48px;margin-right:-24px;transform-origin:center center;border:3px solid var(--component-stage-border-highlight-color);border-left:0px;border-bottom:0px;transform:scaleX(.5) scale(.707) rotate(45deg);transition:background-color var(--component-stage-transition-time) ease-in}:host .section:last-of-type .arrow{display:none}:host .section:last-of-type .content{margin-right:0}:host .section.inactive:last-of-type .content{border-right:1px solid var(--component-stage-border-color)}:host .section.inactive:first-child .content{border-left:1px solid var(--component-stage-border-color)}:host .section.inactive .arrow{border-color:var(--component-stage-border-color)}:host .section.inactive .content{color:var(--component-stage-font-inactive-color);background:var(--component-stage-inactive-color);border-top:1px solid var(--component-stage-border-color);border-bottom:1px solid var(--component-stage-border-color)}:host .section.inactive .content,:host .section.inactive .arrow{background:var(--component-stage-inactive-color)}:host .section.active .content,:host .section.active .arrow{color:var(--component-stage-font-color);background:var(--component-stage-active-color)}:host .section.selected .content,:host .section.selected .arrow{color:var(--component-stage-font-selected-color);background:var(--component-stage-selected-color)}:host .hidden{flex:0 1 0px;margin:0;overflow:hidden}:host ::slotted(*){display:none}:host(.readonly) .section{cursor:default}:host(:focus){outline:none}@media (hover: hover){:host(:not(.readonly)) .section:hover .content,:host(:not(.readonly)) .section:hover .arrow{color:var(--component-stage-font-hover-color);background:var(--component-stage-hover-color)}}:host(:not(.readonly)) .section.focused:focus-visible{outline:none}:host(:not(.readonly)) .section.focused:focus-visible .content{border-top:1px solid var(--component-stage-border-focus-color);border-bottom:1px solid var(--component-stage-border-focus-color)}:host(:not(.readonly)) .section.focused:focus-visible .content,:host(:not(.readonly)) .section.focused:focus-visible .arrow{color:var(--component-stage-font-focus-color);background:var(--component-stage-focus-color)}';
+var Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, O = (l, t, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? ee(t, o) : t, s = l.length - 1, f; s >= 0; s--)
+    (f = l[s]) && (a = (r ? f(t, o, a) : f(a)) || a);
+  return r && a && Z(t, o, a), a;
 };
-function T(l) {
+function H(l) {
   return l.label != null && l.id != null;
 }
-var a;
-const b = (a = class extends K {
+var i;
+const b = (i = class extends q {
   constructor() {
     super(...arguments), this._isSpaceOrEnterKeyDown = !1, this._focusIndex = -1, this._focusOutSuspended = !1;
   }
   static get styles() {
     return [
       X`
-                ${J(Z)}
+                ${G(Y)}
             `
     ];
   }
@@ -50,12 +50,11 @@ const b = (a = class extends K {
   }
   updateFocusIndex(t) {
     (this.possibleValues || []).length != 0 && (this._focusIndex = Math.min(Math.max(0, t), this.possibleValues.length - 1), this._focusOutSuspended = !0, this.requestUpdate(), this.updateComplete.then(() => {
-      var o;
-      this._focusOutSuspended = !1, (o = this.shadowRoot.querySelector(".focused")) == null || o.focus();
+      this._focusOutSuspended = !1, this.shadowRoot.querySelector(".focused")?.focus();
     }));
   }
   getIndexOfSelection(t) {
-    return (this.possibleValues || []).length == 0 ? -1 : this.possibleValues.map((i) => T(i) ? i.id : i).indexOf(t);
+    return (this.possibleValues || []).length == 0 ? -1 : this.possibleValues.map((r) => H(r) ? r.id : r).indexOf(t);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null);
@@ -68,65 +67,64 @@ const b = (a = class extends K {
     }), this._focusIndex = this.getIndexOfSelection(this.value);
   }
   render() {
-    var P;
     let t = this.offsetWidth;
-    const o = g`<slot @slotchange=${this.updatePossibleValuesFromOptionElements}></slot>`, i = g`<sd-field-validation-message
+    const o = g`<slot @slotchange=${this.updatePossibleValuesFromOptionElements}></slot>`, r = g`<sd-field-validation-message
             class="validation-message"
             .message=${this.validationMessage}
             .icon=${this.validationIconSrc}
             .level=${this.validationLevel}
         >
-        </sd-field-validation-message>`, r = g`${o}${i}`;
+        </sd-field-validation-message>`, a = g`${o}${r}`;
     if ((this._possibleValues || []).length === 0)
-      return r;
-    const s = this._possibleValues.map((e, d) => T(e) ? {
+      return a;
+    const s = this._possibleValues.map((e, d) => H(e) ? {
       ...e,
       index: d
     } : {
       id: e,
       label: String(e),
       index: d
-    }), p = {
+    }), f = {
       label: "...",
       id: "placeholder1",
       index: -2,
       firstHiddenIndex: 0
-    }, D = {
+    }, V = {
       label: "...",
       id: "placeholder2",
       index: s.length,
       firstHiddenIndex: s.length
-    }, E = 80, C = 48;
+    }, D = 80, z = 48;
     let u = [], m = [];
-    if (t / E >= s.length || s.length <= 2)
+    if (t / D >= s.length || s.length <= 2)
       m = [...s], u = [...s];
     else {
-      const e = () => Math.max(1, Math.floor(t / E)), d = () => {
+      const e = () => Math.max(1, Math.floor(t / D)), d = () => {
         t = this.offsetWidth;
-      }, n = (k) => {
-        const G = Math.max(0, k);
-        let V = 0, L, R, v, w, q, H, _;
+      }, n = ($) => {
+        const B = Math.max(0, $);
+        let k = 0, A, F, v, w, L, R, _;
         do
-          q = v, H = w, V = e(), v = Math.max(0, Math.min(Math.ceil(G - V / 2), s.length - V)), w = v + V, _ = !1, v > 0 && !L && (t -= C, L = !0, _ = !0), !_ && w < s.length && !R && (t -= C, R = !0, _ = !0);
-        while (_ || q != v || H != w);
+          L = v, R = w, k = e(), v = Math.max(0, Math.min(Math.ceil(B - k / 2), s.length - k)), w = v + k, _ = !1, v > 0 && !A && (t -= z, A = !0, _ = !0), !_ && w < s.length && !F && (t -= z, F = !0, _ = !0);
+        while (_ || L != v || R != w);
         return { start: v, end: w };
       };
       let { start: x, end: h } = n(this._focusIndex);
       if (this._focusIndex > -1 && h - x >= 2 && h <= this._focusIndex + 1 && h < s.length) {
         d();
-        const k = n(this._focusIndex + 1);
-        x = k.start, h = k.end;
+        const $ = n(this._focusIndex + 1);
+        x = $.start, h = $.end;
       }
-      const y = s.slice(x, h), A = x > 0 ? [p] : [], F = h < s.length ? [D] : [];
-      D.firstHiddenIndex = h, m = [...A, ...y, ...F], u = [...A, ...s, ...F];
+      const y = s.slice(x, h), M = x > 0 ? [f] : [], P = h < s.length ? [V] : [];
+      V.firstHiddenIndex = h, m = [...M, ...y, ...P], u = [...M, ...s, ...P];
     }
-    const f = this._value ? (P = u.find((e) => e.id === this._value)) == null ? void 0 : P.index : -1, c = (e) => e == p || e == D, U = (e) => e.index == this._focusIndex, M = (e) => !c(e) && f != null && e.index === f, W = (e) => c(e) ? e.firstHiddenIndex <= f : e.index < f, j = (e) => {
+    const p = this._value ? u.find((e) => e.id === this._value)?.index : -1, c = (e) => e == f || e == V, E = (e) => e.index == this._focusIndex, C = (e) => !c(e) && p != null && e.index === p, K = (e) => c(e) ? e.firstHiddenIndex <= p : e.index < p, T = (e) => {
       const d = m.indexOf(e) == -1;
       let n = "section";
-      return f != null ? M(e) ? n += " selected" : W(e) ? n += " active" : n += " inactive" : n += " inactive", c(e) && (n += " placeholder"), U(e) && (n += " focused"), d && (n += " hidden"), n;
+      return p != null ? C(e) ? n += " selected" : K(e) ? n += " active" : n += " inactive" : n += " inactive", c(e) && (n += " placeholder"), E(e) && (n += " focused"), d && (n += " hidden"), n;
     };
     this._renderedItems = m.filter((e) => !c(e));
-    const N = (e) => {
+    const W = (e) => {
       const d = () => {
         if (c(e)) {
           e.index < 0 ? this.focusSibling(-this._renderedItems.length) : this.focusSibling(this._renderedItems.length);
@@ -141,13 +139,13 @@ const b = (a = class extends K {
                     id="${I(!c(e) && e.index ? "stage-option-" + e.index : void 0)}"
                     aria-hidden="${I(c(e) ? !0 : void 0)}"
                     aria-selected=${I(
-        this._readonly || c(e) ? void 0 : M(e) ? "true" : "false"
+        this._readonly || c(e) ? void 0 : C(e) ? "true" : "false"
       )}
-                    tabindex="${U(e) ? 0 : -1}"
+                    tabindex="${E(e) ? 0 : -1}"
                     @keydown="${(y) => this.onKeyDown(y)}"
                     @keyup="${(y) => this.onKeyUp(y, () => d())}"
                     @click="${() => d()}"
-                    class="${j(e)}"
+                    class="${T(e)}"
                 >
                     <div class="content" title="${e.label}">
                         <div class="index" aria-hidden="true">${c(e) ? "" : e.index + 1}</div>
@@ -156,21 +154,21 @@ const b = (a = class extends K {
                     <div class="arrow"></div>
                 </div>
             `;
-    }, z = u.find((e) => e.index == f), $ = u.find((e) => e.index == this._focusIndex), B = g`<div
+    }, j = u.find((e) => e.index == p), U = u.find((e) => e.index == this._focusIndex), N = g`<div
             class="sections"
             role="listbox"
-            aria-activedescendant="${I($ != null && $.index ? "stage-option-" + $.index : void 0)}"
+            aria-activedescendant="${I(U?.index ? "stage-option-" + U.index : void 0)}"
             aria-orientation="horizontal"
-            aria-valuenow=${I(z == null ? void 0 : z.label)}
+            aria-valuenow=${I(j?.label)}
             ?aria-readonly="${this._readonly}"
         >
-            ${Q(
+            ${J(
       u,
       (e) => e.id,
-      (e) => N(e)
+      (e) => W(e)
     )}
         </div>`;
-    return g`${B}${r}`;
+    return g`${N}${a}`;
   }
   onKeyDown(t) {
     this.isSpaceOrEnter(t) && (this._isSpaceOrEnterKeyDown = !0, t.preventDefault());
@@ -198,12 +196,12 @@ const b = (a = class extends K {
   fireValueChange() {
     this.dispatchEvent(new CustomEvent("value-change", { detail: { value: this.value } }));
   }
-}, a.ID = "sd-stage", a.ensureDefined = () => {
-  customElements.get(a.ID) || customElements.define(a.ID, a);
-}, a.shadowRootOptions = {
-  ...K.shadowRootOptions,
+}, i.ID = "sd-stage", i.ensureDefined = () => {
+  customElements.get(i.ID) || customElements.define(i.ID, i);
+}, i.shadowRootOptions = {
+  ...q.shadowRootOptions,
   delegatesFocus: !0
-}, a);
+}, i);
 O([
   S({ type: String })
 ], b.prototype, "validationMessage", 2);
@@ -211,7 +209,7 @@ O([
   S({ type: String })
 ], b.prototype, "validationIconSrc", 2);
 O([
-  S({ type: Y, reflect: !0 })
+  S({ type: Q, reflect: !0 })
 ], b.prototype, "validationLevel", 2);
 O([
   S({
@@ -226,9 +224,9 @@ O([
 O([
   S({ type: Boolean, attribute: !0, reflect: !0 })
 ], b.prototype, "readonly", 1);
-let oe = b;
-oe.ensureDefined();
+let te = b;
+te.ensureDefined();
 export {
-  oe as Stage
+  te as Stage
 };
 //# sourceMappingURL=stage.mjs.map

package/dist/stage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"stage.mjs","sources":["../stage.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, TemplateResult, PropertyValues, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [Stage.ID]: Stage;\n    }\n}\n\nimport style from \"./stage.scss?inline\";\n\nexport type ISelectionModelId = string | number;\n\nexport interface ISelectionModel {\n    id: ISelectionModelId;\n    label: string;\n}\n\nexport type SelectionModel = ISelectionModel | ISelectionModelId;\n\ninterface InternalSelectionModel extends ISelectionModel {\n    index?: number;\n}\n\ninterface PlaceholderModel extends InternalSelectionModel {\n    firstHiddenIndex: number;\n}\n\nfunction isSelectionModel(value: SelectionModel): value is ISelectionModel {\n    return (value as ISelectionModel).label != null && (value as ISelectionModel).id != null;\n}\n\nexport interface IValueChangeEvent {\n    value: ISelectionModelId;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n    \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport interface Stage {\n    addEventListener<K extends keyof CustomEventMap>(\n        event: K,\n        listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    addEventListener(\n        type: string,\n        callback: EventListenerOrEventListenerObject | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    removeEventListener<K extends keyof CustomEventMap>(\n        type: K,\n        listener: (this: this, ev: CustomEventMap[K]) => unknown,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    removeEventListener(\n        type: string,\n        listener: EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\nexport class Stage extends LitElement {\n    public static readonly ID = \"sd-stage\";\n\n    public static ensureDefined = (): void => {\n        if (!customElements.get(Stage.ID)) {\n            customElements.define(Stage.ID, Stage);\n        }\n    };\n\n    private _value: ISelectionModelId;\n    private _possibleValues: SelectionModel[];\n    private _renderedItems: SelectionModel[];\n    private _readonly: boolean;\n    private _resizeObserver: ResizeObserver;\n    private _isSpaceOrEnterKeyDown = false;\n    private _focusIndex = -1;\n    private _focusOutSuspended = false;\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    @property({ type: String })\n    public validationMessage: string;\n    @property({ type: String })\n    public validationIconSrc: string;\n    @property({ type: ValidationLevel, reflect: true })\n    public validationLevel: ValidationLevel;\n\n    @property({\n        reflect: true,\n        attribute: true,\n        converter: {\n            fromAttribute: (value: string | number) => value,\n            toAttribute: (value: ISelectionModelId): string | number => value,\n        },\n    })\n    get value(): ISelectionModelId {\n        return this._value;\n    }\n\n    set value(value: ISelectionModelId) {\n        if (this._value !== value) {\n            this._value = value;\n            this._focusIndex = this.getIndexOfSelection(this.value);\n            this.requestUpdate();\n        }\n    }\n\n    @property({ type: Boolean, attribute: true, reflect: true })\n    get readonly(): boolean {\n        return this._readonly;\n    }\n\n    set readonly(readonly: boolean) {\n        this._readonly = readonly;\n        this.classList.remove(\"readonly\");\n        if (this._readonly) {\n            this.classList.add(\"readonly\");\n        }\n        this.requestUpdate(\"readonly\");\n    }\n\n    get possibleValues(): SelectionModel[] {\n        return this._possibleValues;\n    }\n\n    set possibleValues(possibleValues: SelectionModel[]) {\n        this._possibleValues = possibleValues;\n        this.requestUpdate();\n    }\n\n    static shadowRootOptions: ShadowRootInit = {\n        ...LitElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    connectedCallback(): void {\n        super.connectedCallback();\n        this._resizeObserver = new ResizeObserver(this.requestUpdate.bind(this));\n        this._resizeObserver.observe(this);\n    }\n\n    private focusSibling(offset: number): void {\n        this.updateFocusIndex(this._focusIndex + offset);\n    }\n\n    private updateFocusIndex(index: number) {\n        if ((this.possibleValues || []).length == 0) {\n            return;\n        }\n        this._focusIndex = Math.min(Math.max(0, index), this.possibleValues.length - 1);\n        this._focusOutSuspended = true;\n        this.requestUpdate();\n        this.updateComplete.then(() => {\n            this._focusOutSuspended = false;\n            (this.shadowRoot.querySelector(\".focused\") as HTMLElement)?.focus();\n        });\n    }\n\n    private getIndexOfSelection(item: ISelectionModelId) {\n        if ((this.possibleValues || []).length == 0) {\n            return -1;\n        }\n        const index = this.possibleValues.map((p) => (isSelectionModel(p) ? p.id : p)).indexOf(item);\n        return index;\n    }\n\n    disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this._resizeObserver) {\n            this._resizeObserver.disconnect();\n            this._resizeObserver = null;\n        }\n    }\n\n    firstUpdated(_changedProperties: PropertyValues): void {\n        super.firstUpdated(_changedProperties);\n        this.updatePossibleValuesFromOptionElements();\n        this.addEventListener(\"keydown\", (e) => {\n            if (e.key == \"ArrowLeft\" || e.key == \"ArrowUp\") {\n                this.focusSibling(-1);\n                e.preventDefault();\n            } else if (e.key == \"ArrowRight\" || e.key == \"ArrowDown\") {\n                this.focusSibling(1);\n                e.preventDefault();\n            } else if (e.key == \"PageUp\") {\n                this.focusSibling(-this._renderedItems.length);\n                e.preventDefault();\n            } else if (e.key == \"PageDown\") {\n                this.focusSibling(this._renderedItems.length);\n                e.preventDefault();\n            }\n        });\n        this.addEventListener(\"focusout\", () => {\n            if (this._focusOutSuspended) {\n                return;\n            }\n            this._focusIndex = this.getIndexOfSelection(this.value);\n            this.requestUpdate();\n        });\n        this._focusIndex = this.getIndexOfSelection(this.value);\n    }\n\n    render(): TemplateResult {\n        let availableWidth = this.offsetWidth;\n\n        const optionsSlot = html`<slot @slotchange=${this.updatePossibleValuesFromOptionElements}></slot>`;\n        const validation = html`<sd-field-validation-message\n            class=\"validation-message\"\n            .message=${this.validationMessage}\n            .icon=${this.validationIconSrc}\n            .level=${this.validationLevel}\n        >\n        </sd-field-validation-message>`;\n\n        const baseTemplate = html`${optionsSlot}${validation}`;\n\n        if ((this._possibleValues || []).length === 0) {\n            return baseTemplate;\n        }\n\n        const values: InternalSelectionModel[] = this._possibleValues.map((p, i) => {\n            if (isSelectionModel(p)) {\n                return {\n                    ...p,\n                    index: i,\n                };\n            } else {\n                return {\n                    id: p,\n                    label: String(p),\n                    index: i,\n                };\n            }\n        });\n\n        const placeholder1: PlaceholderModel = {\n            label: \"...\",\n            id: \"placeholder1\",\n            index: -2,\n            firstHiddenIndex: 0,\n        };\n        const placeholder2: PlaceholderModel = {\n            label: \"...\",\n            id: \"placeholder2\",\n            index: values.length,\n            firstHiddenIndex: values.length,\n        };\n\n        const minItemWidth = 80;\n        const placeholderWidth = 48;\n\n        let allItems: InternalSelectionModel[] = [];\n        let valuesToRender: InternalSelectionModel[] = [];\n        const allItemsFit = availableWidth / minItemWidth >= values.length;\n\n        if (allItemsFit || values.length <= 2) {\n            valuesToRender = [...values];\n            allItems = [...values];\n        } else {\n            const computeMaxVisibleItems = () => Math.max(1, Math.floor(availableWidth / minItemWidth));\n\n            const resetComputationVariables = () => {\n                availableWidth = this.offsetWidth;\n            };\n\n            const computeVisibleRange = (focusIndex: number) => {\n                const center = Math.max(0, focusIndex);\n                let visibleItems = 0;\n                let needsHead;\n                let needsTail;\n\n                let start;\n                let end;\n                let oldStart;\n                let oldEnd;\n                let headOrTailChangedInThisRound;\n\n                do {\n                    oldStart = start;\n                    oldEnd = end;\n\n                    visibleItems = computeMaxVisibleItems();\n\n                    // determine indexes for the visible item slice\n                    start = Math.max(0, Math.min(Math.ceil(center - visibleItems / 2), values.length - visibleItems));\n                    end = start + visibleItems;\n\n                    headOrTailChangedInThisRound = false;\n                    if (start > 0 && !needsHead) {\n                        availableWidth -= placeholderWidth;\n                        needsHead = true;\n                        headOrTailChangedInThisRound = true;\n                    }\n                    if (!headOrTailChangedInThisRound && end < values.length && !needsTail) {\n                        availableWidth -= placeholderWidth;\n                        needsTail = true;\n                        headOrTailChangedInThisRound = true;\n                    }\n                } while (headOrTailChangedInThisRound || oldStart != start || oldEnd != end);\n                return { start, end };\n            };\n\n            let { start, end } = computeVisibleRange(this._focusIndex);\n\n            // show next item if possible\n            if (this._focusIndex > -1 && end - start >= 2 && end <= this._focusIndex + 1 && end < values.length) {\n                resetComputationVariables();\n                const updatedRange = computeVisibleRange(this._focusIndex + 1);\n                start = updatedRange.start;\n                end = updatedRange.end;\n            }\n\n            const centerItems = values.slice(start, end);\n\n            const placeholderHead = start > 0 ? [placeholder1] : [];\n            const placeholderTail = end < values.length ? [placeholder2] : [];\n            placeholder2.firstHiddenIndex = end;\n            valuesToRender = [...placeholderHead, ...centerItems, ...placeholderTail];\n            allItems = [...placeholderHead, ...values, ...placeholderTail];\n        }\n\n        const selectedIndex: number = this._value ? allItems.find((p) => p.id === this._value)?.index : -1;\n        const isPlaceholder = (item: InternalSelectionModel): item is PlaceholderModel =>\n            item == placeholder1 || item == placeholder2;\n        const isFocused = (item: InternalSelectionModel) => item.index == this._focusIndex;\n        const isSelected = (item: InternalSelectionModel) => {\n            return !isPlaceholder(item) && selectedIndex != null && item.index === selectedIndex;\n        };\n        const isActive = (item: InternalSelectionModel) =>\n            isPlaceholder(item) ? item.firstHiddenIndex <= selectedIndex : item.index < selectedIndex;\n        const getClassName = (item: InternalSelectionModel) => {\n            const hidden = valuesToRender.indexOf(item) == -1;\n            let styleName = \"section\";\n\n            if (selectedIndex != null) {\n                if (isSelected(item)) {\n                    styleName += \" selected\";\n                } else if (isActive(item)) {\n                    styleName += \" active\";\n                } else {\n                    styleName += \" inactive\";\n                }\n            } else {\n                styleName += \" inactive\";\n            }\n\n            if (isPlaceholder(item)) {\n                styleName += \" placeholder\";\n            }\n\n            if (isFocused(item)) {\n                styleName += \" focused\";\n            }\n            if (hidden) {\n                styleName += \" hidden\";\n            }\n            return styleName;\n        };\n        this._renderedItems = valuesToRender.filter((p) => !isPlaceholder(p));\n        const section = (p: InternalSelectionModel) => {\n            const onClick = () => {\n                if (isPlaceholder(p)) {\n                    if (p.index < 0) {\n                        this.focusSibling(-this._renderedItems.length);\n                    } else {\n                        this.focusSibling(this._renderedItems.length);\n                    }\n                    return;\n                }\n                if (this._readonly) {\n                    return;\n                }\n\n                this.value = p.id;\n                this.fireValueChange();\n            };\n            const index = allItems.indexOf(p);\n            const visuallyHidden = valuesToRender.indexOf(p) == -1;\n            const zIndex = visuallyHidden ? -1 : allItems.length - index;\n\n            return html`\n                <div\n                    role=\"option\"\n                    style=\"z-index: ${zIndex}\"\n                    id=\"${ifDefined(!isPlaceholder(p) && p.index ? \"stage-option-\" + p.index : undefined)}\"\n                    aria-hidden=\"${ifDefined(isPlaceholder(p) ? true : undefined)}\"\n                    aria-selected=${ifDefined(\n                        this._readonly || isPlaceholder(p) ? undefined : isSelected(p) ? \"true\" : \"false\",\n                    )}\n                    tabindex=\"${isFocused(p) ? 0 : -1}\"\n                    @keydown=\"${(e) => this.onKeyDown(e)}\"\n                    @keyup=\"${(e) => this.onKeyUp(e, () => onClick())}\"\n                    @click=\"${() => onClick()}\"\n                    class=\"${getClassName(p)}\"\n                >\n                    <div class=\"content\" title=\"${p.label}\">\n                        <div class=\"index\" aria-hidden=\"true\">${isPlaceholder(p) ? \"\" : p.index + 1}</div>\n                        <div class=\"label\">${p.label}</div>\n                    </div>\n                    <div class=\"arrow\"></div>\n                </div>\n            `;\n        };\n        const selected = allItems.find((p) => p.index == selectedIndex);\n        const focused = allItems.find((p) => p.index == this._focusIndex);\n        const sections = html`<div\n            class=\"sections\"\n            role=\"listbox\"\n            aria-activedescendant=\"${ifDefined(focused?.index ? \"stage-option-\" + focused.index : undefined)}\"\n            aria-orientation=\"horizontal\"\n            aria-valuenow=${ifDefined(selected?.label)}\n            ?aria-readonly=\"${this._readonly}\"\n        >\n            ${repeat(\n                allItems,\n                (p) => p.id,\n                (p) => section(p),\n            )}\n        </div>`;\n\n        return html`${sections}${baseTemplate}`;\n    }\n\n    private onKeyDown(e: KeyboardEvent): void {\n        if (this.isSpaceOrEnter(e)) {\n            this._isSpaceOrEnterKeyDown = true;\n            e.preventDefault(); // prevent potential scroll-down triggered by space\n        }\n    }\n\n    private onKeyUp(e: KeyboardEvent, onClick: VoidFunction): void {\n        if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n            this._isSpaceOrEnterKeyDown = false;\n            onClick();\n        }\n    }\n\n    private updatePossibleValuesFromOptionElements(): void {\n        const options: HTMLOptionElement[] = Array.prototype.map.call(\n            this.querySelectorAll(\"option\"),\n            (p) => p as HTMLOptionElement,\n        );\n        this.possibleValues =\n            options.length > 0 ? options.map((p) => ({ id: p.value, label: p.innerText })) : this.possibleValues;\n    }\n\n    private isSpaceOrEnter(event: KeyboardEvent): boolean {\n        switch (event.key) {\n            case \" \":\n            case \"Space\":\n            case \"Enter\":\n                return true;\n            default:\n                return false;\n        }\n    }\n\n    private fireValueChange(): void {\n        this.dispatchEvent(new CustomEvent<IValueChangeEvent>(`value-change`, { detail: { value: this.value } }));\n    }\n}\n\nStage.ensureDefined();\n"],"names":["isSelectionModel","value","_Stage","_a","LitElement","css","unsafeCSS","style","readonly","possibleValues","offset","index","item","p","_changedProperties","e","availableWidth","optionsSlot","html","validation","baseTemplate","values","i","placeholder1","placeholder2","minItemWidth","placeholderWidth","allItems","valuesToRender","computeMaxVisibleItems","resetComputationVariables","computeVisibleRange","focusIndex","center","visibleItems","needsHead","needsTail","start","end","oldStart","oldEnd","headOrTailChangedInThisRound","updatedRange","centerItems","placeholderHead","placeholderTail","selectedIndex","isPlaceholder","isFocused","isSelected","isActive","getClassName","hidden","styleName","section","onClick","zIndex","ifDefined","selected","focused","sections","repeat","options","event","__decorateClass","property","ValidationLevel","Stage"],"mappings":"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"}
+{"version":3,"file":"stage.mjs","sources":["../stage.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, TemplateResult, PropertyValues, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [Stage.ID]: Stage;\n    }\n}\n\nimport style from \"./stage.scss?inline\";\n\nexport type ISelectionModelId = string | number;\n\nexport interface ISelectionModel {\n    id: ISelectionModelId;\n    label: string;\n}\n\nexport type SelectionModel = ISelectionModel | ISelectionModelId;\n\ninterface InternalSelectionModel extends ISelectionModel {\n    index?: number;\n}\n\ninterface PlaceholderModel extends InternalSelectionModel {\n    firstHiddenIndex: number;\n}\n\nfunction isSelectionModel(value: SelectionModel): value is ISelectionModel {\n    return (value as ISelectionModel).label != null && (value as ISelectionModel).id != null;\n}\n\nexport interface IValueChangeEvent {\n    value: ISelectionModelId;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n    \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport interface Stage {\n    addEventListener<K extends keyof CustomEventMap>(\n        event: K,\n        listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    addEventListener(\n        type: string,\n        callback: EventListenerOrEventListenerObject | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    removeEventListener<K extends keyof CustomEventMap>(\n        type: K,\n        listener: (this: this, ev: CustomEventMap[K]) => unknown,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    removeEventListener(\n        type: string,\n        listener: EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\nexport class Stage extends LitElement {\n    public static readonly ID = \"sd-stage\";\n\n    public static ensureDefined = (): void => {\n        if (!customElements.get(Stage.ID)) {\n            customElements.define(Stage.ID, Stage);\n        }\n    };\n\n    private _value: ISelectionModelId;\n    private _possibleValues: SelectionModel[];\n    private _renderedItems: SelectionModel[];\n    private _readonly: boolean;\n    private _resizeObserver: ResizeObserver;\n    private _isSpaceOrEnterKeyDown = false;\n    private _focusIndex = -1;\n    private _focusOutSuspended = false;\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    @property({ type: String })\n    public validationMessage: string;\n    @property({ type: String })\n    public validationIconSrc: string;\n    @property({ type: ValidationLevel, reflect: true })\n    public validationLevel: ValidationLevel;\n\n    @property({\n        reflect: true,\n        attribute: true,\n        converter: {\n            fromAttribute: (value: string | number) => value,\n            toAttribute: (value: ISelectionModelId): string | number => value,\n        },\n    })\n    get value(): ISelectionModelId {\n        return this._value;\n    }\n\n    set value(value: ISelectionModelId) {\n        if (this._value !== value) {\n            this._value = value;\n            this._focusIndex = this.getIndexOfSelection(this.value);\n            this.requestUpdate();\n        }\n    }\n\n    @property({ type: Boolean, attribute: true, reflect: true })\n    get readonly(): boolean {\n        return this._readonly;\n    }\n\n    set readonly(readonly: boolean) {\n        this._readonly = readonly;\n        this.classList.remove(\"readonly\");\n        if (this._readonly) {\n            this.classList.add(\"readonly\");\n        }\n        this.requestUpdate(\"readonly\");\n    }\n\n    get possibleValues(): SelectionModel[] {\n        return this._possibleValues;\n    }\n\n    set possibleValues(possibleValues: SelectionModel[]) {\n        this._possibleValues = possibleValues;\n        this.requestUpdate();\n    }\n\n    static shadowRootOptions: ShadowRootInit = {\n        ...LitElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    connectedCallback(): void {\n        super.connectedCallback();\n        this._resizeObserver = new ResizeObserver(this.requestUpdate.bind(this));\n        this._resizeObserver.observe(this);\n    }\n\n    private focusSibling(offset: number): void {\n        this.updateFocusIndex(this._focusIndex + offset);\n    }\n\n    private updateFocusIndex(index: number) {\n        if ((this.possibleValues || []).length == 0) {\n            return;\n        }\n        this._focusIndex = Math.min(Math.max(0, index), this.possibleValues.length - 1);\n        this._focusOutSuspended = true;\n        this.requestUpdate();\n        this.updateComplete.then(() => {\n            this._focusOutSuspended = false;\n            (this.shadowRoot.querySelector(\".focused\") as HTMLElement)?.focus();\n        });\n    }\n\n    private getIndexOfSelection(item: ISelectionModelId) {\n        if ((this.possibleValues || []).length == 0) {\n            return -1;\n        }\n        const index = this.possibleValues.map((p) => (isSelectionModel(p) ? p.id : p)).indexOf(item);\n        return index;\n    }\n\n    disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this._resizeObserver) {\n            this._resizeObserver.disconnect();\n            this._resizeObserver = null;\n        }\n    }\n\n    firstUpdated(_changedProperties: PropertyValues): void {\n        super.firstUpdated(_changedProperties);\n        this.updatePossibleValuesFromOptionElements();\n        this.addEventListener(\"keydown\", (e) => {\n            if (e.key == \"ArrowLeft\" || e.key == \"ArrowUp\") {\n                this.focusSibling(-1);\n                e.preventDefault();\n            } else if (e.key == \"ArrowRight\" || e.key == \"ArrowDown\") {\n                this.focusSibling(1);\n                e.preventDefault();\n            } else if (e.key == \"PageUp\") {\n                this.focusSibling(-this._renderedItems.length);\n                e.preventDefault();\n            } else if (e.key == \"PageDown\") {\n                this.focusSibling(this._renderedItems.length);\n                e.preventDefault();\n            }\n        });\n        this.addEventListener(\"focusout\", () => {\n            if (this._focusOutSuspended) {\n                return;\n            }\n            this._focusIndex = this.getIndexOfSelection(this.value);\n            this.requestUpdate();\n        });\n        this._focusIndex = this.getIndexOfSelection(this.value);\n    }\n\n    render(): TemplateResult {\n        let availableWidth = this.offsetWidth;\n\n        const optionsSlot = html`<slot @slotchange=${this.updatePossibleValuesFromOptionElements}></slot>`;\n        const validation = html`<sd-field-validation-message\n            class=\"validation-message\"\n            .message=${this.validationMessage}\n            .icon=${this.validationIconSrc}\n            .level=${this.validationLevel}\n        >\n        </sd-field-validation-message>`;\n\n        const baseTemplate = html`${optionsSlot}${validation}`;\n\n        if ((this._possibleValues || []).length === 0) {\n            return baseTemplate;\n        }\n\n        const values: InternalSelectionModel[] = this._possibleValues.map((p, i) => {\n            if (isSelectionModel(p)) {\n                return {\n                    ...p,\n                    index: i,\n                };\n            } else {\n                return {\n                    id: p,\n                    label: String(p),\n                    index: i,\n                };\n            }\n        });\n\n        const placeholder1: PlaceholderModel = {\n            label: \"...\",\n            id: \"placeholder1\",\n            index: -2,\n            firstHiddenIndex: 0,\n        };\n        const placeholder2: PlaceholderModel = {\n            label: \"...\",\n            id: \"placeholder2\",\n            index: values.length,\n            firstHiddenIndex: values.length,\n        };\n\n        const minItemWidth = 80;\n        const placeholderWidth = 48;\n\n        let allItems: InternalSelectionModel[] = [];\n        let valuesToRender: InternalSelectionModel[] = [];\n        const allItemsFit = availableWidth / minItemWidth >= values.length;\n\n        if (allItemsFit || values.length <= 2) {\n            valuesToRender = [...values];\n            allItems = [...values];\n        } else {\n            const computeMaxVisibleItems = () => Math.max(1, Math.floor(availableWidth / minItemWidth));\n\n            const resetComputationVariables = () => {\n                availableWidth = this.offsetWidth;\n            };\n\n            const computeVisibleRange = (focusIndex: number) => {\n                const center = Math.max(0, focusIndex);\n                let visibleItems = 0;\n                let needsHead;\n                let needsTail;\n\n                let start;\n                let end;\n                let oldStart;\n                let oldEnd;\n                let headOrTailChangedInThisRound;\n\n                do {\n                    oldStart = start;\n                    oldEnd = end;\n\n                    visibleItems = computeMaxVisibleItems();\n\n                    // determine indexes for the visible item slice\n                    start = Math.max(0, Math.min(Math.ceil(center - visibleItems / 2), values.length - visibleItems));\n                    end = start + visibleItems;\n\n                    headOrTailChangedInThisRound = false;\n                    if (start > 0 && !needsHead) {\n                        availableWidth -= placeholderWidth;\n                        needsHead = true;\n                        headOrTailChangedInThisRound = true;\n                    }\n                    if (!headOrTailChangedInThisRound && end < values.length && !needsTail) {\n                        availableWidth -= placeholderWidth;\n                        needsTail = true;\n                        headOrTailChangedInThisRound = true;\n                    }\n                } while (headOrTailChangedInThisRound || oldStart != start || oldEnd != end);\n                return { start, end };\n            };\n\n            let { start, end } = computeVisibleRange(this._focusIndex);\n\n            // show next item if possible\n            if (this._focusIndex > -1 && end - start >= 2 && end <= this._focusIndex + 1 && end < values.length) {\n                resetComputationVariables();\n                const updatedRange = computeVisibleRange(this._focusIndex + 1);\n                start = updatedRange.start;\n                end = updatedRange.end;\n            }\n\n            const centerItems = values.slice(start, end);\n\n            const placeholderHead = start > 0 ? [placeholder1] : [];\n            const placeholderTail = end < values.length ? [placeholder2] : [];\n            placeholder2.firstHiddenIndex = end;\n            valuesToRender = [...placeholderHead, ...centerItems, ...placeholderTail];\n            allItems = [...placeholderHead, ...values, ...placeholderTail];\n        }\n\n        const selectedIndex: number = this._value ? allItems.find((p) => p.id === this._value)?.index : -1;\n        const isPlaceholder = (item: InternalSelectionModel): item is PlaceholderModel =>\n            item == placeholder1 || item == placeholder2;\n        const isFocused = (item: InternalSelectionModel) => item.index == this._focusIndex;\n        const isSelected = (item: InternalSelectionModel) => {\n            return !isPlaceholder(item) && selectedIndex != null && item.index === selectedIndex;\n        };\n        const isActive = (item: InternalSelectionModel) =>\n            isPlaceholder(item) ? item.firstHiddenIndex <= selectedIndex : item.index < selectedIndex;\n        const getClassName = (item: InternalSelectionModel) => {\n            const hidden = valuesToRender.indexOf(item) == -1;\n            let styleName = \"section\";\n\n            if (selectedIndex != null) {\n                if (isSelected(item)) {\n                    styleName += \" selected\";\n                } else if (isActive(item)) {\n                    styleName += \" active\";\n                } else {\n                    styleName += \" inactive\";\n                }\n            } else {\n                styleName += \" inactive\";\n            }\n\n            if (isPlaceholder(item)) {\n                styleName += \" placeholder\";\n            }\n\n            if (isFocused(item)) {\n                styleName += \" focused\";\n            }\n            if (hidden) {\n                styleName += \" hidden\";\n            }\n            return styleName;\n        };\n        this._renderedItems = valuesToRender.filter((p) => !isPlaceholder(p));\n        const section = (p: InternalSelectionModel) => {\n            const onClick = () => {\n                if (isPlaceholder(p)) {\n                    if (p.index < 0) {\n                        this.focusSibling(-this._renderedItems.length);\n                    } else {\n                        this.focusSibling(this._renderedItems.length);\n                    }\n                    return;\n                }\n                if (this._readonly) {\n                    return;\n                }\n\n                this.value = p.id;\n                this.fireValueChange();\n            };\n            const index = allItems.indexOf(p);\n            const visuallyHidden = valuesToRender.indexOf(p) == -1;\n            const zIndex = visuallyHidden ? -1 : allItems.length - index;\n\n            return html`\n                <div\n                    role=\"option\"\n                    style=\"z-index: ${zIndex}\"\n                    id=\"${ifDefined(!isPlaceholder(p) && p.index ? \"stage-option-\" + p.index : undefined)}\"\n                    aria-hidden=\"${ifDefined(isPlaceholder(p) ? true : undefined)}\"\n                    aria-selected=${ifDefined(\n                        this._readonly || isPlaceholder(p) ? undefined : isSelected(p) ? \"true\" : \"false\",\n                    )}\n                    tabindex=\"${isFocused(p) ? 0 : -1}\"\n                    @keydown=\"${(e) => this.onKeyDown(e)}\"\n                    @keyup=\"${(e) => this.onKeyUp(e, () => onClick())}\"\n                    @click=\"${() => onClick()}\"\n                    class=\"${getClassName(p)}\"\n                >\n                    <div class=\"content\" title=\"${p.label}\">\n                        <div class=\"index\" aria-hidden=\"true\">${isPlaceholder(p) ? \"\" : p.index + 1}</div>\n                        <div class=\"label\">${p.label}</div>\n                    </div>\n                    <div class=\"arrow\"></div>\n                </div>\n            `;\n        };\n        const selected = allItems.find((p) => p.index == selectedIndex);\n        const focused = allItems.find((p) => p.index == this._focusIndex);\n        const sections = html`<div\n            class=\"sections\"\n            role=\"listbox\"\n            aria-activedescendant=\"${ifDefined(focused?.index ? \"stage-option-\" + focused.index : undefined)}\"\n            aria-orientation=\"horizontal\"\n            aria-valuenow=${ifDefined(selected?.label)}\n            ?aria-readonly=\"${this._readonly}\"\n        >\n            ${repeat(\n                allItems,\n                (p) => p.id,\n                (p) => section(p),\n            )}\n        </div>`;\n\n        return html`${sections}${baseTemplate}`;\n    }\n\n    private onKeyDown(e: KeyboardEvent): void {\n        if (this.isSpaceOrEnter(e)) {\n            this._isSpaceOrEnterKeyDown = true;\n            e.preventDefault(); // prevent potential scroll-down triggered by space\n        }\n    }\n\n    private onKeyUp(e: KeyboardEvent, onClick: VoidFunction): void {\n        if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n            this._isSpaceOrEnterKeyDown = false;\n            onClick();\n        }\n    }\n\n    private updatePossibleValuesFromOptionElements(): void {\n        const options: HTMLOptionElement[] = Array.prototype.map.call(\n            this.querySelectorAll(\"option\"),\n            (p) => p as HTMLOptionElement,\n        );\n        this.possibleValues =\n            options.length > 0 ? options.map((p) => ({ id: p.value, label: p.innerText })) : this.possibleValues;\n    }\n\n    private isSpaceOrEnter(event: KeyboardEvent): boolean {\n        switch (event.key) {\n            case \" \":\n            case \"Space\":\n            case \"Enter\":\n                return true;\n            default:\n                return false;\n        }\n    }\n\n    private fireValueChange(): void {\n        this.dispatchEvent(new CustomEvent<IValueChangeEvent>(`value-change`, { detail: { value: this.value } }));\n    }\n}\n\nStage.ensureDefined();\n"],"names":["isSelectionModel","value","_Stage","_a","LitElement","css","unsafeCSS","style","readonly","possibleValues","offset","index","item","p","_changedProperties","e","availableWidth","optionsSlot","html","validation","baseTemplate","values","i","placeholder1","placeholder2","minItemWidth","placeholderWidth","allItems","valuesToRender","computeMaxVisibleItems","resetComputationVariables","computeVisibleRange","focusIndex","center","visibleItems","needsHead","needsTail","start","end","oldStart","oldEnd","headOrTailChangedInThisRound","updatedRange","centerItems","placeholderHead","placeholderTail","selectedIndex","isPlaceholder","isFocused","isSelected","isActive","getClassName","hidden","styleName","section","onClick","zIndex","ifDefined","selected","focused","sections","repeat","options","event","__decorateClass","property","ValidationLevel","Stage"],"mappings":"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"}