@cas-smartdesign/token-selector 0.15.0

package/dist/token-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-selector.mjs","sources":["../token-suggest-popover.ts","../clear.svg?raw","../token.ts","../clipboard-extension.ts","../drag-and-drop-extension.ts","../token-selector.ts"],"sourcesContent":["import Popover from \"@cas-smartdesign/popover\";\nimport List from \"@cas-smartdesign/list\";\nimport { TokenData } from \"./token\";\nimport SDInput from \"@cas-smartdesign/lit-input\";\nimport { KeyDownDelegator } from \"@cas-smartdesign/element-utils\";\n\nexport type Filter = (searchTerm: string, item: TokenData) => boolean;\n\ntype TokenSelectedCallback = (token: TokenData) => void;\n\nexport default class TokenSuggestPopover {\n    private _popover?: Popover;\n    private _tokenList: List;\n    private _suggestItems: TokenData[];\n\n    public filter: Filter = (searchTerm, item) => {\n        if (!searchTerm) {\n            return true;\n        }\n        if (item.disabled || item.deactivated) {\n            return false;\n        }\n        if (item.caption && item.caption.toLowerCase().includes(searchTerm)) {\n            return true;\n        }\n    };\n\n    constructor(\n        private inputElement: SDInput,\n        private notSelectedTokensProvider: () => TokenData[],\n        tokenSelectedCallback: TokenSelectedCallback,\n        private initializeCallback: (popover: TokenSuggestPopover) => void,\n    ) {\n        List.ensureDefined();\n\n        this._tokenList = new List();\n        this._tokenList.style.minWidth = \"250px\";\n        this._tokenList.addEventListener(\"selection\", (e: CustomEvent) => {\n            const suggestIndex = e.detail.index;\n            const selectedToken = this._suggestItems[suggestIndex];\n            tokenSelectedCallback(selectedToken);\n            this.hide();\n        });\n\n        new KeyDownDelegator(this._tokenList, (event, _offset, toggleSelection) => {\n            this._tokenList.dispatchEvent(new KeyboardEvent(event.type, event));\n            if (!toggleSelection && !this.isOpened) {\n                this.show();\n            }\n        }).connect(inputElement);\n    }\n\n    public show() {\n        if (this.inputElement.effectiveDisabled) {\n            return;\n        }\n        this.popover; // ensure init\n\n        this._suggestItems = this.filterItems((this.inputElement.value || \"\").toLowerCase());\n        if (this._suggestItems.length == 0) {\n            this.hide();\n        } else {\n            this._tokenList.items = this._suggestItems.map((token) => ({ ...token, contentMode: \"text\" }));\n            this._tokenList.focusIndex = -1;\n\n            Object.assign(this._tokenList.style, {\n                minWidth: `${Math.max(this.popover.targetElement.offsetWidth, 250)}px`,\n            });\n\n            this.popover.show();\n        }\n    }\n\n    public refreshItems() {\n        if (this.isOpened) {\n            this._suggestItems = this.filterItems((this.inputElement.value || \"\").toLowerCase());\n            if (this._suggestItems.length == 0) {\n                this.hide();\n            } else {\n                this._tokenList.items = this._suggestItems.map((token) => ({ ...token, contentMode: \"text\" }));\n            }\n        }\n    }\n\n    private filterItems(searchTerm: string): TokenData[] {\n        const allTokens = this.notSelectedTokensProvider();\n        if (!searchTerm) {\n            return allTokens;\n        }\n        return allTokens.filter((token) => this.filter(searchTerm, token));\n    }\n\n    public hide() {\n        this._suggestItems = [];\n        this._tokenList.items = [];\n        this._popover?.hide();\n    }\n\n    get list(): List {\n        return this._tokenList;\n    }\n\n    get popover(): Popover {\n        if (!this._popover) {\n            this._popover = this.createPopover();\n            this.initializeCallback(this);\n        }\n        return this._popover;\n    }\n\n    private createPopover(): Popover {\n        const popover = new Popover();\n        popover.setAttribute(\"trigger-type\", \"manual\");\n        popover.setAttribute(\"placement\", \"bottom-start\");\n        popover.setAttribute(\"modal\", \"\");\n        popover.setAttribute(\"popover-for\", \"token-autosuggest-popover\");\n        popover.setAttribute(\"offset\", \"-2\");\n        popover.targetElement = this.inputElement;\n        popover.appendChild(this._tokenList);\n        return popover;\n    }\n\n    public get isOpened(): boolean {\n        return this._popover && this._popover.hasAttribute(\"open\");\n    }\n\n    public get focusedSuggestToken(): TokenData {\n        return this._suggestItems[this._tokenList.focusIndex];\n    }\n}\n","export default \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 16 16\\\">\\r\\n  <path d=\\\"m3.5 12.5 9-9m-9 0 9 9\\\" style=\\\"fill:none;stroke:#333;stroke-linecap:square;stroke-width:1.1px\\\"/>\\r\\n</svg>\"","import {\n    LitElement,\n    TemplateResult,\n    html,\n    nothing,\n    CSSResult,\n    unsafeCSS,\n    PropertyValues,\n    ComplexAttributeConverter,\n} from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [Token.ID]: Token;\n    }\n}\n\nimport style from \"./scss/token.scss?inline\";\nimport { default as clearSvg } from \"./clear.svg?raw\";\nimport ImageTools from \"@cas-smartdesign/image-tools\";\n\nexport interface TokenData {\n    caption?: string;\n    description?: string;\n    type?: string;\n    icon?: string;\n    iconPlaceholder?: string;\n    iconBackgroundColor?: string;\n    disabled?: boolean;\n    deactivated?: boolean;\n}\n\ntype TokenActionCallback = (tokenIndex: number) => void;\n\nconst alwaysPresentBooleanAttributeConverter = {\n    fromAttribute: (value) => value == \"true\",\n    toAttribute: (value) => value,\n} as ComplexAttributeConverter;\n\nexport default class Token extends LitElement {\n    public static readonly ID = \"sd-token\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(Token.ID)) {\n            customElements.define(Token.ID, Token);\n        }\n    };\n\n    @property({ type: String, attribute: true, reflect: true })\n    public value = \"\";\n    @property({ type: String, attribute: true, reflect: true })\n    public type = \"\";\n    @property({ type: String })\n    public icon = \"\";\n    @property({ type: String })\n    public iconPlaceholder = \"\";\n    @property({ type: String })\n    public iconBackgroundColor = \"\";\n    @property({ converter: alwaysPresentBooleanAttributeConverter, reflect: true, attribute: \"aria-disabled\" })\n    public disabled: boolean;\n    @property({ converter: alwaysPresentBooleanAttributeConverter, reflect: true, attribute: \"aria-current\" })\n    public current: boolean;\n\n    public index: number;\n    private _checked: boolean = false;\n\n    private _tokenClickHandler: TokenActionCallback;\n    private _tokenDeleteHandler: TokenActionCallback;\n\n    static get styles(): CSSResult {\n        return unsafeCSS(style);\n    }\n\n    public set checked(value: boolean) {\n        const oldValue = this._checked;\n        this._checked = !this.disabled && value;\n        this.requestUpdate(\"checked\", oldValue);\n    }\n\n    @property({ converter: alwaysPresentBooleanAttributeConverter, reflect: true, attribute: \"aria-checked\" })\n    public get checked(): boolean {\n        return this._checked;\n    }\n\n    protected firstUpdated(changedProperties: PropertyValues): void {\n        super.firstUpdated(changedProperties);\n        this.tabIndex = -1;\n\n        this.setAttribute(\"role\", \"option\");\n        this.setAttribute(\"aria-selected\", \"true\");\n\n        this.addEventListener(\"click\", (e) => {\n            e.stopPropagation();\n            if (e.getModifierState(\"Control\")) {\n                this.checked = !this.checked;\n            } else {\n                this.checked = true;\n                if (this._tokenClickHandler) {\n                    this._tokenClickHandler(this.index);\n                }\n            }\n        });\n\n        const deleteButton = this.shadowRoot.querySelector(\".delete-button-wrapper\");\n        if (deleteButton) {\n            deleteButton.addEventListener(\"click\", (e) => {\n                e.stopPropagation();\n                if (this._tokenDeleteHandler) {\n                    this._tokenDeleteHandler(this.index);\n                }\n            });\n        }\n    }\n\n    public render(): TemplateResult {\n        return html`\n            <div class=\"container\">\n                <slot name=\"before-icon\"></slot>\n                ${this.renderIcon()}\n                <slot name=\"after-icon\"></slot>\n                <div class=\"value\">${this.value}</div>\n                ${this.disabled ? nothing : html` <div class=\"delete-button-wrapper\">${unsafeSVG(clearSvg)}</div> `}\n            </div>\n        `;\n    }\n\n    private renderIcon() {\n        if (this.icon || this.iconPlaceholder) {\n            const iconBackgroundStyle =\n                this.iconBackgroundColor != null\n                    ? `--token-icon-background-color: ${this.iconBackgroundColor}`\n                    : undefined;\n            return html`\n                <div class=\"icon-wrapper\" style=\"${ifDefined(iconBackgroundStyle)}\" role=\"img\">\n                    <div class=\"icon\"></div>\n                </div>\n            `;\n        }\n        return nothing;\n    }\n\n    public updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (\n            (changedProperties.has(\"icon\") || changedProperties.has(\"iconPlaceholder\")) &&\n            (this.icon || this.iconPlaceholder)\n        ) {\n            ImageTools.showImage(this.shadowRoot.querySelector(\".icon\"), this.icon, this.iconPlaceholder);\n        }\n        if (changedProperties.has(\"disabled\") && !this.disabled && this.checked) {\n            this.checked = false;\n        }\n    }\n\n    public setClickHandler(clickHandler: TokenActionCallback) {\n        this._tokenClickHandler = clickHandler;\n    }\n\n    public setDeleteHandler(deleteHandler: TokenActionCallback) {\n        this._tokenDeleteHandler = deleteHandler;\n    }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const generator = (data: TokenData, _index: number): Token => {\n    const token = document.createElement(Token.ID) as Token;\n    if (data) {\n        token.value = data.caption;\n        token.type = data.type;\n        token.icon = data.icon;\n        token.iconPlaceholder = data.iconPlaceholder;\n        token.iconBackgroundColor = data.iconBackgroundColor;\n        token.disabled = data.disabled;\n\n        token.index = _index;\n    }\n    return token;\n};\n\nToken.ensureDefined();\n","import TokenSelector from \"./token-selector\";\nimport Token from \"./token\";\nimport SDInput from \"@cas-smartdesign/lit-input\";\n\nconst RELEVANT_MIME_TYPE = \"web application/json\";\n\nexport default class ClipboardExtension {\n    constructor(\n        tokenSelector: TokenSelector,\n        getInputElementValue: () => string,\n        pasteItems: (item: unknown[]) => void,\n    ) {\n        if (navigator.clipboard) {\n            tokenSelector.addEventListener(\"copy\", () => {\n                if (!getInputElementValue()) {\n                    this.writeToClipboard(tokenSelector);\n                }\n            });\n\n            tokenSelector.addEventListener(\"cut\", () => {\n                if (!getInputElementValue()) {\n                    tokenSelector.removeSelectionOrActiveToken();\n                    this.writeToClipboard(tokenSelector);\n                }\n            });\n\n            tokenSelector.addEventListener(\"paste\", () => {\n                if (!tokenSelector.disabled) {\n                    this.readFromClipboard(pasteItems);\n                }\n            });\n        }\n    }\n\n    private writeToClipboard(tokenSelector: TokenSelector) {\n        const checkedTokens = tokenSelector.querySelectorAll(\"[slot='items'][aria-checked='true']\");\n        const relevantIndexes: number[] = [];\n        if (checkedTokens.length > 0) {\n            checkedTokens.forEach((t: Token) => relevantIndexes.push(t.index));\n        } else if (tokenSelector.activeTokenIndex != -1) {\n            const activeToken = tokenSelector.activeTokenElement;\n            if (activeToken) {\n                relevantIndexes.push(activeToken.index);\n            }\n        }\n        if (relevantIndexes.length > 0) {\n            const asJson = JSON.stringify(relevantIndexes.map((index) => tokenSelector.items[index]));\n            const asBlob = new Blob([asJson], { type: RELEVANT_MIME_TYPE });\n            navigator.clipboard.write([\n                new ClipboardItem({\n                    [RELEVANT_MIME_TYPE]: asBlob,\n                }),\n            ]);\n        }\n    }\n\n    private async readFromClipboard(pasteItems: (item: unknown[]) => void) {\n        const clipboardItems = await navigator.clipboard.read();\n        for (const clipboardItem of clipboardItems) {\n            if (clipboardItem.types.includes(RELEVANT_MIME_TYPE)) {\n                const blob = await clipboardItem.getType(RELEVANT_MIME_TYPE);\n                const asText = await blob.text();\n                const json = JSON.parse(asText);\n                if (Array.isArray(json)) {\n                    pasteItems(json);\n                }\n            }\n        }\n    }\n}\n","import TokenSelector from \"./token-selector\";\nimport Token from \"./token\";\n\nexport default class DnDExtension {\n    constructor(\n        private tokenSelector: TokenSelector,\n        addMatchingItems: (item: unknown[]) => void,\n    ) {\n        let draggedIndexes = [];\n\n        const handleGlobalDrop = (event: DragEvent) => {\n            const target = event.target as HTMLElement;\n            if (!tokenSelector.contains(target)) {\n                tokenSelector.removeTokens(draggedIndexes);\n            }\n            draggedIndexes = [];\n        };\n\n        tokenSelector.addEventListener(\"dragstart\", (event) => {\n            const target = event.target;\n            if (target instanceof Token) {\n                if (target.disabled) {\n                    event.preventDefault();\n                    return;\n                }\n                target.setAttribute(\"aria-checked\", \"true\");\n                const checkedTokens = tokenSelector.querySelectorAll(\"[slot='items'][aria-checked='true']\");\n                if (checkedTokens.length > 0) {\n                    const draggedItems = Array.from(checkedTokens)\n                        .filter((t: Token) => !t.disabled)\n                        .map((t: Token) => {\n                            draggedIndexes.push(t.index);\n                            return tokenSelector.items[t.index];\n                        });\n                    event.dataTransfer.setData(\"text/plain\", JSON.stringify(draggedItems));\n                    event.dataTransfer.dropEffect = \"move\";\n                    event.dataTransfer.effectAllowed = \"move\";\n                    if (checkedTokens.length > 1) {\n                        const customDragImage = this.createCustomDragImage(target, draggedItems.length);\n                        event.dataTransfer.setDragImage(customDragImage, -14, -14);\n                    }\n                    window.addEventListener(\"drop\", handleGlobalDrop, { capture: true, once: true });\n                }\n            }\n        });\n        tokenSelector.addEventListener(\"dragenter\", (event) => {\n            tokenSelector.setAttribute(\"drop\", \"\");\n            event.preventDefault();\n        });\n        tokenSelector.addEventListener(\"dragover\", (event) => event.preventDefault());\n        tokenSelector.addEventListener(\"dragleave\", (event) => {\n            if (event.target == tokenSelector) {\n                tokenSelector.removeAttribute(\"drop\");\n            }\n        });\n        tokenSelector.addEventListener(\"drop\", (event) => {\n            tokenSelector.removeAttribute(\"drop\");\n            const data = event.dataTransfer.getData(\"text/plain\");\n            if (data) {\n                try {\n                    const asJson = JSON.parse(data);\n                    if (Array.isArray(asJson)) {\n                        addMatchingItems(asJson);\n                        event.preventDefault();\n                    }\n                } catch (ignored) {}\n            }\n        });\n        tokenSelector.addEventListener(\"dragend\", () => {\n            window.removeEventListener(\"drop\", handleGlobalDrop);\n            draggedIndexes = [];\n        });\n    }\n\n    private createCustomDragImage(targetToken: Token, draggedItemsNumber: number): HTMLElement {\n        let dragImage = targetToken.cloneNode(true) as HTMLElement;\n        dragImage.setAttribute(\"aria-disabled\", \"true\");\n        if (this.tokenSelector.tokenType) {\n            (dragImage as Token).value = draggedItemsNumber + \" \" + this.tokenSelector.tokenType;\n        } else {\n            const counter = document.createElement(\"div\");\n            counter.innerText = \"+\" + (draggedItemsNumber - 1);\n            Object.assign(counter.style, {\n                position: \"absolute\",\n                left: \"90%\",\n                top: \"75%\",\n            });\n            const wrapper = document.createElement(\"div\");\n            wrapper.appendChild(dragImage);\n            wrapper.appendChild(counter);\n            dragImage = wrapper;\n        }\n        Object.assign(dragImage.style, {\n            height: targetToken.offsetHeight,\n            outline: \"none\",\n            maxWidth: \"500px\",\n            position: \"absolute\",\n            display: \"block\",\n            left: \"-99999px\",\n            overflow: \"visible\",\n            margin: \"1px\",\n        });\n        dragImage.slot = \"items\";\n        this.tokenSelector.appendChild(dragImage);\n        requestAnimationFrame(() => dragImage.remove());\n        return dragImage;\n    }\n}\n","import { LitElement, TemplateResult, html, CSSResult, unsafeCSS, PropertyValues, nothing } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nimport \"@cas-smartdesign/lit-input\";\nimport SDInput, { IValueChangeEvent } from \"@cas-smartdesign/lit-input\";\nimport SDFieldValidationMessage, { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport { ItemGenerator } from \"@cas-smartdesign/list\";\nimport { generator as itemGenerator } from \"@cas-smartdesign/list-item\";\n\nimport TokenSuggestPopover, { Filter } from \"./token-suggest-popover\";\nimport Token, { generator, TokenData } from \"./token\";\nimport ClipboardExtension from \"clipboard-extension\";\nimport style from \"./scss/token-selector.scss?inline\";\nimport DnDExtension from \"drag-and-drop-extension\";\n\nexport type { Filter as InMemoryFilter } from \"./token-suggest-popover\";\nexport type { TokenData } from \"./token\";\nexport { generator } from \"./token\";\n\nfunction debounce<T>(func: (...args: T[]) => unknown, delay: number): typeof func {\n    let timeout: number;\n    return function (...args: T[]) {\n        if (timeout != null) {\n            clearTimeout(timeout);\n        }\n        timeout = window.setTimeout(() => func(...args), delay);\n    };\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [TokenSelector.ID]: TokenSelector;\n    }\n}\n\nexport interface ITokenClickedEvent {\n    index: number;\n    tokenElement: Token;\n    byPointerDevice: boolean;\n}\nexport interface ITokensRemovedEvent {\n    removedIndices: number[];\n    selectedIndices?: number[];\n}\nexport interface ITokenSelectedEvent {\n    newIndices: number[];\n    selectedIndices: number[];\n}\nexport interface ITokenCreatedEvent {\n    value: string;\n}\n\nexport enum SelectionMode {\n    RemoveOnly = \"remove-only\",\n    Multi = \"multi\",\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n    \"token-clicked\": CustomEvent<ITokenClickedEvent>;\n    \"tokens-removed\": CustomEvent<ITokensRemovedEvent>;\n    \"tokens-selected\": CustomEvent<ITokenSelectedEvent>;\n    \"token-created\": CustomEvent<ITokenCreatedEvent>;\n    \"auto-suggest-initialized\": CustomEvent;\n}\n\nexport default interface TokenSelector {\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 type TokenGenerator = (data: TokenData, index: number) => Token;\n\nexport default class TokenSelector extends LitElement {\n    public static readonly ID = \"sd-token-selector\";\n    public static ensureDefined = (): void => {\n        Token.ensureDefined();\n        if (!customElements.get(TokenSelector.ID)) {\n            customElements.define(TokenSelector.ID, TokenSelector);\n        }\n    };\n\n    @property({ type: String, attribute: \"selection-mode\", reflect: true })\n    public selectionMode: SelectionMode = SelectionMode.Multi;\n    @property({ type: Array, attribute: false })\n    public items: TokenData[] = [];\n    @property({ type: Array, attribute: false })\n    public selectedIndexes: number[] = [];\n    @property({ type: String, reflect: true })\n    public placeholder: string;\n    @property({ type: String, reflect: true, attribute: \"suggest-list-class\" })\n    public suggestListClass: string;\n    @property({ type: String, reflect: true, attribute: \"input-label\" })\n    public inputLabel: string;\n    @property({\n        converter: {\n            fromAttribute: (value) => value == \"true\",\n            toAttribute: (value) => value,\n        },\n        reflect: true,\n        attribute: \"aria-disabled\",\n    })\n    public disabled: boolean;\n    @property({ type: String, attribute: true })\n    public validationMessage: string;\n    @property({ type: String, attribute: true })\n    public validationIconSrc: string;\n    @property({ converter: SDFieldValidationMessage.levelConverter, attribute: true, reflect: true })\n    public validationLevel: ValidationLevel;\n    @property({ type: String, reflect: true, attribute: \"token-type\" })\n    public tokenType: string;\n    @property({ type: Boolean, reflect: true, attribute: \"case-sensitive\" })\n    public caseSensitive: boolean;\n\n    public suggestionFilter: Filter;\n\n    private _tokenGenerator: TokenGenerator = generator;\n    private _autoSuggestItemGenerator: ItemGenerator = itemGenerator;\n\n    private additionalTokenCommittingKeys: string[] = [];\n\n    private _tokenSuggestPopover: TokenSuggestPopover;\n\n    private cancelSearch: boolean;\n    private _activeTokenIndex = -1;\n\n    static get styles(): CSSResult {\n        return unsafeCSS(style);\n    }\n\n    static shadowRootOptions: ShadowRootInit = {\n        ...LitElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    public get tokenGenerator(): TokenGenerator {\n        return this._tokenGenerator;\n    }\n\n    public set tokenGenerator(value: TokenGenerator) {\n        this._tokenGenerator = value;\n        this.render();\n    }\n\n    public get autoSuggestItemGenerator(): ItemGenerator {\n        return this._autoSuggestItemGenerator;\n    }\n\n    public set autoSuggestItemGenerator(value: ItemGenerator) {\n        this._autoSuggestItemGenerator = value;\n        if (this._tokenSuggestPopover) {\n            this._tokenSuggestPopover.list.itemGenerator = value;\n        }\n    }\n\n    public setAdditionalTokenCommittingKeys(keys: string[]): void {\n        this.additionalTokenCommittingKeys = keys;\n    }\n\n    public openSuggestions(): void {\n        if (this.inputElement) {\n            this.focus();\n            this.tokenSuggestPopover.show();\n        }\n    }\n\n    public focus() {\n        if (this.inputElement) {\n            this.inputElement.focus();\n        } else {\n            (this.shadowRoot.querySelector(\".container\") as HTMLElement).focus();\n        }\n    }\n\n    public render(): TemplateResult {\n        return this.selectionMode == SelectionMode.RemoveOnly\n            ? html`<div class=\"container\" tabindex=\"0\">\n                      <slot name=\"items\"\n                          >${this.placeholder\n                              ? html`<span part=\"remove-only-placeholder\" class=\"placeholder\"\n                                    >${this.placeholder}</span\n                                >`\n                              : nothing}</slot\n                      >\n                  </div>\n                  <slot class=\"additonal-content\" name=\"additional-content\"></slot>`\n            : html`\n                  <sd-lit-input\n                      class=\"input\"\n                      .extendedPrefix=${true}\n                      .label=${this.inputLabel}\n                      .validationLevel=${this.validationLevel}\n                      .validationIconSrc=${this.validationIconSrc}\n                      .validationMessage=${this.validationMessage}\n                      .alwaysFloatLabel=${this.selectedIndexes.length > 0}\n                      .placeholder=${this.selectedIndexes.length == 0 ? this.placeholder : \"\"}\n                      .disabled=${this.disabled}\n                      tabindex=\"0\"\n                      ><div class=\"token-wrapper\" slot=\"prefix\"><slot name=\"items\"></slot></div>\n                  </sd-lit-input>\n                  <slot class=\"additonal-content\" name=\"additional-content\"></slot>\n              `;\n    }\n\n    protected firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {\n        super.firstUpdated(_changedProperties);\n\n        this.setAttribute(\"role\", \"listbox\");\n        this.setAttribute(\"aria-multiselectable\", \"true\");\n        if (!this.hasAttribute(\"tabIndex\")) {\n            this.tabIndex = 0;\n        }\n        this.addEventListener(\"focusout\", (event) => {\n            const target = event.relatedTarget as HTMLElement;\n            if (!this.contains(target) && !this.shadowRoot.contains(target)) {\n                this.querySelectorAll(\"[slot='items'][aria-checked='true']\").forEach(\n                    (checkedToken: Token) => (checkedToken.checked = false),\n                );\n            }\n        });\n        new ClipboardExtension(\n            this,\n            () => this.inputElement?.value,\n            (items) => this.addMatchingItems(items),\n        );\n        new DnDExtension(this, (items) => this.addMatchingItems(items));\n    }\n\n    private handleInputKeyDown = (event: KeyboardEvent, input: SDInput) => {\n        if ((event.key === \"Enter\" || this.additionalTokenCommittingKeys.includes(event.key)) && input.value) {\n            event.preventDefault();\n            event.stopPropagation();\n            this.commitTokenValue(input.value);\n            return;\n        }\n\n        switch (event.key) {\n            case \"Escape\": {\n                event.preventDefault();\n                event.stopPropagation();\n                this.tokenSuggestPopover.hide();\n                break;\n            }\n            case \"Tab\": {\n                this.commitTokenValue(input.value);\n                this.tokenSuggestPopover.hide();\n                break;\n            }\n            default: {\n                this.handleKeyDown(event);\n            }\n        }\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowLeft\": {\n                if (!this.hasInputValue) {\n                    this.updateActiveToken(-1);\n                }\n                break;\n            }\n            case \"ArrowRight\": {\n                if (!this.hasInputValue) {\n                    this.updateActiveToken(1);\n                }\n                break;\n            }\n            case \"Enter\": {\n                if (!this.hasInputValue && this.activeTokenIndex != -1) {\n                    const curEl = this.activeTokenElement;\n                    if (event.getModifierState(\"Control\")) {\n                        curEl.checked = !curEl.checked;\n                    } else {\n                        curEl.checked = true;\n                        this.onTokenClick(curEl, false);\n                    }\n                    if (document.activeElement != this) {\n                        this.focus();\n                    }\n                }\n                break;\n            }\n            case \"Backspace\": {\n                if (!this.hasInputValue) {\n                    if (this.activeTokenIndex == -1) {\n                        this.updateActiveToken(-1);\n                    } else {\n                        this.removeSelectionOrActiveToken();\n                    }\n                }\n                break;\n            }\n            case \"Clear\":\n            case \"Delete\": {\n                this.removeSelectionOrActiveToken();\n                break;\n            }\n            case \"a\": {\n                if (!this.hasInputValue && event.getModifierState(\"Control\")) {\n                    this.querySelectorAll(\"[slot='items']\").forEach((item: Token) => (item.checked = true));\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n                break;\n            }\n        }\n    };\n\n    private addMatchingItems(items: unknown & { caption?: string }[]) {\n        const newSelectedIndexes = items\n            .map((item) => {\n                const matchingIndex = item.caption == null ? -1 : this.findIndex(item);\n                if (\n                    matchingIndex != -1 &&\n                    !this.items[matchingIndex].disabled &&\n                    !this.selectedIndexes.includes(matchingIndex)\n                ) {\n                    return matchingIndex;\n                }\n                return -1;\n            })\n            .filter((i) => -1 != i);\n        if (newSelectedIndexes.length > 0) {\n            this.handleTokenSelection(newSelectedIndexes);\n        }\n    }\n\n    public removeSelectionOrActiveToken() {\n        if (!this.disabled) {\n            const checkedTokens = this.querySelectorAll(\"[slot='items'][aria-checked='true']\");\n            if (checkedTokens.length > 0) {\n                const tokensArray = Array.from(checkedTokens) as Token[];\n                this.removeTokens(tokensArray.filter((t) => !t.disabled).map((t) => t.index));\n            } else if (this.activeTokenIndex != -1) {\n                const activeToken = this.activeTokenElement;\n                if (activeToken && !activeToken.disabled) {\n                    this.removeTokens([activeToken.index]);\n                }\n            }\n        }\n    }\n\n    private updateActiveToken(offset: number): void {\n        const maxIndex = this.querySelectorAll(\"[slot='items']\").length - 1;\n        if (this.activeTokenIndex == -1) {\n            if (offset < 0) {\n                this.activeTokenIndex = maxIndex;\n            }\n        } else {\n            if (this.activeTokenIndex == maxIndex && offset > 0) {\n                this.activeTokenIndex = -1;\n                this.focus();\n            } else {\n                this.activeTokenIndex = Math.max(0, Math.min(maxIndex, this.activeTokenIndex + offset));\n            }\n        }\n    }\n\n    private commitTokenValue(tokenValue: string): void {\n        if (this.disabled) {\n            return;\n        }\n\n        // 'Commiting' supports three different cases:\n        // 1. User navigates via arrow keys in the auto suggest list and selects an item with enter\n        // 2. User enters a value that is already present as a token, so this token is 'selected'\n        // 3. User enters a value that is new, so the token is 'created'\n\n        if (this.tokenSuggestPopover.isOpened) {\n            const focusedSuggestToken = this.tokenSuggestPopover.focusedSuggestToken;\n            if (focusedSuggestToken) {\n                if (!focusedSuggestToken.disabled) {\n                    const selectedTokenIndex = this.findIndex(focusedSuggestToken);\n                    this.handleTokenSelection([selectedTokenIndex]);\n                    this.tokenSuggestPopover.hide();\n                }\n                return;\n            }\n        }\n\n        if (!tokenValue?.trim()) {\n            return;\n        }\n\n        const tokenIndex = this.items.findIndex((item) =>\n            this.caseSensitive ? item.caption == tokenValue : item.caption.toLowerCase() == tokenValue.toLowerCase(),\n        );\n        if (!this.selectedIndexes.includes(tokenIndex)) {\n            if (tokenIndex >= 0) {\n                this.handleTokenSelection([tokenIndex]);\n            } else {\n                this.handleTokenCreation(tokenValue);\n            }\n        }\n\n        this.requestUpdate(\"selectedIndexes\");\n        this.tokenSuggestPopover.hide();\n        window.removeEventListener(\"pointerdown\", this.handleWindowPointerDown);\n    }\n\n    public updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n\n        if (this._tokenSuggestPopover) {\n            this.tokenSuggestPopover.list.className = this.suggestListClass || \"\";\n            if (this.suggestionFilter) {\n                this.tokenSuggestPopover.filter = this.suggestionFilter;\n            }\n        }\n\n        if (changedProperties.has(\"selectionMode\")) {\n            if (SelectionMode.Multi == this.selectionMode) {\n                this.setAttribute(\"aria-haspopup\", \"listbox\");\n                const input = this.inputElement;\n                input.addEventListener(\"immediate-value-change\", (e) => this.handleInputValueChange(e));\n                input.addEventListener(\"keydown\", (e) => this.handleInputKeyDown(e, input));\n                window.queueMicrotask(() => this.tokenSuggestPopover); // lazy init of the popover\n            } else {\n                this.removeAttribute(\"aria-haspopup\");\n                this.addEventListener(\"keydown\", this.handleKeyDown);\n                if (this._tokenSuggestPopover) {\n                    this._tokenSuggestPopover.popover.remove();\n                    this._tokenSuggestPopover = null;\n                }\n            }\n        }\n\n        if (\n            changedProperties.size == 0 ||\n            changedProperties.has(\"selectionMode\") ||\n            changedProperties.has(\"items\") ||\n            changedProperties.has(\"selectedIndexes\") ||\n            changedProperties.has(\"disabled\")\n        ) {\n            this.updateItems();\n        }\n    }\n\n    private handleInputValueChange(event: CustomEvent<IValueChangeEvent>): void {\n        const userInput = event.detail.value;\n        if (!userInput) {\n            this.tokenSuggestPopover.hide();\n            this.cancelSearch = true;\n        } else {\n            this.activeTokenIndex = -1;\n            this.cancelSearch = false;\n            this.debouncedShowTokenSuggestPopover();\n            window.addEventListener(\"pointerdown\", this.handleWindowPointerDown);\n        }\n    }\n\n    private handleWindowPointerDown = (event: PointerEvent) => {\n        const input = this.inputElement;\n        if (!input || !input.value) return;\n\n        const pointerDownOnInputOrList = event.composedPath().some((element) => {\n            if (\n                element instanceof HTMLElement &&\n                (event.composedPath().indexOf(input) > -1 ||\n                    element.getAttribute(\"popover-for\") === \"token-autosuggest-popover\")\n            ) {\n                return true;\n            }\n        });\n\n        if (!pointerDownOnInputOrList) {\n            this.commitTokenValue(input.value);\n        }\n    };\n\n    private debouncedShowTokenSuggestPopover = debounce(this.showFilteredTokenSuggestions.bind(this), 200);\n    private showFilteredTokenSuggestions() {\n        if (!this.cancelSearch && this.inputElement.value) {\n            this.tokenSuggestPopover.show();\n        }\n    }\n\n    private isTokenNotSelected(index: number): unknown {\n        return !this.selectedIndexes.includes(index);\n    }\n\n    private get tokenSuggestPopover(): TokenSuggestPopover {\n        if (!this._tokenSuggestPopover && this.inputElement) {\n            this._tokenSuggestPopover = new TokenSuggestPopover(\n                this.inputElement,\n                () => this.items.filter((item, index) => !item.disabled && this.isTokenNotSelected(index)),\n                (selectedToken) => {\n                    const selectedTokenIndex = this.findIndex(selectedToken);\n                    this.handleTokenSelection([selectedTokenIndex]);\n                    window.removeEventListener(\"pointerdown\", this.handleWindowPointerDown);\n                },\n                (suggestPopover) => {\n                    this.appendChild(suggestPopover.popover);\n                    this.dispatchEvent(new CustomEvent(\"auto-suggest-initialized\"));\n                    suggestPopover.popover.addEventListener(\"close\", () => {\n                        if (this.inputElement.value && !this.contains(document.activeElement)) {\n                            this.inputElement.value = \"\";\n                        }\n                    });\n                },\n            );\n            this._tokenSuggestPopover.list.itemGenerator = this._autoSuggestItemGenerator;\n            this._tokenSuggestPopover.list.className = this.suggestListClass;\n            if (this.suggestionFilter) {\n                this._tokenSuggestPopover.filter = this.suggestionFilter;\n            }\n        }\n        return this._tokenSuggestPopover;\n    }\n\n    private updateItems(): void {\n        if (!this.isConnected || !this.items) {\n            return;\n        }\n\n        const input = this.inputElement;\n        if (input && (!this._tokenSuggestPopover || !this._tokenSuggestPopover.isOpened)) {\n            input.value = \"\";\n        }\n\n        this.querySelectorAll(\"[slot='items']\").forEach((oldItem) => {\n            this.removeChild(oldItem);\n        });\n\n        const fragment = document.createDocumentFragment();\n\n        let visibleTokens: TokenData[] = [];\n        if (this.selectionMode == SelectionMode.RemoveOnly) {\n            visibleTokens = this.items.map((item) => this.disableIfNeeded(item));\n        } else {\n            this.selectedIndexes.forEach((value) => {\n                visibleTokens.push(this.disableIfNeeded(this.items[value]));\n            });\n        }\n\n        visibleTokens.forEach((item) => {\n            const token = this.tokenGenerator(item, this.findIndex(item));\n            token.slot = \"items\";\n            fragment.appendChild(token);\n            if (!token.id) {\n                token.id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);\n            }\n\n            token.setClickHandler(() => this.onTokenClick(token, true));\n            token.addEventListener(\"click\", () => {\n                if (document.activeElement != this) {\n                    this.focus();\n                }\n            });\n            token.setDeleteHandler((tokenIndex) => this.removeTokens([tokenIndex]));\n        });\n\n        this.appendChild(fragment);\n        if (this._tokenSuggestPopover) {\n            this._tokenSuggestPopover.refreshItems();\n        }\n    }\n\n    public removeTokens(tokenIndexes: number[]): void {\n        if (this.disabled) {\n            return;\n        }\n        if (this.activeTokenIndex != -1 && tokenIndexes.includes(this.activeTokenElement.index)) {\n            this.activeTokenIndex = -1;\n        }\n        if (this.selectionMode == SelectionMode.RemoveOnly) {\n            this.dispatchEvent(\n                new CustomEvent<ITokensRemovedEvent>(\"tokens-removed\", {\n                    detail: {\n                        removedIndices: tokenIndexes,\n                    },\n                }),\n            );\n        } else {\n            this.selectedIndexes = this.selectedIndexes.filter((i) => !tokenIndexes.includes(i));\n\n            this.dispatchEvent(\n                new CustomEvent<ITokensRemovedEvent>(\"tokens-removed\", {\n                    detail: {\n                        removedIndices: tokenIndexes,\n                        selectedIndices: [...this.selectedIndexes],\n                    },\n                }),\n            );\n        }\n    }\n\n    private onTokenClick(token: Token, byPointerDevice: boolean): void {\n        let relevantIndex;\n        this.querySelectorAll(\"[slot='items']\").forEach((item, i) => {\n            if (token == item) {\n                relevantIndex = i;\n            } else {\n                item.setAttribute(\"aria-checked\", \"false\");\n            }\n        });\n        this.activeTokenIndex = relevantIndex;\n        this.setAttribute(\"aria-activedescendant\", this.activeTokenElement.id);\n        if (this._tokenSuggestPopover && this._tokenSuggestPopover.isOpened) {\n            this._tokenSuggestPopover.hide();\n        }\n        this.dispatchEvent(\n            new CustomEvent<ITokenClickedEvent>(\"token-clicked\", {\n                detail: {\n                    index: token.index,\n                    tokenElement: token,\n                    byPointerDevice,\n                },\n            }),\n        );\n    }\n\n    private disableIfNeeded(item: TokenData): TokenData {\n        if (this.disabled) {\n            return { ...item, disabled: true };\n        }\n        return item;\n    }\n\n    private handleTokenSelection(indexes: number[]) {\n        this.selectedIndexes = this.selectedIndexes.concat(indexes);\n        this.dispatchEvent(\n            new CustomEvent<ITokenSelectedEvent>(\"tokens-selected\", {\n                detail: {\n                    newIndices: indexes,\n                    selectedIndices: [...this.selectedIndexes],\n                },\n            }),\n        );\n    }\n\n    private handleTokenCreation(tokenValue: string) {\n        this.dispatchEvent(\n            new CustomEvent(\"token-created\", {\n                detail: {\n                    value: tokenValue,\n                },\n            }),\n        );\n    }\n\n    private get inputElement(): SDInput | null {\n        return this.shadowRoot.querySelector(\".input\") as SDInput;\n    }\n\n    public get activeTokenElement(): Token | null {\n        return this.getTokenElement(this.activeTokenIndex);\n    }\n\n    private getTokenElement(index: number): Token | null {\n        return this.querySelector(\"[slot='items']:nth-of-type(\" + (index + 1) + \")\");\n    }\n\n    private findIndex(token: TokenData) {\n        return this.items.findIndex((item) => item.caption === token.caption);\n    }\n\n    public get activeTokenIndex(): number {\n        return this._activeTokenIndex;\n    }\n\n    public set activeTokenIndex(value: number) {\n        if (this._activeTokenIndex != -1) {\n            const previous = this.activeTokenElement;\n            if (previous) {\n                previous.current = false;\n            }\n        }\n        this._activeTokenIndex = value;\n        if (value == -1) {\n            this.removeAttribute(\"aria-activedescendant\");\n        } else {\n            const activeElement = this.activeTokenElement;\n            activeElement.current = true;\n            this.setAttribute(\"aria-activedescendant\", activeElement.id);\n        }\n    }\n\n    private get hasInputValue() {\n        return !!this.inputElement?.value;\n    }\n}\n"],"names":["TokenSuggestPopover","inputElement","notSelectedTokensProvider","tokenSelectedCallback","initializeCallback","searchTerm","item","List","e","suggestIndex","selectedToken","KeyDownDelegator","event","_offset","toggleSelection","token","allTokens","_a","popover","Popover","clearSvg","alwaysPresentBooleanAttributeConverter","value","_Token","LitElement","unsafeCSS","style","oldValue","changedProperties","deleteButton","html","nothing","unsafeSVG","iconBackgroundStyle","ifDefined","ImageTools","clickHandler","deleteHandler","__decorateClass","property","Token","generator","data","_index","RELEVANT_MIME_TYPE","ClipboardExtension","tokenSelector","getInputElementValue","pasteItems","checkedTokens","relevantIndexes","t","activeToken","asJson","index","asBlob","clipboardItems","clipboardItem","asText","json","DnDExtension","addMatchingItems","draggedIndexes","handleGlobalDrop","target","draggedItems","customDragImage","targetToken","draggedItemsNumber","dragImage","counter","wrapper","debounce","func","delay","timeout","args","SelectionMode","_TokenSelector","itemGenerator","input","curEl","element","keys","_changedProperties","checkedToken","items","newSelectedIndexes","matchingIndex","tokensArray","offset","maxIndex","tokenValue","focusedSuggestToken","selectedTokenIndex","tokenIndex","suggestPopover","oldItem","fragment","visibleTokens","tokenIndexes","i","byPointerDevice","relevantIndex","indexes","previous","activeElement","SDFieldValidationMessage","TokenSelector"],"mappings":"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"}

