@limetech/lime-elements 37.1.0-next.56 → 37.1.0-next.58

package/dist/collection/components/menu-list/menu-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    IconSize,\n    ListSeparator,\n    MenuItem,\n    MenuListType,\n} from '../../interface';\nimport { MDCMenu, MDCMenuItemEvent } from '@material/menu';\nimport { MDCRipple } from '@material/ripple';\nimport { strings as menuStrings } from '@material/menu/constants';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { MenuListRenderer } from './menu-list-renderer';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\n\nconst { SELECTED_EVENT } = menuStrings;\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-menu-list',\n    shadow: true,\n    styleUrl: 'menu-list.scss',\n})\nexport class MenuList {\n    /**\n     * List of items to display\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop()\n    public badgeIcons: boolean;\n\n    /**\n     * Size of the icons in the list\n     */\n    @Prop()\n    public iconSize: IconSize = 'small';\n\n    /**\n     * The type of the menu, omit to get a regular vertical menu.\n     * Available types are:\n     * `menu`: regular vertical menu.\n     */\n    @Prop()\n    public type: MenuListType;\n\n    /**\n     * By default, lists will display 3 lines of text, and then truncate the rest.\n     * Consumers can increase or decrease this number by specifying\n     * `maxLinesSecondaryText`. If consumer enters zero or negative\n     * numbers we default to 1; and if they type decimals we round up.\n     */\n    // eslint-disable-next-line no-magic-numbers\n    @Prop() maxLinesSecondaryText: number = 3;\n\n    @Element()\n    private element: HTMLLimelMenuListElement;\n\n    private config: MenuListRendererConfig;\n    private MenuListRenderer = new MenuListRenderer();\n    private mdcMenu: MDCMenu;\n\n    /**\n     * Fired when a new value has been selected from the list.\n     */\n    @Event()\n    private select: EventEmitter<MenuItem>;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n    }\n\n    public render() {\n        this.config = {\n            badgeIcons: this.badgeIcons,\n            type: this.type,\n            iconSize: this.iconSize,\n        };\n\n        const html = this.MenuListRenderer.render(this.items, this.config);\n\n        return <div class=\"mdc-menu mdc-menu-surface\">{html}</div>;\n    }\n\n    @Watch('type')\n    protected handleType() {\n        this.setupListeners();\n    }\n\n    @Watch('items')\n    protected itemsChanged() {\n        setTimeout(() => {\n            this.setup();\n        }, 0);\n    }\n\n    private setup = () => {\n        this.setupMenu();\n        this.setupListeners();\n    };\n\n    private setupMenu = () => {\n        if (this.mdcMenu) {\n            this.teardown();\n            this.mdcMenu = null;\n        }\n\n        const element = this.element.shadowRoot.querySelector('.mdc-menu');\n        if (!element) {\n            return;\n        }\n\n        this.mdcMenu = new MDCMenu(element);\n        this.mdcMenu.hasTypeahead = true;\n        this.mdcMenu.wrapFocus = true;\n        this.mdcMenu.items.forEach((item) => new MDCRipple(item));\n    };\n\n    private setupListeners = () => {\n        if (!this.mdcMenu) {\n            return;\n        }\n\n        this.mdcMenu.unlisten(SELECTED_EVENT, this.handleMenuSelect);\n        this.mdcMenu.listen(SELECTED_EVENT, this.handleMenuSelect);\n    };\n\n    private teardown = () => {\n        this.mdcMenu?.unlisten(SELECTED_EVENT, this.handleMenuSelect);\n        this.mdcMenu?.destroy();\n    };\n\n    private handleMenuSelect = (event: MDCMenuItemEvent) => {\n        this.handleSingleSelect(event.detail.index);\n    };\n\n    private handleSingleSelect = (index: number) => {\n        const MenuItems = this.items.filter(this.isMenuItem) as MenuItem[];\n        if (MenuItems[index].disabled) {\n            return;\n        }\n\n        const selectedItem: MenuItem = MenuItems.find((item: MenuItem) => {\n            return !!item.selected;\n        });\n\n        if (selectedItem) {\n            this.select.emit({ ...selectedItem, selected: false });\n        }\n\n        if (MenuItems[index] !== selectedItem) {\n            this.select.emit({ ...MenuItems[index], selected: false });\n        }\n    };\n\n    private isMenuItem = (item: MenuItem): boolean => {\n        return !('separator' in item);\n    };\n}\n"]}
+{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    IconSize,\n    ListSeparator,\n    MenuItem,\n    MenuListType,\n} from '../../interface';\nimport { MDCMenu, MDCMenuItemEvent } from '@material/menu';\nimport { MDCRipple } from '@material/ripple';\nimport { strings as menuStrings } from '@material/menu/constants';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { MenuListRenderer } from './menu-list-renderer';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\n\nconst { SELECTED_EVENT } = menuStrings;\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-menu-list',\n    shadow: true,\n    styleUrl: 'menu-list.scss',\n})\nexport class MenuList {\n    /**\n     * List of items to display\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop()\n    public badgeIcons: boolean;\n\n    /**\n     * Size of the icons in the list\n     */\n    @Prop()\n    public iconSize: IconSize = 'small';\n\n    /**\n     * The type of the menu, omit to get a regular vertical menu.\n     * Available types are:\n     * `menu`: regular vertical menu.\n     */\n    @Prop()\n    public type: MenuListType;\n\n    /**\n     * By default, lists will display 3 lines of text, and then truncate the rest.\n     * Consumers can increase or decrease this number by specifying\n     * `maxLinesSecondaryText`. If consumer enters zero or negative\n     * numbers we default to 1; and if they type decimals we round up.\n     */\n    // eslint-disable-next-line no-magic-numbers\n    @Prop() maxLinesSecondaryText: number = 3;\n\n    @Element()\n    private element: HTMLLimelMenuListElement;\n\n    private config: MenuListRendererConfig;\n    private MenuListRenderer = new MenuListRenderer();\n    private mdcMenu: MDCMenu;\n\n    /**\n     * Fired when a new value has been selected from the list.\n     */\n    @Event()\n    private select: EventEmitter<MenuItem>;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n        this.triggerIconColorWarning();\n    }\n\n    public render() {\n        this.config = {\n            badgeIcons: this.badgeIcons,\n            type: this.type,\n            iconSize: this.iconSize,\n        };\n\n        const html = this.MenuListRenderer.render(this.items, this.config);\n\n        return <div class=\"mdc-menu mdc-menu-surface\">{html}</div>;\n    }\n\n    @Watch('type')\n    protected handleType() {\n        this.setupListeners();\n    }\n\n    @Watch('items')\n    protected itemsChanged() {\n        setTimeout(() => {\n            this.setup();\n        }, 0);\n    }\n\n    private setup = () => {\n        this.setupMenu();\n        this.setupListeners();\n    };\n\n    private setupMenu = () => {\n        if (this.mdcMenu) {\n            this.teardown();\n            this.mdcMenu = null;\n        }\n\n        const element = this.element.shadowRoot.querySelector('.mdc-menu');\n        if (!element) {\n            return;\n        }\n\n        this.mdcMenu = new MDCMenu(element);\n        this.mdcMenu.hasTypeahead = true;\n        this.mdcMenu.wrapFocus = true;\n        this.mdcMenu.items.forEach((item) => new MDCRipple(item));\n    };\n\n    private setupListeners = () => {\n        if (!this.mdcMenu) {\n            return;\n        }\n\n        this.mdcMenu.unlisten(SELECTED_EVENT, this.handleMenuSelect);\n        this.mdcMenu.listen(SELECTED_EVENT, this.handleMenuSelect);\n    };\n\n    private teardown = () => {\n        this.mdcMenu?.unlisten(SELECTED_EVENT, this.handleMenuSelect);\n        this.mdcMenu?.destroy();\n    };\n\n    private handleMenuSelect = (event: MDCMenuItemEvent) => {\n        this.handleSingleSelect(event.detail.index);\n    };\n\n    private handleSingleSelect = (index: number) => {\n        const MenuItems = this.items.filter(this.isMenuItem) as MenuItem[];\n        if (MenuItems[index].disabled) {\n            return;\n        }\n\n        const selectedItem: MenuItem = MenuItems.find((item: MenuItem) => {\n            return !!item.selected;\n        });\n\n        if (selectedItem) {\n            this.select.emit({ ...selectedItem, selected: false });\n        }\n\n        if (MenuItems[index] !== selectedItem) {\n            this.select.emit({ ...MenuItems[index], selected: false });\n        }\n    };\n\n    private isMenuItem = (item: MenuItem): boolean => {\n        return !('separator' in item);\n    };\n\n    private triggerIconColorWarning() {\n        if (this.items.some((item) => 'iconColor' in item)) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n            );\n        }\n    }\n}\n"]}

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

