@cas-smartdesign/stage 3.0.1

package/dist/stage.d.ts

@@ -0,0 +1,61 @@
+import { LitElement, TemplateResult, PropertyValues } from "lit";
+import { ValidationLevel } from "@cas-smartdesign/field-validation-message";
+declare global {
+    interface HTMLElementTagNameMap {
+        [Stage.ID]: Stage;
+    }
+}
+export type ISelectionModelId = string | number;
+export interface ISelectionModel {
+    id: ISelectionModelId;
+    label: string;
+}
+export type SelectionModel = ISelectionModel | ISelectionModelId;
+export interface IValueChangeEvent {
+    value: ISelectionModelId;
+}
+export interface CustomEventMap extends HTMLElementEventMap {
+    "value-change": CustomEvent<IValueChangeEvent>;
+}
+export interface Stage {
+    addEventListener<K extends keyof CustomEventMap>(event: K, listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null, options?: AddEventListenerOptions | boolean): void;
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+    removeEventListener<K extends keyof CustomEventMap>(type: K, listener: (this: this, ev: CustomEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;
+}
+export declare class Stage extends LitElement {
+    static readonly ID = "sd-stage";
+    static ensureDefined: () => void;
+    private _value;
+    private _possibleValues;
+    private _renderedItems;
+    private _readonly;
+    private _resizeObserver;
+    private _isSpaceOrEnterKeyDown;
+    private _focusIndex;
+    private _focusOutSuspended;
+    static get styles(): import("lit").CSSResult[];
+    validationMessage: string;
+    validationIconSrc: string;
+    validationLevel: ValidationLevel;
+    get value(): ISelectionModelId;
+    set value(value: ISelectionModelId);
+    get readonly(): boolean;
+    set readonly(readonly: boolean);
+    get possibleValues(): SelectionModel[];
+    set possibleValues(possibleValues: SelectionModel[]);
+    static shadowRootOptions: ShadowRootInit;
+    connectedCallback(): void;
+    private focusSibling;
+    private updateFocusIndex;
+    private getIndexOfSelection;
+    disconnectedCallback(): void;
+    firstUpdated(_changedProperties: PropertyValues): void;
+    render(): TemplateResult;
+    private onKeyDown;
+    private onKeyUp;
+    private updatePossibleValuesFromOptionElements;
+    private isSpaceOrEnter;
+    private fireValueChange;
+}

package/dist/stage.mjs

@@ -0,0 +1,234 @@
+import { LitElement as K, css as X, unsafeCSS as J, html as g } from "lit";
+import { property as S } from "lit/decorators/property.js";
+import { repeat as Q } 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;
+};
+function T(l) {
+  return l.label != null && l.id != null;
+}
+var a;
+const b = (a = class extends K {
+  constructor() {
+    super(...arguments), this._isSpaceOrEnterKeyDown = !1, this._focusIndex = -1, this._focusOutSuspended = !1;
+  }
+  static get styles() {
+    return [
+      X`
+                ${J(Z)}
+            `
+    ];
+  }
+  get value() {
+    return this._value;
+  }
+  set value(t) {
+    this._value !== t && (this._value = t, this._focusIndex = this.getIndexOfSelection(this.value), this.requestUpdate());
+  }
+  get readonly() {
+    return this._readonly;
+  }
+  set readonly(t) {
+    this._readonly = t, this.classList.remove("readonly"), this._readonly && this.classList.add("readonly"), this.requestUpdate("readonly");
+  }
+  get possibleValues() {
+    return this._possibleValues;
+  }
+  set possibleValues(t) {
+    this._possibleValues = t, this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver = new ResizeObserver(this.requestUpdate.bind(this)), this._resizeObserver.observe(this);
+  }
+  focusSibling(t) {
+    this.updateFocusIndex(this._focusIndex + t);
+  }
+  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();
+    }));
+  }
+  getIndexOfSelection(t) {
+    return (this.possibleValues || []).length == 0 ? -1 : this.possibleValues.map((i) => T(i) ? i.id : i).indexOf(t);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null);
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.updatePossibleValuesFromOptionElements(), this.addEventListener("keydown", (o) => {
+      o.key == "ArrowLeft" || o.key == "ArrowUp" ? (this.focusSibling(-1), o.preventDefault()) : o.key == "ArrowRight" || o.key == "ArrowDown" ? (this.focusSibling(1), o.preventDefault()) : o.key == "PageUp" ? (this.focusSibling(-this._renderedItems.length), o.preventDefault()) : o.key == "PageDown" && (this.focusSibling(this._renderedItems.length), o.preventDefault());
+    }), this.addEventListener("focusout", () => {
+      this._focusOutSuspended || (this._focusIndex = this.getIndexOfSelection(this.value), this.requestUpdate());
+    }), 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
+            class="validation-message"
+            .message=${this.validationMessage}
+            .icon=${this.validationIconSrc}
+            .level=${this.validationLevel}
+        >
+        </sd-field-validation-message>`, r = g`${o}${i}`;
+    if ((this._possibleValues || []).length === 0)
+      return r;
+    const s = this._possibleValues.map((e, d) => T(e) ? {
+      ...e,
+      index: d
+    } : {
+      id: e,
+      label: String(e),
+      index: d
+    }), p = {
+      label: "...",
+      id: "placeholder1",
+      index: -2,
+      firstHiddenIndex: 0
+    }, D = {
+      label: "...",
+      id: "placeholder2",
+      index: s.length,
+      firstHiddenIndex: s.length
+    }, E = 80, C = 48;
+    let u = [], m = [];
+    if (t / E >= s.length || s.length <= 2)
+      m = [...s], u = [...s];
+    else {
+      const e = () => Math.max(1, Math.floor(t / E)), d = () => {
+        t = this.offsetWidth;
+      }, n = (k) => {
+        const G = Math.max(0, k);
+        let V = 0, L, R, v, w, q, H, _;
+        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);
+        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 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 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 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;
+    };
+    this._renderedItems = m.filter((e) => !c(e));
+    const N = (e) => {
+      const d = () => {
+        if (c(e)) {
+          e.index < 0 ? this.focusSibling(-this._renderedItems.length) : this.focusSibling(this._renderedItems.length);
+          return;
+        }
+        this._readonly || (this.value = e.id, this.fireValueChange());
+      }, n = u.indexOf(e), h = m.indexOf(e) == -1 ? -1 : u.length - n;
+      return g`
+                <div
+                    role="option"
+                    style="z-index: ${h}"
+                    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"
+      )}
+                    tabindex="${U(e) ? 0 : -1}"
+                    @keydown="${(y) => this.onKeyDown(y)}"
+                    @keyup="${(y) => this.onKeyUp(y, () => d())}"
+                    @click="${() => d()}"
+                    class="${j(e)}"
+                >
+                    <div class="content" title="${e.label}">
+                        <div class="index" aria-hidden="true">${c(e) ? "" : e.index + 1}</div>
+                        <div class="label">${e.label}</div>
+                    </div>
+                    <div class="arrow"></div>
+                </div>
+            `;
+    }, z = u.find((e) => e.index == f), $ = u.find((e) => e.index == this._focusIndex), B = g`<div
+            class="sections"
+            role="listbox"
+            aria-activedescendant="${I($ != null && $.index ? "stage-option-" + $.index : void 0)}"
+            aria-orientation="horizontal"
+            aria-valuenow=${I(z == null ? void 0 : z.label)}
+            ?aria-readonly="${this._readonly}"
+        >
+            ${Q(
+      u,
+      (e) => e.id,
+      (e) => N(e)
+    )}
+        </div>`;
+    return g`${B}${r}`;
+  }
+  onKeyDown(t) {
+    this.isSpaceOrEnter(t) && (this._isSpaceOrEnterKeyDown = !0, t.preventDefault());
+  }
+  onKeyUp(t, o) {
+    this.isSpaceOrEnter(t) && this._isSpaceOrEnterKeyDown == !0 && (this._isSpaceOrEnterKeyDown = !1, o());
+  }
+  updatePossibleValuesFromOptionElements() {
+    const t = Array.prototype.map.call(
+      this.querySelectorAll("option"),
+      (o) => o
+    );
+    this.possibleValues = t.length > 0 ? t.map((o) => ({ id: o.value, label: o.innerText })) : this.possibleValues;
+  }
+  isSpaceOrEnter(t) {
+    switch (t.key) {
+      case " ":
+      case "Space":
+      case "Enter":
+        return !0;
+      default:
+        return !1;
+    }
+  }
+  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,
+  delegatesFocus: !0
+}, a);
+O([
+  S({ type: String })
+], b.prototype, "validationMessage", 2);
+O([
+  S({ type: String })
+], b.prototype, "validationIconSrc", 2);
+O([
+  S({ type: Y, reflect: !0 })
+], b.prototype, "validationLevel", 2);
+O([
+  S({
+    reflect: !0,
+    attribute: !0,
+    converter: {
+      fromAttribute: (l) => l,
+      toAttribute: (l) => l
+    }
+  })
+], b.prototype, "value", 1);
+O([
+  S({ type: Boolean, attribute: !0, reflect: !0 })
+], b.prototype, "readonly", 1);
+let oe = b;
+oe.ensureDefined();
+export {
+  oe as Stage
+};
+//# sourceMappingURL=stage.mjs.map

package/dist/stage.mjs.map

@@ -0,0 +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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"}

package/npm-third-party-licenses.json

@@ -0,0 +1,192 @@
+{
+    "@cypress/vite-dev-server@5.0.7": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
+    },
+    "@rollup/plugin-node-resolve@15.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/rollup/plugins",
+        "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
+    },
+    "@types/node@20.10.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@types/postcss-prefix-selector@1.16.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/eslint-plugin@6.17.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/parser@6.17.0": {
+        "licenses": "BSD-2-Clause",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@vitest/coverage-v8@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "@vitest/ui@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "axe-core@4.8.3": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/dequelabs/axe-core",
+        "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
+    },
+    "cypress-axe@1.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/component-driven/cypress-axe",
+        "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
+    },
+    "cypress-real-events@1.13.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
+        "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
+    },
+    "cypress@13.6.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://cypress.io"
+    },
+    "esbuild@0.19.11": {
+        "licenses": "MIT",
+        "repository": "https://github.com/evanw/esbuild",
+        "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
+    },
+    "eslint-config-google@0.14.0": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/google/eslint-config-google",
+        "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
+    },
+    "eslint-config-prettier@9.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/eslint-config-prettier",
+        "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
+    },
+    "eslint@8.56.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/eslint/eslint",
+        "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
+    },
+    "github-markdown-css@5.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/github-markdown-css",
+        "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
+    },
+    "highlight.js@11.9.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/highlightjs/highlight.js",
+        "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
+    },
+    "junit-report-builder@3.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/davidparsson/junit-report-builder",
+        "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
+    },
+    "lint-staged@15.2.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/okonet/lint-staged",
+        "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
+    },
+    "lit@2.8.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/lit/lit",
+        "licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
+    },
+    "marked@11.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/markedjs/marked",
+        "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
+    },
+    "postcss-prefix-selector@1.16.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/RadValentin/postcss-prefix-selector",
+        "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
+    },
+    "postcss@8.4.32": {
+        "licenses": "MIT",
+        "repository": "https://github.com/postcss/postcss",
+        "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
+    },
+    "prettier@3.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/prettier",
+        "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
+    },
+    "resolve-pkg@2.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/resolve-pkg",
+        "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
+    },
+    "sass@1.69.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sass/dart-sass",
+        "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-recommended-scss@14.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-standard@36.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint-config-standard",
+        "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
+    },
+    "stylelint-scss@6.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint@16.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint",
+        "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
+    },
+    "tsup@8.0.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/egoist/tsup",
+        "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
+    },
+    "turbo@1.11.2": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/vercel/turbo",
+        "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
+    },
+    "typescript@5.3.3": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/Microsoft/TypeScript",
+        "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
+    },
+    "vite-tsconfig-paths@4.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
+        "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
+    },
+    "vite@5.0.10": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitejs/vite",
+        "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
+    },
+    "vitest@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
+    },
+    "yargs@17.7.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/yargs/yargs",
+        "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
+    }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@cas-smartdesign/stage",
+  "version": "3.0.1",
+  "description": "An element which can be used to represent the progress in a given workflow",
+  "main": "dist/stage-with-externals.js",
+  "module": "dist/stage.mjs",
+  "types": "dist/stage.d.ts",
+  "license": "SEE LICENSE IN LICENSE",
+  "dependencies": {
+    "lit": "^2.8.0",
+    "@cas-smartdesign/field-validation-message": "^5.0.1"
+  },
+  "devDependencies": {
+    "@cas-smartdesign/element-preview": "^0.2.1",
+    "@cas-smartdesign/license-generator": "^1.6.1"
+  },
+  "files": [
+    "dist",
+    "npm-third-party-licenses.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "version": "pnpm version",
+    "generate-declaration": "tsc -p tsconfig.types.json",
+    "build:no-license": "vite build && pnpm generate-declaration && vite build --mode documentation",
+    "build": "pnpm generate-license && pnpm build:no-license",
+    "watch": "vite build --watch",
+    "dev": "vite",
+    "generate-license": "sd-license-generator --r ../../"
+  }
+}

package/readme.md

@@ -0,0 +1,58 @@
+# @cas-smartdesign/stage
+
+An element which can be used to represent the progress in a given workflow
+
+## Attributes
+
+- `value`: **_string|number (default: undefined)_**
+  - The current value of the element
+- `readonly`: **_boolean (default: false)_**
+  - A flag which determines whether the value can be changed or not
+
+## Properties
+
+- `value`: **_string|number (default: undefined)_**
+  - The current value of the element
+- `readonly`: **_boolean (default: false)_**
+  - A flag which determines whether the value can be changed or not
+- `possibleValues`: **_SelectionModel[] (default: undefined)_**
+  - A collection of possible values. Examples:
+    - `[1,2,3]`
+    - `["A","B","C"]`
+    - `[{id: "0x12345", label: "A"}, {id: "0x67890", label: "B"}]`
+
+## Events
+
+- `value-change`
+  - Dispatched when the value is changed by user interaction. Contains the current value in the event details.
+
+## Validation
+
+The element could show validation messages via an `sd-field-validation-message` element which can be configured with the following attributes & properties which are all delegated to that:
+
+- `validationMessage`
+- `validationIconSrc`
+- `validationLevel`
+
+## Styling
+
+The element is configured to use `@cas-smartdesign/design-tokens` package and in addition allows component level customization too via the following css properties:
+
+- `--component-stage-border-color`
+- `--component-stage-border-focus-color`
+- `--component-stage-border-highlight-color`
+- `--component-stage-inactive-color`
+- `--component-stage-active-color`
+- `--component-stage-selected-color`
+- `--component-stage-hover-color`
+- `--component-stage-focus-color`
+- `--component-stage-font-color`
+- `--component-stage-font-inactive-color`
+- `--component-stage-font-selected-color`
+- `--component-stage-font-hover-color`
+- `--component-stage-font-focus-color`
+- `--component-stage-font-size`
+- `--component-stage-font-family`
+- `--component-stage-transition-time-short`
+
+## Examples