@limetech/lime-elements 38.40.0 → 38.42.0

package/dist/lime-elements/p-fd1be8da.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","this","renderAsButton","h","id","identifier","class","role","disabled","readonly","loading","onKeyDown","handleDeleteKeyDown","renderSpinner","renderPicture","renderLabel","renderBadge","renderProgressBar","renderRemoveButton","renderActionsMenu","renderAsLink","rel","getRel","_a","link","target","_b","href","title","tabindex","text","filterClickWhenDisabled","e","preventDefault","handleRemoveClick","event","stopPropagation","remove","emit","removable","keys","DELETE","BACKSPACE","includes","key","removeChipLabel","getTranslation","actionMenuLabel","translate","get","language","handleActionMenuSelect","menuItem","detail","value","menuItemSelected","handleActionMenuCancel","crypto","randomUUID","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","Host","onClick","icon","getIconName","image","isEmpty","src","alt","badge","name","style","color","backgroundColor","label","menuItems","length","svgData","tabIndex","innerHTML","getMenuItems","items","onSelect","openDirection","onCancel","slot","separator","indeterminate","progress","currentPercentage","handleKeyboardEvent","textValue","isArrowLeft","ARROW_LEFT","isArrowRight","ARROW_RIGHT","isEnter","ENTER","isDelete","isBackspace","isEscape","ESCAPE","handleLeft","handleRight","handleEnter","handleDelete","handleBackspace","handleEscape","inputChipIndexSelected","emitInteraction","removeChip","repeat","chipSetCss","ChipSet","constructor","hostRef","handleKeyDown","renderContent","type","renderInputChips","map","renderChip","getValue","chip","Object","assign","selected","selectedChipIds","floatLabelAbove","editMode","hasHelperText","helperText","undefined","renderHelperLine","maxItems","maxLength","invalid","isInvalid","catchInputChipClicks","Lime","isSelectableChip","updateSelectedChipIds","change","handleRemoveChip","newValue","filter","clearAllChipsLabel","labelId","createRandomString","bind","renderInputChip","isFull","handleTextFieldFocus","handleInputBlur","handleTextInput","inputFieldOnChange","inputHidden","handleDeleteAllIconClick","renderDelimiter","connectedCallback","initialize","async","emptyInput","shadowRoot","querySelector","focus","startEdit","syncEmptyInput","componentDidLoad","triggerIconColorWarning","mdcTextField","MDCTextField","componentDidUpdate","input","destroy","classes","leadingIcon","clearAllButton","required","hasValue","hasLeadingIcon","hasFloatingLabel","getContentProps","handleChangeChips","oldValue","isEqual","inputType","hidden","onBlur","onFocus","onInput","onChange","placeholder","searchLabel","autocomplete","renderLeadingIcon","renderClearAllChipsButton","blurred","emptyInputOnBlur","setTimeout","stopEdit","trim","interact","chipType","chipProps","getChipProps","index","chips","isLastChip","onRemove","getHref","getTarget","updateChoiceTypeSelectedIds","updateFilterTypeSelectedIds","isChipSelected","removeChipIdFromSelectedChipIds","addChipIdToSelectedChipIds","chipId","delimiter","iconFillColor","iconBackgroundColor","iconTitle","console","warn"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n* @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.\n* @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.\n*/\n\n:host(limel-chip) {\n    --limel-chip-height: var(--limel-chip-size, 1.75rem);\n    --limel-chip-gap: 0.5rem;\n    isolation: isolate;\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n}\n\n:host(limel-chip[size='small']) {\n    --limel-chip-height: 1.5rem;\n    --limel-chip-gap: 0.25rem;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.chip {\n    all: unset;\n    position: relative;\n\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: min(var(--chip-max-width, 100%), 25rem);\n    height: var(--limel-chip-height);\n\n    border-radius: var(--limel-chip-height);\n    font-size: clamp(\n        0.8125rem /* 13px */,\n        calc(var(--limel-chip-height) - 0.875rem /* 14px */),\n        1rem\n    );\n    padding: 0 0.125rem;\n\n    &:has(limel-icon),\n    &:has(img) {\n        .text {\n            padding-left: 0;\n        }\n    }\n\n    &:not([disabled]) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-inset-clickable;\n    }\n\n    &:has(limel-badge) {\n        padding-right: 0.375rem;\n\n        .text {\n            padding-right: 0;\n        }\n    }\n\n    &:has(+ .remove-button:hover) {\n        box-shadow: var(--shadow-depth-8-error);\n    }\n\n    &:has(+ limel-menu),\n    &:has(+ .trailing-button) {\n        padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n        .text {\n            padding-right: 0;\n        }\n    }\n}\n\n:host(limel-chip[disabled]:not([disabled='false'])) {\n    .chip {\n        // Similar to `limel-button[disabled]`\n        color: rgba(var(--contrast-1600), 0.37);\n        background-color: rgba(var(--contrast-1600), 0.1);\n        box-shadow: none;\n    }\n}\n\n:host(limel-chip[readonly]:not([readonly='false'])) {\n    .chip {\n        box-shadow: 0 0 0 1px\n            var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));\n    }\n}\n\n:host(limel-chip[selected]:not([selected='false'])) {\n    .chip {\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow:\n                var(--button-shadow-inset), var(--shadow-depth-8-focused);\n        }\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n    .text {\n        color: var(--lime-primary-color, var(--limel-theme-primary-color));\n    }\n}\n\n@include mixins.visualize-aria-expanded('.chip');\n\n:host(limel-chip[type='filter']) {\n    .chip {\n        border-top-left-radius: 0.5rem;\n        border-bottom-left-radius: 0.5rem;\n\n        &:after {\n            content: '';\n            transition:\n                background-color 0.4s ease 0.2s,\n                box-shadow 0.6s ease 0.2s;\n            box-sizing: border-box;\n            position: absolute;\n            bottom: 0.125rem;\n            left: 0.125rem;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: 50%;\n            background-color: rgb(var(--contrast-800), 0.8);\n            box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n    .chip {\n        &:after {\n            background-color: rgb(var(--color-green-default));\n            box-shadow:\n                0 0 0.375rem 0 rgb(var(--color-green-light)),\n                0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[invalid]) {\n    .chip {\n        @include mixins.add-chessboard-background();\n        background-color: rgb(var(--color-red-default));\n    }\n\n    .text {\n        color: rgb(var(--color-white));\n    }\n}\n\nimg,\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n}\n\nimg {\n    object-fit: cover;\n    border-radius: 50%;\n}\n\nlimel-icon {\n    padding: 0.0625rem;\n}\n\nlimel-badge {\n    pointer-events: none;\n}\n\n.text {\n    @include mixins.truncate-text;\n    line-height: 1.2;\n    padding: 0 0.5rem;\n    font-size: var(--limel-theme-default-font-size);\n}\n\n.trailing-button {\n    all: unset;\n    @include mixins.is-flat-clickable();\n\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n    margin-right: 0.125rem;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n\n    border-radius: 50%;\n\n    svg {\n        transition:\n            color 0.2s ease,\n            transform 0.2s ease;\n        width: 1.25rem;\n    }\n\n    &.remove-button:hover {\n        color: rgb(var(--color-red-dark));\n        svg {\n            transform: scale(0.8);\n        }\n    }\n}\n\nlimel-menu {\n    button[slot='trigger'] {\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    &[open] {\n        button[slot='trigger'] {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\n@import './partial-styles/_loading.scss';\n@import './partial-styles/_progress.scss';\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list-item/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-size\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Defines the size of the chip.\n     */\n    @Prop({ reflect: true })\n    public size: 'small' | 'default' = 'default';\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                rel={rel}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel()}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel()}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return `${this.getTranslation('remove')} ${this.text}`;\n    };\n\n    private actionMenuLabel = (): string => {\n        return this.getTranslation('file-viewer.more-actions');\n    };\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n","import {\n    ARROW_LEFT,\n    ARROW_RIGHT,\n    BACKSPACE,\n    DELETE,\n    ENTER,\n    ESCAPE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n \n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.textValue.length > 0) {\n        // If there is any text in the input field, keyboard input should\n        // navigate the text, not the chips.\n        return;\n    }\n\n    if (!this.value?.length) {\n        // If there are no chips, there is nothing to select.\n        return;\n    }\n\n    const isArrowLeft = event.key === ARROW_LEFT;\n    const isArrowRight = event.key === ARROW_RIGHT;\n    const isEnter = event.key === ENTER;\n    const isDelete = event.key === DELETE;\n    const isBackspace = event.key === BACKSPACE;\n    const isEscape = event.key === ESCAPE;\n\n    if (isArrowLeft) {\n        return handleLeft(this, event);\n    }\n\n    if (isArrowRight) {\n        return handleRight(this, event);\n    }\n\n    if (isEnter) {\n        return handleEnter(this, event);\n    }\n\n    if (isDelete) {\n        return handleDelete(this, event);\n    }\n\n    if (isBackspace) {\n        return handleBackspace(this, event);\n    }\n\n    if (isEscape) {\n        return handleEscape(this, event);\n    }\n}\n\nfunction handleLeft(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = host.value.length - 1;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected <= 0) {\n        return;\n    }\n\n    host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = 0;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected >= host.value.length - 1) {\n        return;\n    }\n\n    host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.emitInteraction(host.value[host.inputChipIndexSelected]);\n    }\n}\n\nfunction handleEscape(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.inputChipIndexSelected = null;\n    }\n}\n\nfunction handleDelete(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    }\n}\n\nfunction handleBackspace(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    } else if (!event.repeat) {\n        host.inputChipIndexSelected = host.value.length - 1;\n    }\n}\n\nfunction removeChip(host) {\n    if (host.inputChipIndexSelected !== null) {\n        host.removeChip(host.value[host.inputChipIndexSelected].id);\n        host.inputChipIndexSelected = null;\n    }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n */\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.leading-icon;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n    isolation: isolate;\n}\n\n:host(limel-chip-set[type='input']) {\n    limel-notched-outline {\n        [slot='content'] {\n            min-height: shared_input-select-picker.$height-of-mdc-text-field;\n        }\n    }\n}\n\n:host(limel-chip-set:not([type='input'])) {\n    .limel-notched-outline {\n        --limel-notched-outline-border-color: transparent;\n        --limel-notched-outline-background-color: transparent;\n    }\n}\n\n.mdc-chip-set {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    position: relative;\n\n    &.mdc-chip-set--input {\n        padding: 0.4rem 0.5rem;\n        width: 100%;\n    }\n\n    &.has-clear-all-button {\n        &.mdc-chip-set--input {\n            padding-right: functions.pxToRem(\n                32\n            ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n        }\n    }\n}\n\n.mdc-text-field__input {\n    .mdc-text-field:not(.mdc-text-field--disabled) & {\n        color: shared_input-select-picker.$input-text-color;\n        font-size: var(--limel-theme-default-font-size) !important;\n        font-family: inherit !important;\n    }\n    .mdc-text-field.mdc-text-field--disabled & {\n        color: shared_input-select-picker.$input-text-color-disabled;\n    }\n}\n\n.mdc-text-field {\n    height: auto;\n    cursor: text;\n    flex-wrap: wrap;\n    row-gap: 0.5rem;\n\n    .mdc-text-field__input {\n        @include shared_input-select-picker.input-field-placeholder;\n\n        width: auto;\n        padding: 0 0.5rem;\n\n        flex-grow: 1;\n        flex-shrink: 0;\n\n        &.hidden {\n            // This class is added, as soon as there is a chip selected and displayed\n            // This input field should not be visually visible as it breaks the UI in some cases\n            // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n            transition: all 0s;\n            opacity: 0;\n            position: absolute;\n            z-index: -100; // to let users interact with chips, in case they're covered\n        }\n        &[type='search'] {\n            -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n            background-color: transparent; // overides styles caused by previous line\n\n            &::-webkit-search-cancel-button {\n                display: none; // removes the default X button\n            }\n        }\n    }\n}\n\n.clear-all-button {\n    @include mixins.clear-all-button;\n    @include mixins.visualize-keyboard-focus;\n\n    position: absolute;\n    right: 0.5rem;\n    top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n    opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n    &:focus,\n    .has-chips:not(.disabled):hover &,\n    .has-chips:not(.disabled).mdc-text-field--focused & {\n        opacity: 1;\n        outline: none;\n    }\n\n    .mdc-chip-set:not(.has-chips) &,\n    .has-chips.disabled & {\n        display: none; // Won't receive focus when disabled\n    }\n}\n\n.has-leading-icon {\n    &:not(.has-chips) {\n        .mdc-text-field__input {\n            padding-left: $leading-icon-space;\n        }\n    }\n\n    limel-chip {\n        &:first-of-type {\n            margin-left: 1.5rem;\n        }\n    }\n\n    .search-icon {\n        transition: transform 0.2s ease;\n        position: absolute;\n        top: functions.pxToRem(9);\n        left: 0.25rem;\n    }\n\n    limel-icon {\n        background-color: transparent;\n    }\n}\n\n.delimiter {\n    opacity: 0.5;\n    padding: 0 functions.pxToRem(2);\n    color: var(--limel-theme-on-surface-color);\n}\n\nlimel-chip {\n    border-radius: 2rem;\n\n    &.can-be-removed {\n        // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n        box-shadow: var(--shadow-depth-8-error);\n    }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_helper-text';\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * **Regarding `click` and `interact` events:**\n *\n * The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n *\n * However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n *\n * Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n *\n * Example usage:\n * ```ts\n * private handleClick(event: Event) {\n *     if (event && 'Lime' in event && (event.Lime as any).chip) {\n *         if ((event.Lime as { chip: Chip }).chip.href) {\n *             // Chip has href, so let the browser open the link.\n *             return;\n *         }\n *         // handle click on chip without href\n *     } else {\n *         // handle click elsewhere\n *     }\n * }\n * ```\n * :::\n *\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable.\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n     * Read more about the `autocomplete` attribute\n     * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n     */\n    @Prop({ reflect: true })\n    public autocomplete: string = 'off';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private readonly interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private readonly change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private readonly startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private readonly stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private readonly input: EventEmitter<string>;\n\n    @Element()\n    private readonly host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    @State()\n    private selectedChipIds: Array<string | number>;\n\n    private mdcTextField: MDCTextField;\n    private readonly handleKeyDown = handleKeyboardEvent;\n    private labelId: string;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (this.value.length > 0) {\n            this.selectedChipIds = this.value\n                .filter((chip) => chip.selected)\n                .map((chip) => chip.id);\n        }\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     *\n     * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     *\n     * @param emptyInput - if `true`, any text in the input is discarded\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     *\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning(this.value);\n\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field')\n            );\n        }\n    }\n\n    public componentDidUpdate() {\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        const classes = {\n            'mdc-chip-set': true,\n            'mdc-text-field--with-trailing-icon': true,\n            disabled: this.disabled || this.readonly,\n        };\n\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        if (this.type === 'input') {\n            Object.assign(classes, {\n                'mdc-text-field': true,\n                'mdc-text-field--outlined': true,\n                'mdc-chip-set--input': true,\n                'lime-text-field--readonly': this.readonly,\n                'has-chips': this.value.length > 0,\n                'has-leading-icon': this.leadingIcon !== null,\n                'has-clear-all-button': this.clearAllButton,\n            });\n        }\n\n        const value = this.getValue();\n\n        return [\n            <limel-notched-outline\n                labelId={this.labelId}\n                label={this.label}\n                required={this.required}\n                invalid={this.invalid || this.isInvalid()}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                hasValue={!!this.value?.length}\n                hasLeadingIcon={!!this.leadingIcon}\n                hasFloatingLabel={this.floatLabelAbove()}\n            >\n                <div slot=\"content\" {...this.getContentProps()} class={classes}>\n                    {this.renderContent(value)}\n                </div>\n            </limel-notched-outline>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private getContentProps() {\n        if (this.type === 'input') {\n            return {\n                onClick: this.handleTextFieldFocus,\n            };\n        }\n\n        return {\n            role: 'grid',\n        };\n    }\n\n    private renderContent = (value: Chip[]) => {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        return value.map(this.renderChip);\n    };\n\n    private readonly getValue = () => {\n        return this.value.map((chip) => ({\n            ...chip,\n            ...(this.type && {\n                selected: this.selectedChipIds.includes(chip.id),\n            }),\n        }));\n    };\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n        this.initialize();\n    }\n\n    private renderInputChips() {\n        return [\n            this.value.map(this.renderInputChip),\n            <input\n                tabIndex={this.disabled || this.readonly ? -1 : 0}\n                type={this.inputType}\n                id={this.labelId}\n                disabled={this.readonly || this.disabled}\n                class={{\n                    'mdc-text-field__input': true,\n                    hidden: this.inputHidden(),\n                }}\n                value={this.textValue}\n                onBlur={this.handleInputBlur}\n                onFocus={this.handleTextFieldFocus}\n                onKeyDown={this.handleKeyDown}\n                onInput={this.handleTextInput}\n                // Some browsers emit a change event on input elements, we need to stop\n                // that event from propagating since we are emitting our own change event\n                onChange={this.inputFieldOnChange}\n                placeholder={this.isFull() ? '' : this.searchLabel}\n                readonly={this.isFull()}\n                autocomplete={this.autocomplete}\n            />,\n            this.renderLeadingIcon(),\n            this.renderClearAllChipsButton(),\n        ];\n    }\n\n    private readonly floatLabelAbove = () => {\n        if (\n            this.value.length > 0 ||\n            this.editMode ||\n            this.readonly ||\n            this.textValue\n        ) {\n            return true;\n        }\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\n    }\n\n    private isInvalid() {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n\n        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value?.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!this.value?.length;\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value?.trim());\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private renderChip(chip: Chip) {\n        const chipType: ChipType =\n            this.type === 'filter' ? 'filter' : 'default';\n\n        const chipProps = this.getChipProps(chip, chipType);\n\n        return <limel-chip {...chipProps} />;\n    }\n\n    private readonly hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private readonly renderHelperLine = () => {\n        const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n        if (!maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n        const chipProps = this.getChipProps(chip, 'default');\n        const isLastChip = index === chips.length - 1;\n\n        return [\n            <limel-chip\n                key={chip.id}\n                class={{\n                    'can-be-removed': this.inputChipIndexSelected === index,\n                }}\n                {...chipProps}\n            />,\n            !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n        ];\n    }\n\n    private getChipProps(chip: Chip, chipType: ChipType) {\n        const removable =\n            this.type === 'input' && chip.removable && !this.readonly;\n        const readonly = this.readonly && this.type !== 'input';\n\n        return {\n            role: 'row',\n            identifier: chip.id,\n            text: chip.text,\n            icon: chip.icon,\n            image: chip.image,\n            badge: chip.badge,\n            selected: chip.selected,\n            disabled: this.disabled,\n            loading: chip.loading,\n            readonly: readonly,\n            type: chipType,\n            removable: removable,\n            menuItems: chip.menuItems,\n            onClick: this.catchInputChipClicks(chip),\n            onRemove: this.handleRemoveChip,\n            ...(chip.href && {\n                link: {\n                    href: getHref(chip.href),\n                    target: getTarget(chip.href),\n                },\n            }),\n        };\n    }\n\n    private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n        /*\n         * We need to add the `chip` to the event object so that the consumer\n         * can get the chip object when the chip is clicked.\n         * This is necessary for the consumer to be able to handle the click\n         * event itself, based on which chip was clicked, or whether the click\n         * was on a chip or elsewhere. The reason the consumer can't just look\n         * at the event target is that that information is hidden by the\n         * shadow DOM.\n         *\n         * See documentation for the `interact` event for more information.\n         */\n        (event as any).Lime = { chip: chip };\n\n        if (this.isSelectableChip(chip)) {\n            this.updateSelectedChipIds(chip);\n            this.change.emit(chip);\n        }\n\n        this.emitInteraction(chip);\n    };\n\n    private isSelectableChip(chip: Chip): boolean {\n        return this.type !== 'input' && 'selected' in chip;\n    }\n\n    private updateSelectedChipIds(chip: Chip): void {\n        chip.selected = !chip.selected;\n        const id = chip.id;\n        if (this.type === 'choice') {\n            this.updateChoiceTypeSelectedIds(id);\n        } else {\n            this.updateFilterTypeSelectedIds(id);\n        }\n    }\n\n    private updateChoiceTypeSelectedIds(id: number | string): void {\n        this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n    }\n\n    private isChipSelected(id: number | string): boolean {\n        return this.selectedChipIds.includes(id);\n    }\n\n    private updateFilterTypeSelectedIds(id: number | string): void {\n        if (this.isChipSelected(id)) {\n            this.removeChipIdFromSelectedChipIds(id);\n        } else {\n            this.addChipIdToSelectedChipIds(id);\n        }\n    }\n\n    private removeChipIdFromSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = this.selectedChipIds.filter(\n            (chipId) => chipId !== id\n        );\n    }\n\n    private addChipIdToSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = [...this.selectedChipIds, id];\n    }\n\n    private readonly handleRemoveChip = (\n        event: LimelChipCustomEvent<string | number>\n    ) => {\n        this.removeChip(event.detail);\n    };\n\n    private readonly removeChip = (identifier: string | number) => {\n        const newValue = this.value.filter((chip) => {\n            return chip.id !== identifier;\n        });\n        this.change.emit(newValue);\n    };\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private readonly clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private triggerIconColorWarning(value: Chip[]) {\n        for (const chip of value) {\n            if (\n                chip.icon &&\n                (chip.iconFillColor ||\n                    chip.iconBackgroundColor ||\n                    chip.iconTitle)\n            ) {\n                console.warn(\n                    \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n                );\n            }\n        }\n    }\n}\n"],"mappings":"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"}

