@limetech/lime-elements 37.1.0-next.96 → 37.1.0-next.98

package/dist/collection/components/icon/get-icon-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-icon-props.js","sourceRoot":"","sources":["../../../src/components/icon/get-icon-props.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CACvB,IAA+B;EAE/B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE;IAC5C,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC5B,IAA+B,EAC/B,aAAkC;EAElC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,aAAa,CAAC;GACxB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CAClC,IAA+B,EAC/B,mBAAwC;EAExC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,iBAAiB,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,eAAe,CAAC;GAC/B;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,mBAAmB,CAAC;GAC9B;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the name from.\n * @returns {string | undefined} The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconColor] - The color to use when the deprecated `iconColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param {string | Icon} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconFillColor] - The color to use when `iconFillColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string {\n    if (typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the background color from.\n * @param {string | undefined} [iconBackgroundColor] - The background color to use when provided explicitly.\n * @returns {string | undefined} The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the title from.\n * @param {string | undefined} [iconTitle] - The title to use when provided explicitly.\n * @returns {string | undefined} The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"]}
+{"version":3,"file":"get-icon-props.js","sourceRoot":"","sources":["../../../src/components/icon/get-icon-props.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CACvB,IAA+B;EAE/B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE;IACtD,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC5B,IAA+B,EAC/B,aAAkC;EAElC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,aAAa,CAAC;GACxB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CAClC,IAA+B,EAC/B,mBAAwC;EAExC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,iBAAiB,IAAI,IAAI,EAAE;IACjE,OAAO,IAAI,CAAC,eAAe,CAAC;GAC/B;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,mBAAmB,CAAC;GAC9B;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the name from.\n * @returns {string | undefined} The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconColor] - The color to use when the deprecated `iconColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param {string | Icon} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconFillColor] - The color to use when `iconFillColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the background color from.\n * @param {string | undefined} [iconBackgroundColor] - The background color to use when provided explicitly.\n * @returns {string | undefined} The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the title from.\n * @param {string | undefined} [iconTitle] - The title to use when provided explicitly.\n * @returns {string | undefined} The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"]}

package/dist/collection/components/picker/picker.js

@@ -105,14 +105,13 @@ export class Picker {
     return [this.createChip(listItem)];
   }
   createChip(listItem) {
+    const name = getIconName(listItem.icon);
+    const color = getIconFillColor(listItem.icon, listItem.iconColor);
     return {
       id: `${listItem.value}`,
       text: listItem.text,
       removable: true,
-      icon: {
-        name: getIconName(listItem.icon),
-        color: getIconFillColor(listItem.icon, listItem.iconColor),
-      },
+      icon: name ? { name: name, color: color } : undefined,
       value: listItem,
     };
   }

package/dist/collection/components/picker/picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.js","sourceRoot":"","sources":["../../../src/components/picker/picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Action,\n    ActionPosition,\n    ActionScrollBehavior,\n    Chip,\n    ListItem,\n    Searcher,\n} from '../../interface';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ARROW_DOWN,\n    ARROW_DOWN_KEY_CODE,\n    ARROW_UP,\n    ARROW_UP_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelChipSetCustomEvent, LimelListCustomEvent } from 'src/components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\n\nconst SEARCH_DEBOUNCE = 500;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n    tag: 'limel-picker',\n    shadow: true,\n    styleUrl: 'picker.scss',\n})\nexport class Picker {\n    /**\n     * True if the picker should be disabled\n     */\n    @Prop()\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing items,\n     * but allow interaction with existing items.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Text to display for the input field of the picker\n     */\n    @Prop()\n    public label: string;\n\n    /**\n     * Search label to display in the input field when searching\n     */\n    @Prop()\n    public searchLabel: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop()\n    public leadingIcon: string;\n\n    /**\n     * A message to display when the search returned an empty result\n     */\n    @Prop()\n    public emptyResultMessage: string;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop()\n    public required: 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     * Currently selected value or values\n     */\n    @Prop()\n    public value: ListItem<number | string> | Array<ListItem<number | string>>;\n\n    /**\n     * A search function that takes a search-string as an argument,\n     * and returns a promise that will eventually be resolved with\n     * an array of `ListItem`:s.\n     *\n     * See the docs for the type `Searcher` for type information on\n     * the searcher function itself.\n     */\n    @Prop()\n    public searcher: Searcher;\n\n    /**\n     * True if multiple values are allowed\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Sets delimiters between chips. Works only when `multiple` is `true`.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Static actions that can be clicked by the user.\n     */\n    @Prop()\n    public actions: Array<ListItem<Action>> = [];\n\n    /**\n     * Position of the custom static actions in the picker's results dropdown.\n     * Can be set to `'top'` or `'bottom'`.\n     */\n    @Prop()\n    public actionPosition: ActionPosition = 'bottom';\n\n    /**\n     * Scroll behavior of the custom static actions, when user scrolls\n     * in the picker's results dropdown. Can be set to `'scroll'` which means\n     * the action items will scroll together with the list, or `'sticky'` which\n     * retains their position at the top or bottom of the drop down while\n     * scrolling.\n     */\n    @Prop()\n    public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n    /**\n     * Whether badge icons should be used in the result list or not\n     */\n    @Prop({ reflect: true })\n    public badgeIcons: boolean = false;\n\n    /**\n     * Fired when a new value has been selected from the picker\n     */\n    @Event()\n    private change: EventEmitter<\n        ListItem<number | string> | Array<ListItem<number | string>>\n    >;\n\n    /**\n     * Fired when clicking on a selected value\n     */\n    @Event()\n    private interact: EventEmitter<ListItem<number | string>>;\n\n    /**\n     * Emitted when the user selects an action.\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @State()\n    private items: Array<ListItem<number | string>>;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private loading: boolean = false;\n\n    @State()\n    private chips: Chip[] = [];\n\n    @Element()\n    private host: HTMLLimelPickerElement;\n\n    // Should NOT be decorated with State(), since this\n    // should not trigger a re-render by itself.\n    private chipSetEditMode = false;\n\n    private debouncedSearch: Searcher;\n    private chipSet: HTMLLimelChipSetElement;\n    private portalId: string;\n\n    constructor() {\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n        this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n        this.handleInteract = this.handleInteract.bind(this);\n        this.handleListChange = this.handleListChange.bind(this);\n        this.handleActionListChange = this.handleActionListChange.bind(this);\n        this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n        this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n        this.handleCloseMenu = this.handleCloseMenu.bind(this);\n        this.onListKeyDown = this.onListKeyDown.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        this.chips = this.createChips(this.value);\n    }\n\n    public componentDidLoad() {\n        this.createDebouncedSearcher(this.searcher);\n        this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n    }\n\n    public async componentWillUpdate() {\n        this.chipSetEditMode = false;\n        if (this.chipSet) {\n            this.chipSetEditMode = await this.chipSet.getEditMode();\n        }\n    }\n\n    public render() {\n        const props: {\n            maxItems?: number;\n        } = {};\n\n        if (!this.multiple) {\n            props.maxItems = 1;\n        }\n\n        return [\n            <limel-chip-set\n                type=\"input\"\n                inputType=\"search\"\n                label={this.label}\n                helperText={this.helperText}\n                leadingIcon={this.leadingIcon}\n                value={this.chips}\n                disabled={this.disabled}\n                invalid={this.invalid}\n                delimiter={this.renderDelimiter()}\n                readonly={this.readonly}\n                required={this.required}\n                searchLabel={this.searchLabel}\n                onInput={this.handleTextInput}\n                onKeyDown={this.handleInputKeyDown}\n                onChange={this.handleChange}\n                onInteract={this.handleInteract}\n                onStartEdit={this.handleInputFieldFocus}\n                onStopEdit={this.handleStopEditAndBlur}\n                emptyInputOnBlur={false}\n                clearAllButton={this.multiple && !this.chipSetEditMode}\n                {...props}\n            />,\n            this.renderDropdown(),\n        ];\n    }\n\n    @Watch('value')\n    protected onChangeValue() {\n        this.chips = this.createChips(this.value);\n    }\n\n    @Watch('searcher')\n    protected createDebouncedSearcher(newValue: Searcher) {\n        if (typeof newValue !== 'function') {\n            return;\n        }\n\n        this.debouncedSearch = AwesomeDebouncePromise(\n            newValue,\n            SEARCH_DEBOUNCE,\n        );\n    }\n\n    private renderDelimiter() {\n        if (this.multiple) {\n            return this.delimiter;\n        }\n\n        return null;\n    }\n\n    private createChips(value: ListItem | ListItem[]): Chip[] {\n        if (!value) {\n            return [];\n        }\n\n        if (this.multiple) {\n            const listItems: ListItem[] = value as ListItem[];\n\n            return listItems.map(this.createChip);\n        }\n\n        const listItem: ListItem = value as ListItem;\n\n        return [this.createChip(listItem)];\n    }\n\n    private createChip(listItem: ListItem): Chip {\n        return {\n            id: `${listItem.value}`,\n            text: listItem.text,\n            removable: true,\n            icon: {\n                name: getIconName(listItem.icon),\n                color: getIconFillColor(listItem.icon, listItem.iconColor),\n            },\n            value: listItem,\n        };\n    }\n\n    /**\n     * Renders the dropdown with the items to pick from, or a spinner if the picker\n     * is waiting for items to be received\n     *\n     * @returns {HTMLElement} picker dropdown\n     */\n    private renderDropdown() {\n        const dropDownContent = this.getDropdownContent();\n\n        const content = [];\n\n        if (this.shouldShowDropDownContent()) {\n            const actionContent = this.getActionContent();\n            if (this.actionPosition === 'top') {\n                content.push(actionContent);\n            }\n\n            if (dropDownContent) {\n                content.push(dropDownContent);\n            }\n\n            if (this.actionPosition === 'bottom') {\n                content.push(actionContent);\n            }\n        }\n\n        return this.renderPortal(content);\n    }\n\n    private getActionContent() {\n        const actionCount = this.actions?.length ?? 0;\n        if (actionCount === 0) {\n            return null;\n        }\n\n        return [\n            <limel-list\n                class={{\n                    'static-actions-list': true,\n                    'is-on-top': this.actionPosition === 'top',\n                    'is-at-bottom': this.actionPosition === 'bottom',\n                    'has-position-sticky':\n                        this.actionScrollBehavior === 'sticky',\n                }}\n                badgeIcons={true}\n                type={'selectable'}\n                onChange={this.handleActionListChange}\n                items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n            />,\n        ];\n    }\n\n    private removeUnusedPropertiesOnAction(\n        action: ListItem<Action>,\n    ): ListItem<Action> {\n        return {\n            ...action,\n            actions: [],\n        };\n    }\n\n    private shouldShowDropDownContent() {\n        if (this.isFull()) {\n            return false;\n        }\n\n        return !!this.chipSetEditMode;\n    }\n\n    private getDropdownContent() {\n        if (!this.shouldShowDropDownContent()) {\n            return;\n        }\n\n        if (this.loading) {\n            return this.renderSpinner();\n        }\n\n        if (!this.items || !this.items.length) {\n            return this.renderEmptyMessage();\n        }\n\n        return this.renderListResult();\n    }\n\n    /**\n     * Returns true if the picker is \"full\"\n     * The picker is considered to be full if it has a value and only one is allowed\n     *\n     * @returns {boolean} true if the picker is full\n     */\n    private isFull(): boolean {\n        return !this.multiple && !!this.value;\n    }\n\n    private renderSpinner() {\n        return (\n            <div\n                style={{\n                    width: '100%',\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '1rem 0',\n                }}\n            >\n                <limel-spinner limeBranded={false} />\n            </div>\n        );\n    }\n\n    private renderEmptyMessage() {\n        if (!this.emptyResultMessage) {\n            return;\n        }\n\n        const style = {\n            color: 'rgb(var(--contrast-1100))',\n            'text-align': 'center',\n            margin: '0.5rem 1rem',\n        };\n\n        return <p style={style}>{this.emptyResultMessage}</p>;\n    }\n\n    private renderListResult() {\n        return (\n            <limel-list\n                badgeIcons={this.badgeIcons}\n                onChange={this.handleListChange}\n                onKeyDown={this.onListKeyDown}\n                type=\"selectable\"\n                items={this.items}\n            />\n        );\n    }\n\n    private onListKeyDown(event: KeyboardEvent) {\n        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n        const keyCodeFound = [\n            TAB_KEY_CODE,\n            ESCAPE_KEY_CODE,\n            ENTER_KEY_CODE,\n        ].includes(event.keyCode);\n        if (keyFound || keyCodeFound) {\n            this.chipSet.setFocus();\n        }\n    }\n\n    private renderPortal(content: any[] = []) {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <limel-portal\n                visible={content.length > 0}\n                containerId={this.portalId}\n                inheritParentWidth={true}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-menu-surface\n                    open={content.length > 0}\n                    allowClicksElement={this.host}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {content}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    }\n\n    /**\n     * Check if a descendant still has focus. If not, reset text value and search result.\n     *\n     * @returns {void}\n     */\n    private handleStopEditAndBlur() {\n        // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n        // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n        const element =\n            this.host.shadowRoot.activeElement || document.activeElement;\n        const portalElement = document.querySelector(`#${this.portalId}`);\n        if (\n            isDescendant(element as HTMLElement, this.host) ||\n            isDescendant(element as HTMLElement, portalElement as HTMLElement)\n        ) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    /**\n     * Input handler for the input field\n     *\n     * @param {InputEvent} event event\n     * @returns {void}\n     */\n    private async handleTextInput(event) {\n        event.stopPropagation();\n\n        const query = event.detail;\n        this.textValue = query;\n        this.loading = true;\n\n        // If the search-query is an empty string, bypass debouncing.\n        const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n        const result = await searchFn(query);\n        this.handleSearchResult(query, result);\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param {LimelListCustomEvent<ListItem>} event event\n     * @returns {void}\n     */\n    private handleListChange(event: LimelListCustomEvent<ListItem>) {\n        event.stopPropagation();\n        if (!this.value || this.value !== event.detail) {\n            let newValue: ListItem | ListItem[] = event.detail;\n            if (this.multiple) {\n                newValue = [...(this.value as ListItem[]), event.detail];\n            }\n\n            this.change.emit(newValue);\n            this.items = [];\n        }\n\n        if (this.multiple) {\n            this.chipSet?.setFocus(true);\n        }\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param {LimelChipSetCustomEvent} event event\n     * @returns {void}\n     */\n    private handleActionListChange(\n        event: LimelListCustomEvent<ListItem<Action>>,\n    ) {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.action.emit(event.detail.value);\n        this.items = [];\n    }\n\n    /**\n     * Focus handler for the chip set\n     * Prevent focus if the picker has a value and does not support multiple values\n     *\n     * @returns {void}\n     */\n    private async handleInputFieldFocus() {\n        this.loading = true;\n        const query = this.textValue;\n        const result = await this.searcher(query);\n        this.handleSearchResult(query, result);\n    }\n\n    private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n        event.stopPropagation();\n\n        let newValue = null;\n        if (this.multiple) {\n            const chips = event.detail as Chip[];\n            newValue = chips.map((chip) => {\n                return (this.value as ListItem[]).find((item) => {\n                    return `${item.value}` === chip.id;\n                });\n            });\n        }\n\n        this.change.emit(newValue);\n    }\n\n    private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n        event.stopPropagation();\n        this.interact.emit(event.detail ? event.detail.value : event.detail);\n    }\n\n    /**\n     * Key handler for the input field\n     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n     *\n     * @param {KeyboardEvent} event event\n     * @returns {void}\n     */\n    private handleInputKeyDown(event: KeyboardEvent) {\n        const isForwardTab =\n            (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n            !event.altKey &&\n            !event.metaKey &&\n            !event.shiftKey;\n        const isUp =\n            event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n        const isDown =\n            event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (isForwardTab || isDown) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:first-child',\n            );\n            listElement.focus();\n\n            return;\n        }\n\n        if (isUp) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:last-child',\n            );\n            listElement.focus();\n        }\n    }\n\n    /**\n     * Key handler for the dropdown\n     *\n     * @param {KeyboardEvent} event event\n     * @returns {void}\n     */\n    private handleDropdownKeyDown(event: KeyboardEvent) {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n        if (isEscape) {\n            event.preventDefault();\n            this.textValue = '';\n            this.chipSet.setFocus(true);\n        }\n    }\n\n    private handleSearchResult(query: string, result: ListItem[]) {\n        if (query === this.textValue) {\n            this.items = result;\n            if (this.multiple) {\n                const values = this.value as ListItem[];\n                this.items = result.filter((item) => {\n                    return !values.includes(item);\n                });\n            }\n\n            this.loading = false;\n        }\n    }\n\n    private handleCloseMenu() {\n        if (this.items.length > 0) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    private clearInputField() {\n        this.chipSet.emptyInput();\n        this.textValue = '';\n        this.handleSearchResult('', []);\n    }\n}\n"]}
+{"version":3,"file":"picker.js","sourceRoot":"","sources":["../../../src/components/picker/picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Action,\n    ActionPosition,\n    ActionScrollBehavior,\n    Chip,\n    ListItem,\n    Searcher,\n} from '../../interface';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ARROW_DOWN,\n    ARROW_DOWN_KEY_CODE,\n    ARROW_UP,\n    ARROW_UP_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelChipSetCustomEvent, LimelListCustomEvent } from 'src/components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\n\nconst SEARCH_DEBOUNCE = 500;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n    tag: 'limel-picker',\n    shadow: true,\n    styleUrl: 'picker.scss',\n})\nexport class Picker {\n    /**\n     * True if the picker should be disabled\n     */\n    @Prop()\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing items,\n     * but allow interaction with existing items.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Text to display for the input field of the picker\n     */\n    @Prop()\n    public label: string;\n\n    /**\n     * Search label to display in the input field when searching\n     */\n    @Prop()\n    public searchLabel: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop()\n    public leadingIcon: string;\n\n    /**\n     * A message to display when the search returned an empty result\n     */\n    @Prop()\n    public emptyResultMessage: string;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop()\n    public required: 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     * Currently selected value or values\n     */\n    @Prop()\n    public value: ListItem<number | string> | Array<ListItem<number | string>>;\n\n    /**\n     * A search function that takes a search-string as an argument,\n     * and returns a promise that will eventually be resolved with\n     * an array of `ListItem`:s.\n     *\n     * See the docs for the type `Searcher` for type information on\n     * the searcher function itself.\n     */\n    @Prop()\n    public searcher: Searcher;\n\n    /**\n     * True if multiple values are allowed\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Sets delimiters between chips. Works only when `multiple` is `true`.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Static actions that can be clicked by the user.\n     */\n    @Prop()\n    public actions: Array<ListItem<Action>> = [];\n\n    /**\n     * Position of the custom static actions in the picker's results dropdown.\n     * Can be set to `'top'` or `'bottom'`.\n     */\n    @Prop()\n    public actionPosition: ActionPosition = 'bottom';\n\n    /**\n     * Scroll behavior of the custom static actions, when user scrolls\n     * in the picker's results dropdown. Can be set to `'scroll'` which means\n     * the action items will scroll together with the list, or `'sticky'` which\n     * retains their position at the top or bottom of the drop down while\n     * scrolling.\n     */\n    @Prop()\n    public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n    /**\n     * Whether badge icons should be used in the result list or not\n     */\n    @Prop({ reflect: true })\n    public badgeIcons: boolean = false;\n\n    /**\n     * Fired when a new value has been selected from the picker\n     */\n    @Event()\n    private change: EventEmitter<\n        ListItem<number | string> | Array<ListItem<number | string>>\n    >;\n\n    /**\n     * Fired when clicking on a selected value\n     */\n    @Event()\n    private interact: EventEmitter<ListItem<number | string>>;\n\n    /**\n     * Emitted when the user selects an action.\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @State()\n    private items: Array<ListItem<number | string>>;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private loading: boolean = false;\n\n    @State()\n    private chips: Chip[] = [];\n\n    @Element()\n    private host: HTMLLimelPickerElement;\n\n    // Should NOT be decorated with State(), since this\n    // should not trigger a re-render by itself.\n    private chipSetEditMode = false;\n\n    private debouncedSearch: Searcher;\n    private chipSet: HTMLLimelChipSetElement;\n    private portalId: string;\n\n    constructor() {\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n        this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n        this.handleInteract = this.handleInteract.bind(this);\n        this.handleListChange = this.handleListChange.bind(this);\n        this.handleActionListChange = this.handleActionListChange.bind(this);\n        this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n        this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n        this.handleCloseMenu = this.handleCloseMenu.bind(this);\n        this.onListKeyDown = this.onListKeyDown.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        this.chips = this.createChips(this.value);\n    }\n\n    public componentDidLoad() {\n        this.createDebouncedSearcher(this.searcher);\n        this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n    }\n\n    public async componentWillUpdate() {\n        this.chipSetEditMode = false;\n        if (this.chipSet) {\n            this.chipSetEditMode = await this.chipSet.getEditMode();\n        }\n    }\n\n    public render() {\n        const props: {\n            maxItems?: number;\n        } = {};\n\n        if (!this.multiple) {\n            props.maxItems = 1;\n        }\n\n        return [\n            <limel-chip-set\n                type=\"input\"\n                inputType=\"search\"\n                label={this.label}\n                helperText={this.helperText}\n                leadingIcon={this.leadingIcon}\n                value={this.chips}\n                disabled={this.disabled}\n                invalid={this.invalid}\n                delimiter={this.renderDelimiter()}\n                readonly={this.readonly}\n                required={this.required}\n                searchLabel={this.searchLabel}\n                onInput={this.handleTextInput}\n                onKeyDown={this.handleInputKeyDown}\n                onChange={this.handleChange}\n                onInteract={this.handleInteract}\n                onStartEdit={this.handleInputFieldFocus}\n                onStopEdit={this.handleStopEditAndBlur}\n                emptyInputOnBlur={false}\n                clearAllButton={this.multiple && !this.chipSetEditMode}\n                {...props}\n            />,\n            this.renderDropdown(),\n        ];\n    }\n\n    @Watch('value')\n    protected onChangeValue() {\n        this.chips = this.createChips(this.value);\n    }\n\n    @Watch('searcher')\n    protected createDebouncedSearcher(newValue: Searcher) {\n        if (typeof newValue !== 'function') {\n            return;\n        }\n\n        this.debouncedSearch = AwesomeDebouncePromise(\n            newValue,\n            SEARCH_DEBOUNCE,\n        );\n    }\n\n    private renderDelimiter() {\n        if (this.multiple) {\n            return this.delimiter;\n        }\n\n        return null;\n    }\n\n    private createChips(value: ListItem | ListItem[]): Chip[] {\n        if (!value) {\n            return [];\n        }\n\n        if (this.multiple) {\n            const listItems: ListItem[] = value as ListItem[];\n\n            return listItems.map(this.createChip);\n        }\n\n        const listItem: ListItem = value as ListItem;\n\n        return [this.createChip(listItem)];\n    }\n\n    private createChip(listItem: ListItem): Chip {\n        const name = getIconName(listItem.icon);\n        const color = getIconFillColor(listItem.icon, listItem.iconColor);\n\n        return {\n            id: `${listItem.value}`,\n            text: listItem.text,\n            removable: true,\n            icon: name ? { name: name, color: color } : undefined,\n            value: listItem,\n        };\n    }\n\n    /**\n     * Renders the dropdown with the items to pick from, or a spinner if the picker\n     * is waiting for items to be received\n     *\n     * @returns {HTMLElement} picker dropdown\n     */\n    private renderDropdown() {\n        const dropDownContent = this.getDropdownContent();\n\n        const content = [];\n\n        if (this.shouldShowDropDownContent()) {\n            const actionContent = this.getActionContent();\n            if (this.actionPosition === 'top') {\n                content.push(actionContent);\n            }\n\n            if (dropDownContent) {\n                content.push(dropDownContent);\n            }\n\n            if (this.actionPosition === 'bottom') {\n                content.push(actionContent);\n            }\n        }\n\n        return this.renderPortal(content);\n    }\n\n    private getActionContent() {\n        const actionCount = this.actions?.length ?? 0;\n        if (actionCount === 0) {\n            return null;\n        }\n\n        return [\n            <limel-list\n                class={{\n                    'static-actions-list': true,\n                    'is-on-top': this.actionPosition === 'top',\n                    'is-at-bottom': this.actionPosition === 'bottom',\n                    'has-position-sticky':\n                        this.actionScrollBehavior === 'sticky',\n                }}\n                badgeIcons={true}\n                type={'selectable'}\n                onChange={this.handleActionListChange}\n                items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n            />,\n        ];\n    }\n\n    private removeUnusedPropertiesOnAction(\n        action: ListItem<Action>,\n    ): ListItem<Action> {\n        return {\n            ...action,\n            actions: [],\n        };\n    }\n\n    private shouldShowDropDownContent() {\n        if (this.isFull()) {\n            return false;\n        }\n\n        return !!this.chipSetEditMode;\n    }\n\n    private getDropdownContent() {\n        if (!this.shouldShowDropDownContent()) {\n            return;\n        }\n\n        if (this.loading) {\n            return this.renderSpinner();\n        }\n\n        if (!this.items || !this.items.length) {\n            return this.renderEmptyMessage();\n        }\n\n        return this.renderListResult();\n    }\n\n    /**\n     * Returns true if the picker is \"full\"\n     * The picker is considered to be full if it has a value and only one is allowed\n     *\n     * @returns {boolean} true if the picker is full\n     */\n    private isFull(): boolean {\n        return !this.multiple && !!this.value;\n    }\n\n    private renderSpinner() {\n        return (\n            <div\n                style={{\n                    width: '100%',\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '1rem 0',\n                }}\n            >\n                <limel-spinner limeBranded={false} />\n            </div>\n        );\n    }\n\n    private renderEmptyMessage() {\n        if (!this.emptyResultMessage) {\n            return;\n        }\n\n        const style = {\n            color: 'rgb(var(--contrast-1100))',\n            'text-align': 'center',\n            margin: '0.5rem 1rem',\n        };\n\n        return <p style={style}>{this.emptyResultMessage}</p>;\n    }\n\n    private renderListResult() {\n        return (\n            <limel-list\n                badgeIcons={this.badgeIcons}\n                onChange={this.handleListChange}\n                onKeyDown={this.onListKeyDown}\n                type=\"selectable\"\n                items={this.items}\n            />\n        );\n    }\n\n    private onListKeyDown(event: KeyboardEvent) {\n        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n        const keyCodeFound = [\n            TAB_KEY_CODE,\n            ESCAPE_KEY_CODE,\n            ENTER_KEY_CODE,\n        ].includes(event.keyCode);\n        if (keyFound || keyCodeFound) {\n            this.chipSet.setFocus();\n        }\n    }\n\n    private renderPortal(content: any[] = []) {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <limel-portal\n                visible={content.length > 0}\n                containerId={this.portalId}\n                inheritParentWidth={true}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-menu-surface\n                    open={content.length > 0}\n                    allowClicksElement={this.host}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {content}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    }\n\n    /**\n     * Check if a descendant still has focus. If not, reset text value and search result.\n     *\n     * @returns {void}\n     */\n    private handleStopEditAndBlur() {\n        // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n        // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n        const element =\n            this.host.shadowRoot.activeElement || document.activeElement;\n        const portalElement = document.querySelector(`#${this.portalId}`);\n        if (\n            isDescendant(element as HTMLElement, this.host) ||\n            isDescendant(element as HTMLElement, portalElement as HTMLElement)\n        ) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    /**\n     * Input handler for the input field\n     *\n     * @param {InputEvent} event event\n     * @returns {void}\n     */\n    private async handleTextInput(event) {\n        event.stopPropagation();\n\n        const query = event.detail;\n        this.textValue = query;\n        this.loading = true;\n\n        // If the search-query is an empty string, bypass debouncing.\n        const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n        const result = await searchFn(query);\n        this.handleSearchResult(query, result);\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param {LimelListCustomEvent<ListItem>} event event\n     * @returns {void}\n     */\n    private handleListChange(event: LimelListCustomEvent<ListItem>) {\n        event.stopPropagation();\n        if (!this.value || this.value !== event.detail) {\n            let newValue: ListItem | ListItem[] = event.detail;\n            if (this.multiple) {\n                newValue = [...(this.value as ListItem[]), event.detail];\n            }\n\n            this.change.emit(newValue);\n            this.items = [];\n        }\n\n        if (this.multiple) {\n            this.chipSet?.setFocus(true);\n        }\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param {LimelChipSetCustomEvent} event event\n     * @returns {void}\n     */\n    private handleActionListChange(\n        event: LimelListCustomEvent<ListItem<Action>>,\n    ) {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.action.emit(event.detail.value);\n        this.items = [];\n    }\n\n    /**\n     * Focus handler for the chip set\n     * Prevent focus if the picker has a value and does not support multiple values\n     *\n     * @returns {void}\n     */\n    private async handleInputFieldFocus() {\n        this.loading = true;\n        const query = this.textValue;\n        const result = await this.searcher(query);\n        this.handleSearchResult(query, result);\n    }\n\n    private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n        event.stopPropagation();\n\n        let newValue = null;\n        if (this.multiple) {\n            const chips = event.detail as Chip[];\n            newValue = chips.map((chip) => {\n                return (this.value as ListItem[]).find((item) => {\n                    return `${item.value}` === chip.id;\n                });\n            });\n        }\n\n        this.change.emit(newValue);\n    }\n\n    private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n        event.stopPropagation();\n        this.interact.emit(event.detail ? event.detail.value : event.detail);\n    }\n\n    /**\n     * Key handler for the input field\n     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n     *\n     * @param {KeyboardEvent} event event\n     * @returns {void}\n     */\n    private handleInputKeyDown(event: KeyboardEvent) {\n        const isForwardTab =\n            (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n            !event.altKey &&\n            !event.metaKey &&\n            !event.shiftKey;\n        const isUp =\n            event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n        const isDown =\n            event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (isForwardTab || isDown) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:first-child',\n            );\n            listElement.focus();\n\n            return;\n        }\n\n        if (isUp) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:last-child',\n            );\n            listElement.focus();\n        }\n    }\n\n    /**\n     * Key handler for the dropdown\n     *\n     * @param {KeyboardEvent} event event\n     * @returns {void}\n     */\n    private handleDropdownKeyDown(event: KeyboardEvent) {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n        if (isEscape) {\n            event.preventDefault();\n            this.textValue = '';\n            this.chipSet.setFocus(true);\n        }\n    }\n\n    private handleSearchResult(query: string, result: ListItem[]) {\n        if (query === this.textValue) {\n            this.items = result;\n            if (this.multiple) {\n                const values = this.value as ListItem[];\n                this.items = result.filter((item) => {\n                    return !values.includes(item);\n                });\n            }\n\n            this.loading = false;\n        }\n    }\n\n    private handleCloseMenu() {\n        if (this.items.length > 0) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    private clearInputField() {\n        this.chipSet.emptyInput();\n        this.textValue = '';\n        this.handleSearchResult('', []);\n    }\n}\n"]}

