@cas-smartdesign/list 6.3.1 → 6.3.2

package/dist/list.mjs

@@ -1,5 +1,5 @@
 import { ElementBase as h } from "@cas-smartdesign/element-base";
-import d, { generator as u } from "@cas-smartdesign/list-item";
+import l, { generator as u } from "@cas-smartdesign/list-item";
 const f = `<style>
 	:host {
 		background-color: var(--sd-list-base-background-color, white);
@@ -34,7 +34,7 @@ const f = `<style>
 </div>
 `;
 let m = 0;
-const o = class o extends h {
+const n = class n extends h {
   constructor() {
     super(), this._items = [], this._selectedIndexes = [], this._itemGenerator = u, this.onDefaultSlotChange = () => {
       let e = 0;
@@ -70,7 +70,7 @@ const o = class o extends h {
           break;
       }
       t && (e.preventDefault(), e.stopPropagation());
-    }, this._fallbackId = o.ID + "_" + m++, this.addEventListener("pointerup", (e) => {
+    }, this._fallbackId = n.ID + "_" + m++, this.addEventListener("pointerup", (e) => {
       this.focusIndex = this.getListItems.indexOf(e.target), this.updateFocusedElement();
     }), this.addEventListener("focus", () => {
       this.matches(":focus-visible") && (this.focusIndex == -1 ? (this.selectedIndexes && (this.focusIndex = this.selectedIndexes[0]), this.focusIndex == -1 && this.childElementCount > 0 && (this.focusIndex = 0)) : this.updateFocusedElement());
@@ -129,7 +129,7 @@ const o = class o extends h {
     return ["focus-index", "focus-target"];
   }
   is() {
-    return o.ID;
+    return n.ID;
   }
   template() {
     const e = document.createElement("template");
@@ -166,15 +166,15 @@ const o = class o extends h {
       if (e == 0 || i.endsWith("px") && s < Number.parseInt(i))
         this.enableLineClampOnItemsIfNeeded();
       else {
-        const n = [...this.querySelectorAll("[slot='items']")].map((r) => {
-          if (r instanceof d) {
+        const o = [...this.querySelectorAll("[slot='items']")].map((r) => {
+          if (r instanceof l) {
             r.enableLineClamp = !1;
             const a = r.missingWidthForTexts;
             return a > e && (r.enableLineClamp = !0), a;
           }
-        }), l = Math.max(...n);
-        if (l > 0) {
-          const r = s + l;
+        }), c = Math.max(...o);
+        if (c > 0) {
+          const r = s + c;
           this.style.width = `${r}px`, this.offsetWidth < r && this.enableLineClampOnItemsIfNeeded();
         }
       }
@@ -182,7 +182,7 @@ const o = class o extends h {
   }
   enableLineClampOnItemsIfNeeded() {
     this.querySelectorAll("[slot='items']").forEach((e) => {
-      e instanceof d && (e.enableLineClamp = e.enableLineClamp || e.missingWidthForTexts > 0);
+      e instanceof l && (e.enableLineClamp = e.enableLineClamp || e.missingWidthForTexts > 0);
     });
   }
   render() {
@@ -194,8 +194,8 @@ const o = class o extends h {
     const e = document.createDocumentFragment();
     let t = 0;
     this.items.forEach((s, i) => {
-      const n = this.itemGenerator(s, i);
-      this.isSeparator(n) || this.initListItem(n, t++), n.slot = "items", e.appendChild(n);
+      const o = this.itemGenerator(s, i);
+      this.isSeparator(o) || this.initListItem(o, t++), o.slot = "items", e.appendChild(o);
     }), this.appendChild(e), this.updateFocusedElement();
   }
   initListItem(e, t) {
@@ -222,15 +222,15 @@ const o = class o extends h {
     }
   }
   handleSelection(e, t) {
-    const s = this.items[e];
-    if (!s || s.disabled)
+    const s = this.getListItem(e);
+    if (s.getAttribute("aria-disabled") == "true" || s.hasAttribute("disabled"))
       return;
-    const i = this.getListItem(e), n = this.isSelected(i);
-    this.selectionType !== "trigger-only" && (this.selectionType === "single" ? this.selectedIndexes = n ? [] : [e] : this.toggleSelection(i) ? this._selectedIndexes.push(e) : this.removeFromSelectedIndexes(e)), this.focusIndex = e, this.dispatchEvent(
+    const i = this.isSelected(s);
+    this.selectionType !== "trigger-only" && (this.selectionType === "single" ? this.selectedIndexes = i ? [] : [e] : this.toggleSelection(s) ? this._selectedIndexes.push(e) : this.removeFromSelectedIndexes(e)), this.focusIndex = e, this.dispatchEvent(
       new CustomEvent("selection", {
         detail: {
           index: e,
-          selected: this.selectionType == "trigger-only" || !n,
+          selected: this.selectionType == "trigger-only" || !i,
           hasModifier: t
         },
         bubbles: !0,
@@ -253,12 +253,12 @@ const o = class o extends h {
     return e.hasAttribute("selected");
   }
 };
-o.ID = "sd-list", o.ensureDefined = () => {
-  d.ensureDefined(), customElements.get(o.ID) || customElements.define(o.ID, o);
+n.ID = "sd-list", n.ensureDefined = () => {
+  l.ensureDefined(), customElements.get(n.ID) || customElements.define(n.ID, n);
 };
-let c = o;
-c.ensureDefined();
+let d = n;
+d.ensureDefined();
 export {
-  c as default
+  d as default
 };
 //# sourceMappingURL=list.mjs.map

package/dist/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../list.html?raw","../list.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tbackground-color: var(--sd-list-base-background-color, white);\\n\\t}\\n\\n\\t.container {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t}\\n\\n\\t:host(:focus) {\\n\\t\\toutline: none;\\n\\t}\\n\\n\\t:host(:focus-visible) ::slotted([focused]) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t.container ::slotted(*) {\\n\\t\\tdisplay: block;\\n\\t\\tbox-sizing: border-box;\\n\\t}\\n\\n\\t.container ::slotted(:not(:last-of-type)) {\\n\\t\\tborder-bottom: 1px solid #d9d9d9;\\n\\t}\\n</style>\\n\\n<div class=\\\"container\\\">\\n\\t<slot name=\\\"items\\\"></slot>\\n\\t<slot id=\\\"default-slot\\\"></slot>\\n</div>\\n\"","import { ElementBase, CustomEventMap as BaseCustomEventMap } from \"@cas-smartdesign/element-base\";\nimport ListItem, { generator } from \"@cas-smartdesign/list-item\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [List.ID]: List;\n    }\n}\n\nimport { default as htmlTemplate } from \"./list.html?raw\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ItemGenerator = (data: any, index: number) => HTMLElement;\nexport type SelectionType = \"trigger-only\" | \"single\" | \"multi\";\n\nlet idCounter = 0;\n\nexport type ISelectionEvent = {\n    index: number;\n    selected: boolean;\n    hasModifier: boolean;\n};\n\nexport interface CustomEventMap extends BaseCustomEventMap {\n    selection: CustomEvent<ISelectionEvent>;\n}\n\nexport default interface List {\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}\n\nexport default class List extends ElementBase {\n    public static readonly ID = \"sd-list\";\n    public static ensureDefined = (): void => {\n        ListItem.ensureDefined();\n        if (!customElements.get(List.ID)) {\n            customElements.define(List.ID, List);\n        }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private _items: any[] = [];\n    private _selectedIndexes: number[] = [];\n    private _itemGenerator: ItemGenerator = generator;\n    private _fallbackId: string;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public get items(): any[] {\n        return this._items;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public set items(value: any[]) {\n        this._items = value;\n        this.render();\n    }\n\n    public get itemGenerator(): ItemGenerator {\n        return this._itemGenerator;\n    }\n\n    public set itemGenerator(value: ItemGenerator) {\n        this._itemGenerator = value;\n        this.render();\n    }\n\n    public get selectionType(): SelectionType {\n        return this.getAttribute(\"selection-type\") as SelectionType;\n    }\n\n    public set selectionType(type: SelectionType) {\n        if (type) {\n            this.setAttribute(\"selection-type\", type);\n        } else {\n            this.removeAttribute(\"selection-type\");\n        }\n    }\n\n    public get focusIndex(): number {\n        return this.hasAttribute(\"focus-index\") ? Number(this.getAttribute(\"focus-index\")) : -1;\n    }\n\n    public set focusIndex(index: number) {\n        if (0 <= index && index < this.getListItems.length) {\n            this.setAttribute(\"focus-index\", index.toString());\n        } else {\n            this.removeAttribute(\"focus-index\");\n        }\n    }\n\n    public get focusTarget(): boolean {\n        return this.hasAttribute(\"focus-target\");\n    }\n\n    public set focusTarget(value: boolean) {\n        this.toggleAttribute(\"focus-target\", value);\n    }\n\n    public getListItem(index: number): HTMLElement | null {\n        if (this.shadowRoot) {\n            return this.getListItems[index];\n        }\n        return null;\n    }\n\n    public get getListItems(): Array<HTMLElement> {\n        return Array.prototype.slice.call(this.children).filter((child) => !this.isSeparator(child));\n    }\n\n    public get selectedIndexes(): number[] {\n        return this._selectedIndexes;\n    }\n\n    public set selectedIndexes(indexes: number[]) {\n        const prevIndexes = this._selectedIndexes || [];\n        this._selectedIndexes = indexes || [];\n        prevIndexes\n            .filter((index) => !this._selectedIndexes.includes(index))\n            .forEach((index) => {\n                this.setSelectedAttr(this.getListItem(index), false);\n            });\n        this._selectedIndexes\n            .filter((index) => !prevIndexes.includes(index))\n            .forEach((index) => {\n                this.setSelectedAttr(this.getListItem(index), true);\n            });\n    }\n\n    static get observedAttributes(): string[] {\n        return [\"focus-index\", \"focus-target\"];\n    }\n\n    is(): string {\n        return List.ID;\n    }\n\n    protected template(): HTMLTemplateElement {\n        const template = document.createElement(\"template\");\n        template.innerHTML = htmlTemplate;\n        return template;\n    }\n\n    constructor() {\n        super();\n        this._fallbackId = List.ID + \"_\" + idCounter++;\n        this.addEventListener(\"pointerup\", (event) => {\n            this.focusIndex = this.getListItems.indexOf(event.target as HTMLElement);\n            this.updateFocusedElement();\n        });\n        this.addEventListener(\"focus\", () => {\n            if (this.matches(\":focus-visible\")) {\n                if (this.focusIndex == -1) {\n                    if (this.selectedIndexes) {\n                        this.focusIndex = this.selectedIndexes[0];\n                    }\n                    if (this.focusIndex == -1 && this.childElementCount > 0) {\n                        this.focusIndex = 0;\n                    }\n                } else {\n                    this.updateFocusedElement();\n                }\n            }\n        });\n        this.addEventListener(\"blur\", () => this.removeFocusedItemAttributes());\n    }\n\n    private removeFocusedItemAttributes() {\n        if (this.focusIndex != -1) {\n            const focusedElement = this.getListItem(this.focusIndex);\n            if (focusedElement) {\n                focusedElement.removeAttribute(\"focused\");\n                this.removeAttribute(\"aria-activedescendant\");\n            }\n        }\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        this.defaultSlot.addEventListener(\"slotchange\", this.onDefaultSlotChange);\n        if (!this.hasAttribute(\"role\")) {\n            this.setAttribute(\"role\", \"listbox\");\n        }\n        if (!this.id) {\n            this.id = this._fallbackId;\n        }\n\n        this.render();\n        this.addEventListener(\"keydown\", this.handleKeyDown);\n\n        if (!this.selectionType) {\n            this.selectionType = \"trigger-only\";\n        }\n    }\n\n    private onDefaultSlotChange = () => {\n        let index = 0;\n        this.defaultSlot.assignedElements().forEach((item: HTMLElement) => {\n            if (!this.isSeparator(item)) {\n                this.initListItem(item, index++);\n            }\n        });\n        this.updateFocusedElement();\n    };\n\n    private get defaultSlot(): HTMLSlotElement {\n        return this.shadowRoot.querySelector(\"#default-slot\");\n    }\n\n    private isSeparator(element: Element): boolean {\n        return \"HR\" == element.tagName || element.getAttribute(\"role\") == \"separator\";\n    }\n\n    public attributeChangedCallback(name: string, oldValue: unknown, _newValue: unknown): void {\n        if (name === \"focus-index\") {\n            const lastFocusedElement = this.getListItem(oldValue as number);\n            if (lastFocusedElement) {\n                lastFocusedElement.removeAttribute(\"focused\");\n            }\n            this.updateFocusedElement();\n        } else if (name === \"focus-target\") {\n            if (this.focusTarget) {\n                this.updateFocusedElement();\n            } else if (document.activeElement != this) {\n                this.removeFocusedItemAttributes();\n            }\n        }\n    }\n\n    public increaseWidthIfNeeded() {\n        window.requestAnimationFrame(() => {\n            let remainingWidth = Number.MAX_SAFE_INTEGER;\n            const maxWidth = getComputedStyle(this).maxWidth;\n            const offsetWidth = this.offsetWidth;\n            if (maxWidth.endsWith(\"px\")) {\n                remainingWidth = Number.parseInt(maxWidth) - offsetWidth;\n            }\n            const styleWidth = this.style.width;\n            if (remainingWidth == 0 || (styleWidth.endsWith(\"px\") && offsetWidth < Number.parseInt(styleWidth))) {\n                this.enableLineClampOnItemsIfNeeded();\n            } else {\n                const missingWidths = [...this.querySelectorAll(\"[slot='items']\")].map((item) => {\n                    if (item instanceof ListItem) {\n                        item.enableLineClamp = false;\n                        const missingWidthForTexts = item.missingWidthForTexts;\n                        if (missingWidthForTexts > remainingWidth) {\n                            item.enableLineClamp = true;\n                        }\n                        return missingWidthForTexts;\n                    }\n                });\n                const additionalWidth = Math.max(...missingWidths);\n                if (additionalWidth > 0) {\n                    const requiredWidth = offsetWidth + additionalWidth;\n                    this.style.width = `${requiredWidth}px`;\n                    if (this.offsetWidth < requiredWidth) {\n                        this.enableLineClampOnItemsIfNeeded();\n                    }\n                }\n            }\n        });\n    }\n\n    private enableLineClampOnItemsIfNeeded() {\n        this.querySelectorAll(\"[slot='items']\").forEach((item) => {\n            if (item instanceof ListItem) {\n                item.enableLineClamp = item.enableLineClamp || item.missingWidthForTexts > 0;\n            }\n        });\n    }\n\n    private render(): void {\n        if (!this.isConnected || !this.items) {\n            return;\n        }\n        this.querySelectorAll(\"[slot='items']\").forEach((oldItem) => {\n            this.removeChild(oldItem);\n        });\n\n        const fragment = document.createDocumentFragment();\n        let indexOfRealItems = 0;\n        this.items.forEach((item, index) => {\n            const itemElement = this.itemGenerator(item, index);\n\n            if (!this.isSeparator(itemElement)) {\n                this.initListItem(itemElement, indexOfRealItems++);\n            }\n\n            itemElement.slot = \"items\";\n            fragment.appendChild(itemElement);\n        });\n        this.appendChild(fragment);\n\n        this.updateFocusedElement();\n    }\n\n    private initListItem(item: HTMLElement, index: number): void {\n        this.setSelectedAttr(item, this.selectedIndexes.includes(index));\n        item.addEventListener(\"click\", (event) => {\n            this.handleItemClick(event, index);\n        });\n        item.addEventListener(\"mousedown\", (event) => {\n            if (event.button == 1) {\n                event.preventDefault();\n            }\n        });\n        item.addEventListener(\"auxclick\", (event) => {\n            this.handleItemClick(event, index);\n        });\n        if (!item.id || item.id.startsWith(this.id + \"_item_\")) {\n            item.id = this.id + \"_item_\" + index;\n        }\n    }\n\n    private ensureItemVisible(item: HTMLElement): void {\n        const itemRect = item.getBoundingClientRect();\n        const rect = this.getBoundingClientRect();\n        if (itemRect.bottom > rect.bottom) {\n            this.scrollTop += itemRect.bottom - rect.bottom;\n        } else if (itemRect.top < rect.top) {\n            this.scrollTop -= rect.top - itemRect.top;\n        }\n    }\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        let shouldPrevent = true;\n        switch (event.key) {\n            case \"ArrowDown\":\n            case \"Down\":\n                this.focusIndex = Math.min(this.getListItems.length - 1, this.focusIndex + 1);\n                break;\n            case \"ArrowUp\":\n            case \"Up\":\n                this.focusIndex = Math.max(0, this.focusIndex - 1);\n                break;\n            case \"Enter\":\n            case \"Space\":\n            case \" \":\n                this.handleSelection(this.focusIndex, event.metaKey || event.ctrlKey);\n                break;\n            case \"End\":\n            case \"PageDown\":\n                this.focusIndex = this.items.length - 1;\n                break;\n            case \"Home\":\n            case \"PageUp\":\n                this.focusIndex = 0;\n                break;\n            default:\n                shouldPrevent = false;\n                break;\n        }\n        if (shouldPrevent) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    private updateFocusedElement(): void {\n        const focusedElement = this.getListItem(this.focusIndex);\n        if (focusedElement && (this.focusTarget || document.activeElement == this)) {\n            focusedElement.setAttribute(\"focused\", \"\");\n            this.setAttribute(\"aria-activedescendant\", focusedElement.id);\n            this.ensureItemVisible(focusedElement);\n        } else {\n            this.removeAttribute(\"aria-activedescendant\");\n        }\n    }\n\n    private handleItemClick(event: MouseEvent, index: number): void {\n        if (event.button !== null) {\n            const hasModifier = (event.type == \"auxclick\" && event.button == 1) || event.metaKey || event.ctrlKey;\n            if (event.button == 0 || event.button == 1) {\n                this.handleSelection(index, hasModifier);\n            }\n        }\n    }\n\n    private handleSelection(index: number, hasModifier: boolean): void {\n        const item = this.items[index];\n        if (!item || item.disabled) {\n            return;\n        }\n        const element = this.getListItem(index);\n        const wasSelected = this.isSelected(element);\n        if (this.selectionType !== \"trigger-only\") {\n            if (this.selectionType === \"single\") {\n                this.selectedIndexes = wasSelected ? [] : [index];\n            } else {\n                const newSelectedState = this.toggleSelection(element);\n                if (newSelectedState) {\n                    this._selectedIndexes.push(index);\n                } else {\n                    this.removeFromSelectedIndexes(index);\n                }\n            }\n        }\n        this.focusIndex = index;\n        this.dispatchEvent(\n            new CustomEvent<ISelectionEvent>(\"selection\", {\n                detail: {\n                    index,\n                    selected: this.selectionType == \"trigger-only\" || !wasSelected,\n                    hasModifier,\n                },\n                bubbles: true,\n                composed: true,\n            }),\n        );\n    }\n\n    private removeFromSelectedIndexes(indexToRemove: number) {\n        const index = this._selectedIndexes.indexOf(indexToRemove);\n        if (index !== -1) {\n            this._selectedIndexes.splice(index, 1);\n        }\n    }\n\n    private toggleSelection(element: Element): boolean {\n        const selected = !element.hasAttribute(\"selected\");\n        this.setSelectedAttr(element, selected);\n        return selected;\n    }\n\n    private setSelectedAttr(element: Element, selected: boolean) {\n        if (element) {\n            if (selected) {\n                element.setAttribute(\"selected\", \"\");\n            } else {\n                element.removeAttribute(\"selected\");\n            }\n            element.setAttribute(\"aria-selected\", String(selected));\n        }\n    }\n\n    private isSelected(element: Element): boolean {\n        return element.hasAttribute(\"selected\");\n    }\n}\n\nList.ensureDefined();\n"],"names":["htmlTemplate","idCounter","_List","ElementBase","generator","index","item","event","shouldPrevent","value","type","child","indexes","prevIndexes","template","focusedElement","element","name","oldValue","_newValue","lastFocusedElement","remainingWidth","maxWidth","offsetWidth","styleWidth","missingWidths","ListItem","missingWidthForTexts","additionalWidth","requiredWidth","oldItem","fragment","indexOfRealItems","itemElement","itemRect","rect","hasModifier","wasSelected","indexToRemove","selected","List"],"mappings":"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"}
+{"version":3,"file":"list.mjs","sources":["../list.html?raw","../list.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tbackground-color: var(--sd-list-base-background-color, white);\\n\\t}\\n\\n\\t.container {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t}\\n\\n\\t:host(:focus) {\\n\\t\\toutline: none;\\n\\t}\\n\\n\\t:host(:focus-visible) ::slotted([focused]) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t.container ::slotted(*) {\\n\\t\\tdisplay: block;\\n\\t\\tbox-sizing: border-box;\\n\\t}\\n\\n\\t.container ::slotted(:not(:last-of-type)) {\\n\\t\\tborder-bottom: 1px solid #d9d9d9;\\n\\t}\\n</style>\\n\\n<div class=\\\"container\\\">\\n\\t<slot name=\\\"items\\\"></slot>\\n\\t<slot id=\\\"default-slot\\\"></slot>\\n</div>\\n\"","import { ElementBase, CustomEventMap as BaseCustomEventMap } from \"@cas-smartdesign/element-base\";\nimport ListItem, { generator } from \"@cas-smartdesign/list-item\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [List.ID]: List;\n    }\n}\n\nimport { default as htmlTemplate } from \"./list.html?raw\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ItemGenerator = (data: any, index: number) => HTMLElement;\nexport type SelectionType = \"trigger-only\" | \"single\" | \"multi\";\n\nlet idCounter = 0;\n\nexport type ISelectionEvent = {\n    index: number;\n    selected: boolean;\n    hasModifier: boolean;\n};\n\nexport interface CustomEventMap extends BaseCustomEventMap {\n    selection: CustomEvent<ISelectionEvent>;\n}\n\nexport default interface List {\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}\n\nexport default class List extends ElementBase {\n    public static readonly ID = \"sd-list\";\n    public static ensureDefined = (): void => {\n        ListItem.ensureDefined();\n        if (!customElements.get(List.ID)) {\n            customElements.define(List.ID, List);\n        }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private _items: any[] = [];\n    private _selectedIndexes: number[] = [];\n    private _itemGenerator: ItemGenerator = generator;\n    private _fallbackId: string;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public get items(): any[] {\n        return this._items;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public set items(value: any[]) {\n        this._items = value;\n        this.render();\n    }\n\n    public get itemGenerator(): ItemGenerator {\n        return this._itemGenerator;\n    }\n\n    public set itemGenerator(value: ItemGenerator) {\n        this._itemGenerator = value;\n        this.render();\n    }\n\n    public get selectionType(): SelectionType {\n        return this.getAttribute(\"selection-type\") as SelectionType;\n    }\n\n    public set selectionType(type: SelectionType) {\n        if (type) {\n            this.setAttribute(\"selection-type\", type);\n        } else {\n            this.removeAttribute(\"selection-type\");\n        }\n    }\n\n    public get focusIndex(): number {\n        return this.hasAttribute(\"focus-index\") ? Number(this.getAttribute(\"focus-index\")) : -1;\n    }\n\n    public set focusIndex(index: number) {\n        if (0 <= index && index < this.getListItems.length) {\n            this.setAttribute(\"focus-index\", index.toString());\n        } else {\n            this.removeAttribute(\"focus-index\");\n        }\n    }\n\n    public get focusTarget(): boolean {\n        return this.hasAttribute(\"focus-target\");\n    }\n\n    public set focusTarget(value: boolean) {\n        this.toggleAttribute(\"focus-target\", value);\n    }\n\n    public getListItem(index: number): HTMLElement | null {\n        if (this.shadowRoot) {\n            return this.getListItems[index];\n        }\n        return null;\n    }\n\n    public get getListItems(): Array<HTMLElement> {\n        return Array.prototype.slice.call(this.children).filter((child) => !this.isSeparator(child));\n    }\n\n    public get selectedIndexes(): number[] {\n        return this._selectedIndexes;\n    }\n\n    public set selectedIndexes(indexes: number[]) {\n        const prevIndexes = this._selectedIndexes || [];\n        this._selectedIndexes = indexes || [];\n        prevIndexes\n            .filter((index) => !this._selectedIndexes.includes(index))\n            .forEach((index) => {\n                this.setSelectedAttr(this.getListItem(index), false);\n            });\n        this._selectedIndexes\n            .filter((index) => !prevIndexes.includes(index))\n            .forEach((index) => {\n                this.setSelectedAttr(this.getListItem(index), true);\n            });\n    }\n\n    static get observedAttributes(): string[] {\n        return [\"focus-index\", \"focus-target\"];\n    }\n\n    is(): string {\n        return List.ID;\n    }\n\n    protected template(): HTMLTemplateElement {\n        const template = document.createElement(\"template\");\n        template.innerHTML = htmlTemplate;\n        return template;\n    }\n\n    constructor() {\n        super();\n        this._fallbackId = List.ID + \"_\" + idCounter++;\n        this.addEventListener(\"pointerup\", (event) => {\n            this.focusIndex = this.getListItems.indexOf(event.target as HTMLElement);\n            this.updateFocusedElement();\n        });\n        this.addEventListener(\"focus\", () => {\n            if (this.matches(\":focus-visible\")) {\n                if (this.focusIndex == -1) {\n                    if (this.selectedIndexes) {\n                        this.focusIndex = this.selectedIndexes[0];\n                    }\n                    if (this.focusIndex == -1 && this.childElementCount > 0) {\n                        this.focusIndex = 0;\n                    }\n                } else {\n                    this.updateFocusedElement();\n                }\n            }\n        });\n        this.addEventListener(\"blur\", () => this.removeFocusedItemAttributes());\n    }\n\n    private removeFocusedItemAttributes() {\n        if (this.focusIndex != -1) {\n            const focusedElement = this.getListItem(this.focusIndex);\n            if (focusedElement) {\n                focusedElement.removeAttribute(\"focused\");\n                this.removeAttribute(\"aria-activedescendant\");\n            }\n        }\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        this.defaultSlot.addEventListener(\"slotchange\", this.onDefaultSlotChange);\n        if (!this.hasAttribute(\"role\")) {\n            this.setAttribute(\"role\", \"listbox\");\n        }\n        if (!this.id) {\n            this.id = this._fallbackId;\n        }\n\n        this.render();\n        this.addEventListener(\"keydown\", this.handleKeyDown);\n\n        if (!this.selectionType) {\n            this.selectionType = \"trigger-only\";\n        }\n    }\n\n    private onDefaultSlotChange = () => {\n        let index = 0;\n        this.defaultSlot.assignedElements().forEach((item: HTMLElement) => {\n            if (!this.isSeparator(item)) {\n                this.initListItem(item, index++);\n            }\n        });\n        this.updateFocusedElement();\n    };\n\n    private get defaultSlot(): HTMLSlotElement {\n        return this.shadowRoot.querySelector(\"#default-slot\");\n    }\n\n    private isSeparator(element: Element): boolean {\n        return \"HR\" == element.tagName || element.getAttribute(\"role\") == \"separator\";\n    }\n\n    public attributeChangedCallback(name: string, oldValue: unknown, _newValue: unknown): void {\n        if (name === \"focus-index\") {\n            const lastFocusedElement = this.getListItem(oldValue as number);\n            if (lastFocusedElement) {\n                lastFocusedElement.removeAttribute(\"focused\");\n            }\n            this.updateFocusedElement();\n        } else if (name === \"focus-target\") {\n            if (this.focusTarget) {\n                this.updateFocusedElement();\n            } else if (document.activeElement != this) {\n                this.removeFocusedItemAttributes();\n            }\n        }\n    }\n\n    public increaseWidthIfNeeded() {\n        window.requestAnimationFrame(() => {\n            let remainingWidth = Number.MAX_SAFE_INTEGER;\n            const maxWidth = getComputedStyle(this).maxWidth;\n            const offsetWidth = this.offsetWidth;\n            if (maxWidth.endsWith(\"px\")) {\n                remainingWidth = Number.parseInt(maxWidth) - offsetWidth;\n            }\n            const styleWidth = this.style.width;\n            if (remainingWidth == 0 || (styleWidth.endsWith(\"px\") && offsetWidth < Number.parseInt(styleWidth))) {\n                this.enableLineClampOnItemsIfNeeded();\n            } else {\n                const missingWidths = [...this.querySelectorAll(\"[slot='items']\")].map((item) => {\n                    if (item instanceof ListItem) {\n                        item.enableLineClamp = false;\n                        const missingWidthForTexts = item.missingWidthForTexts;\n                        if (missingWidthForTexts > remainingWidth) {\n                            item.enableLineClamp = true;\n                        }\n                        return missingWidthForTexts;\n                    }\n                });\n                const additionalWidth = Math.max(...missingWidths);\n                if (additionalWidth > 0) {\n                    const requiredWidth = offsetWidth + additionalWidth;\n                    this.style.width = `${requiredWidth}px`;\n                    if (this.offsetWidth < requiredWidth) {\n                        this.enableLineClampOnItemsIfNeeded();\n                    }\n                }\n            }\n        });\n    }\n\n    private enableLineClampOnItemsIfNeeded() {\n        this.querySelectorAll(\"[slot='items']\").forEach((item) => {\n            if (item instanceof ListItem) {\n                item.enableLineClamp = item.enableLineClamp || item.missingWidthForTexts > 0;\n            }\n        });\n    }\n\n    private render(): void {\n        if (!this.isConnected || !this.items) {\n            return;\n        }\n        this.querySelectorAll(\"[slot='items']\").forEach((oldItem) => {\n            this.removeChild(oldItem);\n        });\n\n        const fragment = document.createDocumentFragment();\n        let indexOfRealItems = 0;\n        this.items.forEach((item, index) => {\n            const itemElement = this.itemGenerator(item, index);\n\n            if (!this.isSeparator(itemElement)) {\n                this.initListItem(itemElement, indexOfRealItems++);\n            }\n\n            itemElement.slot = \"items\";\n            fragment.appendChild(itemElement);\n        });\n        this.appendChild(fragment);\n\n        this.updateFocusedElement();\n    }\n\n    private initListItem(item: HTMLElement, index: number): void {\n        this.setSelectedAttr(item, this.selectedIndexes.includes(index));\n        item.addEventListener(\"click\", (event) => {\n            this.handleItemClick(event, index);\n        });\n        item.addEventListener(\"mousedown\", (event) => {\n            if (event.button == 1) {\n                event.preventDefault();\n            }\n        });\n        item.addEventListener(\"auxclick\", (event) => {\n            this.handleItemClick(event, index);\n        });\n        if (!item.id || item.id.startsWith(this.id + \"_item_\")) {\n            item.id = this.id + \"_item_\" + index;\n        }\n    }\n\n    private ensureItemVisible(item: HTMLElement): void {\n        const itemRect = item.getBoundingClientRect();\n        const rect = this.getBoundingClientRect();\n        if (itemRect.bottom > rect.bottom) {\n            this.scrollTop += itemRect.bottom - rect.bottom;\n        } else if (itemRect.top < rect.top) {\n            this.scrollTop -= rect.top - itemRect.top;\n        }\n    }\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        let shouldPrevent = true;\n        switch (event.key) {\n            case \"ArrowDown\":\n            case \"Down\":\n                this.focusIndex = Math.min(this.getListItems.length - 1, this.focusIndex + 1);\n                break;\n            case \"ArrowUp\":\n            case \"Up\":\n                this.focusIndex = Math.max(0, this.focusIndex - 1);\n                break;\n            case \"Enter\":\n            case \"Space\":\n            case \" \":\n                this.handleSelection(this.focusIndex, event.metaKey || event.ctrlKey);\n                break;\n            case \"End\":\n            case \"PageDown\":\n                this.focusIndex = this.items.length - 1;\n                break;\n            case \"Home\":\n            case \"PageUp\":\n                this.focusIndex = 0;\n                break;\n            default:\n                shouldPrevent = false;\n                break;\n        }\n        if (shouldPrevent) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    private updateFocusedElement(): void {\n        const focusedElement = this.getListItem(this.focusIndex);\n        if (focusedElement && (this.focusTarget || document.activeElement == this)) {\n            focusedElement.setAttribute(\"focused\", \"\");\n            this.setAttribute(\"aria-activedescendant\", focusedElement.id);\n            this.ensureItemVisible(focusedElement);\n        } else {\n            this.removeAttribute(\"aria-activedescendant\");\n        }\n    }\n\n    private handleItemClick(event: MouseEvent, index: number): void {\n        if (event.button !== null) {\n            const hasModifier = (event.type == \"auxclick\" && event.button == 1) || event.metaKey || event.ctrlKey;\n            if (event.button == 0 || event.button == 1) {\n                this.handleSelection(index, hasModifier);\n            }\n        }\n    }\n\n    private handleSelection(index: number, hasModifier: boolean): void {\n        const element = this.getListItem(index);\n        if (element.getAttribute(\"aria-disabled\") == \"true\" || element.hasAttribute(\"disabled\")) {\n            return;\n        }\n        const wasSelected = this.isSelected(element);\n        if (this.selectionType !== \"trigger-only\") {\n            if (this.selectionType === \"single\") {\n                this.selectedIndexes = wasSelected ? [] : [index];\n            } else {\n                const newSelectedState = this.toggleSelection(element);\n                if (newSelectedState) {\n                    this._selectedIndexes.push(index);\n                } else {\n                    this.removeFromSelectedIndexes(index);\n                }\n            }\n        }\n        this.focusIndex = index;\n        this.dispatchEvent(\n            new CustomEvent<ISelectionEvent>(\"selection\", {\n                detail: {\n                    index,\n                    selected: this.selectionType == \"trigger-only\" || !wasSelected,\n                    hasModifier,\n                },\n                bubbles: true,\n                composed: true,\n            }),\n        );\n    }\n\n    private removeFromSelectedIndexes(indexToRemove: number) {\n        const index = this._selectedIndexes.indexOf(indexToRemove);\n        if (index !== -1) {\n            this._selectedIndexes.splice(index, 1);\n        }\n    }\n\n    private toggleSelection(element: Element): boolean {\n        const selected = !element.hasAttribute(\"selected\");\n        this.setSelectedAttr(element, selected);\n        return selected;\n    }\n\n    private setSelectedAttr(element: Element, selected: boolean) {\n        if (element) {\n            if (selected) {\n                element.setAttribute(\"selected\", \"\");\n            } else {\n                element.removeAttribute(\"selected\");\n            }\n            element.setAttribute(\"aria-selected\", String(selected));\n        }\n    }\n\n    private isSelected(element: Element): boolean {\n        return element.hasAttribute(\"selected\");\n    }\n}\n\nList.ensureDefined();\n"],"names":["htmlTemplate","idCounter","_List","ElementBase","generator","index","item","event","shouldPrevent","value","type","child","indexes","prevIndexes","template","focusedElement","element","name","oldValue","_newValue","lastFocusedElement","remainingWidth","maxWidth","offsetWidth","styleWidth","missingWidths","ListItem","missingWidthForTexts","additionalWidth","requiredWidth","oldItem","fragment","indexOfRealItems","itemElement","itemRect","rect","hasModifier","wasSelected","indexToRemove","selected","List"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/list",
-  "version": "6.3.1",
+  "version": "6.3.2",
   "description": "A list element with SmartDesign look and feel.",
   "main": "dist/list-with-externals.js",
   "module": "dist/list.mjs",
@@ -11,9 +11,9 @@
     "@cas-smartdesign/element-base": "^5.0.2"
   },
   "devDependencies": {
-    "@cas-smartdesign/element-preview": "^0.2.2",
     "@cas-smartdesign/element-utils": "^1.0.3",
-    "@cas-smartdesign/license-generator": "^1.6.3"
+    "@cas-smartdesign/license-generator": "^1.6.3",
+    "@cas-smartdesign/element-preview": "^0.2.2"
   },
   "files": [
     "dist",