@@ -3,6 +3,7 @@ import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { isDescendant } from '../../util/dom';
 import { ARROW_DOWN, ARROW_DOWN_KEY_CODE, ARROW_UP, ARROW_UP_KEY_CODE, ENTER, ENTER_KEY_CODE, ESCAPE, ESCAPE_KEY_CODE, TAB, TAB_KEY_CODE, } from '../../util/keycodes';
 import { createRandomString } from '../../util/random-string';
+import { getIconFillColor, getIconName } from '../icon/get-icon-props';
 const SEARCH_DEBOUNCE = 500;
 const CHIP_SET_TAG_NAME = 'limel-chip-set';
 /**
@@ -104,12 +105,14 @@ 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: listItem.icon,
-      iconFillColor: listItem.iconColor,
+      icon: name,
+      iconFillColor: color,
       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';\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: listItem.icon,\n            iconFillColor: listItem.iconColor,\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     * @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     * @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     * @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     * @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     * @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     * @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     * @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     * @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     * @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,\n            iconFillColor: color,\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     * @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     * @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     * @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     * @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     * @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     * @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     * @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     * @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     * @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/progress-flow/progress-flow-item/progress-flow-item.js

@@ -1,4 +1,5 @@
 import { h, } from '@stencil/core';
+import { getIconName } from 'src/components/icon/get-icon-props';
 /**
  * @private
  */