package/dist/collection/components/switch/switch.js

@@ -11,7 +11,10 @@ import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-c
  * The Switch component is widely used in user interfaces to enable users to
  * quickly and intuitively change binary settings.
  *
- * <limel-example-switch-vs-checkbox />
+ * :::important
+ * Checkboxes are sometimes used interchangeably with switches in user interfaces.
+ * But there is an important difference between the two! Please read our guidelines about
+ * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
  *
  * @exampleComponent limel-example-switch
  * @exampleComponent limel-example-switch-helper-text

package/dist/collection/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Host,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * <limel-example-switch-vs-checkbox />\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch',\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <button\n                    id={this.fieldId}\n                    class={{\n                        'mdc-switch': true,\n                        'lime-switch--readonly': this.readonly,\n                        'mdc-switch--unselected': !this.value,\n                        'mdc-switch--selected': this.value,\n                    }}\n                    type=\"button\"\n                    role=\"switch\"\n                    aria-checked={this.value}\n                    disabled={this.disabled || this.readonly}\n                    onClick={this.handleClick}\n                    aria-controls={this.helperTextId}\n                >\n                    <div class=\"mdc-switch__track\" />\n                    <div class=\"mdc-switch__handle-track\">\n                        <div class=\"mdc-switch__handle\">\n                            <div class=\"mdc-switch__shadow\">\n                                <div class=\"mdc-elevation-overlay\"></div>\n                            </div>\n                            <div class=\"mdc-switch__ripple\"></div>\n                            <div class=\"mdc-switch__icons\">\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                                </svg>\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M20 13H4v-2h16v2z\" />\n                                </svg>\n                            </div>\n                        </div>\n                    </div>\n                </button>\n                <label\n                    class={`${\n                        this.disabled || this.readonly ? 'disabled' : ''\n                    }`}\n                    htmlFor={this.fieldId}\n                >\n                    {this.label}\n                </label>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Host,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch',\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <button\n                    id={this.fieldId}\n                    class={{\n                        'mdc-switch': true,\n                        'lime-switch--readonly': this.readonly,\n                        'mdc-switch--unselected': !this.value,\n                        'mdc-switch--selected': this.value,\n                    }}\n                    type=\"button\"\n                    role=\"switch\"\n                    aria-checked={this.value}\n                    disabled={this.disabled || this.readonly}\n                    onClick={this.handleClick}\n                    aria-controls={this.helperTextId}\n                >\n                    <div class=\"mdc-switch__track\" />\n                    <div class=\"mdc-switch__handle-track\">\n                        <div class=\"mdc-switch__handle\">\n                            <div class=\"mdc-switch__shadow\">\n                                <div class=\"mdc-elevation-overlay\"></div>\n                            </div>\n                            <div class=\"mdc-switch__ripple\"></div>\n                            <div class=\"mdc-switch__icons\">\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                                </svg>\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M20 13H4v-2h16v2z\" />\n                                </svg>\n                            </div>\n                        </div>\n                    </div>\n                </button>\n                <label\n                    class={`${\n                        this.disabled || this.readonly ? 'disabled' : ''\n                    }`}\n                    htmlFor={this.fieldId}\n                >\n                    {this.label}\n                </label>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}