package/dist/types/components/ai-avatar/ai-avatar.d.ts

@@ -14,6 +14,7 @@ import { Languages } from './../date-picker/date.types';
  * @exampleComponent limel-example-ai-avatar-basic
  * @exampleComponent limel-example-ai-avatar-colors
  * @exampleComponent limel-example-ai-avatar-white-background
+ * @exampleComponent limel-example-ai-avatar-color-props
  */
 export declare class AiAvatar {
   /**

package/dist/types/components/code-editor/code-editor.d.ts

@@ -17,6 +17,7 @@ import { Languages } from '../date-picker/date.types';
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
  * @exampleComponent limel-example-code-editor-fold-lint-wrap
+ * @exampleComponent limel-example-code-editor-copy
  * @exampleComponent limel-example-code-editor-composite
  */
 export declare class CodeEditor {
@@ -83,6 +84,10 @@ export declare class CodeEditor {
    * Will translate the translatable strings on the components.
    */
   translationLanguage: Languages;
+  /**
+   * Set to false to hide the copy button
+   */
+  showCopyButton: boolean;
   /**
    * Emitted when the code has changed. Will only be emitted when the code
    * area has lost focus

package/dist/types/components/picker/picker.d.ts

@@ -132,6 +132,8 @@ export declare class Picker {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  protected onDisabledChange(): void;
+  private updateTabIndex;
   componentWillUpdate(): Promise<void>;
   render(): any[];
   protected onChangeValue(): void;

package/dist/types/components.d.ts

@@ -203,6 +203,7 @@ export namespace Components {
      * @exampleComponent limel-example-ai-avatar-basic
      * @exampleComponent limel-example-ai-avatar-colors
      * @exampleComponent limel-example-ai-avatar-white-background
+     * @exampleComponent limel-example-ai-avatar-color-props
      */
     interface LimelAiAvatar {
         /**
@@ -875,6 +876,7 @@ export namespace Components {
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
+     * @exampleComponent limel-example-code-editor-copy
      * @exampleComponent limel-example-code-editor-composite
      */
     interface LimelCodeEditor {
@@ -926,6 +928,10 @@ export namespace Components {
           * Set to `true` to indicate that the field is required.
          */
         "required": boolean;
+        /**
+          * Set to false to hide the copy button
+         */
+        "showCopyButton": boolean;
         /**
           * Defines the language for translations. Will translate the translatable strings on the components.
          */
@@ -3666,6 +3672,7 @@ declare global {
      * @exampleComponent limel-example-ai-avatar-basic
      * @exampleComponent limel-example-ai-avatar-colors
      * @exampleComponent limel-example-ai-avatar-white-background
+     * @exampleComponent limel-example-ai-avatar-color-props
      */
     interface HTMLLimelAiAvatarElement extends Components.LimelAiAvatar, HTMLStencilElement {
     }
@@ -4006,6 +4013,7 @@ declare global {
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
+     * @exampleComponent limel-example-code-editor-copy
      * @exampleComponent limel-example-code-editor-composite
      */
     interface HTMLLimelCodeEditorElement extends Components.LimelCodeEditor, HTMLStencilElement {
@@ -5431,6 +5439,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-ai-avatar-basic
      * @exampleComponent limel-example-ai-avatar-colors
      * @exampleComponent limel-example-ai-avatar-white-background
+     * @exampleComponent limel-example-ai-avatar-color-props
      */
     interface LimelAiAvatar {
         /**
@@ -6127,6 +6136,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
+     * @exampleComponent limel-example-code-editor-copy
      * @exampleComponent limel-example-code-editor-composite
      */
     interface LimelCodeEditor {
@@ -6182,6 +6192,10 @@ declare namespace LocalJSX {
           * Set to `true` to indicate that the field is required.
          */
         "required"?: boolean;
+        /**
+          * Set to false to hide the copy button
+         */
+        "showCopyButton"?: boolean;
         /**
           * Defines the language for translations. Will translate the translatable strings on the components.
          */
@@ -9099,6 +9113,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-ai-avatar-basic
              * @exampleComponent limel-example-ai-avatar-colors
              * @exampleComponent limel-example-ai-avatar-white-background
+             * @exampleComponent limel-example-ai-avatar-color-props
              */
             "limel-ai-avatar": LocalJSX.LimelAiAvatar & JSXBase.HTMLAttributes<HTMLLimelAiAvatarElement>;
             /**
@@ -9374,6 +9389,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-code-editor
              * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
              * @exampleComponent limel-example-code-editor-fold-lint-wrap
+             * @exampleComponent limel-example-code-editor-copy
              * @exampleComponent limel-example-code-editor-composite
              */
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.40.0",
+  "version": "38.42.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-25158b9e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","Chip","this","renderAsButton","h","id","identifier","class","role","disabled","readonly","loading","onKeyDown","handleDeleteKeyDown","renderSpinner","renderPicture","renderLabel","renderBadge","renderProgressBar","renderRemoveButton","renderActionsMenu","renderAsLink","rel","getRel","_a","link","target","_b","href","title","tabindex","text","filterClickWhenDisabled","e","preventDefault","handleRemoveClick","event","stopPropagation","remove","emit","removable","keys","DELETE","BACKSPACE","includes","key","removeChipLabel","getTranslation","actionMenuLabel","translate","get","language","handleActionMenuSelect","menuItem","detail","value","menuItemSelected","handleActionMenuCancel","crypto","randomUUID","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","Host","onClick","icon","getIconName","image","isEmpty","src","alt","badge","name","style","color","backgroundColor","label","menuItems","length","svgData","tabIndex","innerHTML","getMenuItems","items","onSelect","openDirection","onCancel","slot","separator","indeterminate","progress","currentPercentage","handleKeyboardEvent","textValue","isArrowLeft","ARROW_LEFT","isArrowRight","ARROW_RIGHT","isEnter","ENTER","isDelete","isBackspace","isEscape","ESCAPE","handleLeft","handleRight","handleEnter","handleDelete","handleBackspace","handleEscape","inputChipIndexSelected","emitInteraction","removeChip","repeat","chipSetCss","INPUT_FIELD_TABINDEX","ChipSet","constructor","hostRef","handleKeyDown","renderContent","type","renderInputChips","map","renderChip","getValue","chip","Object","assign","selected","selectedChipIds","floatLabelAbove","editMode","hasHelperText","helperText","undefined","renderHelperLine","maxItems","maxLength","invalid","isInvalid","catchInputChipClicks","Lime","isSelectableChip","updateSelectedChipIds","change","handleRemoveChip","newValue","filter","clearAllChipsLabel","labelId","createRandomString","bind","renderInputChip","isFull","handleTextFieldFocus","handleInputBlur","handleTextInput","inputFieldOnChange","inputHidden","handleDeleteAllIconClick","renderDelimiter","connectedCallback","initialize","async","emptyInput","shadowRoot","querySelector","focus","startEdit","syncEmptyInput","componentDidLoad","triggerIconColorWarning","mdcTextField","MDCTextField","componentDidUpdate","input","destroy","classes","leadingIcon","clearAllButton","required","hasValue","hasLeadingIcon","hasFloatingLabel","getContentProps","handleChangeChips","oldValue","isEqual","inputType","hidden","onBlur","onFocus","onInput","onChange","placeholder","searchLabel","autocomplete","renderLeadingIcon","renderClearAllChipsButton","blurred","emptyInputOnBlur","setTimeout","stopEdit","trim","interact","chipType","chipProps","getChipProps","index","chips","isLastChip","onRemove","getHref","getTarget","updateChoiceTypeSelectedIds","updateFilterTypeSelectedIds","isChipSelected","removeChipIdFromSelectedChipIds","addChipIdToSelectedChipIds","chipId","delimiter","iconFillColor","iconBackgroundColor","iconTitle","console","warn"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n* @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.\n* @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.\n*/\n\n:host(limel-chip) {\n    --limel-chip-height: var(--limel-chip-size, 1.75rem);\n    --limel-chip-gap: 0.5rem;\n    isolation: isolate;\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n}\n\n:host(limel-chip[size='small']) {\n    --limel-chip-height: 1.5rem;\n    --limel-chip-gap: 0.25rem;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.chip {\n    all: unset;\n    position: relative;\n\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: min(var(--chip-max-width, 100%), 25rem);\n    height: var(--limel-chip-height);\n\n    border-radius: var(--limel-chip-height);\n    font-size: clamp(\n        0.8125rem /* 13px */,\n        calc(var(--limel-chip-height) - 0.875rem /* 14px */),\n        1rem\n    );\n    padding: 0 0.125rem;\n\n    &:has(limel-icon),\n    &:has(img) {\n        .text {\n            padding-left: 0;\n        }\n    }\n\n    &:not([disabled]) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-inset-clickable;\n    }\n\n    &:has(limel-badge) {\n        padding-right: 0.375rem;\n\n        .text {\n            padding-right: 0;\n        }\n    }\n\n    &:has(+ .remove-button:hover) {\n        box-shadow: var(--shadow-depth-8-error);\n    }\n\n    &:has(+ limel-menu),\n    &:has(+ .trailing-button) {\n        padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n        .text {\n            padding-right: 0;\n        }\n    }\n}\n\n:host(limel-chip[disabled]:not([disabled='false'])) {\n    .chip {\n        // Similar to `limel-button[disabled]`\n        color: rgba(var(--contrast-1600), 0.37);\n        background-color: rgba(var(--contrast-1600), 0.1);\n        box-shadow: none;\n    }\n}\n\n:host(limel-chip[readonly]:not([readonly='false'])) {\n    .chip {\n        box-shadow: 0 0 0 1px\n            var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));\n    }\n}\n\n:host(limel-chip[selected]:not([selected='false'])) {\n    .chip {\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow:\n                var(--button-shadow-inset), var(--shadow-depth-8-focused);\n        }\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n    .text {\n        color: var(--lime-primary-color, var(--limel-theme-primary-color));\n    }\n}\n\n@include mixins.visualize-aria-expanded('.chip');\n\n:host(limel-chip[type='filter']) {\n    .chip {\n        border-top-left-radius: 0.5rem;\n        border-bottom-left-radius: 0.5rem;\n\n        &:after {\n            content: '';\n            transition:\n                background-color 0.4s ease 0.2s,\n                box-shadow 0.6s ease 0.2s;\n            box-sizing: border-box;\n            position: absolute;\n            bottom: 0.125rem;\n            left: 0.125rem;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: 50%;\n            background-color: rgb(var(--contrast-800), 0.8);\n            box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n    .chip {\n        &:after {\n            background-color: rgb(var(--color-green-default));\n            box-shadow:\n                0 0 0.375rem 0 rgb(var(--color-green-light)),\n                0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[invalid]) {\n    .chip {\n        @include mixins.add-chessboard-background();\n        background-color: rgb(var(--color-red-default));\n    }\n\n    .text {\n        color: rgb(var(--color-white));\n    }\n}\n\nimg,\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n}\n\nimg {\n    object-fit: cover;\n    border-radius: 50%;\n}\n\nlimel-icon {\n    padding: 0.0625rem;\n}\n\nlimel-badge {\n    pointer-events: none;\n}\n\n.text {\n    @include mixins.truncate-text;\n    line-height: 1.2;\n    padding: 0 0.5rem;\n    font-size: var(--limel-theme-default-font-size);\n}\n\n.trailing-button {\n    all: unset;\n    @include mixins.is-flat-clickable();\n\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n    margin-right: 0.125rem;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n\n    border-radius: 50%;\n\n    svg {\n        transition:\n            color 0.2s ease,\n            transform 0.2s ease;\n        width: 1.25rem;\n    }\n\n    &.remove-button:hover {\n        color: rgb(var(--color-red-dark));\n        svg {\n            transform: scale(0.8);\n        }\n    }\n}\n\nlimel-menu {\n    button[slot='trigger'] {\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    &[open] {\n        button[slot='trigger'] {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\n@import './partial-styles/_loading.scss';\n@import './partial-styles/_progress.scss';\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list-item/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-size\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Defines the size of the chip.\n     */\n    @Prop({ reflect: true })\n    public size: 'small' | 'default' = 'default';\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                rel={rel}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel()}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel()}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return `${this.getTranslation('remove')} ${this.text}`;\n    };\n\n    private actionMenuLabel = (): string => {\n        return this.getTranslation('file-viewer.more-actions');\n    };\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n","import {\n    ARROW_LEFT,\n    ARROW_RIGHT,\n    BACKSPACE,\n    DELETE,\n    ENTER,\n    ESCAPE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n \n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.textValue.length > 0) {\n        // If there is any text in the input field, keyboard input should\n        // navigate the text, not the chips.\n        return;\n    }\n\n    if (!this.value?.length) {\n        // If there are no chips, there is nothing to select.\n        return;\n    }\n\n    const isArrowLeft = event.key === ARROW_LEFT;\n    const isArrowRight = event.key === ARROW_RIGHT;\n    const isEnter = event.key === ENTER;\n    const isDelete = event.key === DELETE;\n    const isBackspace = event.key === BACKSPACE;\n    const isEscape = event.key === ESCAPE;\n\n    if (isArrowLeft) {\n        return handleLeft(this, event);\n    }\n\n    if (isArrowRight) {\n        return handleRight(this, event);\n    }\n\n    if (isEnter) {\n        return handleEnter(this, event);\n    }\n\n    if (isDelete) {\n        return handleDelete(this, event);\n    }\n\n    if (isBackspace) {\n        return handleBackspace(this, event);\n    }\n\n    if (isEscape) {\n        return handleEscape(this, event);\n    }\n}\n\nfunction handleLeft(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = host.value.length - 1;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected <= 0) {\n        return;\n    }\n\n    host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = 0;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected >= host.value.length - 1) {\n        return;\n    }\n\n    host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.emitInteraction(host.value[host.inputChipIndexSelected]);\n    }\n}\n\nfunction handleEscape(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.inputChipIndexSelected = null;\n    }\n}\n\nfunction handleDelete(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    }\n}\n\nfunction handleBackspace(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    } else if (!event.repeat) {\n        host.inputChipIndexSelected = host.value.length - 1;\n    }\n}\n\nfunction removeChip(host) {\n    if (host.inputChipIndexSelected !== null) {\n        host.removeChip(host.value[host.inputChipIndexSelected].id);\n        host.inputChipIndexSelected = null;\n    }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n */\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.leading-icon;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n    isolation: isolate;\n}\n\n:host(limel-chip-set[type='input']) {\n    limel-notched-outline {\n        [slot='content'] {\n            min-height: shared_input-select-picker.$height-of-mdc-text-field;\n        }\n    }\n}\n\n:host(limel-chip-set:not([type='input'])) {\n    .limel-notched-outline {\n        --limel-notched-outline-border-color: transparent;\n        --limel-notched-outline-background-color: transparent;\n    }\n}\n\n.mdc-chip-set {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    position: relative;\n\n    &.mdc-chip-set--input {\n        padding: 0.4rem 0.5rem;\n        width: 100%;\n    }\n\n    &.has-clear-all-button {\n        &.mdc-chip-set--input {\n            padding-right: functions.pxToRem(\n                32\n            ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n        }\n    }\n}\n\n.mdc-text-field__input {\n    .mdc-text-field:not(.mdc-text-field--disabled) & {\n        color: shared_input-select-picker.$input-text-color;\n        font-size: var(--limel-theme-default-font-size) !important;\n        font-family: inherit !important;\n    }\n    .mdc-text-field.mdc-text-field--disabled & {\n        color: shared_input-select-picker.$input-text-color-disabled;\n    }\n}\n\n.mdc-text-field {\n    height: auto;\n    cursor: text;\n    flex-wrap: wrap;\n    row-gap: 0.5rem;\n\n    .mdc-text-field__input {\n        @include shared_input-select-picker.input-field-placeholder;\n\n        width: auto;\n        padding: 0 0.5rem;\n\n        flex-grow: 1;\n        flex-shrink: 0;\n\n        &.hidden {\n            // This class is added, as soon as there is a chip selected and displayed\n            // This input field should not be visually visible as it breaks the UI in some cases\n            // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n            transition: all 0s;\n            opacity: 0;\n            position: absolute;\n            z-index: -100; // to let users interact with chips, in case they're covered\n        }\n        &[type='search'] {\n            -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n            background-color: transparent; // overides styles caused by previous line\n\n            &::-webkit-search-cancel-button {\n                display: none; // removes the default X button\n            }\n        }\n    }\n}\n\n.clear-all-button {\n    @include mixins.clear-all-button;\n    @include mixins.visualize-keyboard-focus;\n\n    position: absolute;\n    right: 0.5rem;\n    top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n    opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n    &:focus,\n    .has-chips:not(.disabled):hover &,\n    .has-chips:not(.disabled).mdc-text-field--focused & {\n        opacity: 1;\n        outline: none;\n    }\n\n    .mdc-chip-set:not(.has-chips) &,\n    .has-chips.disabled & {\n        display: none; // Won't receive focus when disabled\n    }\n}\n\n.has-leading-icon {\n    &:not(.has-chips) {\n        .mdc-text-field__input {\n            padding-left: $leading-icon-space;\n        }\n    }\n\n    limel-chip {\n        &:first-of-type {\n            margin-left: 1.5rem;\n        }\n    }\n\n    .search-icon {\n        transition: transform 0.2s ease;\n        position: absolute;\n        top: functions.pxToRem(9);\n        left: 0.25rem;\n    }\n\n    limel-icon {\n        background-color: transparent;\n    }\n}\n\n.delimiter {\n    opacity: 0.5;\n    padding: 0 functions.pxToRem(2);\n    color: var(--limel-theme-on-surface-color);\n}\n\nlimel-chip {\n    border-radius: 2rem;\n\n    &.can-be-removed {\n        // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n        box-shadow: var(--shadow-depth-8-error);\n    }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_helper-text';\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * :::note\n * **Regarding `click` and `interact` events:**\n *\n * The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n *\n * However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n *\n * Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n *\n * Example usage:\n * ```ts\n * private handleClick(event: Event) {\n *     if (event && 'Lime' in event && (event.Lime as any).chip) {\n *         if ((event.Lime as { chip: Chip }).chip.href) {\n *             // Chip has href, so let the browser open the link.\n *             return;\n *         }\n *         // handle click on chip without href\n *     } else {\n *         // handle click elsewhere\n *     }\n * }\n * ```\n * :::\n *\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: true,\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable.\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n     * Read more about the `autocomplete` attribute\n     * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n     */\n    @Prop({ reflect: true })\n    public autocomplete: string = 'off';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private readonly interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private readonly change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private readonly startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private readonly stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private readonly input: EventEmitter<string>;\n\n    @Element()\n    private readonly host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    @State()\n    private selectedChipIds: Array<string | number>;\n\n    private mdcTextField: MDCTextField;\n    private readonly handleKeyDown = handleKeyboardEvent;\n    private labelId: string;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (this.value.length > 0) {\n            this.selectedChipIds = this.value\n                .filter((chip) => chip.selected)\n                .map((chip) => chip.id);\n        }\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     *\n     * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     *\n     * @param emptyInput - if `true`, any text in the input is discarded\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     *\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning(this.value);\n\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field')\n            );\n        }\n    }\n\n    public componentDidUpdate() {\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        const classes = {\n            'mdc-chip-set': true,\n            'mdc-text-field--with-trailing-icon': true,\n            disabled: this.disabled || this.readonly,\n        };\n\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        if (this.type === 'input') {\n            Object.assign(classes, {\n                'mdc-text-field': true,\n                'mdc-text-field--outlined': true,\n                'mdc-chip-set--input': true,\n                'lime-text-field--readonly': this.readonly,\n                'has-chips': this.value.length > 0,\n                'has-leading-icon': this.leadingIcon !== null,\n                'has-clear-all-button': this.clearAllButton,\n            });\n        }\n\n        const value = this.getValue();\n\n        return [\n            <limel-notched-outline\n                labelId={this.labelId}\n                label={this.label}\n                required={this.required}\n                invalid={this.invalid || this.isInvalid()}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                hasValue={!!this.value?.length}\n                hasLeadingIcon={!!this.leadingIcon}\n                hasFloatingLabel={this.floatLabelAbove()}\n            >\n                <div slot=\"content\" {...this.getContentProps()} class={classes}>\n                    {this.renderContent(value)}\n                </div>\n            </limel-notched-outline>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private getContentProps() {\n        if (this.type === 'input') {\n            return {\n                onClick: this.handleTextFieldFocus,\n            };\n        }\n\n        return {\n            role: 'grid',\n        };\n    }\n\n    private renderContent = (value: Chip[]) => {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        return value.map(this.renderChip);\n    };\n\n    private readonly getValue = () => {\n        return this.value.map((chip) => ({\n            ...chip,\n            ...(this.type && {\n                selected: this.selectedChipIds.includes(chip.id),\n            }),\n        }));\n    };\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n        this.initialize();\n    }\n\n    private renderInputChips() {\n        return [\n            this.value.map(this.renderInputChip),\n            <input\n                tabIndex={INPUT_FIELD_TABINDEX}\n                type={this.inputType}\n                id={this.labelId}\n                disabled={this.readonly || this.disabled}\n                class={{\n                    'mdc-text-field__input': true,\n                    hidden: this.inputHidden(),\n                }}\n                value={this.textValue}\n                onBlur={this.handleInputBlur}\n                onFocus={this.handleTextFieldFocus}\n                onKeyDown={this.handleKeyDown}\n                onInput={this.handleTextInput}\n                // Some browsers emit a change event on input elements, we need to stop\n                // that event from propagating since we are emitting our own change event\n                onChange={this.inputFieldOnChange}\n                placeholder={this.isFull() ? '' : this.searchLabel}\n                readonly={this.isFull()}\n                autocomplete={this.autocomplete}\n            />,\n            this.renderLeadingIcon(),\n            this.renderClearAllChipsButton(),\n        ];\n    }\n\n    private readonly floatLabelAbove = () => {\n        if (\n            this.value.length > 0 ||\n            this.editMode ||\n            this.readonly ||\n            this.textValue\n        ) {\n            return true;\n        }\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\n    }\n\n    private isInvalid() {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n\n        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value?.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!this.value?.length;\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value?.trim());\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private renderChip(chip: Chip) {\n        const chipType: ChipType =\n            this.type === 'filter' ? 'filter' : 'default';\n\n        const chipProps = this.getChipProps(chip, chipType);\n\n        return <limel-chip {...chipProps} />;\n    }\n\n    private readonly hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private readonly renderHelperLine = () => {\n        const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n        if (!maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n        const chipProps = this.getChipProps(chip, 'default');\n        const isLastChip = index === chips.length - 1;\n\n        return [\n            <limel-chip\n                key={chip.id}\n                class={{\n                    'can-be-removed': this.inputChipIndexSelected === index,\n                }}\n                {...chipProps}\n            />,\n            !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n        ];\n    }\n\n    private getChipProps(chip: Chip, chipType: ChipType) {\n        const removable =\n            this.type === 'input' && chip.removable && !this.readonly;\n        const readonly = this.readonly && this.type !== 'input';\n\n        return {\n            role: 'row',\n            identifier: chip.id,\n            text: chip.text,\n            icon: chip.icon,\n            image: chip.image,\n            badge: chip.badge,\n            selected: chip.selected,\n            disabled: this.disabled,\n            loading: chip.loading,\n            readonly: readonly,\n            type: chipType,\n            removable: removable,\n            menuItems: chip.menuItems,\n            onClick: this.catchInputChipClicks(chip),\n            onRemove: this.handleRemoveChip,\n            ...(chip.href && {\n                link: {\n                    href: getHref(chip.href),\n                    target: getTarget(chip.href),\n                },\n            }),\n        };\n    }\n\n    private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n        /*\n         * We need to add the `chip` to the event object so that the consumer\n         * can get the chip object when the chip is clicked.\n         * This is necessary for the consumer to be able to handle the click\n         * event itself, based on which chip was clicked, or whether the click\n         * was on a chip or elsewhere. The reason the consumer can't just look\n         * at the event target is that that information is hidden by the\n         * shadow DOM.\n         *\n         * See documentation for the `interact` event for more information.\n         */\n        (event as any).Lime = { chip: chip };\n\n        if (this.isSelectableChip(chip)) {\n            this.updateSelectedChipIds(chip);\n            this.change.emit(chip);\n        }\n\n        this.emitInteraction(chip);\n    };\n\n    private isSelectableChip(chip: Chip): boolean {\n        return this.type !== 'input' && 'selected' in chip;\n    }\n\n    private updateSelectedChipIds(chip: Chip): void {\n        chip.selected = !chip.selected;\n        const id = chip.id;\n        if (this.type === 'choice') {\n            this.updateChoiceTypeSelectedIds(id);\n        } else {\n            this.updateFilterTypeSelectedIds(id);\n        }\n    }\n\n    private updateChoiceTypeSelectedIds(id: number | string): void {\n        this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n    }\n\n    private isChipSelected(id: number | string): boolean {\n        return this.selectedChipIds.includes(id);\n    }\n\n    private updateFilterTypeSelectedIds(id: number | string): void {\n        if (this.isChipSelected(id)) {\n            this.removeChipIdFromSelectedChipIds(id);\n        } else {\n            this.addChipIdToSelectedChipIds(id);\n        }\n    }\n\n    private removeChipIdFromSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = this.selectedChipIds.filter(\n            (chipId) => chipId !== id\n        );\n    }\n\n    private addChipIdToSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = [...this.selectedChipIds, id];\n    }\n\n    private readonly handleRemoveChip = (\n        event: LimelChipCustomEvent<string | number>\n    ) => {\n        this.removeChip(event.detail);\n    };\n\n    private readonly removeChip = (identifier: string | number) => {\n        const newValue = this.value.filter((chip) => {\n            return chip.id !== identifier;\n        });\n        this.change.emit(newValue);\n    };\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private readonly clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private triggerIconColorWarning(value: Chip[]) {\n        for (const chip of value) {\n            if (\n                chip.icon &&\n                (chip.iconFillColor ||\n                    chip.iconBackgroundColor ||\n                    chip.iconTitle)\n            ) {\n                console.warn(\n                    \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n                );\n            }\n        }\n    }\n}\n"],"mappings":"uqBAAA,MAAMA,EAAU,u3Q,MC0FHC,EAAI,M,2GAmJLC,KAAAC,eAAiB,IACd,CACHC,EAAA,UACIC,GAAI,QAAUH,KAAKI,WACnBC,MAAM,OACNC,KAAK,SACLC,SAAUP,KAAKO,UAAYP,KAAKQ,SAAQ,YAC7BR,KAAKS,QAAU,OAAS,QAAO,YAChC,SACVC,UAAWV,KAAKW,qBAEfX,KAAKY,gBACLZ,KAAKa,gBACLb,KAAKc,cACLd,KAAKe,cACLf,KAAKgB,qBAEVhB,KAAKiB,qBACLjB,KAAKkB,qBAILlB,KAAAmB,aAAe,K,QACnB,MAAMC,EAAMC,GAAOC,EAAAtB,KAAKuB,QAAI,MAAAD,SAAA,SAAAA,EAAEE,QAAQC,EAAAzB,KAAKuB,QAAI,MAAAE,SAAA,SAAAA,EAAEL,KAEjD,MAAO,CACHlB,EAAA,KACIC,GAAI,QAAUH,KAAKI,WACnBC,MAAM,OACNqB,KAAM1B,KAAKuB,KAAKG,KAChBC,MAAO3B,KAAKuB,KAAKI,MACjBH,OAAQxB,KAAKuB,KAAKC,OAClBJ,IAAKA,EAAG,gBACOpB,KAAKO,UAAYP,KAAKQ,SACrCoB,SAAU5B,KAAKO,UAAYP,KAAKQ,UAAY,EAAI,EAChDE,UAAWV,KAAKW,qBAEfX,KAAKY,gBACLZ,KAAKa,gBACLb,KAAKc,cACLd,KAAKe,cACLf,KAAKgB,qBAEVhB,KAAKiB,qBACLjB,KAAKkB,oBACR,EAGGlB,KAAAc,YAAc,IACXZ,EAAA,QAAMG,MAAM,QAAQL,KAAK6B,MAgH5B7B,KAAA8B,wBAA2BC,IAC/B,GAAI/B,KAAKO,UAAYP,KAAKQ,SAAU,CAChCuB,EAAEC,gB,GAIFhC,KAAAiC,kBAAqBC,IACzBA,EAAMC,kBACNnC,KAAKoC,OAAOC,KAAKrC,KAAKI,WAAW,EAG7BJ,KAAAW,oBAAuBuB,IAC3B,IAAKlC,KAAKsC,UAAW,CACjB,M,CAGJ,MAAMC,EAAO,CAACC,EAAQC,GAEtB,GAAIF,EAAKG,SAASR,EAAMS,KAAM,CAC1B3C,KAAKiC,kBAAkBC,E,GAIvBlC,KAAA4C,gBAAkB,IACf,GAAG5C,KAAK6C,eAAe,aAAa7C,KAAK6B,OAG5C7B,KAAA8C,gBAAkB,IACf9C,KAAK6C,eAAe,4BAGvB7C,KAAA6C,eAAkBF,GACfI,EAAUC,IAAIL,EAAK3C,KAAKiD,UAgC3BjD,KAAAkD,uBACJhB,IAEA,MAAMiB,EAAWjB,EAAMkB,OAEvB,IAAKD,EAAU,CACX,M,CAGJ,GAAIA,EAASE,QAAU,UAAW,CAC9BrD,KAAKoC,OAAOC,KAAKrC,KAAKI,YAEtB,M,CAGJJ,KAAKsD,iBAAiBjB,KAAKc,EAAS,EAGhCnD,KAAAuD,uBAA0BrB,IAC9BA,EAAMC,iBAAiB,E,cAjYE,K,oHAoCX,M,cAOA,M,cAQA,M,aAMD,M,eAME,M,UAQM,U,aAQP,M,wCAcoBqB,OAAOC,a,UAMV,U,eAQkB,E,CAkB9CC,oBACHC,EAAmB3D,KAAK4D,K,CAGrBC,uBACHC,EAAqB9D,KAAK4D,K,CAGvBG,SACH,OACI7D,EAAC8D,EAAI,CAACC,QAASjE,KAAK8B,yBACf9B,KAAKuB,KAAOvB,KAAKmB,eAAiBnB,KAAKC,iB,CAyD5CY,gB,QACJ,MAAMqD,EAAOC,EAAYnE,KAAKkE,MAE9B,IAAKA,IAASlE,KAAKoE,MAAO,CACtB,M,CAGJ,IAAKC,EAAQrE,KAAKoE,OAAQ,CACtB,OACIlE,EAAA,OAAKoE,IAAKtE,KAAKoE,MAAME,IAAKC,IAAKvE,KAAKoE,MAAMG,IAAK9D,QAAQ,Q,CAI/D,OACIP,EAAA,cACIsE,MAAO,KACPC,KAAMP,EACNQ,MAAO,CACHC,MAAO,IAAGrD,EAACtB,KAAKkE,QAAa,MAAA5C,SAAA,SAAAA,EAAEqD,QAC/B,mBAAoB,IAChBlD,EAACzB,KAAKkE,QAAa,MAAAzC,SAAA,SAAAA,EAAEmD,oB,CAOjC7D,cACJ,IAAKf,KAAKwE,MAAO,CACb,M,CAGJ,OAAOtE,EAAA,eAAa2E,MAAO7E,KAAKwE,O,CAG5BvD,qB,MACJ,IACKjB,KAAKsC,WACNtC,KAAKQ,UACLR,KAAKO,cACHe,EAAAtB,KAAK8E,aAAS,MAAAxD,SAAA,SAAAA,EAAEyD,QACpB,CACE,M,CAGJ,MAAMC,EACF,wJAEJ,OACI9E,EAAA,UACIG,MAAM,gCACN4E,UAAW,EAAC,aACAjF,KAAK4C,kBAAiB,gBACnB,QAAU5C,KAAKI,WAC9B8E,UAAWF,EACXf,QAASjE,KAAKiC,mB,CAKlBf,oB,MACJ,MAAKI,EAAAtB,KAAK8E,aAAS,MAAAxD,SAAA,SAAAA,EAAEyD,QAAQ,CACzB,M,CAGJ,MAAMC,EACF,kPAEJ,MAAMF,EAAY9E,KAAKmF,eAEvB,OACIjF,EAAA,cACIkF,MAAON,EACPO,SAAUrF,KAAKkD,uBACfoC,cAAc,aACdC,SAAUvF,KAAKuD,wBAEfrD,EAAA,UACIsF,KAAK,UACLjF,SAAUP,KAAKO,SACfF,MAAM,kBAAiB,aACXL,KAAK8C,kBACjBoC,UAAWF,I,CAMnBG,eACJ,IAAIL,EAAY,IAAI9E,KAAK8E,WAEzB,GAAI9E,KAAKsC,UAAW,CAChBwC,EAAY,IACLA,EACH,CAAEW,UAAW,MACb,CACI5D,KAAM7B,KAAK4C,kBACXsB,KAAM,CACFO,KAAM,cACNE,MAAO,iCAEXtB,MAAO,W,CAKnB,OAAOyB,C,CAsCHlE,gBACJ,IAAKZ,KAAKS,QAAS,CACf,M,CAGJ,OAAOP,EAAA,yBAAuBwF,cAAe,M,CAGzC1E,oBACJ,IAAKhB,KAAK2F,SAAU,CAChB,M,CAGJ,MAAMC,EAAoB5F,KAAK2F,SAAW,IAE1C,OACIzF,EAAA,OACII,KAAK,cAAa,aACP,IAAG,gBACA,IAAG,gBACH,MAAK,gBACJN,KAAK2F,SACpBjB,MAAO,CACH,mCAAoCkB,I,wFCxbxCC,EAAoB3D,G,MAChC,GAAIlC,KAAK8F,UAAUf,OAAS,EAAG,CAG3B,M,CAGJ,MAAKzD,EAAAtB,KAAKqD,SAAK,MAAA/B,SAAA,SAAAA,EAAEyD,QAAQ,CAErB,M,CAGJ,MAAMgB,EAAc7D,EAAMS,MAAQqD,EAClC,MAAMC,EAAe/D,EAAMS,MAAQuD,EACnC,MAAMC,EAAUjE,EAAMS,MAAQyD,EAC9B,MAAMC,EAAWnE,EAAMS,MAAQH,EAC/B,MAAM8D,EAAcpE,EAAMS,MAAQF,EAClC,MAAM8D,EAAWrE,EAAMS,MAAQ6D,EAE/B,GAAIT,EAAa,CACb,OAAOU,EAAWzG,KAAMkC,E,CAG5B,GAAI+D,EAAc,CACd,OAAOS,EAAY1G,KAAMkC,E,CAG7B,GAAIiE,EAAS,CACT,OAAOQ,EAAY3G,KAAMkC,E,CAG7B,GAAImE,EAAU,CACV,OAAOO,EAAa5G,KAAMkC,E,CAG9B,GAAIoE,EAAa,CACb,OAAOO,EAAgB7G,KAAMkC,E,CAGjC,GAAIqE,EAAU,CACV,OAAOO,EAAa9G,KAAMkC,E,CAElC,CAEA,SAASuE,EAAW7C,EAAM1B,GACtBA,EAAMF,iBACN,GAAI4B,EAAKmD,yBAA2B,KAAM,CACtCnD,EAAKmD,uBAAyBnD,EAAKP,MAAM0B,OAAS,EAElD,M,CAGJ,GAAInB,EAAKmD,wBAA0B,EAAG,CAClC,M,CAGJnD,EAAKmD,wBAA0B,CACnC,CAEA,SAASL,EAAY9C,EAAM1B,GACvBA,EAAMF,iBACN,GAAI4B,EAAKmD,yBAA2B,KAAM,CACtCnD,EAAKmD,uBAAyB,EAE9B,M,CAGJ,GAAInD,EAAKmD,wBAA0BnD,EAAKP,MAAM0B,OAAS,EAAG,CACtD,M,CAGJnB,EAAKmD,wBAA0B,CACnC,CAEA,SAASJ,EAAY/C,EAAM1B,GACvB,GAAI0B,EAAKmD,yBAA2B,KAAM,CACtC7E,EAAMF,iBACN4B,EAAKoD,gBAAgBpD,EAAKP,MAAMO,EAAKmD,wB,CAE7C,CAEA,SAASD,EAAalD,EAAM1B,GACxB,GAAI0B,EAAKmD,yBAA2B,KAAM,CACtC7E,EAAMF,iBACN4B,EAAKmD,uBAAyB,I,CAEtC,CAEA,SAASH,EAAahD,EAAM1B,GACxB,GAAI0B,EAAKmD,yBAA2B,KAAM,CACtC7E,EAAMF,iBACNiF,EAAWrD,E,CAEnB,CAEA,SAASiD,EAAgBjD,EAAM1B,GAC3B,GAAI0B,EAAKmD,yBAA2B,KAAM,CACtC7E,EAAMF,iBACNiF,EAAWrD,E,MACR,IAAK1B,EAAMgF,OAAQ,CACtBtD,EAAKmD,uBAAyBnD,EAAKP,MAAM0B,OAAS,C,CAE1D,CAEA,SAASkC,EAAWrD,GAChB,GAAIA,EAAKmD,yBAA2B,KAAM,CACtCnD,EAAKqD,WAAWrD,EAAKP,MAAMO,EAAKmD,wBAAwB5G,IACxDyD,EAAKmD,uBAAyB,I,CAEtC,CC7HA,MAAMI,EAAa,ol3CCqBnB,MAAMC,EAAuB,E,MAkDhBC,EAAO,MAgLhBC,YAAAC,G,iLAHiBvH,KAAAwH,cAAgB3B,EAyJzB7F,KAAAyH,cAAiBpE,IACrB,GAAIrD,KAAK0H,OAAS,QAAS,CACvB,OAAO1H,KAAK2H,kB,CAGhB,OAAOtE,EAAMuE,IAAI5H,KAAK6H,WAAW,EAGpB7H,KAAA8H,SAAW,IACjB9H,KAAKqD,MAAMuE,KAAKG,GAAIC,OAAAC,OAAAD,OAAAC,OAAA,GACpBF,GACC/H,KAAK0H,MAAQ,CACbQ,SAAUlI,KAAKmI,gBAAgBzF,SAASqF,EAAK5H,QA4CxCH,KAAAoI,gBAAkB,KAC/B,GACIpI,KAAKqD,MAAM0B,OAAS,GACpB/E,KAAKqI,UACLrI,KAAKQ,UACLR,KAAK8F,UACP,CACE,OAAO,I,GAuGE9F,KAAAsI,cAAgB,IACtBtI,KAAKuI,aAAe,MAAQvI,KAAKuI,aAAeC,UAG1CxI,KAAAyI,iBAAmB,KAChC,MAAMC,EAAW1I,KAAK0I,WAAa,EAAIF,UAAYxI,KAAK0I,SAExD,IAAKA,IAAa1I,KAAKsI,gBAAiB,CACpC,M,CAGJ,OACIpI,EAAA,qBACI6E,OAAQ/E,KAAKqD,MAAM0B,OACnB4D,UAAWD,EACXH,WAAYvI,KAAKuI,WACjBK,QAAS5I,KAAK6I,aAChB,EAkDO7I,KAAA8I,qBAAwBf,GAAgB7F,IAYpDA,EAAc6G,KAAO,CAAEhB,KAAMA,GAE9B,GAAI/H,KAAKgJ,iBAAiBjB,GAAO,CAC7B/H,KAAKiJ,sBAAsBlB,GAC3B/H,KAAKkJ,OAAO7G,KAAK0F,E,CAGrB/H,KAAKgH,gBAAgBe,EAAK,EA2Cb/H,KAAAmJ,iBACbjH,IAEAlC,KAAKiH,WAAW/E,EAAMkB,OAAO,EAGhBpD,KAAAiH,WAAc7G,IAC3B,MAAMgJ,EAAWpJ,KAAKqD,MAAMgG,QAAQtB,GACzBA,EAAK5H,KAAOC,IAEvBJ,KAAKkJ,OAAO7G,KAAK+G,EAAS,EAiCbpJ,KAAAsJ,mBAAqB,IAC3BvG,EAAUC,IAAI,qBAAsBhD,KAAKiD,U,WAppB7B,G,iFAmCI,M,cASA,M,aAOV,M,eAOqB,O,sCAaX,M,iDAYQ,K,oBAMF,K,iBAOJ,K,eAMF,K,kBAQG,M,cAOD,K,cAoCD,M,eAGA,G,aAGD,M,4BAGc,K,+BAUrCjD,KAAKuJ,QAAUC,IACfxJ,KAAK6H,WAAa7H,KAAK6H,WAAW4B,KAAKzJ,MACvCA,KAAK0J,gBAAkB1J,KAAK0J,gBAAgBD,KAAKzJ,MACjDA,KAAK2J,OAAS3J,KAAK2J,OAAOF,KAAKzJ,MAC/BA,KAAK4J,qBAAuB5J,KAAK4J,qBAAqBH,KAAKzJ,MAC3DA,KAAK6J,gBAAkB7J,KAAK6J,gBAAgBJ,KAAKzJ,MACjDA,KAAK8J,gBAAkB9J,KAAK8J,gBAAgBL,KAAKzJ,MACjDA,KAAK+J,mBAAqB/J,KAAK+J,mBAAmBN,KAAKzJ,MACvDA,KAAKwH,cAAgBxH,KAAKwH,cAAciC,KAAKzJ,MAC7CA,KAAKgK,YAAchK,KAAKgK,YAAYP,KAAKzJ,MACzCA,KAAKiK,yBACDjK,KAAKiK,yBAAyBR,KAAKzJ,MACvCA,KAAKkK,gBAAkBlK,KAAKkK,gBAAgBT,KAAKzJ,K,CAG9CmK,oBACHnK,KAAKoK,Y,CAGDA,aACJ,GAAIpK,KAAKqD,MAAM0B,OAAS,EAAG,CACvB/E,KAAKmI,gBAAkBnI,KAAKqD,MACvBgG,QAAQtB,GAASA,EAAKG,WACtBN,KAAKG,GAASA,EAAK5H,I,EAUzBkK,oBACH,OAAOrK,KAAKqI,Q,CAUTgC,eAAeC,EAAsB,OACxC,GAAItK,KAAKO,UAAYP,KAAKQ,SAAU,CAChC,M,CAGJR,KAAKqI,SAAW,KAChB,GAAIiC,EAAY,CACZtK,KAAK8F,UAAY,E,CAGrB9F,KAAK4D,KAAK2G,WAAWC,cAAc,SAASC,QAC5CzK,KAAK0K,UAAUrI,M,CAUZgI,mBACHrK,KAAK2K,gB,CAGFC,mBACH5K,KAAK6K,wBAAwB7K,KAAKqD,OAElC,GAAIrD,KAAK0H,OAAS,QAAS,CACvB1H,KAAK8K,aAAe,IAAIC,EACpB/K,KAAK4D,KAAK2G,WAAWC,cAAc,mB,EAKxCQ,qBACH,MAAMC,EAAQjL,KAAK4D,KAAK2G,WAAWC,cAAc,SACjD,GAAIS,GAASjL,KAAKqI,SAAU,CACxB4C,EAAMR,O,EAIP5G,uBACH,GAAI7D,KAAK8K,aAAc,CACnB9K,KAAK8K,aAAaI,S,EAInBnH,S,MACH,MAAMoH,EAAU,CACZ,eAAgB,KAChB,qCAAsC,KACtC5K,SAAUP,KAAKO,UAAYP,KAAKQ,UAGpC,GAAIR,KAAK0H,KAAM,CACXyD,EAAQ,iBAAiBnL,KAAK0H,QAAU,I,CAG5C,GAAI1H,KAAK0H,OAAS,QAAS,CACvBM,OAAOC,OAAOkD,EAAS,CACnB,iBAAkB,KAClB,2BAA4B,KAC5B,sBAAuB,KACvB,4BAA6BnL,KAAKQ,SAClC,YAAaR,KAAKqD,MAAM0B,OAAS,EACjC,mBAAoB/E,KAAKoL,cAAgB,KACzC,uBAAwBpL,KAAKqL,gB,CAIrC,MAAMhI,EAAQrD,KAAK8H,WAEnB,MAAO,CACH5H,EAAA,yBACIqJ,QAASvJ,KAAKuJ,QACd1E,MAAO7E,KAAK6E,MACZyG,SAAUtL,KAAKsL,SACf1C,QAAS5I,KAAK4I,SAAW5I,KAAK6I,YAC9BtI,SAAUP,KAAKO,SACfC,SAAUR,KAAKQ,SACf+K,aAAYjK,EAAAtB,KAAKqD,SAAK,MAAA/B,SAAA,SAAAA,EAAEyD,QACxByG,iBAAkBxL,KAAKoL,YACvBK,iBAAkBzL,KAAKoI,mBAEvBlI,EAAA,MAAA8H,OAAAC,OAAA,CAAKzC,KAAK,WAAcxF,KAAK0L,kBAAiB,CAAErL,MAAO8K,IAClDnL,KAAKyH,cAAcpE,KAG5BrD,KAAKyI,mB,CAILiD,kBACJ,GAAI1L,KAAK0H,OAAS,QAAS,CACvB,MAAO,CACHzD,QAASjE,KAAK4J,qB,CAItB,MAAO,CACHtJ,KAAM,O,CAsBJqL,kBAAkBvC,EAAkBwC,GAC1C,GAAIC,EAAQzC,EAAUwC,GAAW,CAC7B,M,CAGJ5L,KAAK2K,iBACL3K,KAAKoK,Y,CAGDzC,mBACJ,MAAO,CACH3H,KAAKqD,MAAMuE,IAAI5H,KAAK0J,iBACpBxJ,EAAA,SACI+E,SAAUmC,EACVM,KAAM1H,KAAK8L,UACX3L,GAAIH,KAAKuJ,QACThJ,SAAUP,KAAKQ,UAAYR,KAAKO,SAChCF,MAAO,CACH,wBAAyB,KACzB0L,OAAQ/L,KAAKgK,eAEjB3G,MAAOrD,KAAK8F,UACZkG,OAAQhM,KAAK6J,gBACboC,QAASjM,KAAK4J,qBACdlJ,UAAWV,KAAKwH,cAChB0E,QAASlM,KAAK8J,gBAGdqC,SAAUnM,KAAK+J,mBACfqC,YAAapM,KAAK2J,SAAW,GAAK3J,KAAKqM,YACvC7L,SAAUR,KAAK2J,SACf2C,aAActM,KAAKsM,eAEvBtM,KAAKuM,oBACLvM,KAAKwM,4B,CAeL7C,SACJ,QAAS3J,KAAK0I,UAAY1I,KAAKqD,MAAM0B,QAAU/E,KAAK0I,Q,CAGhDG,Y,MACJ,GAAI7I,KAAKQ,SAAU,CAEf,OAAO,K,CAGX,GAAIR,KAAK4I,QAAS,CACd,OAAO,I,CAGX,IAAK5I,KAAKsL,SAAU,CAChB,OAAO,K,CAGX,IAAKtL,KAAKyM,QAAS,CACf,OAAO,K,CAGX,SAAQnL,EAAAtB,KAAKqD,SAAK,MAAA/B,SAAA,SAAAA,EAAEyD,O,CAGhBgF,mBAAmB7H,GACvBA,EAAMC,iB,CAMFyH,uBACJ,GAAI5J,KAAKO,UAAYP,KAAKQ,SAAU,CAChC,M,CAGJ,GAAIR,KAAKqI,SAAU,CACf,M,CAGJrI,KAAKqI,SAAW,KAChBrI,KAAK0K,UAAUrI,M,CAOXwH,kBACJ,GAAI7J,KAAK0M,iBAAkB,CACvB1M,KAAK2K,gB,CAGT3K,KAAKqI,SAAW,MAChBrI,KAAKyM,QAAU,KACfzM,KAAK+G,uBAAyB,KAG9B4F,YAAW,KACP3M,KAAK4M,SAASvK,MAAM,GACrB,E,CAGCsI,iBACJ3K,KAAK8F,UAAY,E,CAGbkE,c,MACJ,GAAIhK,KAAKqI,SAAU,CACf,OAAOrI,KAAK2J,Q,CAMhB,UAASrI,EAAAtB,KAAKqD,SAAK,MAAA/B,SAAA,SAAAA,EAAEyD,O,CAGjB+E,gBAAgB5H,G,MACpBA,EAAMC,kBACNnC,KAAK+G,uBAAyB,KAC9B/G,KAAK8F,UAAY5D,EAAMV,OAAO6B,MAC9BrD,KAAKiL,MAAM5I,MAAKf,EAAAY,EAAMV,OAAO6B,SAAK,MAAA/B,SAAA,SAAAA,EAAEuL,O,CAGhC7F,gBAAgBe,GACpB/H,KAAK8M,SAASzK,KAAK0F,E,CAGfF,WAAWE,GACf,MAAMgF,EACF/M,KAAK0H,OAAS,SAAW,SAAW,UAExC,MAAMsF,EAAYhN,KAAKiN,aAAalF,EAAMgF,GAE1C,OAAO7M,EAAA,aAAA8H,OAAAC,OAAA,GAAgB+E,G,CAwBnBtD,gBAAgB3B,EAAYmF,EAAeC,GAC/C,MAAMH,EAAYhN,KAAKiN,aAAalF,EAAM,WAC1C,MAAMqF,EAAaF,IAAUC,EAAMpI,OAAS,EAE5C,MAAO,CACH7E,EAAA,aAAA8H,OAAAC,OAAA,CACItF,IAAKoF,EAAK5H,GACVE,MAAO,CACH,iBAAkBL,KAAK+G,yBAA2BmG,IAElDF,MAENI,GAAcpN,KAAKgK,gBAAkBhK,KAAKkK,kB,CAI5C+C,aAAalF,EAAYgF,GAC7B,MAAMzK,EACFtC,KAAK0H,OAAS,SAAWK,EAAKzF,YAActC,KAAKQ,SACrD,MAAMA,EAAWR,KAAKQ,UAAYR,KAAK0H,OAAS,QAEhD,OAAAM,OAAAC,OAAA,CACI3H,KAAM,MACNF,WAAY2H,EAAK5H,GACjB0B,KAAMkG,EAAKlG,KACXqC,KAAM6D,EAAK7D,KACXE,MAAO2D,EAAK3D,MACZI,MAAOuD,EAAKvD,MACZ0D,SAAUH,EAAKG,SACf3H,SAAUP,KAAKO,SACfE,QAASsH,EAAKtH,QACdD,SAAUA,EACVkH,KAAMqF,EACNzK,UAAWA,EACXwC,UAAWiD,EAAKjD,UAChBb,QAASjE,KAAK8I,qBAAqBf,GACnCsF,SAAUrN,KAAKmJ,kBACXpB,EAAKrG,MAAQ,CACbH,KAAM,CACFG,KAAM4L,EAAQvF,EAAKrG,MACnBF,OAAQ+L,EAAUxF,EAAKrG,Q,CA4B/BsH,iBAAiBjB,GACrB,OAAO/H,KAAK0H,OAAS,SAAW,aAAcK,C,CAG1CkB,sBAAsBlB,GAC1BA,EAAKG,UAAYH,EAAKG,SACtB,MAAM/H,EAAK4H,EAAK5H,GAChB,GAAIH,KAAK0H,OAAS,SAAU,CACxB1H,KAAKwN,4BAA4BrN,E,KAC9B,CACHH,KAAKyN,4BAA4BtN,E,EAIjCqN,4BAA4BrN,GAChCH,KAAKmI,gBAAkBnI,KAAK0N,eAAevN,GAAM,GAAK,CAACA,E,CAGnDuN,eAAevN,GACnB,OAAOH,KAAKmI,gBAAgBzF,SAASvC,E,CAGjCsN,4BAA4BtN,GAChC,GAAIH,KAAK0N,eAAevN,GAAK,CACzBH,KAAK2N,gCAAgCxN,E,KAClC,CACHH,KAAK4N,2BAA2BzN,E,EAIhCwN,gCAAgCxN,GACpCH,KAAKmI,gBAAkBnI,KAAKmI,gBAAgBkB,QACvCwE,GAAWA,IAAW1N,G,CAIvByN,2BAA2BzN,GAC/BH,KAAKmI,gBAAkB,IAAInI,KAAKmI,gBAAiBhI,E,CAgB7CoM,oBACJ,IAAKvM,KAAKoL,YAAa,CACnB,M,CAGJ,OACIlL,EAAA,KAAGG,MAAM,oCACLH,EAAA,cAAYuE,KAAMzE,KAAKoL,c,CAK3BoB,4BACJ,GAAIxM,KAAKO,UAAYP,KAAKQ,WAAaR,KAAKqL,eAAgB,CACxD,M,CAGJ,OACInL,EAAA,KACIwB,KAAK,GACLuC,QAASjE,KAAKiK,yBACd5J,MAAM,wCACNuB,SAAS,IACTtB,KAAK,SACLqB,MAAO3B,KAAKsJ,qBAAoB,aACpBtJ,KAAKsJ,sB,CASrBW,yBAAyB/H,GAC7BA,EAAMF,iBACNhC,KAAKkJ,OAAO7G,KAAK,G,CAGb6H,kBACJ,IAAKlK,KAAK8N,UAAW,CACjB,M,CAGJ,OAAO5N,EAAA,OAAKG,MAAM,aAAaL,KAAK8N,U,CAGhCjD,wBAAwBxH,GAC5B,IAAK,MAAM0E,KAAQ1E,EAAO,CACtB,GACI0E,EAAK7D,OACJ6D,EAAKgG,eACFhG,EAAKiG,qBACLjG,EAAKkG,WACX,CACEC,QAAQC,KACJ,oU"}

package/dist/lime-elements/p-41e2238a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["aiAvatarCss","AiAvatar","this","getTranslation","key","translate","get","language","document","documentElement","lang","render","h","Host","role","getHostAriaLabel","renderCircle","class","thinkingText","isThinking","className","viewBox","xmlns","cx","cy","r","fill","stroke"],"sources":["./src/components/ai-avatar/ai-avatar.scss?tag=limel-ai-avatar&encapsulation=shadow","./src/components/ai-avatar/ai-avatar.tsx"],"sourcesContent":["/**\n* @prop --ai-avatar-animation-play-state: Set it to `running` to start the animation.\n* @prop --ai-avatar-core-blend-mode: Controls the blend mode for the core and orbitals. Defaults to `plus-lighter`.\n* @prop --ai-avatar-rings-blend-mode: Controls the blend mode for the SVG circles. Defaults to `screen`.\n*/\n:host(limel-ai-avatar) {\n    display: flex;\n    justify-content: center;\n    align-self: center;\n    position: relative;\n\n    aspect-ratio: 1;\n    max-width: 10rem;\n    max-height: 8rem;\n    min-width: 1.75rem;\n    min-height: 1.75rem;\n\n    border-radius: 0.5rem;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-ai-avatar[is-thinking]:not([is-thinking='false'])) {\n    --ai-avatar-animation-play-state: running;\n    --ai-avatar-orbitals-opacity: 0.6;\n    --ai-avatar-orbitals-animation-play-state: running;\n}\n\n.core,\n.orbitals {\n    position: absolute;\n    inset: 0;\n    margin: auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n}\n\n.core {\n    opacity: 0.3;\n    width: 70%;\n    animation: breathe 3s ease infinite\n        var(--ai-avatar-animation-play-state, paused);\n\n    background-color: rgb(var(--color-glaucous-darker), 0.6);\n    mix-blend-mode: var(--ai-avatar-core-blend-mode, plus-lighter);\n}\n\n.orbitals {\n    mix-blend-mode: var(--ai-avatar-core-blend-mode, plus-lighter);\n    width: clamp(0.375rem, 20%, 3.5rem);\n\n    animation: rotate 5s linear infinite\n        var(--ai-avatar-orbitals-animation-play-state, paused);\n\n    transition: opacity 0.2s ease;\n    opacity: var(--ai-avatar-orbitals-opacity, 0);\n\n    &:after,\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        inset: 0;\n        margin: auto;\n\n        width: clamp(0.125rem, 50%, 0.75rem);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background-color: rgb(var(--color-glaucous-lighter));\n    }\n    &:before {\n        animation: orbit 1s linear infinite\n            var(--ai-avatar-orbitals-animation-play-state, paused);\n\n        opacity: 0.6;\n        transform-origin: -220% 0;\n        margin-right: -70%;\n    }\n    &:after {\n        animation: orbit 2s linear infinite\n            var(--ai-avatar-orbitals-animation-play-state, paused);\n\n        opacity: 0.8;\n        scale: 0.7;\n        transform-origin: 0% -250%;\n        margin-bottom: -70%;\n    }\n}\n\n@keyframes orbit {\n    0% {\n        transform: rotateZ(0deg) translate3d(0, 0, 0);\n    }\n    100% {\n        transform: rotateZ(360deg) translate3d(0, 0, 0);\n    }\n}\n\n@keyframes breathe {\n    1%,\n    100% {\n        transform: scale(1);\n    }\n    50% {\n        transform: scale(0.86);\n    }\n}\n\n@keyframes rotate {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\nsvg {\n    position: absolute;\n    margin: auto;\n    mix-blend-mode: var(--ai-avatar-rings-blend-mode, screen);\n\n    animation-iteration-count: infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n}\n\n.red {\n    rotate: 20deg;\n    color: rgb(var(--color-red-default));\n    animation-name: rotate, scale-circle-one;\n    animation-duration: 5s;\n}\n\n.green {\n    rotate: 36deg;\n    color: rgb(var(--color-green-default));\n    animation-name: rotate, scale-circle-two;\n    animation-duration: 5.5s;\n}\n\n.blue {\n    rotate: 100deg;\n    color: rgb(var(--color-blue-default));\n    animation-name: rotate, scale-circle-three;\n    animation-duration: 4.5s;\n}\n\n.orange {\n    rotate: 165deg;\n    color: rgb(var(--color-orange-default));\n    animation-name: rotate, scale-circle-four;\n    animation-duration: 6.5s;\n}\n\n@keyframes scale-circle-one {\n    0%,\n    100% {\n        transform: scaleX(1) scaleY(0.8);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.8) scaleY(0.9);\n    }\n    50% {\n        transform: scaleX(1) scaleY(0.7);\n    }\n}\n\n@keyframes scale-circle-two {\n    0%,\n    100% {\n        transform: scaleX(0.8) scaleY(1);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.9) scaleY(0.75);\n    }\n    50% {\n        transform: scaleX(0.72) scaleY(1);\n    }\n}\n\n@keyframes scale-circle-three {\n    0%,\n    100% {\n        transform: scaleX(0.9) scaleY(0.8);\n    }\n    50% {\n        transform: scaleX(0.75) scaleY(0.9);\n    }\n}\n\n@keyframes scale-circle-four {\n    0%,\n    100% {\n        transform: scaleX(0.8) scaleY(0.95);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.95) scaleY(0.75);\n    }\n    50% {\n        transform: scaleX(0.75) scaleY(0.95);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\n\n/**\n * This component displays an avatar, representing Lime AI assistants.\n *\n * :::warning\n * This is a private component used internally in the Lime's various applications,\n * which is the reason for having it in Lime Elements —to ease the distribution\n * of the component across all our apps.\n *\n * 3rd party developers are not allowed use this component directly.\n * :::\n *\n * @private\n * @exampleComponent limel-example-ai-avatar-basic\n * @exampleComponent limel-example-ai-avatar-colors\n * @exampleComponent limel-example-ai-avatar-white-background\n */\n@Component({\n    tag: 'limel-ai-avatar',\n    shadow: true,\n    styleUrl: 'ai-avatar.scss',\n})\nexport class AiAvatar {\n    /**\n     * Set to `true` to trigger animations that indicate that the AI is\n     * \"thinking\" or processing something.\n     */\n    @Prop({ reflect: true })\n    public isThinking = false;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = document.documentElement.lang as Languages;\n\n    public render() {\n        return (\n            <Host role=\"img\" aria-label={this.getHostAriaLabel()}>\n                {this.renderCircle('red')}\n                {this.renderCircle('green')}\n                {this.renderCircle('blue')}\n                {this.renderCircle('orange')}\n                <div class=\"core\" />\n                <div class=\"orbitals\" />\n            </Host>\n        );\n    }\n\n    private getHostAriaLabel(): string {\n        let thinkingText = '';\n        if (this.isThinking) {\n            thinkingText = ` (${this.getTranslation('ai-avatar.thinking')})`;\n        }\n\n        return `${this.getTranslation('ai-avatar.label')}${thinkingText}`;\n    }\n\n    private renderCircle(className: string) {\n        return (\n            <svg\n                class={className}\n                viewBox=\"0 0 100 100\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                role=\"presentation\"\n            >\n                <circle\n                    cx=\"50\"\n                    cy=\"50\"\n                    r=\"40\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"6\"\n                />\n            </svg>\n        );\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAc,4iG,MCyBPC,EAAQ,M,yBAwDTC,KAAAC,eAAkBC,GACfC,EAAUC,IAAIF,EAAKF,KAAKK,U,gBAnDf,M,cAMSC,SAASC,gBAAgBC,I,CAE/CC,SACH,OACIC,EAACC,EAAI,CAACC,KAAK,MAAK,aAAaZ,KAAKa,oBAC7Bb,KAAKc,aAAa,OAClBd,KAAKc,aAAa,SAClBd,KAAKc,aAAa,QAClBd,KAAKc,aAAa,UACnBJ,EAAA,OAAKK,MAAM,SACXL,EAAA,OAAKK,MAAM,a,CAKfF,mBACJ,IAAIG,EAAe,GACnB,GAAIhB,KAAKiB,WAAY,CACjBD,EAAe,KAAKhB,KAAKC,eAAe,wB,CAG5C,MAAO,GAAGD,KAAKC,eAAe,qBAAqBe,G,CAG/CF,aAAaI,GACjB,OACIR,EAAA,OACIK,MAAOG,EACPC,QAAQ,cACRC,MAAM,6BACNR,KAAK,gBAELF,EAAA,UACIW,GAAG,KACHC,GAAG,KACHC,EAAE,KACFC,KAAK,OACLC,OAAO,eAAc,eACR,M"}