@@ -47,7 +48,8 @@ export class ProgressFlowItem {
     if (!this.item.icon) {
       return;
     }
-    return h("limel-icon", { name: this.item.icon, size: "small", class: "icon" });
+    const name = getIconName(this.item.icon);
+    return h("limel-icon", { name: name, size: "small", class: "icon" });
   }
   renderDivider() {
     if (this.item.isOffProgress) {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-flow-item.js","sourceRoot":"","sources":["../../../../src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AAGvB;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;IAmEjB,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;gBA7DsB,IAAI;oBAMV,KAAK;oBAML,KAAK;;EAQhB,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACH,cACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;QAE1B,IAAI,CAAC,UAAU,EAAE;QAClB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ;QACzC,IAAI,CAAC,aAAa,EAAE,CAChB;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;EACN,CAAC;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;EACjE,CAAC;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjE,CAAC;EAMO,mBAAmB;;IACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;EACvE,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,OAAO,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;EAC1E,CAAC;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,SAAS,GAAG,CAAC;EACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../../../interface';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-progress-flow-item',\n    shadow: false,\n    styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n    @Element()\n    public element: HTMLLimelProgressFlowItemElement;\n\n    /**\n     * The flow item that should be rendered\n     */\n    @Prop()\n    public item: FlowItem = null;\n\n    /**\n     * True if the flow item should be disabled\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * True if the flow item should be readonly\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * Fired when clicking on the flow item\n     */\n    @Event()\n    public interact: EventEmitter<void>;\n\n    public render() {\n        if (!this.item) {\n            return;\n        }\n\n        return [\n            <button\n                tabindex=\"0\"\n                title={this.getToolTipText()}\n                type=\"button\"\n                class={{\n                    step: true,\n                    selected: this.item?.selected,\n                    disabled: this.isDisabled(),\n                    readonly: this.readonly,\n                }}\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                <span class=\"text\">{this.item.text}</span>\n                {this.renderDivider()}\n            </button>,\n            this.renderSecondaryText(),\n        ];\n    }\n\n    private isDisabled() {\n        return this.item?.disabled || this.readonly || this.disabled;\n    }\n\n    private getToolTipText() {\n        if (!this.item.secondaryText) {\n            return this.item.text;\n        }\n\n        return [this.item.text, this.item.secondaryText].join(' · ');\n    }\n\n    private handleClick = () => {\n        this.interact.emit();\n    };\n\n    private renderSecondaryText() {\n        if (!this.item?.secondaryText) {\n            return;\n        }\n\n        return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n    }\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        return <limel-icon name={this.item.icon} size=\"small\" class=\"icon\" />;\n    }\n\n    private renderDivider() {\n        if (this.item.isOffProgress) {\n            return;\n        }\n\n        return <div class=\"divider\" />;\n    }\n}\n"]}
+{"version":3,"file":"progress-flow-item.js","sourceRoot":"","sources":["../../../../src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;IAmEjB,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;gBA7DsB,IAAI;oBAMV,KAAK;oBAML,KAAK;;EAQhB,MAAM;;IACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,OAAO;MACH,cACI,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;UACH,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;UAC7B,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;UAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;QAE1B,IAAI,CAAC,UAAU,EAAE;QAClB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ;QACzC,IAAI,CAAC,aAAa,EAAE,CAChB;MACT,IAAI,CAAC,mBAAmB,EAAE;KAC7B,CAAC;EACN,CAAC;EAEO,UAAU;;IACd,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;EACjE,CAAC;EAEO,cAAc;IAClB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACzB;IAED,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjE,CAAC;EAMO,mBAAmB;;IACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA,EAAE;MAC3B,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAO,CAAC;EACvE,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAO,kBAAY,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC;EAChE,CAAC;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACzB,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,SAAS,GAAG,CAAC;EACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../../../interface';\nimport { getIconName } from 'src/components/icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-progress-flow-item',\n    shadow: false,\n    styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n    @Element()\n    public element: HTMLLimelProgressFlowItemElement;\n\n    /**\n     * The flow item that should be rendered\n     */\n    @Prop()\n    public item: FlowItem = null;\n\n    /**\n     * True if the flow item should be disabled\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * True if the flow item should be readonly\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * Fired when clicking on the flow item\n     */\n    @Event()\n    public interact: EventEmitter<void>;\n\n    public render() {\n        if (!this.item) {\n            return;\n        }\n\n        return [\n            <button\n                tabindex=\"0\"\n                title={this.getToolTipText()}\n                type=\"button\"\n                class={{\n                    step: true,\n                    selected: this.item?.selected,\n                    disabled: this.isDisabled(),\n                    readonly: this.readonly,\n                }}\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                <span class=\"text\">{this.item.text}</span>\n                {this.renderDivider()}\n            </button>,\n            this.renderSecondaryText(),\n        ];\n    }\n\n    private isDisabled() {\n        return this.item?.disabled || this.readonly || this.disabled;\n    }\n\n    private getToolTipText() {\n        if (!this.item.secondaryText) {\n            return this.item.text;\n        }\n\n        return [this.item.text, this.item.secondaryText].join(' · ');\n    }\n\n    private handleClick = () => {\n        this.interact.emit();\n    };\n\n    private renderSecondaryText() {\n        if (!this.item?.secondaryText) {\n            return;\n        }\n\n        return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n    }\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        const name = getIconName(this.item.icon);\n\n        return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n    }\n\n    private renderDivider() {\n        if (this.item.isOffProgress) {\n            return;\n        }\n\n        return <div class=\"divider\" />;\n    }\n}\n"]}

package/dist/collection/components/progress-flow/progress-flow.js

@@ -1,4 +1,5 @@
 import { h, } from '@stencil/core';
+import { getIconColor } from '../icon/get-icon-props';
 /**
  * @exampleComponent limel-example-progress-flow-basic
  * @exampleComponent limel-example-progress-flow-secondary-text
@@ -40,6 +41,9 @@ export class ProgressFlow {
   componentDidRender() {
     this.scrollToSelectedItem();
   }
+  componentDidLoad() {
+    this.triggerIconColorWarning();
+  }
   render() {
     const regularFlowItems = this.flowItems.filter((item) => {
       return !item.isOffProgress;
@@ -56,6 +60,7 @@ export class ProgressFlow {
     ];
   }
   getItemStyle(flowItem) {
+    const color = getIconColor(flowItem.icon, flowItem.iconColor);
     const style = {};
     if (flowItem === null || flowItem === void 0 ? void 0 : flowItem.selectedColor) {
       style['--progress-flow-step-background-color--selected'] =
@@ -65,8 +70,8 @@ export class ProgressFlow {
       style['--progress-flow-step-background-color--passed'] =
         flowItem.passedColor;
     }
-    if (flowItem === null || flowItem === void 0 ? void 0 : flowItem.iconColor) {
-      style['--progress-flow-icon-color--inactive'] = flowItem.iconColor;
+    if (color) {
+      style['--progress-flow-icon-color--inactive'] = color;
     }
     return style;
   }
@@ -89,6 +94,14 @@ export class ProgressFlow {
   getElementForSelectedItem() {
     return this.element.shadowRoot.querySelector('.flow-item.selected');
   }
+  triggerIconColorWarning() {
+    for (const flowItem of this.flowItems) {
+      if (flowItem.iconColor) {
+        /* eslint-disable-next-line no-console */
+        console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
+      }
+    }
+  }
   static get is() { return "limel-progress-flow"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

package/dist/collection/components/progress-flow/progress-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-flow.js","sourceRoot":"","sources":["../../../src/components/progress-flow/progress-flow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../../interface';\n\n/**\n * @exampleComponent limel-example-progress-flow-basic\n * @exampleComponent limel-example-progress-flow-secondary-text\n * @exampleComponent limel-example-progress-flow-disabled-step\n * @exampleComponent limel-example-progress-flow-colors\n * @exampleComponent limel-example-progress-flow-colors-css\n * @exampleComponent limel-example-progress-flow-off-progress-steps\n * @exampleComponent limel-example-progress-flow-narrow\n */\n@Component({\n    tag: 'limel-progress-flow',\n    shadow: true,\n    styleUrl: 'progress-flow.scss',\n})\nexport class ProgressFlow {\n    @Element()\n    public element: HTMLLimelProgressFlowElement;\n\n    /**\n     * What flow items to render\n     */\n    @Prop()\n    public flowItems: FlowItem[] = [];\n\n    /**\n     * Set to `true` to disable the progress flow.\n     * Use `disabled` to indicate that the component can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * Disables the progress flow when `true`.\n     * This does not visualize the component that much differently.\n     * But since the component does not provide any feedback that users can\n     * interact with the component, it makes it perfect for illustrative and\n     * informative porpuses.\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * Fired when a new value has been selected from the progress flow\n     */\n    @Event()\n    public change: EventEmitter<FlowItem>;\n\n    private selectedItemIndex: number;\n\n    public componentDidRender() {\n        this.scrollToSelectedItem();\n    }\n\n    public render() {\n        const regularFlowItems = this.flowItems.filter((item) => {\n            return !item.isOffProgress;\n        });\n        const endPhaseItems = this.flowItems.filter((item) => {\n            return item.isOffProgress;\n        });\n        this.selectedItemIndex = regularFlowItems.findIndex((item) => {\n            return item.selected;\n        });\n\n        return [\n            regularFlowItems.map(this.renderRegularFlowItem),\n            endPhaseItems.map(this.renderEndPhaseItem),\n        ];\n    }\n\n    private renderRegularFlowItem = (\n        item: FlowItem,\n        index: number,\n        array: FlowItem[]\n    ) => {\n        return (\n            <limel-progress-flow-item\n                class={{\n                    'flow-item': true,\n                    first: index === 0,\n                    last: index === array.length - 1,\n                    passed: index < this.selectedItemIndex,\n                    selected: item.selected,\n                }}\n                style={this.getItemStyle(item)}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                item={item}\n                onInteract={this.handleFlowItemClick(item)}\n                data-tracking-value={item.value}\n            />\n        );\n    };\n\n    private renderEndPhaseItem = (\n        item: FlowItem,\n        index: number,\n        array: FlowItem[]\n    ) => {\n        return (\n            <limel-progress-flow-item\n                class={{\n                    'flow-item': true,\n                    'off-progress-item': true,\n                    selected: item.selected,\n                    'first-off-progress-item': index === 0,\n                    'last-off-progress-item': index === array.length - 1,\n                }}\n                style={this.getItemStyle(item)}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                item={item}\n                onInteract={this.handleFlowItemClick(item)}\n                data-tracking-value={item.value}\n            />\n        );\n    };\n\n    private handleFlowItemClick = (flowItem: FlowItem) => () => {\n        if (!flowItem.selected && !flowItem.disabled && !this.disabled) {\n            this.change.emit(flowItem);\n        }\n    };\n\n    private getItemStyle(flowItem: FlowItem) {\n        const style: any = {};\n        if (flowItem?.selectedColor) {\n            style['--progress-flow-step-background-color--selected'] =\n                flowItem.selectedColor;\n        }\n\n        if (flowItem?.passedColor) {\n            style['--progress-flow-step-background-color--passed'] =\n                flowItem.passedColor;\n        }\n\n        if (flowItem?.iconColor) {\n            style['--progress-flow-icon-color--inactive'] = flowItem.iconColor;\n        }\n\n        return style;\n    }\n\n    private scrollToSelectedItem() {\n        const selectedElement = this.getElementForSelectedItem();\n        if (selectedElement) {\n            const selectedItemLeftPosition =\n                selectedElement.offsetLeft - this.element.offsetLeft;\n            const selectedElementLeftPositionCentered =\n                // eslint-disable-next-line no-magic-numbers\n                selectedItemLeftPosition - this.element.offsetWidth / 2;\n            const selectedElementCentered =\n                selectedElementLeftPositionCentered +\n                // eslint-disable-next-line no-magic-numbers\n                selectedElement.offsetWidth / 2;\n            this.element.scrollTo({\n                behavior: 'smooth',\n                left: selectedElementCentered,\n            });\n        }\n    }\n\n    private getElementForSelectedItem(): HTMLLimelProgressFlowItemElement {\n        return this.element.shadowRoot.querySelector('.flow-item.selected');\n    }\n}\n"]}
+{"version":3,"file":"progress-flow.js","sourceRoot":"","sources":["../../../src/components/progress-flow/progress-flow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../../interface';\nimport { getIconColor } from '../icon/get-icon-props';\n\n/**\n * @exampleComponent limel-example-progress-flow-basic\n * @exampleComponent limel-example-progress-flow-secondary-text\n * @exampleComponent limel-example-progress-flow-disabled-step\n * @exampleComponent limel-example-progress-flow-colors\n * @exampleComponent limel-example-progress-flow-colors-css\n * @exampleComponent limel-example-progress-flow-off-progress-steps\n * @exampleComponent limel-example-progress-flow-narrow\n */\n@Component({\n    tag: 'limel-progress-flow',\n    shadow: true,\n    styleUrl: 'progress-flow.scss',\n})\nexport class ProgressFlow {\n    @Element()\n    public element: HTMLLimelProgressFlowElement;\n\n    /**\n     * What flow items to render\n     */\n    @Prop()\n    public flowItems: FlowItem[] = [];\n\n    /**\n     * Set to `true` to disable the progress flow.\n     * Use `disabled` to indicate that the component can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * Disables the progress flow when `true`.\n     * This does not visualize the component that much differently.\n     * But since the component does not provide any feedback that users can\n     * interact with the component, it makes it perfect for illustrative and\n     * informative porpuses.\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * Fired when a new value has been selected from the progress flow\n     */\n    @Event()\n    public change: EventEmitter<FlowItem>;\n\n    private selectedItemIndex: number;\n\n    public componentDidRender() {\n        this.scrollToSelectedItem();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public render() {\n        const regularFlowItems = this.flowItems.filter((item) => {\n            return !item.isOffProgress;\n        });\n        const endPhaseItems = this.flowItems.filter((item) => {\n            return item.isOffProgress;\n        });\n        this.selectedItemIndex = regularFlowItems.findIndex((item) => {\n            return item.selected;\n        });\n\n        return [\n            regularFlowItems.map(this.renderRegularFlowItem),\n            endPhaseItems.map(this.renderEndPhaseItem),\n        ];\n    }\n\n    private renderRegularFlowItem = (\n        item: FlowItem,\n        index: number,\n        array: FlowItem[]\n    ) => {\n        return (\n            <limel-progress-flow-item\n                class={{\n                    'flow-item': true,\n                    first: index === 0,\n                    last: index === array.length - 1,\n                    passed: index < this.selectedItemIndex,\n                    selected: item.selected,\n                }}\n                style={this.getItemStyle(item)}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                item={item}\n                onInteract={this.handleFlowItemClick(item)}\n                data-tracking-value={item.value}\n            />\n        );\n    };\n\n    private renderEndPhaseItem = (\n        item: FlowItem,\n        index: number,\n        array: FlowItem[]\n    ) => {\n        return (\n            <limel-progress-flow-item\n                class={{\n                    'flow-item': true,\n                    'off-progress-item': true,\n                    selected: item.selected,\n                    'first-off-progress-item': index === 0,\n                    'last-off-progress-item': index === array.length - 1,\n                }}\n                style={this.getItemStyle(item)}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                item={item}\n                onInteract={this.handleFlowItemClick(item)}\n                data-tracking-value={item.value}\n            />\n        );\n    };\n\n    private handleFlowItemClick = (flowItem: FlowItem) => () => {\n        if (!flowItem.selected && !flowItem.disabled && !this.disabled) {\n            this.change.emit(flowItem);\n        }\n    };\n\n    private getItemStyle(flowItem: FlowItem) {\n        const color = getIconColor(flowItem.icon, flowItem.iconColor);\n        const style: any = {};\n\n        if (flowItem?.selectedColor) {\n            style['--progress-flow-step-background-color--selected'] =\n                flowItem.selectedColor;\n        }\n\n        if (flowItem?.passedColor) {\n            style['--progress-flow-step-background-color--passed'] =\n                flowItem.passedColor;\n        }\n\n        if (color) {\n            style['--progress-flow-icon-color--inactive'] = color;\n        }\n\n        return style;\n    }\n\n    private scrollToSelectedItem() {\n        const selectedElement = this.getElementForSelectedItem();\n        if (selectedElement) {\n            const selectedItemLeftPosition =\n                selectedElement.offsetLeft - this.element.offsetLeft;\n            const selectedElementLeftPositionCentered =\n                // eslint-disable-next-line no-magic-numbers\n                selectedItemLeftPosition - this.element.offsetWidth / 2;\n            const selectedElementCentered =\n                selectedElementLeftPositionCentered +\n                // eslint-disable-next-line no-magic-numbers\n                selectedElement.offsetWidth / 2;\n            this.element.scrollTo({\n                behavior: 'smooth',\n                left: selectedElementCentered,\n            });\n        }\n    }\n\n    private getElementForSelectedItem(): HTMLLimelProgressFlowItemElement {\n        return this.element.shadowRoot.querySelector('.flow-item.selected');\n    }\n\n    private triggerIconColorWarning() {\n        for (const flowItem of this.flowItems) {\n            if (flowItem.iconColor) {\n                /* eslint-disable-next-line no-console */\n                console.warn(\n                    \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n                );\n            }\n        }\n    }\n}\n"]}

package/dist/collection/components/progress-flow/progress-flow.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-flow.types.js","sourceRoot":"","sources":["../../../src/components/progress-flow/progress-flow.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListItem } from '../../interface';\n\nexport interface FlowItem extends ListItem {\n    /**\n     * Determines whether a step should be a part of the flow,\n     * or should be an independent step visually located on the side.\n     */\n    isOffProgress?: boolean;\n\n    /**\n     * Background color of selected step.\n     */\n    selectedColor?: string;\n\n    /**\n     * Background color of the step, when it is passed.\n     */\n    passedColor?: string;\n\n    /**\n     * Fill color of the icon on the step,\n     * when it is neither selected nor passed.\n     */\n    iconColor?: string;\n}\n"]}
+{"version":3,"file":"progress-flow.types.js","sourceRoot":"","sources":["../../../src/components/progress-flow/progress-flow.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListItem } from '../../interface';\n\nexport interface FlowItem extends ListItem {\n    /**\n     * Determines whether a step should be a part of the flow,\n     * or should be an independent step visually located on the side.\n     */\n    isOffProgress?: boolean;\n\n    /**\n     * Background color of selected step.\n     */\n    selectedColor?: string;\n\n    /**\n     * Background color of the step, when it is passed.\n     */\n    passedColor?: string;\n\n    /**\n     * Fill color of the icon on the step,\n     * when it is neither selected nor passed.\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n}\n"]}