package/dist/esm/{get-icon-props-8e2a0505.js → get-icon-props-990e4467.js}

@@ -7,7 +7,7 @@
  * @returns {string | undefined} The icon name or the provided string, or `undefined` if `icon` is falsy.
  */
 function getIconName(icon) {
-  if (typeof icon === 'object' && 'name' in icon) {
+  if (!!icon && typeof icon === 'object' && 'name' in icon) {
     return icon.name;
   }
   if (typeof icon === 'string') {
@@ -27,7 +27,7 @@ function getIconName(icon) {
  * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.
  */
 function getIconColor(icon, iconColor) {
-  if (typeof icon === 'object' && 'color' in icon) {
+  if (!!icon && typeof icon === 'object' && 'color' in icon) {
     return icon.color;
   }
   if (typeof icon === 'string') {
@@ -47,7 +47,7 @@ function getIconColor(icon, iconColor) {
  * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.
  */
 function getIconFillColor(icon, iconFillColor) {
-  if (typeof icon === 'object' && 'color' in icon) {
+  if (!!icon && typeof icon === 'object' && 'color' in icon) {
     return icon.color;
   }
   if (typeof icon === 'string') {
@@ -65,7 +65,7 @@ function getIconFillColor(icon, iconFillColor) {
  * @returns {string | undefined} The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.
  */
 function getIconBackgroundColor(icon, iconBackgroundColor) {
-  if (typeof icon === 'object' && 'backgroundColor' in icon) {
+  if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {
     return icon.backgroundColor;
   }
   if (typeof icon === 'string') {
@@ -82,7 +82,7 @@ function getIconBackgroundColor(icon, iconBackgroundColor) {
  * @returns {string | undefined} The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.
  */
 function getIconTitle(icon, iconTitle) {
-  if (typeof icon === 'object' && 'title' in icon) {
+  if (!!icon && typeof icon === 'object' && 'title' in icon) {
     return icon.title;
   }
   if (typeof icon === 'string') {
@@ -93,4 +93,4 @@ function getIconTitle(icon, iconTitle) {
 
 export { getIconColor as a, getIconBackgroundColor as b, getIconFillColor as c, getIconTitle as d, getIconName as g };
 
-//# sourceMappingURL=get-icon-props-8e2a0505.js.map
+//# sourceMappingURL=get-icon-props-990e4467.js.map

package/dist/esm/get-icon-props-990e4467.js.map

@@ -0,0 +1 @@
+{"file":"get-icon-props-990e4467.js","mappings":"AAEA;;;;;;;;SAQgB,WAAW,CACvB,IAA+B;EAE/B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE;IACtD,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;SAWgB,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;SAWgB,gBAAgB,CAC5B,IAA+B,EAC/B,aAAkC;EAElC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,aAAa,CAAC;GACxB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;SASgB,sBAAsB,CAClC,IAA+B,EAC/B,mBAAwC;EAExC,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,iBAAiB,IAAI,IAAI,EAAE;IACjE,OAAO,IAAI,CAAC,eAAe,CAAC;GAC/B;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,mBAAmB,CAAC;GAC9B;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;SAQgB,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB;;;;","names":[],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the name from.\n * @returns {string | undefined} The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconColor] - The color to use when the deprecated `iconColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param {string | Icon} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconFillColor] - The color to use when `iconFillColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the background color from.\n * @param {string | undefined} [iconBackgroundColor] - The background color to use when provided explicitly.\n * @returns {string | undefined} The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param {string | Icon | undefined} icon - The icon to retrieve the title from.\n * @param {string | undefined} [iconTitle] - The title to use when provided explicitly.\n * @returns {string | undefined} The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"version":3}

package/dist/esm/limel-action-bar-item_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-376f2b81.js';
-import { g as getIconName, a as getIconColor } from './get-icon-props-8e2a0505.js';
+import { g as getIconName, a as getIconColor } from './get-icon-props-990e4467.js';
 
 const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
 

package/dist/esm/limel-breadcrumbs_3.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-376f2b81.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
-import { g as getIconName, a as getIconColor } from './get-icon-props-8e2a0505.js';
+import { g as getIconName, a as getIconColor } from './get-icon-props-990e4467.js';
 import { T as TAB, d as TAB_KEY_CODE, A as ARROW_UP, g as ARROW_UP_KEY_CODE, h as ARROW_DOWN, i as ARROW_DOWN_KEY_CODE, k as ARROW_LEFT, l as ARROW_LEFT_KEY_CODE, m as ARROW_RIGHT, n as ARROW_RIGHT_KEY_CODE } from './keycodes-22fb659d.js';
 import { A as AwesomeDebouncePromise } from './index.es-61c13ecf.js';
 import { i as isFunction } from './eq-c1c7f528.js';