package/dist/token-suggest-popover.d.ts

@@ -0,0 +1,26 @@
+import Popover from "@cas-smartdesign/popover";
+import List from "@cas-smartdesign/list";
+import { TokenData } from "./token";
+import SDInput from "@cas-smartdesign/lit-input";
+export type Filter = (searchTerm: string, item: TokenData) => boolean;
+type TokenSelectedCallback = (token: TokenData) => void;
+export default class TokenSuggestPopover {
+    private inputElement;
+    private notSelectedTokensProvider;
+    private initializeCallback;
+    private _popover?;
+    private _tokenList;
+    private _suggestItems;
+    filter: Filter;
+    constructor(inputElement: SDInput, notSelectedTokensProvider: () => TokenData[], tokenSelectedCallback: TokenSelectedCallback, initializeCallback: (popover: TokenSuggestPopover) => void);
+    show(): void;
+    refreshItems(): void;
+    private filterItems;
+    hide(): void;
+    get list(): List;
+    get popover(): Popover;
+    private createPopover;
+    get isOpened(): boolean;
+    get focusedSuggestToken(): TokenData;
+}
+export {};

package/dist/token.d.ts

@@ -0,0 +1,43 @@
+import { LitElement, TemplateResult, CSSResult, PropertyValues } from "lit";
+declare global {
+    interface HTMLElementTagNameMap {
+        [Token.ID]: Token;
+    }
+}
+export interface TokenData {
+    caption?: string;
+    description?: string;
+    type?: string;
+    icon?: string;
+    iconPlaceholder?: string;
+    iconBackgroundColor?: string;
+    disabled?: boolean;
+    deactivated?: boolean;
+}
+type TokenActionCallback = (tokenIndex: number) => void;
+export default class Token extends LitElement {
+    static readonly ID = "sd-token";
+    static ensureDefined: () => void;
+    value: string;
+    type: string;
+    icon: string;
+    iconPlaceholder: string;
+    iconBackgroundColor: string;
+    disabled: boolean;
+    current: boolean;
+    index: number;
+    private _checked;
+    private _tokenClickHandler;
+    private _tokenDeleteHandler;
+    static get styles(): CSSResult;
+    set checked(value: boolean);
+    get checked(): boolean;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    render(): TemplateResult;
+    private renderIcon;
+    updated(changedProperties: PropertyValues): void;
+    setClickHandler(clickHandler: TokenActionCallback): void;
+    setDeleteHandler(deleteHandler: TokenActionCallback): void;
+}
+export declare const generator: (data: TokenData, _index: number) => Token;
+export {};