package/dist/collection/components/select/option.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.types.js","sourceRoot":"","sources":["../../../src/components/select/option.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Describes an option for limel-select.\n */\nexport interface Option<T extends string = string> {\n    /**\n     * The name of the option as shown to the user.\n     */\n    text: string;\n\n    /**\n     * The unique value of the option. Should always be the same for any given\n     * option, regardless of localization. The type `T` defaults to `string`,\n     * but can be set to any type that extends `string` (using `Option<type>`),\n     * for example an enum of specific strings.\n     *\n     * Note the value of this property *must* be a string!\n     * If the value you wish to use is, for example, numeric, convert it to a\n     * string before sending it to limel-select. Using numeric values does work\n     * in many desktop browsers, but breaks the select completely on some\n     * iOS devices.\n     */\n    value: T;\n\n    /**\n     * Set to `true` to make this option disabled and not possible to select.\n     */\n    disabled?: boolean;\n\n    /**\n     * Displays an icon beside the name of the option.\n     */\n    icon?: string;\n\n    /**\n     * Adds a color to the icon.\n     */\n    iconColor?: string;\n}\n"]}
+{"version":3,"file":"option.types.js","sourceRoot":"","sources":["../../../src/components/select/option.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../interface';\n/**\n * Describes an option for limel-select.\n */\nexport interface Option<T extends string = string> {\n    /**\n     * The name of the option as shown to the user.\n     */\n    text: string;\n\n    /**\n     * The unique value of the option. Should always be the same for any given\n     * option, regardless of localization. The type `T` defaults to `string`,\n     * but can be set to any type that extends `string` (using `Option<type>`),\n     * for example an enum of specific strings.\n     *\n     * Note the value of this property *must* be a string!\n     * If the value you wish to use is, for example, numeric, convert it to a\n     * string before sending it to limel-select. Using numeric values does work\n     * in many desktop browsers, but breaks the select completely on some\n     * iOS devices.\n     */\n    value: T;\n\n    /**\n     * Set to `true` to make this option disabled and not possible to select.\n     */\n    disabled?: boolean;\n\n    /**\n     * Displays an icon beside the name of the option.\n     */\n    icon?: string | Icon;\n\n    /**\n     * Adds a color to the icon.\n     * @deprecated This property is deprecated and will be removed soon!\n     *\n     * Use the new `Icon` interface instead and write:\n     * ```\n     * icon {\n     *    name: string,\n     *    color: string,\n     * },\n     * ```\n     */\n    iconColor?: string;\n}\n"]}

