@limetech/lime-elements 37.2.6 → 37.2.8

package/dist/lime-elements/p-f613f943.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as e}from"./p-3075aa67.js";import{A as h}from"./p-97107e34.js";import{i as n}from"./p-5e7b7b03.js";import{T as r,E as o,c as a,d as l,e as c,f as d,A as u,g as f,h as p,i as m}from"./p-93c6d561.js";import{c as y}from"./p-3ccdc4a3.js";import{g,c as b}from"./p-4d92b6fb.js";const w=":host{position:relative;display:block}:host([hidden]){display:none}";const v=500;const D="limel-chip-set";const C=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.getValueId=t=>{const i=t.value;if(!!i&&typeof i==="object"){return i.id}return i};this.createChips=t=>{if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]};this.createChip=t=>{const i=g(t.icon);const s=b(t.icon,t.iconColor);const e=this.getValueId(t);return{id:`${e}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t}};this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.createDebouncedSearcher=this.createDebouncedSearcher.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=y()}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.createDebouncedSearcher(this.searcher);this.chipSet=this.host.shadowRoot.querySelector(D)}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}createDebouncedSearcher(t){if(typeof t!=="function"){return}this.debouncedSearch=h(t,v)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!this.items||!this.items.length){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[r,o,a].includes(t.key);const s=[l,c,d].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.loading=true;const s=i===""?this.searcher:this.debouncedSearch;const e=await s(i);this.handleSearchResult(i,e)}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}async handleInputFieldFocus(){this.loading=true;const t=this.textValue;const i=await this.searcher(t);this.handleSearchResult(t,i)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>{const s=this.getValueId(i);return`${s}`===t.id}))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===r||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===u||t.keyCode===f;const e=t.key===p||t.keyCode===m;if(!i&&!s&&!e){return}const h=document.querySelector(` #${this.portalId} limel-list`);if(!h){return}t.preventDefault();if(i||e){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===o||t.keyCode===c;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[])}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"],searcher:["createDebouncedSearcher"]}}};C.style=w;export{C as limel_picker};
+//# sourceMappingURL=p-f613f943.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pickerCss","SEARCH_DEBOUNCE","CHIP_SET_TAG_NAME","Picker","constructor","hostRef","this","chipSetEditMode","getValueId","item","value","id","createChips","multiple","listItems","map","createChip","listItem","name","getIconName","icon","color","getIconFillColor","iconColor","valueId","text","removable","undefined","handleTextInput","bind","handleInputKeyDown","handleDropdownKeyDown","handleInputFieldFocus","handleChange","handleInteract","handleListChange","handleActionListChange","handleStopEditAndBlur","createDebouncedSearcher","handleCloseMenu","onListKeyDown","portalId","createRandomString","componentWillLoad","chips","componentDidLoad","searcher","chipSet","host","shadowRoot","querySelector","async","getEditMode","render","props","maxItems","h","Object","assign","type","inputType","label","helperText","leadingIcon","disabled","invalid","delimiter","renderDelimiter","readonly","required","searchLabel","onInput","onKeyDown","onChange","onInteract","onStartEdit","onStopEdit","emptyInputOnBlur","clearAllButton","renderDropdown","onChangeValue","newValue","debouncedSearch","AwesomeDebouncePromise","dropDownContent","getDropdownContent","content","shouldShowDropDownContent","actionContent","getActionContent","actionPosition","push","renderPortal","actionCount","_b","_a","actions","length","class","actionScrollBehavior","badgeIcons","items","removeUnusedPropertiesOnAction","action","isFull","loading","renderSpinner","renderEmptyMessage","renderListResult","style","width","display","padding","limeBranded","emptyResultMessage","margin","event","keyFound","TAB","ESCAPE","ENTER","includes","key","keyCodeFound","TAB_KEY_CODE","ESCAPE_KEY_CODE","ENTER_KEY_CODE","keyCode","setFocus","dropdownZIndex","getComputedStyle","getPropertyValue","visible","containerId","inheritParentWidth","containerStyle","open","allowClicksElement","onDismiss","element","activeElement","document","portalElement","isDescendant","clearInputField","stopPropagation","query","detail","textValue","searchFn","result","handleSearchResult","change","emit","chip","find","interact","isForwardTab","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","preventDefault","listElement","focus","isEscape","values","filter","emptyInput"],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n  * @prop --dropdown-z-index: z-index of the dropdown menu.\n  */\n\n:host {\n    position: relative;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n","import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\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-value-as-object\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. Where the value can be an object.\n     */\n    @Prop()\n    public value:\n        | ListItem<\n              number | string | { id: string | number; [key: string]: any }\n          >\n        | Array<\n              ListItem<\n                  number | string | { id: string | number; [key: string]: any }\n              >\n          >;\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 getValueId = (item: ListItem) => {\n        const value = item.value;\n        if (!!value && typeof value === 'object') {\n            return value.id;\n        }\n\n        return value;\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        const valueId = this.getValueId(listItem);\n\n        return {\n            id: `${valueId}`,\n            text: listItem.text,\n            removable: true,\n            icon: name ? { name: name, color: color } : undefined,\n            value: listItem,\n        };\n    };\n\n    /**\n     * Renders the dropdown with the items to pick from, or a spinner if the picker\n     * is waiting for items to be received\n     *\n     * @returns picker dropdown\n     */\n    private renderDropdown() {\n        const dropDownContent = this.getDropdownContent();\n\n        const content = [];\n\n        if (this.shouldShowDropDownContent()) {\n            const actionContent = this.getActionContent();\n            if (this.actionPosition === 'top') {\n                content.push(actionContent);\n            }\n\n            if (dropDownContent) {\n                content.push(dropDownContent);\n            }\n\n            if (this.actionPosition === 'bottom') {\n                content.push(actionContent);\n            }\n        }\n\n        return this.renderPortal(content);\n    }\n\n    private getActionContent() {\n        const actionCount = this.actions?.length ?? 0;\n        if (actionCount === 0) {\n            return null;\n        }\n\n        return [\n            <limel-list\n                class={{\n                    'static-actions-list': true,\n                    'is-on-top': this.actionPosition === 'top',\n                    'is-at-bottom': this.actionPosition === 'bottom',\n                    'has-position-sticky':\n                        this.actionScrollBehavior === 'sticky',\n                }}\n                badgeIcons={true}\n                type={'selectable'}\n                onChange={this.handleActionListChange}\n                items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n            />,\n        ];\n    }\n\n    private removeUnusedPropertiesOnAction(\n        action: ListItem<Action>,\n    ): ListItem<Action> {\n        return {\n            ...action,\n            actions: [],\n        };\n    }\n\n    private shouldShowDropDownContent() {\n        if (this.isFull()) {\n            return false;\n        }\n\n        return !!this.chipSetEditMode;\n    }\n\n    private getDropdownContent() {\n        if (!this.shouldShowDropDownContent()) {\n            return;\n        }\n\n        if (this.loading) {\n            return this.renderSpinner();\n        }\n\n        if (!this.items || !this.items.length) {\n            return this.renderEmptyMessage();\n        }\n\n        return this.renderListResult();\n    }\n\n    /**\n     * Returns true if the picker is \"full\"\n     * The picker is considered to be full if it has a value and only one is allowed\n     *\n     * @returns true if the picker is full\n     */\n    private isFull(): boolean {\n        return !this.multiple && !!this.value;\n    }\n\n    private renderSpinner() {\n        return (\n            <div\n                style={{\n                    width: '100%',\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '1rem 0',\n                }}\n            >\n                <limel-spinner limeBranded={false} />\n            </div>\n        );\n    }\n\n    private renderEmptyMessage() {\n        if (!this.emptyResultMessage) {\n            return;\n        }\n\n        const style = {\n            color: 'rgb(var(--contrast-1100))',\n            'text-align': 'center',\n            margin: '0.5rem 1rem',\n        };\n\n        return <p style={style}>{this.emptyResultMessage}</p>;\n    }\n\n    private renderListResult() {\n        return (\n            <limel-list\n                badgeIcons={this.badgeIcons}\n                onChange={this.handleListChange}\n                onKeyDown={this.onListKeyDown}\n                type=\"selectable\"\n                items={this.items}\n            />\n        );\n    }\n\n    private onListKeyDown(event: KeyboardEvent) {\n        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n        const keyCodeFound = [\n            TAB_KEY_CODE,\n            ESCAPE_KEY_CODE,\n            ENTER_KEY_CODE,\n        ].includes(event.keyCode);\n        if (keyFound || keyCodeFound) {\n            this.chipSet.setFocus();\n        }\n    }\n\n    private renderPortal(content: any[] = []) {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <limel-portal\n                visible={content.length > 0}\n                containerId={this.portalId}\n                inheritParentWidth={true}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-menu-surface\n                    open={content.length > 0}\n                    allowClicksElement={this.host}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {content}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    }\n\n    /**\n     * Check if a descendant still has focus. If not, reset text value and search result.\n     */\n    private handleStopEditAndBlur() {\n        // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n        // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n        const element =\n            this.host.shadowRoot.activeElement || document.activeElement;\n        const portalElement = document.querySelector(`#${this.portalId}`);\n        if (\n            isDescendant(element as HTMLElement, this.host) ||\n            isDescendant(element as HTMLElement, portalElement as HTMLElement)\n        ) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    /**\n     * Input handler for the input field\n     *\n     * @param event - event\n     */\n    private async handleTextInput(event) {\n        event.stopPropagation();\n\n        const query = event.detail;\n        this.textValue = query;\n        this.loading = true;\n\n        // If the search-query is an empty string, bypass debouncing.\n        const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n        const result = await searchFn(query);\n        this.handleSearchResult(query, result);\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleListChange(event: LimelListCustomEvent<ListItem>) {\n        event.stopPropagation();\n        if (!this.value || this.value !== event.detail) {\n            let newValue: ListItem | ListItem[] = event.detail;\n            if (this.multiple) {\n                newValue = [...(this.value as ListItem[]), event.detail];\n            }\n\n            this.change.emit(newValue);\n            this.items = [];\n        }\n\n        if (this.multiple) {\n            this.chipSet?.setFocus(true);\n        }\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleActionListChange(\n        event: LimelListCustomEvent<ListItem<Action>>,\n    ) {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.action.emit(event.detail.value);\n        this.items = [];\n    }\n\n    /**\n     * Focus handler for the chip set\n     * Prevent focus if the picker has a value and does not support multiple values\n     */\n    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                    const valueId = this.getValueId(item);\n\n                    return `${valueId}` === chip.id;\n                });\n            });\n        }\n\n        this.change.emit(newValue);\n    }\n\n    private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n        event.stopPropagation();\n        this.interact.emit(event.detail ? event.detail.value : event.detail);\n    }\n\n    /**\n     * Key handler for the input field\n     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n     *\n     * @param event - event\n     */\n    private handleInputKeyDown(event: KeyboardEvent) {\n        const isForwardTab =\n            (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n            !event.altKey &&\n            !event.metaKey &&\n            !event.shiftKey;\n        const isUp =\n            event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n        const isDown =\n            event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (isForwardTab || isDown) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:first-child',\n            );\n            listElement.focus();\n\n            return;\n        }\n\n        if (isUp) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:last-child',\n            );\n            listElement.focus();\n        }\n    }\n\n    /**\n     * Key handler for the dropdown\n     *\n     * @param event - event\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"],"mappings":"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"}

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

@@ -1,15 +1,24 @@
+import { Config } from '../../global/config';
 /**
+ * Component used to set global configuration for Lime Elements.
+ *
+ * :::warning
+ * **Building something for Lime CRM?** Then you should _NOT_ use this component.
+ * Lime CRM already uses this component to set the global configuration for
+ * Lime Elements. No matter what problem you are facing at the moment, using
+ * this component will not help, and might cause other problems.
+ * :::
+ *
+ * Building your own software, which is using Lime Elements?
+ * Then you _might_ need to use this component.
+ *
  * @private
  */
-export declare class Config {
+export declare class ConfigComponent {
   /**
-   * Global configuration for Lime Elements
+   * Global configuration for Lime Elements.
    */
-  config: {
-    iconPath?: string;
-    defaultLocale?: string;
-    featureSwitches: any;
-  };
+  config: Config;
   componentDidLoad(): void;
   componentDidUpdate(): void;
   private setGlobalConfig;

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

@@ -6,6 +6,7 @@ import { Searcher } from '../picker/searcher.types';
  * @exampleComponent limel-example-picker-single
  * @exampleComponent limel-example-picker-multiple
  * @exampleComponent limel-example-picker-icons
+ * @exampleComponent limel-example-picker-value-as-object
  * @exampleComponent limel-example-picker-empty-suggestions
  * @exampleComponent limel-example-picker-leading-icon
  * @exampleComponent limel-example-picker-static-actions
@@ -51,9 +52,15 @@ export declare class Picker {
    */
   invalid: boolean;
   /**
-   * Currently selected value or values
+   * Currently selected value or values. Where the value can be an object.
    */
-  value: ListItem<number | string> | Array<ListItem<number | string>>;
+  value: ListItem<number | string | {
+    id: string | number;
+    [key: string]: any;
+  }> | Array<ListItem<number | string | {
+    id: string | number;
+    [key: string]: any;
+  }>>;
   /**
    * A search function that takes a search-string as an argument,
    * and returns a promise that will eventually be resolved with
@@ -121,6 +128,7 @@ export declare class Picker {
   protected onChangeValue(): void;
   protected createDebouncedSearcher(newValue: Searcher): void;
   private renderDelimiter;
+  private getValueId;
   private createChips;
   private createChip;
   /**

package/dist/types/components.d.ts

@@ -17,6 +17,7 @@ import { Chip } from "./components/chip-set/chip.types";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
+import { Config } from "./global/config";
 import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
 import { DockItem } from "./components/dock/dock.types";
 import { FileInfo } from "./components/file/file.types";
@@ -49,6 +50,7 @@ export { Chip } from "./components/chip-set/chip.types";
 export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 export { Action } from "./components/collapsible-section/action";
+export { Config } from "./global/config";
 export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
 export { DockItem } from "./components/dock/dock.types";
 export { FileInfo } from "./components/file/file.types";
@@ -711,17 +713,22 @@ export namespace Components {
         "value": string;
     }
     /**
+     * Component used to set global configuration for Lime Elements.
+     * :::warning
+     * **Building something for Lime CRM?** Then you should _NOT_ use this component.
+     * Lime CRM already uses this component to set the global configuration for
+     * Lime Elements. No matter what problem you are facing at the moment, using
+     * this component will not help, and might cause other problems.
+     * :::
+     * Building your own software, which is using Lime Elements?
+     * Then you _might_ need to use this component.
      * @private 
      */
     interface LimelConfig {
         /**
-          * Global configuration for Lime Elements
+          * Global configuration for Lime Elements.
          */
-        "config": {
-        iconPath?: string;
-        defaultLocale?: string;
-        featureSwitches: any;
-    };
+        "config": Config;
     }
     /**
      * @exampleComponent limel-example-date-picker-datetime
@@ -1670,6 +1677,7 @@ export namespace Components {
      * @exampleComponent limel-example-picker-single
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-value-as-object
      * @exampleComponent limel-example-picker-empty-suggestions
      * @exampleComponent limel-example-picker-leading-icon
      * @exampleComponent limel-example-picker-static-actions
@@ -1741,9 +1749,16 @@ export namespace Components {
          */
         "searcher": Searcher;
         /**
-          * Currently selected value or values
+          * Currently selected value or values. Where the value can be an object.
          */
-        "value": ListItem<number | string> | Array<ListItem<number | string>>;
+        "value": | ListItem<
+              number | string | { id: string | number; [key: string]: any }
+          >
+        | Array<
+              ListItem<
+                  number | string | { id: string | number; [key: string]: any }
+              >
+          >;
     }
     /**
      * A popover is an impermanent layer that is displayed on top of other content
@@ -2869,6 +2884,15 @@ declare global {
         new (): HTMLLimelColorPickerPaletteElement;
     };
     /**
+     * Component used to set global configuration for Lime Elements.
+     * :::warning
+     * **Building something for Lime CRM?** Then you should _NOT_ use this component.
+     * Lime CRM already uses this component to set the global configuration for
+     * Lime Elements. No matter what problem you are facing at the moment, using
+     * this component will not help, and might cause other problems.
+     * :::
+     * Building your own software, which is using Lime Elements?
+     * Then you _might_ need to use this component.
      * @private 
      */
     interface HTMLLimelConfigElement extends Components.LimelConfig, HTMLStencilElement {
@@ -3362,6 +3386,7 @@ declare global {
      * @exampleComponent limel-example-picker-single
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-value-as-object
      * @exampleComponent limel-example-picker-empty-suggestions
      * @exampleComponent limel-example-picker-leading-icon
      * @exampleComponent limel-example-picker-static-actions
@@ -4482,17 +4507,22 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
+     * Component used to set global configuration for Lime Elements.
+     * :::warning
+     * **Building something for Lime CRM?** Then you should _NOT_ use this component.
+     * Lime CRM already uses this component to set the global configuration for
+     * Lime Elements. No matter what problem you are facing at the moment, using
+     * this component will not help, and might cause other problems.
+     * :::
+     * Building your own software, which is using Lime Elements?
+     * Then you _might_ need to use this component.
      * @private 
      */
     interface LimelConfig {
         /**
-          * Global configuration for Lime Elements
+          * Global configuration for Lime Elements.
          */
-        "config"?: {
-        iconPath?: string;
-        defaultLocale?: string;
-        featureSwitches: any;
-    };
+        "config"?: Config;
     }
     /**
      * @exampleComponent limel-example-date-picker-datetime
@@ -5533,6 +5563,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-picker-single
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-value-as-object
      * @exampleComponent limel-example-picker-empty-suggestions
      * @exampleComponent limel-example-picker-leading-icon
      * @exampleComponent limel-example-picker-static-actions
@@ -5616,9 +5647,16 @@ declare namespace LocalJSX {
          */
         "searcher"?: Searcher;
         /**
-          * Currently selected value or values
+          * Currently selected value or values. Where the value can be an object.
          */
-        "value"?: ListItem<number | string> | Array<ListItem<number | string>>;
+        "value"?: | ListItem<
+              number | string | { id: string | number; [key: string]: any }
+          >
+        | Array<
+              ListItem<
+                  number | string | { id: string | number; [key: string]: any }
+              >
+          >;
     }
     /**
      * A popover is an impermanent layer that is displayed on top of other content
@@ -6644,6 +6682,15 @@ declare module "@stencil/core" {
              */
             "limel-color-picker-palette": LocalJSX.LimelColorPickerPalette & JSXBase.HTMLAttributes<HTMLLimelColorPickerPaletteElement>;
             /**
+             * Component used to set global configuration for Lime Elements.
+             * :::warning
+             * **Building something for Lime CRM?** Then you should _NOT_ use this component.
+             * Lime CRM already uses this component to set the global configuration for
+             * Lime Elements. No matter what problem you are facing at the moment, using
+             * this component will not help, and might cause other problems.
+             * :::
+             * Building your own software, which is using Lime Elements?
+             * Then you _might_ need to use this component.
              * @private 
              */
             "limel-config": LocalJSX.LimelConfig & JSXBase.HTMLAttributes<HTMLLimelConfigElement>;
@@ -7012,6 +7059,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-picker-single
              * @exampleComponent limel-example-picker-multiple
              * @exampleComponent limel-example-picker-icons
+             * @exampleComponent limel-example-picker-value-as-object
              * @exampleComponent limel-example-picker-empty-suggestions
              * @exampleComponent limel-example-picker-leading-icon
              * @exampleComponent limel-example-picker-static-actions

package/dist/types/global/config.d.ts

@@ -1,7 +1,27 @@
-export declare class Config {
+/**
+ * Configuration options for limel-config.
+ *
+ * @public
+ */
+export type Config = {
+  /**
+   * The path to where the icon library used by limel-icon is located.
+   */
+  iconPath?: string;
+  /**
+   * The default locale to use for components that support localization.
+   */
+  defaultLocale?: string;
+  /**
+   * @internal
+   */
+  featureSwitches?: Record<string, boolean>;
+};
+declare class ConfigClass implements Config {
   iconPath: string;
   defaultLocale: string;
   featureSwitches: any;
 }
-export declare const globalConfig: Config;
+export declare const globalConfig: ConfigClass;
+export {};
 //# sourceMappingURL=config.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.2.6",
+  "version": "37.2.8",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.1",
     "@microsoft/api-extractor": "^7.40.1",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
@@ -57,8 +57,8 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
@@ -69,7 +69,7 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-sonarjs": "^0.24.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",

package/dist/cjs/config-cb774b61.js.map

@@ -1 +0,0 @@
-{"file":"config-cb774b61.js","mappings":";;MAAa,MAAM;EAAnB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IACnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;GAClE;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;MACf,YAAY,GAAG,CAAC;EACzB,OAAO,MAAM,CAAC;AAClB,CAAC;;;;","names":[],"sources":["./src/global/config.ts"],"sourcesContent":["export class Config {\n    public iconPath = '';\n    public defaultLocale = navigator.language;\n    public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n    const features = {};\n    for (let i = 0; i < storage.length; i++) {\n        const key = storage.key(i);\n        const value = storage.getItem(key);\n\n        if (!['true', 'false'].includes(value)) {\n            continue;\n        }\n\n        features[key] = value === 'true';\n    }\n\n    return features;\n}\n\nconst config = new Config();\nexport const globalConfig = (() => {\n    return config;\n})();\n"],"version":3}

package/dist/esm/config-19f3ce37.js.map

@@ -1 +0,0 @@
-{"file":"config-19f3ce37.js","mappings":"MAAa,MAAM;EAAnB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IACnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;GAClE;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;MACf,YAAY,GAAG,CAAC;EACzB,OAAO,MAAM,CAAC;AAClB,CAAC;;;;","names":[],"sources":["./src/global/config.ts"],"sourcesContent":["export class Config {\n    public iconPath = '';\n    public defaultLocale = navigator.language;\n    public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n    const features = {};\n    for (let i = 0; i < storage.length; i++) {\n        const key = storage.key(i);\n        const value = storage.getItem(key);\n\n        if (!['true', 'false'].includes(value)) {\n            continue;\n        }\n\n        features[key] = value === 'true';\n    }\n\n    return features;\n}\n\nconst config = new Config();\nexport const globalConfig = (() => {\n    return config;\n})();\n"],"version":3}

package/dist/lime-elements/p-78193666.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Config","constructor","this","iconPath","defaultLocale","navigator","language","featureSwitches","getFeatureSwitches","localStorage","storage","features","i","length","key","value","getItem","includes","config","globalConfig"],"sources":["./src/global/config.ts"],"sourcesContent":["export class Config {\n    public iconPath = '';\n    public defaultLocale = navigator.language;\n    public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n    const features = {};\n    for (let i = 0; i < storage.length; i++) {\n        const key = storage.key(i);\n        const value = storage.getItem(key);\n\n        if (!['true', 'false'].includes(value)) {\n            continue;\n        }\n\n        features[key] = value === 'true';\n    }\n\n    return features;\n}\n\nconst config = new Config();\nexport const globalConfig = (() => {\n    return config;\n})();\n"],"mappings":"MAAaA,EAAbC,cACWC,KAAAC,SAAW,GACXD,KAAAE,cAAgBC,UAAUC,SAC1BJ,KAAAK,gBAAuBC,EAAmBC,a,EAGrD,SAASD,EAAmBE,GACxB,MAAMC,EAAW,GACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAQG,OAAQD,IAAK,CACrC,MAAME,EAAMJ,EAAQI,IAAIF,GACxB,MAAMG,EAAQL,EAAQM,QAAQF,GAE9B,IAAK,CAAC,OAAQ,SAASG,SAASF,GAAQ,CACpC,Q,CAGJJ,EAASG,GAAOC,IAAU,M,CAG9B,OAAOJ,CACX,CAEA,MAAMO,EAAS,IAAIlB,E,MACNmB,EAAe,KACjBD,EADiB,U"}

package/dist/lime-elements/p-f70a9044.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-3075aa67.js";import{A as h}from"./p-97107e34.js";import{i as n}from"./p-5e7b7b03.js";import{T as r,E as o,c as a,d as l,e as c,f as d,A as u,g as f,h as p,i as m}from"./p-93c6d561.js";import{c as y}from"./p-3ccdc4a3.js";import{g,c as b}from"./p-4d92b6fb.js";const w=":host{position:relative;display:block}:host([hidden]){display:none}";const v=500;const C="limel-chip-set";const D=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.createDebouncedSearcher=this.createDebouncedSearcher.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=y()}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.createDebouncedSearcher(this.searcher);this.chipSet=this.host.shadowRoot.querySelector(C)}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}createDebouncedSearcher(t){if(typeof t!=="function"){return}this.debouncedSearch=h(t,v)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}createChips(t){if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]}createChip(t){const i=g(t.icon);const s=b(t.icon,t.iconColor);return{id:`${t.value}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t}}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!this.items||!this.items.length){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[r,o,a].includes(t.key);const s=[l,c,d].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.loading=true;const s=i===""?this.searcher:this.debouncedSearch;const e=await s(i);this.handleSearchResult(i,e)}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}async handleInputFieldFocus(){this.loading=true;const t=this.textValue;const i=await this.searcher(t);this.handleSearchResult(t,i)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>`${i.value}`===t.id))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===r||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===u||t.keyCode===f;const e=t.key===p||t.keyCode===m;if(!i&&!s&&!e){return}const h=document.querySelector(` #${this.portalId} limel-list`);if(!h){return}t.preventDefault();if(i||e){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===o||t.keyCode===c;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[])}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"],searcher:["createDebouncedSearcher"]}}};D.style=w;export{D as limel_picker};
-//# sourceMappingURL=p-f70a9044.entry.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["Config","componentDidLoad","this","setGlobalConfig","componentDidUpdate","config","Object","keys","forEach","key","globalConfig","render"],"sources":["./src/components/config/config.tsx"],"sourcesContent":["import { Component, Prop } from '@stencil/core';\nimport { globalConfig } from '../../global/config';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-config',\n    shadow: true,\n})\nexport class Config {\n    /**\n     * Global configuration for Lime Elements\n     */\n    @Prop()\n    public config: {\n        iconPath?: string;\n        defaultLocale?: string;\n        featureSwitches: any;\n    };\n\n    public componentDidLoad() {\n        this.setGlobalConfig();\n    }\n\n    public componentDidUpdate() {\n        this.setGlobalConfig();\n    }\n\n    /*\n     * Copy any config settings to the global config object\n     */\n    private setGlobalConfig() {\n        if (!this.config) {\n            return;\n        }\n\n        Object.keys(this.config).forEach((key) => {\n            globalConfig[key] = this.config[key];\n        });\n    }\n\n    public render() {\n        return null;\n    }\n}\n"],"mappings":"8EAUaA,EAAM,M,+CAWRC,mBACHC,KAAKC,iB,CAGFC,qBACHF,KAAKC,iB,CAMDA,kBACJ,IAAKD,KAAKG,OAAQ,CACd,M,CAGJC,OAAOC,KAAKL,KAAKG,QAAQG,SAASC,IAC9BC,EAAaD,GAAOP,KAAKG,OAAOI,EAAI,G,CAIrCE,SACH,OAAO,I"}