package/npm-third-party-licenses.json

@@ -0,0 +1,197 @@
+{
+    "@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"
+    },
+    "@popperjs/core@2.11.8": {
+        "licenses": "MIT",
+        "repository": "https://github.com/popperjs/popper-core",
+        "licenseUrl": "https://github.com/popperjs/popper-core/raw/HEAD/LICENSE.md"
+    },
+    "@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,42 @@
+{
+  "name": "@cas-smartdesign/token-selector",
+  "version": "0.15.0",
+  "description": "A token-selector based on LitElement",
+  "main": "dist/token-selector-with-externals.js",
+  "module": "dist/token-selector.mjs",
+  "license": "SEE LICENSE IN LICENSE",
+  "types": "dist/token-selector.d.ts",
+  "dependencies": {
+    "lit": "^2.8.0",
+    "@cas-smartdesign/element-utils": "^1.0.2",
+    "@cas-smartdesign/field-validation-message": "^5.0.1",
+    "@cas-smartdesign/image-tools": "^3.0.1",
+    "@cas-smartdesign/list": "^6.3.0",
+    "@cas-smartdesign/list-item": "^7.2.2",
+    "@cas-smartdesign/lit-input": "^7.1.3",
+    "@cas-smartdesign/popover": "^4.1.1",
+    "@cas-smartdesign/styles": "^3.6.1"
+  },
+  "files": [
+    "dist",
+    "npm-third-party-licenses.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@cas-smartdesign/button": "^5.0.1",
+    "@cas-smartdesign/license-generator": "^1.6.1",
+    "@cas-smartdesign/element-preview": "^0.2.1"
+  },
+  "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,137 @@
+# @cas-smartdesign/token-selector
+
+A token-selector element based on [lit-element](https://github.com/Polymer/lit-element) with SmartDesign look & feel.
+
+_`Note: This is a preview version of the sd-token-selector element. Some features like for example declarative support for the element is not fully supported and guaranteed.`_
+
+## Attributes - Token-Selector
+
+- `selection-mode` : **string (default = "multi")**
+  - `multi`: it is possible to select, delesect existing tokens or create new ones with the help of a `sd-lit-input` element.
+  - `remove-only`: there is no `sd-lit-input` element shown, tokens may only be removed.
+  - In addition the property usage of `items` and `selectedIndexes` differs. Further information below.
+- `placeholder` : **string (default = null)**
+  - Defines the default text content of the selector if there is no selected token present. Just like a placeholder for an HTML input element.
+- `suggest-list-class` : **string (default = null)**
+  - The classname of the suggestion list.
+- `aria-disabled` : **boolean (default = false)**
+  - Disables the editing possibilities.
+- `role` : **string (default = 'listbox')**
+- `aria-multiselectable` : **boolean (default = true)**
+- `aria-activedescendant` : **string (default = null)**
+  - The `id` attribute of the currently active `sd-token`.
+- `aria-haspopup` : **string (default = 'listbox')**
+  - Set only for multi selection mode when the selector has a listbox popup.
+- `token-type` : **string (default = null)**
+  - Shown as a drag shadow suffix after the amount when moving multiple tokens. Without it the drag source is used as a drag image with an indicator from the amount of additional selected tokens.
+- `drop` : **boolean (default = null)**
+  - Present when the selector is a potential drop candidate.
+- `case-sensitive` : **boolean (default = null)**
+  - Based on its value the token-selector differentiates values with or without case sensitive checking.
+
+## Properties - Token-Selector
+
+- `selectionMode` : **string (default = "multi")**
+  - Reflects the corresponding attribute.
+- `items` : **array (default = empty)**
+  - The data to be used by the token-selector.
+  - **remove-only**
+    - The passed items are directly visualized as tokens
+  - **multi select**
+    - The passed items are used as the datasource of the token-selector.
+    - Based on this datasource, tokens are visualized when `selectedIndexes` are present.
+    - In addition the datasource is used for the token suggestions, which will be shown when the user starts typing.
+- `selectedIndexes` : **array (default = empty)**
+  - The indexes of the currently selected items.
+  - Only relevant when the selection mode is **multi**
+- `placeholder` : **string (default = null)**
+  - Reflects the corresponding attribute.
+- `suggestListClass` : **string (default = null)**
+  - Reflects the `suggest-list-class` attribute.
+- `disabled` : **boolean (default = false)**
+  - Reflects the `aria-disabled` attribute.
+- `tokenGenerator`: Default value is the one from the token element.
+  - Tokens can be further customized in addition to the regular properties.
+- `autoSuggestItemGenerator`: Default value is the one from the list-item element.
+  - Auto suggest items can be further customized in addition to the regular properties.
+- `tokenType` : **string (default = null)**
+  - Reflects the `token-type` attribute.
+- `caseSensitive` : **boolean (default = null)**
+  - Reflects the `case-sensitive` attribute.
+- `suggestionFilter`: **Function (searchTerm: string, item: TokenData) => boolean**
+  - A custom filter function can be passed to override the default caption based search of suggestions.
+
+In addition it allows to inject elements with slot named `additional-content` that is shown right after the tokens part.
+
+## Attributes/properties - delegated to the internal `sd-lit-input`
+
+- `placeholder` : **string (default = null)**
+- `inputLabel` : **string (default = null)**
+- `validationMessage` : **string (default = null)**
+- `validationIconSrc` : **string (default = null)**
+- `validationLevel` : **string (default = null)**
+
+## Attributes - Token
+
+- `value` : **string (default = "")**
+  - The displayed value of the token.
+- `type` : **string (default = "")**
+  - The type of the token. Used to mark tokens by usecases.
+- `aria-disabled` : **boolean (default = false)**
+  - Indicates if the token can be edited or removed for example. An edited token may provide a delete button as well.
+- `aria-current` : **boolean (default = false)**
+  - Indicates if the token is the active descendant of the relevant `sd-token-selector`.
+- `aria-checked` : **boolean (default = false)**
+  - Indicates if the token is checked for potentially batch actions like removal or drag and drop.
+- `aria-selected` : **boolean (default = true)**
+- Set to true initially since every visible token element in a `sd-token-selector` can be considered as selected. The non-selected ones are not present in the DOM normally.
+
+## Properties - Token
+
+- `value`, `type`
+  - Reflect the corresponding attributes.
+- `icon`: **string (default = "")**
+  - Defines the icon url. If present the icon is shown at the start of the token.
+- `iconPlaceholder` : **string (default = "")**
+  - Defines the placeholder icon of the token
+- `iconBackgroundColor`: **string (default = "")**
+  - Defines the background color of the icon container. Only relevant when the icon has a transparent background.
+- `disabled`
+  - Reflects the `aria-disabled` attribute.
+- `current`
+  - Reflects the `aria-current` attribute.
+- `checked`
+  - Reflects the `aria-checked` attribute.
+
+In addition it allows to inject elements with slots named `before-icon` & `after-icon`.
+
+## CSS Custom Properties & parts
+
+- `--token-background-color`
+  - Defines the background color of the token.
+- `--token-border`
+  - Defines the border of the token.
+- `--token-icon-background-color`
+  - Defines the icon background color of the token.
+- `remove-only-placeholder` part
+  - Applies to the placeholder text which is shown when the selector has no selection in `remove-only` mode.
+
+## Custom Events
+
+- `token-clicked`
+  - Dispatched when a token is clicked.
+  - Contains the index of the token in the items list and the referenced HTML Element.
+- `tokens-removed`
+  - Dispatched when the remove button of a token is clicked or checked tokens are removed via keyboard.
+  - Contains the indexes of the removed tokens in the items list.
+  - Contains also an updated list of selectedIndices if the selection-mode is `multi`.
+- `tokens-selected`
+  - Dispatched when an existing and not yet selected token was selected.
+  - Contains the indexes of the selected tokens in the items list and the updated selectedIndices.
+- `token-created`
+  - Dispatched when a not existing token value was submitted.
+  - Contains the value of the new token.
+- `auto-suggest-initialized`
+  - Dispatched when the auto suggest popover is shown for the first time.
+
+## Examples