package/dist/collection/components/select/select.js

@@ -5,7 +5,7 @@ import { isMobileDevice } from '../../util/device';
 import { ENTER, ENTER_KEY_CODE, SPACE, SPACE_KEY_CODE, } from '../../util/keycodes';
 import { isMultiple } from '../../util/multiple';
 import { createRandomString } from '../../util/random-string';
-import { SelectTemplate } from './select.template';
+import { SelectTemplate, triggerIconColorWarning } from './select.template';
 /**
  * @exampleComponent limel-example-select
  * @exampleComponent limel-example-select-with-icons
@@ -51,6 +51,7 @@ export class Select {
   }
   componentDidLoad() {
     this.initialize();
+    triggerIconColorWarning(this.options);
   }
   initialize() {
     let element;

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem, Option } from '../../interface';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n    ENTER,\n    ENTER_KEY_CODE,\n    SPACE,\n    SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-narrow\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n    tag: 'limel-select',\n    shadow: true,\n    styleUrl: 'select.scss',\n})\nexport class Select {\n    /**\n     * Set to `true` to make the field disabled.\n     * and visually shows that the `select` component is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the component may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * This visualizes the component slightly differently.\n     * But shows no visual sign indicating that the component 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 of the select is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * True if the control requires a value.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Text to display next to the select.\n     */\n    @Prop({ reflect: true })\n    public label: 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     * Currently selected value or values.\n     * If `multiple` is `true`, this must be an array. Otherwise it must be a\n     * single value.\n     */\n    @Prop()\n    public value: Option | Option[];\n\n    /**\n     * List of options.\n     */\n    @Prop()\n    public options: Option[] = [];\n\n    /**\n     * Set to `true` to allow multiple values to be selected.\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Emitted when the value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Option | Option[]>;\n\n    @Element()\n    private host: HTMLLimelSelectElement;\n\n    @State()\n    private menuOpen: boolean = false;\n\n    private hasChanged: boolean = false;\n    private checkValid: boolean = false;\n    private mdcSelectHelperText: MDCSelectHelperText;\n    private mdcFloatingLabel: MDCFloatingLabel;\n    private isMobileDevice: boolean;\n    private portalId: string;\n\n    constructor() {\n        this.handleMenuChange = this.handleMenuChange.bind(this);\n        this.handleNativeChange = this.handleNativeChange.bind(this);\n        this.handleMenuTriggerKeyPress =\n            this.handleMenuTriggerKeyPress.bind(this);\n        this.openMenu = this.openMenu.bind(this);\n        this.closeMenu = this.closeMenu.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.isMobileDevice = isMobileDevice();\n\n        // It should not be possible to render the native select for consumers, but we still want to make it testable.\n        // We can set this attribute in tests to force rendering of the native select\n        if (this.host.hasAttribute('data-native')) {\n            this.isMobileDevice = true;\n        }\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        let element: HTMLElement;\n        element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n        if (!element) {\n            return;\n        }\n\n        this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n        element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n        if (element) {\n            this.mdcSelectHelperText = new MDCSelectHelperText(element);\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcFloatingLabel) {\n            this.mdcFloatingLabel.destroy();\n        }\n\n        if (this.mdcSelectHelperText) {\n            this.mdcSelectHelperText.destroy();\n        }\n    }\n\n    public componentDidUpdate() {\n        if (this.menuOpen) {\n            this.setMenuFocus();\n        }\n    }\n\n    public render() {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index'\n        );\n\n        return (\n            <SelectTemplate\n                id={this.portalId}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                required={this.required}\n                invalid={this.invalid}\n                label={this.label}\n                helperText={this.helperText}\n                value={this.value}\n                options={this.options}\n                onMenuChange={this.handleMenuChange}\n                onNativeChange={this.handleNativeChange}\n                onTriggerPress={this.handleMenuTriggerKeyPress}\n                multiple={this.multiple}\n                isOpen={this.menuOpen}\n                open={this.openMenu}\n                close={this.closeMenu}\n                checkValid={this.checkValid}\n                native={this.isMobileDevice}\n                dropdownZIndex={dropdownZIndex}\n            />\n        );\n    }\n\n    @Watch('menuOpen')\n    protected watchOpen(newValue: boolean, oldValue: boolean) {\n        if (this.checkValid) {\n            return;\n        }\n\n        // Menu was closed for the first time\n        if (!newValue && oldValue) {\n            this.checkValid = true;\n        }\n    }\n\n    private setMenuFocus() {\n        if (this.isMobileDevice) {\n            return;\n        }\n\n        setTimeout(() => {\n            const list: HTMLElement = document.querySelector(\n                `#${this.portalId} limel-menu-surface limel-list`\n            );\n            const firstItem: HTMLElement =\n                list?.shadowRoot?.querySelector('[tabindex]');\n\n            if (firstItem) {\n                firstItem.focus();\n            }\n        });\n    }\n\n    private setTriggerFocus() {\n        const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n            '.limel-select-trigger'\n        );\n        trigger.focus();\n    }\n\n    private handleMenuChange(\n        event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>\n    ) {\n        event.stopPropagation();\n\n        if (isMultiple(event.detail)) {\n            const listItems: ListItem[] = event.detail;\n            const options: Option[] = listItems.map((item) => item.value);\n            this.change.emit(options);\n\n            return;\n        }\n\n        if (!event.detail.selected) {\n            return;\n        }\n\n        const listItem: ListItem = event.detail;\n        const option: Option = listItem.value;\n        if (option.disabled) {\n            return;\n        }\n\n        this.change.emit(option);\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private openMenu() {\n        if (this.emitFirstChangeEvent()) {\n            this.hasChanged = true;\n            this.change.emit(this.options[0]);\n        }\n\n        this.menuOpen = true;\n    }\n\n    private emitFirstChangeEvent() {\n        return !this.hasChanged && this.isMobileDevice && !this.value;\n    }\n\n    private closeMenu() {\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n        const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n        const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n        if (!this.menuOpen && (isSpace || isEnter)) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.menuOpen = true;\n        }\n    }\n\n    private handleNativeChange(event: Event) {\n        event.stopPropagation();\n\n        const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n            'select.limel-select__native-control'\n        );\n        const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n            .filter((optionElement: HTMLOptionElement) => {\n                return !!optionElement.selected;\n            })\n            .map((optionElement: HTMLOptionElement) => {\n                return this.options.find(\n                    (o) => o.value === optionElement.value\n                );\n            });\n\n        if (this.multiple) {\n            this.change.emit(options);\n\n            return;\n        }\n\n        this.change.emit(options[0]);\n        this.menuOpen = false;\n    }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EACH,KAAK,EACL,cAAc,EACd,KAAK,EACL,cAAc,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5E;;;;;;;;;GASG;AAMH,MAAM,OAAO,MAAM;EAmFf;IAPQ,eAAU,GAAY,KAAK,CAAC;IAC5B,eAAU,GAAY,KAAK,CAAC;oBArElB,KAAK;oBASL,KAAK;;oBAaL,KAAK;;;;mBA0BI,EAAE;oBAMF,KAAK;oBAYJ,KAAK;IAU7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,IAAI,CAAC,yBAAyB;MAC1B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,cAAc,GAAG,cAAc,EAAE,CAAC;IAEvC,8GAA8G;IAC9G,6EAA6E;IAC7E,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;MACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;EACL,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAC1C,CAAC;EAEO,UAAU;IACd,IAAI,OAAoB,CAAC;IACzB,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACpE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAEtD,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;IACxE,IAAI,OAAO,EAAE;MACT,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC,OAAO,CAAC,CAAC;KAC/D;EACL,CAAC;EAEM,oBAAoB;IACvB,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACvB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,mBAAmB,EAAE;MAC1B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;KACtC;EACL,CAAC;EAEM,kBAAkB;IACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;EACL,CAAC;EAEM,MAAM;IACT,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC/D,oBAAoB,CACvB,CAAC;IAEF,OAAO,CACH,EAAC,cAAc,IACX,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,cAAc,EAAE,IAAI,CAAC,kBAAkB,EACvC,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,cAAc,EAAE,cAAc,GAChC,CACL,CAAC;EACN,CAAC;EAGS,SAAS,CAAC,QAAiB,EAAE,QAAiB;IACpD,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,OAAO;KACV;IAED,qCAAqC;IACrC,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;MACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;EACL,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,OAAO;KACV;IAED,UAAU,CAAC,GAAG,EAAE;;MACZ,MAAM,IAAI,GAAgB,QAAQ,CAAC,aAAa,CAC5C,IAAI,IAAI,CAAC,QAAQ,gCAAgC,CACpD,CAAC;MACF,MAAM,SAAS,GACX,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;MAElD,IAAI,SAAS,EAAE;QACX,SAAS,CAAC,KAAK,EAAE,CAAC;OACrB;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe;IACnB,MAAM,OAAO,GAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC3D,uBAAuB,CAC1B,CAAC;IACF,OAAO,CAAC,KAAK,EAAE,CAAC;EACpB,CAAC;EAEO,gBAAgB,CACpB,KAA8D;IAE9D,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;MAC1B,MAAM,SAAS,GAAe,KAAK,CAAC,MAAM,CAAC;MAC3C,MAAM,OAAO,GAAa,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAE1B,OAAO;KACV;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;MACxB,OAAO;KACV;IAED,MAAM,QAAQ,GAAa,KAAK,CAAC,MAAM,CAAC;IACxC,MAAM,MAAM,GAAW,QAAQ,CAAC,KAAK,CAAC;IACtC,IAAI,MAAM,CAAC,QAAQ,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACzB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEO,QAAQ;IACZ,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;MAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;KACrC;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;EACzB,CAAC;EAEO,oBAAoB;IACxB,OAAO,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;EAClE,CAAC;EAEO,SAAS;IACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEO,yBAAyB,CAAC,KAAoB;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,cAAc,CAAC;IACxE,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,cAAc,CAAC;IAExE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACxB;EACL,CAAC;EAEO,kBAAkB,CAAC,KAAY;IACnC,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,MAAM,OAAO,GAAsB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CACjE,qCAAqC,CACxC,CAAC;IACF,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,oCAAoC;OAClF,MAAM,CAAC,CAAC,aAAgC,EAAE,EAAE;MACzC,OAAO,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC;IACpC,CAAC,CAAC;OACD,GAAG,CAAC,CAAC,aAAgC,EAAE,EAAE;MACtC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CACpB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,CACzC,CAAC;IACN,CAAC,CAAC,CAAC;IAEP,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAE1B,OAAO;KACV;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { ListItem, Option } from '../../interface';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n    ENTER,\n    ENTER_KEY_CODE,\n    SPACE,\n    SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate, triggerIconColorWarning } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-narrow\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n    tag: 'limel-select',\n    shadow: true,\n    styleUrl: 'select.scss',\n})\nexport class Select {\n    /**\n     * Set to `true` to make the field disabled.\n     * and visually shows that the `select` component is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the component may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * This visualizes the component slightly differently.\n     * But shows no visual sign indicating that the component 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 of the select is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * True if the control requires a value.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Text to display next to the select.\n     */\n    @Prop({ reflect: true })\n    public label: 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     * Currently selected value or values.\n     * If `multiple` is `true`, this must be an array. Otherwise it must be a\n     * single value.\n     */\n    @Prop()\n    public value: Option | Option[];\n\n    /**\n     * List of options.\n     */\n    @Prop()\n    public options: Option[] = [];\n\n    /**\n     * Set to `true` to allow multiple values to be selected.\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Emitted when the value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Option | Option[]>;\n\n    @Element()\n    private host: HTMLLimelSelectElement;\n\n    @State()\n    private menuOpen: boolean = false;\n\n    private hasChanged: boolean = false;\n    private checkValid: boolean = false;\n    private mdcSelectHelperText: MDCSelectHelperText;\n    private mdcFloatingLabel: MDCFloatingLabel;\n    private isMobileDevice: boolean;\n    private portalId: string;\n\n    constructor() {\n        this.handleMenuChange = this.handleMenuChange.bind(this);\n        this.handleNativeChange = this.handleNativeChange.bind(this);\n        this.handleMenuTriggerKeyPress =\n            this.handleMenuTriggerKeyPress.bind(this);\n        this.openMenu = this.openMenu.bind(this);\n        this.closeMenu = this.closeMenu.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.isMobileDevice = isMobileDevice();\n\n        // It should not be possible to render the native select for consumers, but we still want to make it testable.\n        // We can set this attribute in tests to force rendering of the native select\n        if (this.host.hasAttribute('data-native')) {\n            this.isMobileDevice = true;\n        }\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n        triggerIconColorWarning(this.options);\n    }\n\n    private initialize() {\n        let element: HTMLElement;\n        element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n        if (!element) {\n            return;\n        }\n\n        this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n        element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n        if (element) {\n            this.mdcSelectHelperText = new MDCSelectHelperText(element);\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcFloatingLabel) {\n            this.mdcFloatingLabel.destroy();\n        }\n\n        if (this.mdcSelectHelperText) {\n            this.mdcSelectHelperText.destroy();\n        }\n    }\n\n    public componentDidUpdate() {\n        if (this.menuOpen) {\n            this.setMenuFocus();\n        }\n    }\n\n    public render() {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index'\n        );\n\n        return (\n            <SelectTemplate\n                id={this.portalId}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                required={this.required}\n                invalid={this.invalid}\n                label={this.label}\n                helperText={this.helperText}\n                value={this.value}\n                options={this.options}\n                onMenuChange={this.handleMenuChange}\n                onNativeChange={this.handleNativeChange}\n                onTriggerPress={this.handleMenuTriggerKeyPress}\n                multiple={this.multiple}\n                isOpen={this.menuOpen}\n                open={this.openMenu}\n                close={this.closeMenu}\n                checkValid={this.checkValid}\n                native={this.isMobileDevice}\n                dropdownZIndex={dropdownZIndex}\n            />\n        );\n    }\n\n    @Watch('menuOpen')\n    protected watchOpen(newValue: boolean, oldValue: boolean) {\n        if (this.checkValid) {\n            return;\n        }\n\n        // Menu was closed for the first time\n        if (!newValue && oldValue) {\n            this.checkValid = true;\n        }\n    }\n\n    private setMenuFocus() {\n        if (this.isMobileDevice) {\n            return;\n        }\n\n        setTimeout(() => {\n            const list: HTMLElement = document.querySelector(\n                `#${this.portalId} limel-menu-surface limel-list`\n            );\n            const firstItem: HTMLElement =\n                list?.shadowRoot?.querySelector('[tabindex]');\n\n            if (firstItem) {\n                firstItem.focus();\n            }\n        });\n    }\n\n    private setTriggerFocus() {\n        const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n            '.limel-select-trigger'\n        );\n        trigger.focus();\n    }\n\n    private handleMenuChange(\n        event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>\n    ) {\n        event.stopPropagation();\n\n        if (isMultiple(event.detail)) {\n            const listItems: ListItem[] = event.detail;\n            const options: Option[] = listItems.map((item) => item.value);\n            this.change.emit(options);\n\n            return;\n        }\n\n        if (!event.detail.selected) {\n            return;\n        }\n\n        const listItem: ListItem = event.detail;\n        const option: Option = listItem.value;\n        if (option.disabled) {\n            return;\n        }\n\n        this.change.emit(option);\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private openMenu() {\n        if (this.emitFirstChangeEvent()) {\n            this.hasChanged = true;\n            this.change.emit(this.options[0]);\n        }\n\n        this.menuOpen = true;\n    }\n\n    private emitFirstChangeEvent() {\n        return !this.hasChanged && this.isMobileDevice && !this.value;\n    }\n\n    private closeMenu() {\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n        const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n        const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n        if (!this.menuOpen && (isSpace || isEnter)) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.menuOpen = true;\n        }\n    }\n\n    private handleNativeChange(event: Event) {\n        event.stopPropagation();\n\n        const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n            'select.limel-select__native-control'\n        );\n        const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n            .filter((optionElement: HTMLOptionElement) => {\n                return !!optionElement.selected;\n            })\n            .map((optionElement: HTMLOptionElement) => {\n                return this.options.find(\n                    (o) => o.value === optionElement.value\n                );\n            });\n\n        if (this.multiple) {\n            this.change.emit(options);\n\n            return;\n        }\n\n        this.change.emit(options[0]);\n        this.menuOpen = false;\n    }\n}\n"]}

package/dist/collection/components/select/select.template.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { isMultiple } from '../../util/multiple';
+import { getIconColor, getIconName } from '../icon/get-icon-props';
 export const SelectTemplate = (props) => {
   const value = props.value;
   let hasValue = !!props.value;
@@ -91,13 +92,17 @@ function createMenuItems(options, value, selectIsRequired = false) {
   return options.filter(menuOptionFilter).map((option) => {
     const selected = isSelected(option, value);
     const { text, disabled } = option;
+    const name = getIconName(option.icon);
+    const color = getIconColor(option.icon, option.iconColor);
     return {
       text: text,
       selected: selected,
       disabled: disabled,
       value: option,
-      icon: option.icon,
-      iconColor: option.iconColor,
+      icon: {
+        name: name,
+        color: color,
+      },
     };
   });
 }
@@ -133,10 +138,20 @@ function getSelectedIcon(value) {
   if (!value || !value.icon) {
     return '';
   }
+  const name = getIconName(value.icon);
+  const color = getIconColor(value.icon, value.iconColor);
   const style = {};
-  if (value.iconColor) {
-    style.color = value.iconColor;
+  if (color) {
+    style.color = color;
   }
-  return (h("limel-icon", { class: "limel-select__selected-option__icon", name: value.icon, size: "medium", style: style }));
+  return (h("limel-icon", { class: "limel-select__selected-option__icon", name: name, size: "medium", style: style }));
+}
+export function triggerIconColorWarning(options) {
+  options.forEach((option) => {
+    if (option.iconColor) {
+      /* eslint-disable-next-line no-console */
+      console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
+    }
+  });
 }
 //# sourceMappingURL=select.template.js.map