@limetech/lime-elements 37.1.0-next.66 → 37.1.0-next.67

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

@@ -0,0 +1 @@
+{"version":3,"names":["now","root","Date","FUNC_ERROR_TEXT","nativeMax","Math","max","nativeMin","min","debounce","func","wait","options","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","TypeError","toNumber","isObject","invokeFunc","time","args","thisArg","undefined","apply","leadingEdge","setTimeout","timerExpired","remainingWait","timeSinceLastCall","timeSinceLastInvoke","timeWaiting","shouldInvoke","trailingEdge","cancel","clearTimeout","flush","debounced","isInvoking","arguments","this","inputFieldCss","InputField","constructor","hostRef","completionsList","initialize","element","limelInputField","shadowRoot","querySelector","mdcTextField","MDCTextField","mapCompletions","window","addEventListener","layout","passive","setFocus","completions","map","item","text","focus","getContainerClassList","classList","label","isInvalid","disabled","readonly","required","value","hasPrefix","hasSuffix","type","helperText","maxlength","leadingIcon","getTrailingIcon","renderInput","properties","h","Object","assign","pattern","onWheel","handleWheel","onKeyDown","placeholder","renderTextarea","class","_a","getAdditionalProps","props","step","Number","isInteger","minlength","onFocus","isFocused","showCompletions","onBlur","isModified","hasHelperText","hasHelperLine","renderHelperLine","length","helperTextId","maxLength","invalid","renderEmptyValueForReadonly","renderSuffix","suffix","renderPrefix","prefix","getInputElement","checkValidity","elementName","renderLabel","labelClassList","id","labelId","renderLeadingIcon","name","renderTrailingLinkOrButton","html","trailingIcon","hasLink","push","renderLinkIcon","getLink","renderTrailingIcon","showLink","includes","href","getHref","target","getTarget","linkProps","icon","tabindex","role","tabIndex","onKeyPress","handleIconKeyPress","onClick","handleIconClick","renderFormattedNumber","renderValue","formatNumber","Intl","NumberFormat","locale","format","event","isForwardTab","key","TAB","keyCode","TAB_KEY_CODE","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","document","portalId","preventDefault","listElement","handleCompletionChange","stopPropagation","detail","changeEmitter","renderAutocompleteList","dropdownZIndex","getComputedStyle","getPropertyValue","visible","containerId","inheritParentWidth","containerStyle","open","allowClicksElement","style","display","onDismiss","handleCloseMenu","renderListResult","filteredCompletions","filterCompletions","onChange","handleKeyDownInDropdown","items","keyFound","ESCAPE","ENTER","keyCodeFound","ESCAPE_KEY_CODE","ENTER_KEY_CODE","filter","completion","toLowerCase","indexOf","handleChange","data","change","emit","action","isEnter","isSpace","SPACE","SPACE_KEY_CODE","config","defaultLocale","debounceTimeout","createRandomString","connectedCallback","componentDidLoad","disconnectedCallback","destroy","removeEventListener","componentDidUpdate","valid","render","onInput","valueWatcher","newValue","completionsWatcher","RadioButtonTemplate","checked","htmlFor","ListRenderer","defaultConfig","isOpen","badgeIcons","getIndexForWhichToApplyTabIndex","i","selected","renderListItem","index","rendertext","renderVariantListItem","classNames","hasPrimaryComponent","attributes","applyTabIndexToItemAtIndex","renderIcon","getPrimaryComponent","renderText","twoLines","avatarList","renderDivider","renderActionMenu","actions","primaryComponent","isSimpleItem","secondaryText","getIconName","color","getIconColor","iconColor","badge","size","iconSize","classes","openDirection","slot","itemTemplate","CheckboxTemplate","renderVariantListItemContent","hasIcons","some","selectableListTypes","selectable","commandKey","PrimaryComponent","listCss","ACTION_EVENT","listStrings","List","listRenderer","setup","setupList","setupListeners","mdcList","teardown","MDCList","hasTypeahead","unlisten","handleAction","multiple","listen","singleSelection","_b","handleSingleSelect","handleMultiSelect","listItems","isListItem","selectedItem","find","selectedItems","listIndex","triggerIconColorWarning","maxLinesSecondaryText","toFixed","Host","handleType","itemsChanged","selectedIndex","findIndex","initializeListType","console","warn","menuSurfaceCss","MenuSurface","menuElement","host","menuSurface","MDCMenuSurface","setAnchorCorner","Corner","TOP_START","handleDocumentClick","capture","handleKeyDown","handleResize","elementPath","composedPath","isDescendant","clickedInAllowedElement","dismiss","preventClickEventPropagation","stopEvent","once","isEscape","isTab"],"sources":["./node_modules/lodash-es/now.js","./node_modules/lodash-es/debounce.js","./src/components/input-field/input-field.scss?tag=limel-input-field&encapsulation=shadow","./src/components/input-field/input-field.tsx","./src/components/list/radio-button/radio-button.template.tsx","./src/components/list/list-renderer.tsx","./src/components/list/list.scss?tag=limel-list&encapsulation=shadow","./src/components/list/list.tsx","./src/components/menu-surface/menu-surface.scss?tag=limel-menu-surface&encapsulation=shadow","./src/components/menu-surface/menu-surface.tsx"],"sourcesContent":["import root from './_root.js';\n\n/**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n *   console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\nvar now = function() {\n  return root.Date.now();\n};\n\nexport default now;\n","import isObject from './isObject.js';\nimport now from './now.js';\nimport toNumber from './toNumber.js';\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMax = Math.max,\n    nativeMin = Math.min;\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n *  Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n *  The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n *  Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n *   'leading': true,\n *   'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n  var lastArgs,\n      lastThis,\n      maxWait,\n      result,\n      timerId,\n      lastCallTime,\n      lastInvokeTime = 0,\n      leading = false,\n      maxing = false,\n      trailing = true;\n\n  if (typeof func != 'function') {\n    throw new TypeError(FUNC_ERROR_TEXT);\n  }\n  wait = toNumber(wait) || 0;\n  if (isObject(options)) {\n    leading = !!options.leading;\n    maxing = 'maxWait' in options;\n    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n    trailing = 'trailing' in options ? !!options.trailing : trailing;\n  }\n\n  function invokeFunc(time) {\n    var args = lastArgs,\n        thisArg = lastThis;\n\n    lastArgs = lastThis = undefined;\n    lastInvokeTime = time;\n    result = func.apply(thisArg, args);\n    return result;\n  }\n\n  function leadingEdge(time) {\n    // Reset any `maxWait` timer.\n    lastInvokeTime = time;\n    // Start the timer for the trailing edge.\n    timerId = setTimeout(timerExpired, wait);\n    // Invoke the leading edge.\n    return leading ? invokeFunc(time) : result;\n  }\n\n  function remainingWait(time) {\n    var timeSinceLastCall = time - lastCallTime,\n        timeSinceLastInvoke = time - lastInvokeTime,\n        timeWaiting = wait - timeSinceLastCall;\n\n    return maxing\n      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)\n      : timeWaiting;\n  }\n\n  function shouldInvoke(time) {\n    var timeSinceLastCall = time - lastCallTime,\n        timeSinceLastInvoke = time - lastInvokeTime;\n\n    // Either this is the first call, activity has stopped and we're at the\n    // trailing edge, the system time has gone backwards and we're treating\n    // it as the trailing edge, or we've hit the `maxWait` limit.\n    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n  }\n\n  function timerExpired() {\n    var time = now();\n    if (shouldInvoke(time)) {\n      return trailingEdge(time);\n    }\n    // Restart the timer.\n    timerId = setTimeout(timerExpired, remainingWait(time));\n  }\n\n  function trailingEdge(time) {\n    timerId = undefined;\n\n    // Only invoke if we have `lastArgs` which means `func` has been\n    // debounced at least once.\n    if (trailing && lastArgs) {\n      return invokeFunc(time);\n    }\n    lastArgs = lastThis = undefined;\n    return result;\n  }\n\n  function cancel() {\n    if (timerId !== undefined) {\n      clearTimeout(timerId);\n    }\n    lastInvokeTime = 0;\n    lastArgs = lastCallTime = lastThis = timerId = undefined;\n  }\n\n  function flush() {\n    return timerId === undefined ? result : trailingEdge(now());\n  }\n\n  function debounced() {\n    var time = now(),\n        isInvoking = shouldInvoke(time);\n\n    lastArgs = arguments;\n    lastThis = this;\n    lastCallTime = time;\n\n    if (isInvoking) {\n      if (timerId === undefined) {\n        return leadingEdge(lastCallTime);\n      }\n      if (maxing) {\n        // Handle invocations in a tight loop.\n        clearTimeout(timerId);\n        timerId = setTimeout(timerExpired, wait);\n        return invokeFunc(lastCallTime);\n      }\n    }\n    if (timerId === undefined) {\n      timerId = setTimeout(timerExpired, wait);\n    }\n    return result;\n  }\n  debounced.cancel = cancel;\n  debounced.flush = flush;\n  return debounced;\n}\n\nexport default debounce;\n","@use '../../style/internal/z-index';\n@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n@use '@material/notched-outline/mdc-notched-outline';\n@use '@material/floating-label';\n@use '@material/floating-label/mdc-floating-label';\n@use '@material/ripple';\n@use '@material/list';\n@use '@material/elevation';\n@use '@material/menu-surface';\n\n/**\n * @prop --textarea-height: Height of the field when type is set to `textarea`\n */\n\n:host {\n    position: relative;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([type='textarea']) {\n    height: var(--textarea-height, 100%);\n\n    .mdc-text-field.mdc-text-field--textarea {\n        height: var(--textarea-height, 100%);\n\n        .mdc-text-field__input {\n            margin-top: functions.pxToRem(8);\n            margin-bottom: 0;\n        }\n    }\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-input-field);\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.outlined-style-overrides;\n@include shared_input-select-picker.readonly-overrides;\n@include shared_input-select-picker.cropped-label-hack;\n@include shared_input-select-picker.disabled-overrides;\n@include shared_input-select-picker.leading-icon;\n@include shared_input-select-picker.trailing-icon;\n@include shared_input-select-picker.floating-label-overrides;\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n.mdc-text-field--with-trailing-icon {\n    .mdc-text-field__icon--trailing {\n        margin-right: functions.pxToRem(8);\n    }\n}\n\n.lime-text-field--empty {\n    .mdc-text-field__icon--trailing {\n        @include shared_input-select-picker.looks-disabled;\n        box-shadow: none !important;\n    }\n}\n\n.mdc-text-field {\n    width: 100%;\n\n    &:not(.mdc-text-field--disabled) {\n        .mdc-text-field__affix,\n        .mdc-text-field__icon {\n            color: rgb(var(--contrast-900));\n        }\n    }\n    &.mdc-text-field--disabled {\n        .mdc-text-field__affix,\n        .mdc-text-field__icon {\n            color: rgb(var(--contrast-700));\n        }\n    }\n}\n\n.lime-formatted-input {\n    display: none;\n    width: calc(100% - #{functions.pxToRem(20)});\n    z-index: z-index.$input-field--formatted-value;\n\n    pointer-events: none;\n\n    :not(.mdc-text-field--focused):not(.mdc-text-field--invalid) & {\n        display: block;\n    }\n\n    + .mdc-text-field__input {\n        z-index: z-index.$input-field--input-with-formatted-value;\n    }\n}\n\n:not(.mdc-text-field--focused):not(.mdc-text-field--invalid) {\n    .mdc-text-field__input[type='number'] {\n        color: transparent;\n        -webkit-text-fill-color: transparent;\n    }\n\n    &.lime-text-field--readonly {\n        .mdc-text-field__input[type='number'] {\n            visibility: hidden;\n            // Not having `visibility: hidden;` makes the unformatted\n            // value selectable; which is not so nice when users\n            // click drag to select content on the screen.\n            // The reason to have it only on `readonly` mode is\n            // 1. This is the use case where it makes most sense\n            // 2. We don't want to repeat the same thing in the\n            // accessibility tree, and make it readable for assistive\n            // technologies.\n            // 3. When not readonly, clicking on the `<input />`\n            // element sets the focus and activates the edit mode.\n            // So we cannot always have it `hidden` on.\n            // which is why we have instead\n            // `color: transparent` a few lines before this.\n        }\n    }\n}\n\n.autocomplete-list-container {\n    position: relative;\n}\n\n.autocomplete-list {\n    background-color: var(--lime-elevated-surface-background-color);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    max-height: functions.pxToRem(200);\n    overflow-y: auto;\n}\n\n.mdc-deprecated-list-item {\n    cursor: pointer;\n}\n\ninput.mdc-text-field__input {\n    @include shared_input-select-picker.input-field-placeholder;\n\n    &::-webkit-search-cancel-button {\n        @include mixins.clear-all-button;\n\n        -webkit-appearance: none;\n\n        position: absolute;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        margin: auto;\n\n        &:active {\n            transform: none; //Makes the \"clear-all button\" work\n        }\n        .mdc-text-field--label-floating & {\n            opacity: 1;\n        }\n    }\n}\n\n@import './partial-styles/trailing-icon.scss';\n@import './partial-styles/readonly';\n","import { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { debounce } from 'lodash-es';\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    SPACE,\n    SPACE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { InputType, ListItem } from '../../interface';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { JSXBase } from '@stencil/core/internal';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelListCustomEvent } from 'src/components';\nimport config from '../../global/config';\n\ninterface LinkProperties {\n    href: string;\n    target?: string;\n}\n\n/**\n * @exampleComponent limel-example-input-field-text\n * @exampleComponent limel-example-input-field-placeholder\n * @exampleComponent limel-example-input-field-text-multiple\n * @exampleComponent limel-example-input-field-number\n * @exampleComponent limel-example-input-field-autocomplete\n * @exampleComponent limel-example-input-field-icon-leading\n * @exampleComponent limel-example-input-field-icon-trailing\n * @exampleComponent limel-example-input-field-icon-both\n * @exampleComponent limel-example-input-field-showlink\n * @exampleComponent limel-example-input-field-error-icon\n * @exampleComponent limel-example-input-field-textarea\n * @exampleComponent limel-example-input-field-suffix\n * @exampleComponent limel-example-input-field-prefix\n * @exampleComponent limel-example-input-field-search\n * @exampleComponent limel-example-input-field-pattern\n * @exampleComponent limel-example-input-field-focus\n */\n@Component({\n    tag: 'limel-input-field',\n    shadow: true,\n    styleUrl: 'input-field.scss',\n})\nexport class InputField {\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field 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({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = 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     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * The placeholder text shown inside the input field, when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: 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     * A short piece of text to display before the value inside the input field.\n     * Displayed for all types except `textarea`.\n     */\n    @Prop({ reflect: true })\n    public prefix: string;\n\n    /**\n     * A short piece of text to display after the value inside the input field.\n     * Displayed for all types except `textarea`.\n     */\n    @Prop({ reflect: true })\n    public suffix: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * The value of the field.\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Trailing icon to show to the far right in the field.\n     */\n    @Prop({ reflect: true })\n    public trailingIcon: string;\n\n    /**\n     * Leading icon to show to the far left in the field.\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string;\n\n    /**\n     * Regular expression that the current value of the input field must match.\n     * No forward slashes should be specified around the pattern.\n     * Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`,\n     * `password`, or `search`.\n     */\n    @Prop({ reflect: true })\n    public pattern: string;\n\n    /**\n     * Type of input.\n     *\n     * Note** regarding type `url`: `limel-input` uses the native validation\n     * built into the browser for many types of input fields. The native\n     * validation for `url` is very strict, and does not allow relative urls,\n     * nor any other formats that are not a \"fully qualified\" url. To allow\n     * such urls, use the type `urlAsText` instead. `urlAsText` works exactly\n     * like `text` in all regards, except that it enables use of the `showLink`\n     * property.\n     */\n    @Prop({ reflect: true })\n    public type: InputType = 'text';\n\n    /**\n     * Set to `true` to format the current value of the input field only\n     * if the field is of type number.\n     * The number format is determined by the current language of the browser.\n     */\n    @Prop({ reflect: true })\n    public formatNumber = true;\n\n    /**\n     * Incremental values that are valid if the field type is `number`.\n     */\n    @Prop({ reflect: true })\n    public step: number | 'any' = 'any';\n\n    /**\n     * Maximum allowed value if input type is `number`.\n     */\n    @Prop({ reflect: true })\n    public max: number;\n\n    /**\n     * Minimum allowed value if input type is `number`.\n     */\n    @Prop({ reflect: true })\n    public min: number;\n\n    /**\n     * Maximum length of the value if type is `password`, `search`, `tel`,\n     * `text`, `url`, or `urlAsText`.\n     */\n    @Prop({ reflect: true })\n    public maxlength: number;\n\n    /**\n     * Minimum length of the value if type is `password`, `search`, `tel`,\n     * `text`, `url`, or `urlAsText`.\n     */\n    @Prop({ reflect: true })\n    public minlength: number;\n\n    /**\n     * list of suggestions `value` can autocomplete to.\n     */\n    @Prop()\n    public completions: string[] = [];\n\n    /**\n     * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to\n     * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,\n     * respectively. The default icon can be overridden using the `trailingIcon`\n     * property.\n     */\n    @Prop({ reflect: true })\n    public showLink = false;\n\n    /**\n     * The locale to use for formatting numbers.\n     */\n    @Prop({ reflect: true })\n    public locale: string = config.defaultLocale;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<string>;\n\n    /**\n     * Emitted when `trailingIcon` or `leadingIcon` is set\n     * and the icon is interacted with.\n     */\n    @Event()\n    private action: EventEmitter<void>;\n\n    @Element()\n    private limelInputField: HTMLLimelInputFieldElement;\n\n    @State()\n    private isFocused: boolean = false;\n\n    @State()\n    private isModified: boolean = false;\n\n    @State()\n    public showCompletions: boolean = false;\n\n    private mdcTextField: MDCTextField;\n    private completionsList: ListItem[] = [];\n    private portalId: string;\n    private helperTextId: string;\n    private labelId: string;\n\n    constructor() {\n        const debounceTimeout = 300;\n        this.changeEmitter = debounce(this.changeEmitter, debounceTimeout);\n\n        this.portalId = createRandomString();\n        this.helperTextId = createRandomString();\n        this.labelId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n\n        window.removeEventListener('resize', this.layout);\n        this.limelInputField.removeEventListener('focus', this.setFocus);\n    }\n\n    public componentDidUpdate() {\n        if (this.invalid) {\n            this.mdcTextField.valid = false;\n        }\n    }\n\n    public render() {\n        const properties = this.getAdditionalProps();\n        properties['aria-labelledby'] = this.labelId;\n        properties.class = 'mdc-text-field__input';\n        properties.onInput = this.handleChange;\n        properties.onFocus = this.onFocus;\n        properties.onBlur = this.onBlur;\n        properties.required = this.required;\n        properties.readonly = this.readonly;\n        properties.disabled = this.disabled || this.readonly;\n\n        if (this.hasHelperText()) {\n            properties['aria-controls'] = this.helperTextId;\n            properties['aria-describedby'] = this.helperTextId;\n        }\n\n        return [\n            <label class={this.getContainerClassList()}>\n                <span class=\"mdc-notched-outline\" tabindex=\"-1\">\n                    <span class=\"mdc-notched-outline__leading\"></span>\n                    {this.renderLabel()}\n                    <span class=\"mdc-notched-outline__trailing\"></span>\n                </span>\n                {this.renderLeadingIcon()}\n                {this.renderEmptyValueForReadonly()}\n                {this.renderPrefix()}\n                {this.renderFormattedNumber()}\n                {this.renderInput(properties)}\n                {this.renderSuffix()}\n                {this.renderTextarea(properties)}\n                {this.renderTrailingLinkOrButton()}\n            </label>,\n            this.renderHelperLine(),\n            this.renderAutocompleteList(),\n        ];\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: string) {\n        if (!this.mdcTextField) {\n            return;\n        }\n\n        if (newValue !== this.mdcTextField.value) {\n            this.mdcTextField.value = newValue || '';\n        }\n    }\n\n    @Watch('completions')\n    protected completionsWatcher() {\n        this.mapCompletions();\n    }\n\n    private initialize = () => {\n        const element =\n            this.limelInputField.shadowRoot.querySelector('.mdc-text-field');\n        if (!element) {\n            return;\n        }\n\n        this.mdcTextField = new MDCTextField(element);\n\n        this.mapCompletions();\n\n        window.addEventListener('resize', this.layout, { passive: true });\n        this.limelInputField.addEventListener('focus', this.setFocus);\n    };\n\n    private mapCompletions = () => {\n        this.completionsList = [...this.completions].map((item) => {\n            return { text: item };\n        });\n    };\n\n    private setFocus = () => {\n        this.mdcTextField.focus();\n    };\n\n    private getContainerClassList = () => {\n        const classList = {\n            'mdc-text-field': true,\n            'mdc-text-field--no-label': !this.label,\n            'mdc-text-field--outlined': true,\n            'mdc-text-field--invalid': this.isInvalid(),\n            'mdc-text-field--disabled': this.disabled || this.readonly,\n            'lime-text-field--readonly': this.readonly,\n            'mdc-text-field--required': this.required,\n            'lime-text-field--empty': !this.value,\n            'lime-has-prefix': this.hasPrefix(),\n            'lime-has-suffix': this.hasSuffix(),\n        };\n\n        if (this.type === 'textarea') {\n            classList['mdc-text-field--textarea'] = true;\n            classList['has-helper-line'] =\n                !!this.helperText || !!this.maxlength;\n        } else {\n            classList['mdc-text-field--with-leading-icon'] = !!this.leadingIcon;\n            classList['mdc-text-field--with-trailing-icon'] =\n                !!this.getTrailingIcon();\n        }\n\n        return classList;\n    };\n\n    private renderInput = (\n        properties: JSXBase.InputHTMLAttributes<HTMLInputElement>\n    ) => {\n        if (this.type === 'textarea') {\n            return;\n        }\n\n        const type = this.type === 'urlAsText' ? 'text' : this.type;\n\n        return (\n            <input\n                {...properties}\n                type={type}\n                pattern={this.pattern}\n                onWheel={this.handleWheel}\n                onKeyDown={this.onKeyDown}\n                value={this.value}\n                placeholder={this.placeholder}\n            />\n        );\n    };\n\n    private renderTextarea = (\n        properties: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>\n    ) => {\n        if (this.type !== 'textarea') {\n            return;\n        }\n\n        return (\n            <span class=\"mdc-text-field__resizer\">\n                <textarea {...properties} placeholder={this.placeholder}>\n                    {this.value}\n                </textarea>\n            </span>\n        );\n    };\n\n    private layout = () => {\n        this.mdcTextField?.layout();\n    };\n\n    private getAdditionalProps = () => {\n        const props: any = {};\n\n        if (this.type === 'number') {\n            props.step = this.step;\n        }\n\n        if (this.type === 'number' && Number.isInteger(this.min)) {\n            props.min = this.min;\n        }\n\n        if (this.type === 'number' && Number.isInteger(this.max)) {\n            props.max = this.max;\n        }\n\n        if (this.minlength) {\n            props.minlength = this.minlength;\n        }\n\n        if (this.maxlength) {\n            props.maxlength = this.maxlength;\n        }\n\n        return props;\n    };\n\n    private onFocus = () => {\n        this.isFocused = true;\n        this.showCompletions = true;\n    };\n\n    private onBlur = () => {\n        this.isFocused = false;\n        this.isModified = true;\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private hasHelperLine = () => {\n        return this.maxlength || this.hasHelperText();\n    };\n\n    private renderHelperLine = () => {\n        const text: string = this.value || '';\n        const length = text.length;\n\n        if (!this.hasHelperLine()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                length={length}\n                maxLength={this.maxlength}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderEmptyValueForReadonly = () => {\n        if (this.readonly && !this.value) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (!this.hasSuffix() || this.type === 'textarea') {\n            return;\n        }\n\n        const classList = {\n            'mdc-text-field__affix': true,\n            'mdc-text-field__affix--suffix': true,\n        };\n\n        return <span class={classList}>{this.suffix}</span>;\n    };\n\n    private hasSuffix = () => {\n        return this.suffix !== null && this.suffix !== undefined;\n    };\n\n    private renderPrefix = () => {\n        if (!this.hasPrefix() || this.type === 'textarea') {\n            return;\n        }\n\n        const classList = {\n            'mdc-text-field__affix': true,\n            'mdc-text-field__affix--prefix': true,\n        };\n\n        return <span class={classList}>{this.prefix}</span>;\n    };\n\n    private hasPrefix = () => {\n        return this.prefix !== null && this.prefix !== undefined;\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            // `this.invalid` is set by the consumer. If the consumer explicitly\n            // told us to consider the field invalid, we consider it invalid\n            // regardless of what our internal validation thinks, and regardless\n            // of whether the field has been modified.\n            return true;\n        }\n\n        if (!this.isModified) {\n            return false;\n        }\n\n        const element = this.getInputElement();\n\n        return !(element && element.checkValidity());\n    };\n\n    private getInputElement = (): HTMLInputElement | HTMLTextAreaElement => {\n        let elementName = 'input';\n        if (this.type === 'textarea') {\n            elementName = 'textarea';\n        }\n\n        return this.limelInputField.shadowRoot.querySelector(elementName);\n    };\n\n    private renderLabel = () => {\n        const labelClassList = {\n            'mdc-floating-label': true,\n            'mdc-floating-label--float-above':\n                !!this.value || this.isFocused || this.readonly,\n        };\n\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"mdc-notched-outline__notch\">\n                <span class={labelClassList} id={this.labelId}>\n                    {this.label}\n                </span>\n            </span>\n        );\n    };\n\n    private renderLeadingIcon = () => {\n        if (this.type === 'textarea') {\n            return;\n        }\n\n        if (this.leadingIcon) {\n            return (\n                <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\">\n                    <limel-icon name={this.leadingIcon} />\n                </i>\n            );\n        }\n    };\n\n    private renderTrailingLinkOrButton = () => {\n        if (this.type === 'textarea') {\n            return;\n        }\n\n        const html = [];\n\n        const trailingIcon = this.getTrailingIcon();\n\n        if (!this.isInvalid() && this.hasLink()) {\n            html.push(this.renderLinkIcon(this.getLink(), trailingIcon));\n        } else if (trailingIcon) {\n            html.push(this.renderTrailingIcon(trailingIcon));\n        }\n\n        return html;\n    };\n\n    private hasLink = () => {\n        return (\n            this.showLink &&\n            ['email', 'tel', 'url', 'urlAsText'].includes(this.type)\n        );\n    };\n\n    private getLink = () => {\n        const props: LinkProperties = { href: '' };\n        switch (this.type) {\n            case 'email':\n                props.href = `mailto:${this.value}`;\n                break;\n            case 'tel':\n                props.href = `tel:${this.value}`;\n                break;\n            default:\n                props.href = getHref(this.value);\n                props.target = getTarget(this.value);\n        }\n\n        return props;\n    };\n\n    private renderLinkIcon = (linkProps: LinkProperties, icon: string) => {\n        // If the trailing icon uses the class `mdc-text-field__icon--trailing`,\n        // MDC attaches a click handler to it, which apparently runs\n        // `preventDefault()` on the event. For links, we don't want that,\n        // so instead of `mdc-text-field__icon--trailing`, we use our own class\n        // `lime-trailing-icon-for-link`, which uses all the same styling. /Ads\n        return (\n            <a\n                {...linkProps}\n                class=\"material-icons mdc-text-field__icon lime-trailing-icon-for-link\"\n                tabindex={this.disabled || !this.value ? '-1' : '0'}\n                role=\"button\"\n            >\n                <limel-icon name={icon} />\n            </a>\n        );\n    };\n\n    private renderTrailingIcon = (icon: string) => {\n        const props: any = {\n            tabIndex: this.isInvalid() ? '-1' : '0',\n        };\n        if (!this.isInvalid()) {\n            props.onKeyPress = this.handleIconKeyPress;\n            props.onClick = this.handleIconClick;\n            props.role = 'button';\n        }\n\n        return (\n            <i\n                class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\"\n                {...props}\n            >\n                <limel-icon name={icon} />\n            </i>\n        );\n    };\n\n    private getTrailingIcon = () => {\n        if (this.isInvalid()) {\n            return 'high_importance';\n        }\n\n        if (this.trailingIcon) {\n            return this.trailingIcon;\n        }\n\n        if (this.showLink && this.type === 'email') {\n            return 'filled_message';\n        }\n\n        if (this.showLink && this.type === 'tel') {\n            return 'phone';\n        }\n\n        if (\n            this.showLink &&\n            (this.type === 'url' || this.type === 'urlAsText')\n        ) {\n            return 'external_link';\n        }\n    };\n\n    private renderFormattedNumber = () => {\n        if (this.type !== 'number') {\n            return;\n        }\n\n        let renderValue = this.value;\n        if (this.formatNumber && this.value) {\n            renderValue = new Intl.NumberFormat(this.locale).format(\n                Number(this.value)\n            );\n        }\n\n        return (\n            <span class=\"lime-formatted-input lime-looks-like-input-value\">\n                {renderValue}\n            </span>\n        );\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\n    private onKeyDown = (event: KeyboardEvent): void => {\n        this.showCompletions = true;\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 (event.keyCode === TAB_KEY_CODE && event.shiftKey) {\n            this.showCompletions = false;\n        }\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\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    private handleCompletionChange = (\n        event: LimelListCustomEvent<ListItem>\n    ) => {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.showCompletions = false;\n\n        /*\n         This change event doesn't need to be debounced in itself, but we want\n         to make absolutely sure that an earlier change event that *has* been\n         debounced doesn't emit after this one. Therefore, we run this through\n         the same debounced emitter function. /Ads\n         */\n        this.changeEmitter(event.detail.text);\n    };\n\n    private renderAutocompleteList = () => {\n        if (this.type === 'textarea' || !this.completions.length) {\n            return;\n        }\n\n        const dropdownZIndex = getComputedStyle(\n            this.limelInputField\n        ).getPropertyValue('--dropdown-z-index');\n\n        return (\n            <limel-portal\n                visible={this.showCompletions}\n                containerId={this.portalId}\n                inheritParentWidth={true}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-menu-surface\n                    open={this.showCompletions}\n                    allowClicksElement={this.limelInputField}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {this.renderListResult()}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    };\n\n    private renderListResult = () => {\n        const filteredCompletions: ListItem[] = this.filterCompletions(\n            this.value\n        );\n        if (!filteredCompletions || filteredCompletions.length === 0) {\n            return null;\n        }\n\n        return (\n            <limel-list\n                onChange={this.handleCompletionChange}\n                onKeyDown={this.handleKeyDownInDropdown}\n                type=\"selectable\"\n                items={filteredCompletions}\n            />\n        );\n    };\n\n    private handleKeyDownInDropdown = (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.setFocus();\n        }\n    };\n\n    private handleCloseMenu = () => {\n        this.showCompletions = false;\n    };\n\n    private filterCompletions = (filter: string) => {\n        if (!filter) {\n            return this.completionsList;\n        }\n\n        return this.completionsList.filter(\n            (completion) =>\n                completion.text.toLowerCase().indexOf(filter.toLowerCase()) > -1\n        );\n    };\n\n    private handleChange = (event) => {\n        event.stopPropagation();\n        let value = event.target.value;\n\n        if (this.type === 'number') {\n            if (!value && event.data) {\n                event.stopPropagation();\n\n                return;\n            }\n\n            if (value) {\n                value = Number(value);\n            }\n        }\n\n        this.changeEmitter(value);\n    };\n\n    private changeEmitter = (value: string) => {\n        this.change.emit(value);\n    };\n\n    private handleIconClick = () => {\n        if (!this.isInvalid()) {\n            this.action.emit();\n        }\n    };\n\n    private handleIconKeyPress = (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 ((isSpace || isEnter) && !this.isInvalid()) {\n            this.action.emit();\n        }\n    };\n\n    private handleWheel = () => {\n        // This empty event handler is here to circumvent a bug.\n        // In some browsers (Chrome for example), hovering the input with\n        // the input focused, and scrolling, will both change the value\n        // AND scroll the page. We would prefer to never change the value\n        // on scroll, instead always scrolling the page, but since we\n        // haven't found a way to do that, this is the next best thing, as\n        // it prevents the page from being scrolled, but only in the\n        // circumstances when the value is changed by the scrolling.\n        // Please test THOROUGHLY if you remove this event handler 😄\n    };\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div class=\"mdc-form-field\">\n            <div\n                class={`\n                        mdc-radio\n                        ${props.disabled ? 'mdc-radio--disabled' : ''}\n                    `}\n            >\n                <input\n                    class=\"mdc-radio__native-control\"\n                    type=\"radio\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled}\n                    onChange={props.onChange}\n                />\n                <div class=\"mdc-radio__background\">\n                    <div class=\"mdc-radio__outer-circle\" />\n                    <div class=\"mdc-radio__inner-circle\" />\n                </div>\n            </div>\n            <label\n                class={`${props.disabled ? 'disabled' : ''}`}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","import { ListItem, ListSeparator, MenuItem } from '../../interface';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nexport class ListRenderer {\n    private defaultConfig: ListRendererConfig = {\n        isOpen: true,\n        badgeIcons: false,\n    };\n\n    private config: ListRendererConfig;\n\n    private hasIcons: boolean;\n    private twoLines: boolean;\n    private avatarList: boolean;\n    private commandKey: boolean;\n\n    private applyTabIndexToItemAtIndex: number;\n\n    public render(\n        items: Array<ListItem | ListSeparator>,\n        config: ListRendererConfig = {}\n    ) {\n        items = items || [];\n        this.config = { ...this.defaultConfig, ...config };\n\n        this.twoLines = items.some((item) => {\n            return 'secondaryText' in item && !!item.secondaryText;\n        });\n\n        this.hasIcons = items.some((item) => {\n            return 'icon' in item && !!item.icon;\n        });\n\n        this.avatarList = this.config.badgeIcons && this.hasIcons;\n        const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n        let role;\n        switch (this.config.type) {\n            case 'checkbox':\n                role = 'group';\n                break;\n            case 'radio':\n                role = 'radiogroup';\n                break;\n            default:\n                role = 'listbox';\n        }\n\n        this.applyTabIndexToItemAtIndex =\n            this.getIndexForWhichToApplyTabIndex(items);\n\n        const classNames = {\n            'mdc-deprecated-list': true,\n            'mdc-deprecated-list--two-line': this.twoLines,\n            selectable: selectableListTypes.includes(this.config.type),\n            'mdc-deprecated-list--avatar-list': this.avatarList,\n            'list--compact':\n                this.twoLines &&\n                this.commandKey &&\n                ['small', 'x-small'].includes(this.config.iconSize),\n        };\n\n        return (\n            <ul class={classNames} role={role} aria-orientation=\"vertical\">\n                {items.map(this.renderListItem)}\n            </ul>\n        );\n    }\n\n    /**\n     * Determine which ListItem should have the `tab-index` attribute set,\n     * and return the index at which that ListItem is located in `items`.\n     * Returns `undefined` if no item should have the attribute set.\n     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n     * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s\n     * @returns {number} the index as per the description\n     */\n    private getIndexForWhichToApplyTabIndex = (\n        items: Array<ListItem | ListSeparator>\n    ) => {\n        let result;\n        for (let i = 0, max = items.length; i < max; i += 1) {\n            if ('separator' in items[i]) {\n                // Ignore ListSeparator\n            } else {\n                const item = items[i] as ListItem<any>;\n                if (item.selected) {\n                    result = i;\n                    break;\n                }\n\n                if (result === undefined && !item.disabled) {\n                    result = i;\n                    // Do NOT break, as any later item with\n                    // `selected=true` should get the tab-index instead!\n                }\n            }\n        }\n\n        return result;\n    };\n\n    /**\n     * Render a single list item\n     * @param {ListItem | ListSeparator} item the item to render\n     * @param {number} index the index the item had in the `items` array\n     * @returns {HTMLElement} the list item\n     */\n    private renderListItem = (\n        item: ListItem | ListSeparator,\n        index: number\n    ) => {\n        if ('separator' in item) {\n            return (\n                <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n                    {this.rendertext(item)}\n                    <div class=\"limel-list-divider-line\" />\n                </li>\n            );\n        }\n\n        if (['radio', 'checkbox'].includes(this.config.type)) {\n            return this.renderVariantListItem(this.config, item, index);\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item--selected': item.selected,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                aria-selected={item.selected ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {item.icon ? this.renderIcon(this.config, item) : null}\n                {this.getPrimaryComponent(item)}\n                {this.renderText(item)}\n                {this.twoLines && this.avatarList ? this.renderDivider() : null}\n                {this.renderActionMenu(item.actions)}\n            </li>\n        );\n    };\n\n    private rendertext = (item: ListSeparator) => {\n        if ('text' in item) {\n            return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n        }\n    };\n\n    private getPrimaryComponent(item: ListItem): Element {\n        if (!this.hasPrimaryComponent(item)) {\n            return;\n        }\n\n        const PrimaryComponent = item.primaryComponent.name;\n        const props = item.primaryComponent.props;\n\n        return <PrimaryComponent {...props} />;\n    }\n\n    private hasPrimaryComponent = (item: ListItem) => {\n        return !!item?.primaryComponent?.name;\n    };\n\n    /**\n     * Render the text of the list item\n     * @param {ListItem} item the list item\n     * @returns {HTMLElement | string} the text for the list item\n     */\n    private renderText = (item: ListItem) => {\n        if (this.isSimpleItem(item)) {\n            return (\n                <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n            );\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__text\">\n                <div class=\"mdc-deprecated-list-item__primary-command-text\">\n                    <div class=\"mdc-deprecated-list-item__primary-text\">\n                        {item.text}\n                    </div>\n                </div>\n                <div class=\"mdc-deprecated-list-item__secondary-text\">\n                    {item.secondaryText}\n                </div>\n            </div>\n        );\n    };\n\n    private isSimpleItem = (item: ListItem): boolean => {\n        return !('secondaryText' in item);\n    };\n\n    /**\n     * Render an icon for a list item\n     * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function\n     * @param {ListItem} item the list item\n     * @returns {HTMLElement} the icon element\n     */\n    private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n        const style: any = {};\n        const name = getIconName(item.icon);\n        const color = getIconColor(item.icon, item.iconColor);\n\n        if (color) {\n            if (config.badgeIcons) {\n                style['--icon-background-color'] = color;\n            } else {\n                style.color = color;\n            }\n        }\n\n        return (\n            <limel-icon\n                badge={config.badgeIcons}\n                class=\"mdc-deprecated-list-item__graphic\"\n                name={name}\n                style={style}\n                size={config.iconSize}\n            />\n        );\n    };\n\n    private renderDivider = () => {\n        const classes = {\n            'mdc-deprecated-list-divider': true,\n            'mdc-deprecated-list-divider--inset': true,\n        };\n        if (this.config.iconSize) {\n            classes[this.config.iconSize] = true;\n        }\n\n        return <hr class={classes} />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={actions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                />\n            </limel-menu>\n        );\n    };\n\n    private renderVariantListItem = (\n        config: ListRendererConfig,\n        item: ListItem,\n        index: number\n    ) => {\n        let itemTemplate;\n        if (config.type === 'radio') {\n            itemTemplate = (\n                <RadioButtonTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        } else if (config.type === 'checkbox') {\n            itemTemplate = (\n                <CheckboxTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item__text': !item.secondaryText,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                role={config.type}\n                aria-checked={item.selected ? 'true' : 'false'}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {this.renderVariantListItemContent(config, item, itemTemplate)}\n            </li>\n        );\n    };\n\n    private renderVariantListItemContent = (\n        config: ListRendererConfig,\n        item: ListItem,\n        itemTemplate: any\n    ) => {\n        if (this.hasIcons) {\n            return [\n                item.icon ? this.renderIcon(config, item) : null,\n                this.getPrimaryComponent(item),\n                this.renderText(item),\n                <div class=\"mdc-deprecated-list-item__meta\">\n                    {itemTemplate}\n                </div>,\n            ];\n        }\n\n        return [\n            <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n            this.getPrimaryComponent(item),\n            this.renderText(item),\n        ];\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n@use '../checkbox/checkbox.scss';\n\n@use '@material/list';\n\n$list-border-radius: 0.375rem; // 6px\n$list--has-interactive-items--mdc-list-item--hover: 1;\n$list-static-actions-list: 1;\n$list-mdc-list-item: 0;\n\n/**\n * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.\n * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.\n * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.\n * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.\n * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.\n * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.\n * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.\n * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.\n * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;\n */\n\n:host(limel-list) {\n    display: block;\n    isolation: isolate;\n    @include checkbox.custom-checkbox-styles;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n@include list.deprecated-core-styles;\n\n.mdc-deprecated-list {\n    --mdc-theme-text-icon-on-background: var(\n        --icon-color,\n        rgb(var(--contrast-900))\n    );\n    margin: var(\n        --list-margin,\n        0.25rem\n    ); // added space to visualize keyboard-focused items\n    padding: 0;\n    border-radius: $list-border-radius;\n\n    .mdc-deprecated-list-divider {\n        border-bottom-color: transparent;\n        display: flex;\n        align-items: center;\n        gap: 0.75rem;\n        height: auto;\n        padding: 0 0.5rem;\n    }\n\n    .limel-list-divider-line {\n        background-color: rgb(var(--contrast-400));\n        height: 0.125rem;\n        border-radius: 1rem;\n        min-width: 1rem;\n        flex-grow: 1;\n    }\n\n    .limel-list-divider-title {\n        all: unset;\n        @include mixins.truncate-text;\n        color: rgb(var(--contrast-900));\n        font-size: 0.8125rem; // 13px\n    }\n\n    .mdc-deprecated-list-item {\n        transition: background-color 0.2s ease;\n        box-sizing: border-box;\n        z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12\n\n        &:not(.mdc-deprecated-list-item--disabled) {\n            &:hover {\n                background-color: rgb(var(--contrast-300));\n                z-index: 1;\n            }\n        }\n\n        &.mdc-deprecated-list-item--disabled {\n            cursor: not-allowed;\n\n            limel-icon {\n                opacity: 0.38; // similar to `mdc-deprecated-list-item__text` when disabled\n            }\n        }\n\n        &:first-child {\n            border-top-left-radius: $list-border-radius;\n            border-top-right-radius: $list-border-radius;\n        }\n        &:last-child {\n            border-bottom-right-radius: $list-border-radius;\n            border-bottom-left-radius: $list-border-radius;\n        }\n    }\n\n    &.selectable\n        .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {\n        cursor: pointer;\n    }\n\n    .mdc-deprecated-list-item__meta {\n        // the action menu on the right side a list item\n        line-height: 100%;\n        margin-right: -0.5rem;\n    }\n\n    .mdc-deprecated-list-item__graphic {\n        margin-right: functions.pxToRem(8);\n    }\n\n    &.mdc-deprecated-list--avatar-list {\n        position: relative;\n\n        limel-icon.mdc-deprecated-list-item__graphic {\n            background-color: var(\n                --icon-background-color,\n                rgb(var(--contrast-900))\n            );\n            color: var(--icon-color, rgba(var(--color-white), 0.88));\n            margin-right: functions.pxToRem(12);\n            margin-left: functions.pxToRem(-4);\n        }\n\n        hr.mdc-deprecated-list-divider {\n            position: absolute;\n            bottom: 0;\n\n            &.mdc-deprecated-list-divider--inset {\n                --icon-width: #{functions.pxToRem(40)};\n                --icon-right-padding: #{functions.pxToRem(12)};\n                --list-right-padding: #{functions.pxToRem(12)};\n                right: 0;\n                width: calc(\n                    100% - var(--icon-width) - var(--icon-right-padding) -\n                        var(--list-right-padding)\n                );\n\n                &.x-small {\n                    --icon-width: #{functions.pxToRem(24)};\n                }\n\n                &.small {\n                    --icon-width: #{functions.pxToRem(32)};\n                }\n\n                &.medium {\n                    --icon-width: #{functions.pxToRem(40)};\n                }\n\n                &.large {\n                    --icon-width: #{functions.pxToRem(48)};\n                }\n            }\n        }\n\n        .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {\n            display: none;\n        }\n    }\n\n    &.mdc-deprecated-list--two-line {\n        .mdc-deprecated-list-item__text {\n            padding-top: functions.pxToRem(8);\n            padding-bottom: functions.pxToRem(8);\n        }\n        .mdc-deprecated-list-item__primary-text {\n            margin-bottom: functions.pxToRem(4);\n        }\n    }\n\n    .mdc-deprecated-list-item__secondary-text,\n    .mdc-deprecated-list-item__primary-text,\n    .mdc-deprecated-list-item__command-text {\n        margin: 0;\n        &:before,\n        &:after {\n            display: none;\n        }\n    }\n\n    .mdc-deprecated-list-item__command-text {\n        color: rgb(var(--contrast-800));\n        margin-left: 0.7rem;\n    }\n\n    .mdc-deprecated-list-item__text {\n        align-self: center;\n        width: 100%;\n    }\n\n    .has-primary-component {\n        .mdc-deprecated-list-item__text {\n            margin-left: 0.5rem;\n        }\n    }\n    .mdc-deprecated-list-item__primary-command-text {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: baseline;\n    }\n\n    // Tweaks to display the icon correctly in Edge\n    limel-icon.mdc-deprecated-list-item__graphic {\n        display: block;\n    }\n}\n\n.mdc-deprecated-list:not(.mdc-deprecated-list--avatar-list) {\n    limel-icon.mdc-deprecated-list-item__graphic {\n        // Tweaks to make icon lists align nicely with badge-icon lists.\n        &[size='x-small'] {\n            margin-right: functions.pxToRem(4);\n        }\n        &[size='small'] {\n            margin-right: functions.pxToRem(8);\n        }\n        &[size='medium'] {\n            margin-right: functions.pxToRem(8);\n        }\n        &[size='large'] {\n            margin-right: functions.pxToRem(12);\n        }\n    }\n}\n\n.mdc-deprecated-list-item.mdc-deprecated-list-item--selected {\n    &:before {\n        background-color: var(--mdc-theme-primary);\n        opacity: 0.15;\n    }\n}\n\n:not(.mdc-deprecated-list--non-interactive) {\n    > {\n        :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n            @include mixins.visualize-keyboard-focus;\n\n            &:focus-visible {\n                border-radius: $list-border-radius;\n                z-index: $list--has-interactive-items--mdc-list-item--hover;\n            }\n        }\n    }\n}\n\n@import '../checkbox/checkbox.scss';\n\n@import './radio-button/radio-button.scss';\n\n@import './partial-styles/custom-styles.scss';\n@import './partial-styles/enable-multiline-text.scss';\n@import './partial-styles/_has-grid-layout.scss';\n@import './partial-styles/_static-actions.scss';\n","import { IconSize, ListItem, ListSeparator, ListType } from '../../interface';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/**\n * @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-separator\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n */\n@Component({\n    tag: 'limel-list',\n    shadow: true,\n    styleUrl: 'list.scss',\n})\nexport class List {\n    /**\n     * List of items to display\n     */\n    @Prop()\n    public items: Array<ListItem | 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 list, omit to get a regular list. Available types are:\n     * `selectable`: regular list with single selection.\n     * `radio`: radio button list with single selection.\n     * `checkbox`: checkbox list with multiple selection.\n     */\n    @Prop()\n    public type: ListType;\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: HTMLLimelListElement;\n\n    private config: ListRendererConfig;\n    private listRenderer = new ListRenderer();\n    private mdcList: MDCList;\n    private multiple: boolean;\n    private selectable: boolean;\n\n    /**\n     * Fired when a new value has been selected from the list.\n     * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n     */\n    @Event()\n    private change: EventEmitter<ListItem | ListItem[]>;\n\n    /**\n     * Fired when an action has been selected from the action menu of a list item\n     */\n    @Event()\n    protected select: EventEmitter<ListItem | ListItem[]>;\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        let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n        if (this.maxLinesSecondaryText < 1) {\n            maxLinesSecondaryText = 1;\n        }\n\n        const html = this.listRenderer.render(this.items, this.config);\n\n        return (\n            <Host\n                style={{\n                    '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n                }}\n            >\n                {html}\n            </Host>\n        );\n    }\n\n    @Watch('type')\n    protected handleType() {\n        this.setupListeners();\n    }\n\n    @Watch('items')\n    protected itemsChanged() {\n        if (!this.mdcList) {\n            return;\n        }\n\n        setTimeout(() => {\n            this.setup();\n\n            const listItems = this.items.filter(this.isListItem);\n\n            if (this.multiple) {\n                this.mdcList.selectedIndex = listItems\n                    .filter((item: ListItem) => item.selected)\n                    .map((item: ListItem) => listItems.indexOf(item));\n            } else {\n                const selectedIndex = listItems.findIndex(\n                    (item: ListItem) => item.selected\n                );\n\n                if (selectedIndex === -1) {\n                    this.mdcList.initializeListType();\n                } else {\n                    this.mdcList.selectedIndex = selectedIndex;\n                }\n            }\n        }, 0);\n    }\n\n    private setup = () => {\n        this.setupList();\n\n        this.setupListeners();\n    };\n\n    private setupList = () => {\n        if (this.mdcList) {\n            this.teardown();\n            this.mdcList = null;\n        }\n\n        const element = this.element.shadowRoot.querySelector(\n            '.mdc-deprecated-list'\n        );\n        if (!element) {\n            return;\n        }\n\n        this.mdcList = new MDCList(element);\n        this.mdcList.hasTypeahead = true;\n    };\n\n    private setupListeners = () => {\n        if (!this.mdcList) {\n            return;\n        }\n\n        this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n        this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n            this.type\n        );\n        this.multiple = this.type === 'checkbox';\n\n        if (!this.selectable) {\n            return;\n        }\n\n        this.mdcList.listen(ACTION_EVENT, this.handleAction);\n        this.mdcList.singleSelection = !this.multiple;\n    };\n\n    private teardown = () => {\n        this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n        this.mdcList?.destroy();\n    };\n\n    private handleAction = (event: MDCListActionEvent) => {\n        if (!this.multiple) {\n            this.handleSingleSelect(event.detail.index);\n\n            return;\n        }\n\n        this.handleMultiSelect(event.detail.index);\n    };\n\n    private handleSingleSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItem: ListItem = listItems.find((item: ListItem) => {\n            return !!item.selected;\n        });\n\n        if (selectedItem) {\n            this.change.emit({ ...selectedItem, selected: false });\n        }\n\n        if (listItems[index] !== selectedItem) {\n            this.change.emit({ ...listItems[index], selected: true });\n        }\n    };\n\n    private handleMultiSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItems: ListItem[] = listItems\n            .filter((item: ListItem, listIndex: number) => {\n                if (listIndex === index) {\n                    // This is the item that was selected or deselected,\n                    // so we negate its previous selection status.\n                    return !item.selected;\n                }\n\n                // This is an item that didn't change, so we keep its selection status.\n                return item.selected;\n            })\n            .map((item: ListItem) => {\n                return { ...item, selected: true };\n            });\n\n        this.change.emit(selectedItems);\n    };\n\n    private isListItem = (item: ListItem): 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","@use '@material/menu-surface';\n@use '@material/elevation';\n@use '@material/menu';\n\n/**\n* @prop --limel-menu-surface-display: defines whether the surface is treated as a block, flex or grid. It affects layout used to display its children. Defaults to `block`.\n* @prop --limel-menu-surface-flex-direction: defines the direction of menu-surface layout.\n*/\n\n:host(limel-menu-surface) {\n    display: block;\n    max-height: inherit;\n}\n\n@include menu-surface.core-styles;\n@include menu.core-styles;\n\n.mdc-menu-surface {\n    display: var(--limel-menu-surface-display, block);\n    flex-direction: var(--limel-menu-surface-flex-direction, row);\n    max-height: inherit;\n    position: relative;\n    --mdc-menu-max-width: var(\n        --menu-surface-width,\n        min(calc(100vw - 2rem), 20rem)\n    );\n    background-color: var(--lime-elevated-surface-background-color);\n}\n\n:host(limel-menu-surface.has-grid-layout) {\n    .mdc-menu-surface {\n        width: var(--menu-surface-width, min(calc(100vw - 2rem), 40rem));\n        max-width: unset;\n    }\n}\n","import { Corner, MDCMenuSurface } from '@material/menu-surface';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n@Component({\n    tag: 'limel-menu-surface',\n    shadow: true,\n    styleUrl: 'menu-surface.scss',\n})\nexport class MenuSurface {\n    /**\n     * True if the menu surface is open, false otherwise\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Clicks in this element should not be prevented when the menu surface is open\n     */\n    @Prop()\n    public allowClicksElement: HTMLElement;\n\n    /**\n     * Emitted when the menu surface is dismissed and should be closed\n     */\n    @Event()\n    public dismiss: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelMenuSurfaceElement;\n\n    private menuSurface: MDCMenuSurface;\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        const classList = {\n            'mdc-menu': true,\n            'mdc-menu-surface': true,\n            'mdc-menu-surface--open': this.open,\n            'mdc-elevation-transition': true,\n            'mdc-elevation--z4': true,\n        };\n\n        return (\n            <div class={classList} tabindex=\"-1\">\n                <slot />\n            </div>\n        );\n    }\n\n    private setup = () => {\n        const menuElement: HTMLElement =\n            this.host.shadowRoot.querySelector('.mdc-menu-surface');\n        if (!menuElement) {\n            return;\n        }\n\n        this.menuSurface = new MDCMenuSurface(menuElement);\n        this.menuSurface.setAnchorCorner(Corner.TOP_START);\n\n        document.addEventListener('mousedown', this.handleDocumentClick, {\n            capture: true,\n        });\n        this.host.addEventListener('keydown', this.handleKeyDown);\n        window.addEventListener('resize', this.handleResize, {\n            passive: true,\n        });\n    };\n\n    private teardown = () => {\n        this.menuSurface?.destroy();\n        document.removeEventListener('mousedown', this.handleDocumentClick, {\n            capture: true,\n        });\n        this.host.removeEventListener('keydown', this.handleKeyDown);\n        window.removeEventListener('resize', this.handleResize);\n    };\n\n    private handleDocumentClick = (event) => {\n        const elementPath = event.composedPath ? event.composedPath() : [];\n\n        if (!this.open) {\n            return;\n        }\n\n        if (isDescendant(event.target, this.host)) {\n            return;\n        }\n\n        if (this.allowClicksElement) {\n            const clickedInAllowedElement = elementPath.includes(\n                this.allowClicksElement\n            );\n\n            if (clickedInAllowedElement) {\n                return;\n            }\n        }\n\n        this.dismiss.emit();\n        this.preventClickEventPropagation();\n    };\n\n    private handleResize = () => {\n        if (this.open) {\n            this.dismiss.emit();\n        }\n    };\n\n    private preventClickEventPropagation = () => {\n        // When the menu surface is open, we want to stop the `click` event from propagating\n        // when clicking outside the surface itself. This is to prevent any dialog that might\n        // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,\n        // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener\n        // for `click`, so we can capture and \"kill\" it.\n        document.addEventListener('click', this.stopEvent, {\n            capture: true,\n            once: true,\n        });\n        // We also capture and \"kill\" the next `mouseup` event.\n        document.addEventListener('mouseup', this.stopEvent, {\n            capture: true,\n            once: true,\n        });\n        // If the user dragged the scrollbar, no `click` event happens. So when we get the\n        // `mouseup` event, remove the handler for `click` if it's still there.\n        // Otherwise, we would catch the next click even though the menu is no longer open.\n        document.addEventListener(\n            'mouseup',\n            () => {\n                document.removeEventListener('click', this.stopEvent, {\n                    capture: true,\n                });\n            },\n            {\n                once: true,\n            }\n        );\n    };\n\n    private stopEvent = (event) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n        const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;\n\n        if (this.open && (isEscape || isTab)) {\n            event.stopPropagation();\n            this.dismiss.emit();\n        }\n    };\n}\n"],"mappings":"mwBAkBA,IAAIA,EAAM,WACR,OAAOC,EAAKC,KAAKF,KACnB,ECfA,IAAIG,EAAkB,sBAGtB,IAAIC,EAAYC,KAAKC,IACjBC,EAAYF,KAAKG,IAwDrB,SAASC,EAASC,EAAMC,EAAMC,GAC5B,IAAIC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAiB,EACjBC,EAAU,MACVC,EAAS,MACTC,EAAW,KAEf,UAAWZ,GAAQ,WAAY,CAC7B,MAAM,IAAIa,UAAUpB,EACxB,CACEQ,EAAOa,EAASb,IAAS,EACzB,GAAIc,EAASb,GAAU,CACrBQ,IAAYR,EAAQQ,QACpBC,EAAS,YAAaT,EACtBG,EAAUM,EAASjB,EAAUoB,EAASZ,EAAQG,UAAY,EAAGJ,GAAQI,EACrEO,EAAW,aAAcV,IAAYA,EAAQU,SAAWA,CAC5D,CAEE,SAASI,EAAWC,GAClB,IAAIC,EAAOf,EACPgB,EAAUf,EAEdD,EAAWC,EAAWgB,UACtBX,EAAiBQ,EACjBX,EAASN,EAAKqB,MAAMF,EAASD,GAC7B,OAAOZ,CACX,CAEE,SAASgB,EAAYL,GAEnBR,EAAiBQ,EAEjBV,EAAUgB,WAAWC,EAAcvB,GAEnC,OAAOS,EAAUM,EAAWC,GAAQX,CACxC,CAEE,SAASmB,EAAcR,GACrB,IAAIS,EAAoBT,EAAOT,EAC3BmB,EAAsBV,EAAOR,EAC7BmB,EAAc3B,EAAOyB,EAEzB,OAAOf,EACHd,EAAU+B,EAAavB,EAAUsB,GACjCC,CACR,CAEE,SAASC,EAAaZ,GACpB,IAAIS,EAAoBT,EAAOT,EAC3BmB,EAAsBV,EAAOR,EAKjC,OAAQD,IAAiBY,WAAcM,GAAqBzB,GACzDyB,EAAoB,GAAOf,GAAUgB,GAAuBtB,CACnE,CAEE,SAASmB,IACP,IAAIP,EAAO3B,IACX,GAAIuC,EAAaZ,GAAO,CACtB,OAAOa,EAAab,EAC1B,CAEIV,EAAUgB,WAAWC,EAAcC,EAAcR,GACrD,CAEE,SAASa,EAAab,GACpBV,EAAUa,UAIV,GAAIR,GAAYT,EAAU,CACxB,OAAOa,EAAWC,EACxB,CACId,EAAWC,EAAWgB,UACtB,OAAOd,CACX,CAEE,SAASyB,IACP,GAAIxB,IAAYa,UAAW,CACzBY,aAAazB,EACnB,CACIE,EAAiB,EACjBN,EAAWK,EAAeJ,EAAWG,EAAUa,SACnD,CAEE,SAASa,IACP,OAAO1B,IAAYa,UAAYd,EAASwB,EAAaxC,IACzD,CAEE,SAAS4C,IACP,IAAIjB,EAAO3B,IACP6C,EAAaN,EAAaZ,GAE9Bd,EAAWiC,UACXhC,EAAWiC,KACX7B,EAAeS,EAEf,GAAIkB,EAAY,CACd,GAAI5B,IAAYa,UAAW,CACzB,OAAOE,EAAYd,EAC3B,CACM,GAAIG,EAAQ,CAEVqB,aAAazB,GACbA,EAAUgB,WAAWC,EAAcvB,GACnC,OAAOe,EAAWR,EAC1B,CACA,CACI,GAAID,IAAYa,UAAW,CACzBb,EAAUgB,WAAWC,EAAcvB,EACzC,CACI,OAAOK,CACX,CACE4B,EAAUH,OAASA,EACnBG,EAAUD,MAAQA,EAClB,OAAOC,CACT,CC5LA,MAAMI,EAAgB,6h7D,MC6DTC,EAAU,MAoMnBC,YAAAC,G,wEALQJ,KAAAK,gBAA8B,GA0F9BL,KAAAM,WAAa,KACjB,MAAMC,EACFP,KAAKQ,gBAAgBC,WAAWC,cAAc,mBAClD,IAAKH,EAAS,CACV,M,CAGJP,KAAKW,aAAe,IAAIC,EAAaL,GAErCP,KAAKa,iBAELC,OAAOC,iBAAiB,SAAUf,KAAKgB,OAAQ,CAAEC,QAAS,OAC1DjB,KAAKQ,gBAAgBO,iBAAiB,QAASf,KAAKkB,SAAS,EAGzDlB,KAAAa,eAAiB,KACrBb,KAAKK,gBAAkB,IAAIL,KAAKmB,aAAaC,KAAKC,IACvC,CAAEC,KAAMD,KACjB,EAGErB,KAAAkB,SAAW,KACflB,KAAKW,aAAaY,OAAO,EAGrBvB,KAAAwB,sBAAwB,KAC5B,MAAMC,EAAY,CACd,iBAAkB,KAClB,4BAA6BzB,KAAK0B,MAClC,2BAA4B,KAC5B,0BAA2B1B,KAAK2B,YAChC,2BAA4B3B,KAAK4B,UAAY5B,KAAK6B,SAClD,4BAA6B7B,KAAK6B,SAClC,2BAA4B7B,KAAK8B,SACjC,0BAA2B9B,KAAK+B,MAChC,kBAAmB/B,KAAKgC,YACxB,kBAAmBhC,KAAKiC,aAG5B,GAAIjC,KAAKkC,OAAS,WAAY,CAC1BT,EAAU,4BAA8B,KACxCA,EAAU,qBACJzB,KAAKmC,cAAgBnC,KAAKoC,S,KAC7B,CACHX,EAAU,uCAAyCzB,KAAKqC,YACxDZ,EAAU,wCACJzB,KAAKsC,iB,CAGf,OAAOb,CAAS,EAGZzB,KAAAuC,YACJC,IAEA,GAAIxC,KAAKkC,OAAS,WAAY,CAC1B,M,CAGJ,MAAMA,EAAOlC,KAAKkC,OAAS,YAAc,OAASlC,KAAKkC,KAEvD,OACIO,EAAA,QAAAC,OAAAC,OAAA,GACQH,EAAU,CACdN,KAAMA,EACNU,QAAS5C,KAAK4C,QACdC,QAAS7C,KAAK8C,YACdC,UAAW/C,KAAK+C,UAChBhB,MAAO/B,KAAK+B,MACZiB,YAAahD,KAAKgD,cACpB,EAIFhD,KAAAiD,eACJT,IAEA,GAAIxC,KAAKkC,OAAS,WAAY,CAC1B,M,CAGJ,OACIO,EAAA,QAAMS,MAAM,2BACRT,EAAA,WAAAC,OAAAC,OAAA,GAAcH,EAAU,CAAEQ,YAAahD,KAAKgD,cACvChD,KAAK+B,OAEP,EAIP/B,KAAAgB,OAAS,K,OACbmC,EAAAnD,KAAKW,gBAAY,MAAAwC,SAAA,SAAAA,EAAEnC,QAAQ,EAGvBhB,KAAAoD,mBAAqB,KACzB,MAAMC,EAAa,GAEnB,GAAIrD,KAAKkC,OAAS,SAAU,CACxBmB,EAAMC,KAAOtD,KAAKsD,I,CAGtB,GAAItD,KAAKkC,OAAS,UAAYqB,OAAOC,UAAUxD,KAAKvC,KAAM,CACtD4F,EAAM5F,IAAMuC,KAAKvC,G,CAGrB,GAAIuC,KAAKkC,OAAS,UAAYqB,OAAOC,UAAUxD,KAAKzC,KAAM,CACtD8F,EAAM9F,IAAMyC,KAAKzC,G,CAGrB,GAAIyC,KAAKyD,UAAW,CAChBJ,EAAMI,UAAYzD,KAAKyD,S,CAG3B,GAAIzD,KAAKoC,UAAW,CAChBiB,EAAMjB,UAAYpC,KAAKoC,S,CAG3B,OAAOiB,CAAK,EAGRrD,KAAA0D,QAAU,KACd1D,KAAK2D,UAAY,KACjB3D,KAAK4D,gBAAkB,IAAI,EAGvB5D,KAAA6D,OAAS,KACb7D,KAAK2D,UAAY,MACjB3D,KAAK8D,WAAa,IAAI,EAGlB9D,KAAA+D,cAAgB,IACb/D,KAAKmC,aAAe,MAAQnC,KAAKmC,aAAepD,UAGnDiB,KAAAgE,cAAgB,IACbhE,KAAKoC,WAAapC,KAAK+D,gBAG1B/D,KAAAiE,iBAAmB,KACvB,MAAM3C,EAAetB,KAAK+B,OAAS,GACnC,MAAMmC,EAAS5C,EAAK4C,OAEpB,IAAKlE,KAAKgE,gBAAiB,CACvB,M,CAGJ,OACIvB,EAAA,qBACI0B,aAAcnE,KAAKmE,aACnBhC,WAAYnC,KAAKmC,WACjB+B,OAAQA,EACRE,UAAWpE,KAAKoC,UAChBiC,QAASrE,KAAK2B,aAChB,EAIF3B,KAAAsE,4BAA8B,KAClC,GAAItE,KAAK6B,WAAa7B,KAAK+B,MAAO,CAC9B,OACIU,EAAA,QAAMS,MAAM,6DAA2D,I,GAO3ElD,KAAAuE,aAAe,KACnB,IAAKvE,KAAKiC,aAAejC,KAAKkC,OAAS,WAAY,CAC/C,M,CAGJ,MAAMT,EAAY,CACd,wBAAyB,KACzB,gCAAiC,MAGrC,OAAOgB,EAAA,QAAMS,MAAOzB,GAAYzB,KAAKwE,OAAc,EAG/CxE,KAAAiC,UAAY,IACTjC,KAAKwE,SAAW,MAAQxE,KAAKwE,SAAWzF,UAG3CiB,KAAAyE,aAAe,KACnB,IAAKzE,KAAKgC,aAAehC,KAAKkC,OAAS,WAAY,CAC/C,M,CAGJ,MAAMT,EAAY,CACd,wBAAyB,KACzB,gCAAiC,MAGrC,OAAOgB,EAAA,QAAMS,MAAOzB,GAAYzB,KAAK0E,OAAc,EAG/C1E,KAAAgC,UAAY,IACThC,KAAK0E,SAAW,MAAQ1E,KAAK0E,SAAW3F,UAG3CiB,KAAA2B,UAAY,KAChB,GAAI3B,KAAK6B,SAAU,CAEf,OAAO,K,CAGX,GAAI7B,KAAKqE,QAAS,CAKd,OAAO,I,CAGX,IAAKrE,KAAK8D,WAAY,CAClB,OAAO,K,CAGX,MAAMvD,EAAUP,KAAK2E,kBAErB,QAASpE,GAAWA,EAAQqE,gBAAgB,EAGxC5E,KAAA2E,gBAAkB,KACtB,IAAIE,EAAc,QAClB,GAAI7E,KAAKkC,OAAS,WAAY,CAC1B2C,EAAc,U,CAGlB,OAAO7E,KAAKQ,gBAAgBC,WAAWC,cAAcmE,EAAY,EAG7D7E,KAAA8E,YAAc,KAClB,MAAMC,EAAiB,CACnB,qBAAsB,KACtB,oCACM/E,KAAK+B,OAAS/B,KAAK2D,WAAa3D,KAAK6B,UAG/C,IAAK7B,KAAK0B,MAAO,CACb,M,CAGJ,OACIe,EAAA,QAAMS,MAAM,8BACRT,EAAA,QAAMS,MAAO6B,EAAgBC,GAAIhF,KAAKiF,SACjCjF,KAAK0B,OAEP,EAIP1B,KAAAkF,kBAAoB,KACxB,GAAIlF,KAAKkC,OAAS,WAAY,CAC1B,M,CAGJ,GAAIlC,KAAKqC,YAAa,CAClB,OACII,EAAA,KAAGS,MAAM,qEACLT,EAAA,cAAY0C,KAAMnF,KAAKqC,c,GAM/BrC,KAAAoF,2BAA6B,KACjC,GAAIpF,KAAKkC,OAAS,WAAY,CAC1B,M,CAGJ,MAAMmD,EAAO,GAEb,MAAMC,EAAetF,KAAKsC,kBAE1B,IAAKtC,KAAK2B,aAAe3B,KAAKuF,UAAW,CACrCF,EAAKG,KAAKxF,KAAKyF,eAAezF,KAAK0F,UAAWJ,G,MAC3C,GAAIA,EAAc,CACrBD,EAAKG,KAAKxF,KAAK2F,mBAAmBL,G,CAGtC,OAAOD,CAAI,EAGPrF,KAAAuF,QAAU,IAEVvF,KAAK4F,UACL,CAAC,QAAS,MAAO,MAAO,aAAaC,SAAS7F,KAAKkC,MAInDlC,KAAA0F,QAAU,KACd,MAAMrC,EAAwB,CAAEyC,KAAM,IACtC,OAAQ9F,KAAKkC,MACT,IAAK,QACDmB,EAAMyC,KAAO,UAAU9F,KAAK+B,QAC5B,MACJ,IAAK,MACDsB,EAAMyC,KAAO,OAAO9F,KAAK+B,QACzB,MACJ,QACIsB,EAAMyC,KAAOC,EAAQ/F,KAAK+B,OAC1BsB,EAAM2C,OAASC,EAAUjG,KAAK+B,OAGtC,OAAOsB,CAAK,EAGRrD,KAAAyF,eAAiB,CAACS,EAA2BC,IAO7C1D,EAAA,IAAAC,OAAAC,OAAA,GACQuD,EAAS,CACbhD,MAAM,kEACNkD,SAAUpG,KAAK4B,WAAa5B,KAAK+B,MAAQ,KAAO,IAChDsE,KAAK,WAEL5D,EAAA,cAAY0C,KAAMgB,KAKtBnG,KAAA2F,mBAAsBQ,IAC1B,MAAM9C,EAAa,CACfiD,SAAUtG,KAAK2B,YAAc,KAAO,KAExC,IAAK3B,KAAK2B,YAAa,CACnB0B,EAAMkD,WAAavG,KAAKwG,mBACxBnD,EAAMoD,QAAUzG,KAAK0G,gBACrBrD,EAAMgD,KAAO,Q,CAGjB,OACI5D,EAAA,IAAAC,OAAAC,OAAA,CACIO,MAAM,sEACFG,GAEJZ,EAAA,cAAY0C,KAAMgB,IAClB,EAIJnG,KAAAsC,gBAAkB,KACtB,GAAItC,KAAK2B,YAAa,CAClB,MAAO,iB,CAGX,GAAI3B,KAAKsF,aAAc,CACnB,OAAOtF,KAAKsF,Y,CAGhB,GAAItF,KAAK4F,UAAY5F,KAAKkC,OAAS,QAAS,CACxC,MAAO,gB,CAGX,GAAIlC,KAAK4F,UAAY5F,KAAKkC,OAAS,MAAO,CACtC,MAAO,O,CAGX,GACIlC,KAAK4F,WACJ5F,KAAKkC,OAAS,OAASlC,KAAKkC,OAAS,aACxC,CACE,MAAO,e,GAIPlC,KAAA2G,sBAAwB,KAC5B,GAAI3G,KAAKkC,OAAS,SAAU,CACxB,M,CAGJ,IAAI0E,EAAc5G,KAAK+B,MACvB,GAAI/B,KAAK6G,cAAgB7G,KAAK+B,MAAO,CACjC6E,EAAc,IAAIE,KAAKC,aAAa/G,KAAKgH,QAAQC,OAC7C1D,OAAOvD,KAAK+B,O,CAIpB,OACIU,EAAA,QAAMS,MAAM,oDACP0D,EACE,EAWP5G,KAAA+C,UAAamE,IACjBlH,KAAK4D,gBAAkB,KACvB,MAAMuD,GACDD,EAAME,MAAQC,GAAOH,EAAMI,UAAYC,KACvCL,EAAMM,SACNN,EAAMO,UACNP,EAAMQ,SACX,MAAMC,EACFT,EAAME,MAAQQ,GAAYV,EAAMI,UAAYO,EAChD,MAAMC,EACFZ,EAAME,MAAQW,GAAcb,EAAMI,UAAYU,EAElD,GAAId,EAAMI,UAAYC,GAAgBL,EAAMQ,SAAU,CAClD1H,KAAK4D,gBAAkB,K,CAG3B,IAAKuD,IAAiBQ,IAASG,EAAQ,CACnC,M,CAGJ,MAAMG,EAAOC,SAASxH,cAAc,KAAKV,KAAKmI,uBAE9C,IAAKF,EAAM,CACP,M,CAGJf,EAAMkB,iBACN,GAAIjB,GAAgBW,EAAQ,CACxB,MAAMO,EAA2BJ,EAAKxH,WAAWC,cAC7C,yCAEJ2H,EAAY9G,QAEZ,M,CAGJ,GAAIoG,EAAM,CACN,MAAMU,EAA2BJ,EAAKxH,WAAWC,cAC7C,wCAEJ2H,EAAY9G,O,GAIZvB,KAAAsI,uBACJpB,IAEAA,EAAMqB,kBACN,IAAKrB,EAAMsB,OAAQ,CACf,M,CAGJxI,KAAK4D,gBAAkB,MAQvB5D,KAAKyI,cAAcvB,EAAMsB,OAAOlH,KAAK,EAGjCtB,KAAA0I,uBAAyB,KAC7B,GAAI1I,KAAKkC,OAAS,aAAelC,KAAKmB,YAAY+C,OAAQ,CACtD,M,CAGJ,MAAMyE,EAAiBC,iBACnB5I,KAAKQ,iBACPqI,iBAAiB,sBAEnB,OACIpG,EAAA,gBACIqG,QAAS9I,KAAK4D,gBACdmF,YAAa/I,KAAKmI,SAClBa,mBAAoB,KACpBC,eAAgB,CAAE,UAAWN,IAE7BlG,EAAA,sBACIyG,KAAMlJ,KAAK4D,gBACXuF,mBAAoBnJ,KAAKQ,gBACzB4I,MAAO,CACH,uBAAwB,OACxB,aAAc,UACdC,QAAS,QAEbC,UAAWtJ,KAAKuJ,iBAEfvJ,KAAKwJ,oBAEC,EAIfxJ,KAAAwJ,iBAAmB,KACvB,MAAMC,EAAkCzJ,KAAK0J,kBACzC1J,KAAK+B,OAET,IAAK0H,GAAuBA,EAAoBvF,SAAW,EAAG,CAC1D,OAAO,I,CAGX,OACIzB,EAAA,cACIkH,SAAU3J,KAAKsI,uBACfvF,UAAW/C,KAAK4J,wBAChB1H,KAAK,aACL2H,MAAOJ,GACT,EAIFzJ,KAAA4J,wBAA2B1C,IAC/B,MAAM4C,EAAW,CAACzC,EAAK0C,EAAQC,GAAOnE,SAASqB,EAAME,KACrD,MAAM6C,EAAe,CACjB1C,EACA2C,EACAC,GACFtE,SAASqB,EAAMI,SACjB,GAAIwC,GAAYG,EAAc,CAC1BjK,KAAKkB,U,GAILlB,KAAAuJ,gBAAkB,KACtBvJ,KAAK4D,gBAAkB,KAAK,EAGxB5D,KAAA0J,kBAAqBU,IACzB,IAAKA,EAAQ,CACT,OAAOpK,KAAKK,e,CAGhB,OAAOL,KAAKK,gBAAgB+J,QACvBC,GACGA,EAAW/I,KAAKgJ,cAAcC,QAAQH,EAAOE,gBAAkB,GACtE,EAGGtK,KAAAwK,aAAgBtD,IACpBA,EAAMqB,kBACN,IAAIxG,EAAQmF,EAAMlB,OAAOjE,MAEzB,GAAI/B,KAAKkC,OAAS,SAAU,CACxB,IAAKH,GAASmF,EAAMuD,KAAM,CACtBvD,EAAMqB,kBAEN,M,CAGJ,GAAIxG,EAAO,CACPA,EAAQwB,OAAOxB,E,EAIvB/B,KAAKyI,cAAc1G,EAAM,EAGrB/B,KAAAyI,cAAiB1G,IACrB/B,KAAK0K,OAAOC,KAAK5I,EAAM,EAGnB/B,KAAA0G,gBAAkB,KACtB,IAAK1G,KAAK2B,YAAa,CACnB3B,KAAK4K,OAAOD,M,GAIZ3K,KAAAwG,mBAAsBU,IAC1B,MAAM2D,EAAU3D,EAAME,MAAQ4C,GAAS9C,EAAMI,UAAY6C,EACzD,MAAMW,EAAU5D,EAAME,MAAQ2D,GAAS7D,EAAMI,UAAY0D,EAEzD,IAAKF,GAAWD,KAAa7K,KAAK2B,YAAa,CAC3C3B,KAAK4K,OAAOD,M,GAIZ3K,KAAA8C,YAAc,O,cAj1BJ,M,cAQA,M,aAOD,M,oIAsCC,M,6GAyCO,O,kBAQH,K,UAMQ,M,yGAgCC,G,cASb,M,YAMMmI,EAAOC,c,eAmBF,M,gBAGC,M,qBAGI,MAS9B,MAAMC,EAAkB,IACxBnL,KAAKyI,cAAgB/K,EAASsC,KAAKyI,cAAe0C,GAElDnL,KAAKmI,SAAWiD,IAChBpL,KAAKmE,aAAeiH,IACpBpL,KAAKiF,QAAUmG,G,CAGZC,oBACHrL,KAAKM,Y,CAGFgL,mBACHtL,KAAKM,Y,CAGFiL,uBACH,GAAIvL,KAAKW,aAAc,CACnBX,KAAKW,aAAa6K,S,CAGtB1K,OAAO2K,oBAAoB,SAAUzL,KAAKgB,QAC1ChB,KAAKQ,gBAAgBiL,oBAAoB,QAASzL,KAAKkB,S,CAGpDwK,qBACH,GAAI1L,KAAKqE,QAAS,CACdrE,KAAKW,aAAagL,MAAQ,K,EAI3BC,SACH,MAAMpJ,EAAaxC,KAAKoD,qBACxBZ,EAAW,mBAAqBxC,KAAKiF,QACrCzC,EAAWU,MAAQ,wBACnBV,EAAWqJ,QAAU7L,KAAKwK,aAC1BhI,EAAWkB,QAAU1D,KAAK0D,QAC1BlB,EAAWqB,OAAS7D,KAAK6D,OACzBrB,EAAWV,SAAW9B,KAAK8B,SAC3BU,EAAWX,SAAW7B,KAAK6B,SAC3BW,EAAWZ,SAAW5B,KAAK4B,UAAY5B,KAAK6B,SAE5C,GAAI7B,KAAK+D,gBAAiB,CACtBvB,EAAW,iBAAmBxC,KAAKmE,aACnC3B,EAAW,oBAAsBxC,KAAKmE,Y,CAG1C,MAAO,CACH1B,EAAA,SAAOS,MAAOlD,KAAKwB,yBACfiB,EAAA,QAAMS,MAAM,sBAAsBkD,SAAS,MACvC3D,EAAA,QAAMS,MAAM,iCACXlD,KAAK8E,cACNrC,EAAA,QAAMS,MAAM,mCAEflD,KAAKkF,oBACLlF,KAAKsE,8BACLtE,KAAKyE,eACLzE,KAAK2G,wBACL3G,KAAKuC,YAAYC,GACjBxC,KAAKuE,eACLvE,KAAKiD,eAAeT,GACpBxC,KAAKoF,8BAEVpF,KAAKiE,mBACLjE,KAAK0I,yB,CAKHoD,aAAaC,GACnB,IAAK/L,KAAKW,aAAc,CACpB,M,CAGJ,GAAIoL,IAAa/L,KAAKW,aAAaoB,MAAO,CACtC/B,KAAKW,aAAaoB,MAAQgK,GAAY,E,EAKpCC,qBACNhM,KAAKa,gB,0ICzUN,MAAMoL,EAER5I,GAEGZ,EAAA,OAAKS,MAAM,kBACPT,EAAA,OACIS,MAAO,gEAEGG,EAAMzB,SAAW,sBAAwB,4BAGnDa,EAAA,SACIS,MAAM,4BACNhB,KAAK,QACL8C,GAAI3B,EAAM2B,GACVkH,QAAS7I,EAAM6I,QACftK,SAAUyB,EAAMzB,SAChB+H,SAAUtG,EAAMsG,WAEpBlH,EAAA,OAAKS,MAAM,yBACPT,EAAA,OAAKS,MAAM,4BACXT,EAAA,OAAKS,MAAM,8BAGnBT,EAAA,SACIS,MAAO,GAAGG,EAAMzB,SAAW,WAAa,KACxCuK,QAAS9I,EAAM2B,IAEd3B,EAAM3B,Q,MC/BV0K,EAAbjM,cACYH,KAAAqM,cAAoC,CACxCC,OAAQ,KACRC,WAAY,OAuERvM,KAAAwM,gCACJ3C,IAEA,IAAI5L,EACJ,IAAK,IAAIwO,EAAI,EAAGlP,EAAMsM,EAAM3F,OAAQuI,EAAIlP,EAAKkP,GAAK,EAAG,CACjD,GAAI,cAAe5C,EAAM4C,QAElB,CACH,MAAMpL,EAAOwI,EAAM4C,GACnB,GAAIpL,EAAKqL,SAAU,CACfzO,EAASwO,EACT,K,CAGJ,GAAIxO,IAAWc,YAAcsC,EAAKO,SAAU,CACxC3D,EAASwO,C,GAOrB,OAAOxO,CAAM,EAST+B,KAAA2M,eAAiB,CACrBtL,EACAuL,KAEA,GAAI,cAAevL,EAAM,CACrB,OACIoB,EAAA,MAAIS,MAAM,8BAA8BmD,KAAK,aACxCrG,KAAK6M,WAAWxL,GACjBoB,EAAA,OAAKS,MAAM,4B,CAKvB,GAAI,CAAC,QAAS,YAAY2C,SAAS7F,KAAKiL,OAAO/I,MAAO,CAClD,OAAOlC,KAAK8M,sBAAsB9M,KAAKiL,OAAQ5J,EAAMuL,E,CAGzD,MAAMG,EAAa,CACf,2BAA4B,KAC5B,qCAAsC1L,EAAKO,SAC3C,qCAAsCP,EAAKqL,SAC3C,wBAAyB1M,KAAKgN,oBAAoB3L,IAGtD,MAAM4L,EAAoC,GAC1C,GAAIL,IAAU5M,KAAKkN,2BAA4B,CAC3CD,EAAW7G,SAAW,G,CAG1B,OACI3D,EAAA,KAAAC,OAAAC,OAAA,CACIO,MAAO6J,EAAU,gBACF1L,EAAKO,SAAW,OAAS,QAAO,gBAChCP,EAAKqL,SAAW,OAAS,QAAO,aACnCE,GACRK,GAEH5L,EAAK8E,KAAOnG,KAAKmN,WAAWnN,KAAKiL,OAAQ5J,GAAQ,KACjDrB,KAAKoN,oBAAoB/L,GACzBrB,KAAKqN,WAAWhM,GAChBrB,KAAKsN,UAAYtN,KAAKuN,WAAavN,KAAKwN,gBAAkB,KAC1DxN,KAAKyN,iBAAiBpM,EAAKqM,SAC3B,EAIL1N,KAAA6M,WAAcxL,IAClB,GAAI,SAAUA,EAAM,CAChB,OAAOoB,EAAA,MAAIS,MAAM,4BAA4B7B,EAAKC,K,GAelDtB,KAAAgN,oBAAuB3L,I,MAC3B,UAAS8B,EAAA9B,IAAI,MAAJA,SAAI,SAAJA,EAAMsM,oBAAgB,MAAAxK,SAAA,SAAAA,EAAEgC,KAAI,EAQjCnF,KAAAqN,WAAchM,IAClB,GAAIrB,KAAK4N,aAAavM,GAAO,CACzB,OACIoB,EAAA,QAAMS,MAAM,kCAAkC7B,EAAKC,K,CAI3D,OACImB,EAAA,OAAKS,MAAM,kCACPT,EAAA,OAAKS,MAAM,kDACPT,EAAA,OAAKS,MAAM,0CACN7B,EAAKC,OAGdmB,EAAA,OAAKS,MAAM,4CACN7B,EAAKwM,eAER,EAIN7N,KAAA4N,aAAgBvM,KACX,kBAAmBA,GASxBrB,KAAAmN,WAAa,CAAClC,EAA4B5J,KAC9C,MAAM+H,EAAa,GACnB,MAAMjE,EAAO2I,EAAYzM,EAAK8E,MAC9B,MAAM4H,EAAQC,EAAa3M,EAAK8E,KAAM9E,EAAK4M,WAE3C,GAAIF,EAAO,CACP,GAAI9C,EAAOsB,WAAY,CACnBnD,EAAM,2BAA6B2E,C,KAChC,CACH3E,EAAM2E,MAAQA,C,EAItB,OACItL,EAAA,cACIyL,MAAOjD,EAAOsB,WACdrJ,MAAM,oCACNiC,KAAMA,EACNiE,MAAOA,EACP+E,KAAMlD,EAAOmD,UACf,EAIFpO,KAAAwN,cAAgB,KACpB,MAAMa,EAAU,CACZ,8BAA+B,KAC/B,qCAAsC,MAE1C,GAAIrO,KAAKiL,OAAOmD,SAAU,CACtBC,EAAQrO,KAAKiL,OAAOmD,UAAY,I,CAGpC,OAAO3L,EAAA,MAAIS,MAAOmL,GAAW,EAGzBrO,KAAAyN,iBAAoBC,IACxB,IAAKA,GAAWA,EAAQxJ,SAAW,EAAG,CAClC,M,CAGJ,OACIzB,EAAA,cACIS,MAAM,iCACN2G,MAAO6D,EACPY,cAAc,cAEd7L,EAAA,qBACIS,MAAM,sBACNqL,KAAK,UACLpI,KAAK,WAEA,EAIbnG,KAAA8M,sBAAwB,CAC5B7B,EACA5J,EACAuL,KAEA,IAAI4B,EACJ,GAAIvD,EAAO/I,OAAS,QAAS,CACzBsM,EACI/L,EAACwJ,EAAmB,CAChBjH,GAAI,KAAK4H,IACTV,QAAS7K,EAAKqL,SACd9K,SAAUP,EAAKO,U,MAGpB,GAAIqJ,EAAO/I,OAAS,WAAY,CACnCsM,EACI/L,EAACgM,EAAgB,CACbzJ,GAAI,KAAK4H,IACTV,QAAS7K,EAAKqL,SACd9K,SAAUP,EAAKO,U,CAK3B,MAAMmL,EAAa,CACf,2BAA4B,KAC5B,qCAAsC1L,EAAKO,SAC3C,kCAAmCP,EAAKwM,cACxC,wBAAyB7N,KAAKgN,oBAAoB3L,IAGtD,MAAM4L,EAAoC,GAC1C,GAAIL,IAAU5M,KAAKkN,2BAA4B,CAC3CD,EAAW7G,SAAW,G,CAG1B,OACI3D,EAAA,KAAAC,OAAAC,OAAA,CACIO,MAAO6J,EACP1G,KAAM4E,EAAO/I,KAAI,eACHb,EAAKqL,SAAW,OAAS,QAAO,gBAC/BrL,EAAKO,SAAW,OAAS,QAAO,aACnCgL,GACRK,GAEHjN,KAAK0O,6BAA6BzD,EAAQ5J,EAAMmN,GAChD,EAILxO,KAAA0O,6BAA+B,CACnCzD,EACA5J,EACAmN,KAEA,GAAIxO,KAAK2O,SAAU,CACf,MAAO,CACHtN,EAAK8E,KAAOnG,KAAKmN,WAAWlC,EAAQ5J,GAAQ,KAC5CrB,KAAKoN,oBAAoB/L,GACzBrB,KAAKqN,WAAWhM,GAChBoB,EAAA,OAAKS,MAAM,kCACNsL,G,CAKb,MAAO,CACH/L,EAAA,OAAKS,MAAM,qCAAqCsL,GAChDxO,KAAKoN,oBAAoB/L,GACzBrB,KAAKqN,WAAWhM,GACnB,C,CA/TEuK,OACH/B,EACAoB,EAA6B,IAE7BpB,EAAQA,GAAS,GACjB7J,KAAKiL,OAAMvI,OAAAC,OAAAD,OAAAC,OAAA,GAAQ3C,KAAKqM,eAAkBpB,GAE1CjL,KAAKsN,SAAWzD,EAAM+E,MAAMvN,GACjB,kBAAmBA,KAAUA,EAAKwM,gBAG7C7N,KAAK2O,SAAW9E,EAAM+E,MAAMvN,GACjB,SAAUA,KAAUA,EAAK8E,OAGpCnG,KAAKuN,WAAavN,KAAKiL,OAAOsB,YAAcvM,KAAK2O,SACjD,MAAME,EAAsB,CAAC,aAAc,QAAS,YAEpD,IAAIxI,EACJ,OAAQrG,KAAKiL,OAAO/I,MAChB,IAAK,WACDmE,EAAO,QACP,MACJ,IAAK,QACDA,EAAO,aACP,MACJ,QACIA,EAAO,UAGfrG,KAAKkN,2BACDlN,KAAKwM,gCAAgC3C,GAEzC,MAAMkD,EAAa,CACf,sBAAuB,KACvB,gCAAiC/M,KAAKsN,SACtCwB,WAAYD,EAAoBhJ,SAAS7F,KAAKiL,OAAO/I,MACrD,mCAAoClC,KAAKuN,WACzC,gBACIvN,KAAKsN,UACLtN,KAAK+O,YACL,CAAC,QAAS,WAAWlJ,SAAS7F,KAAKiL,OAAOmD,WAGlD,OACI3L,EAAA,MAAIS,MAAO6J,EAAY1G,KAAMA,EAAI,mBAAmB,YAC/CwD,EAAMzI,IAAIpB,KAAK2M,gB,CAgGpBS,oBAAoB/L,GACxB,IAAKrB,KAAKgN,oBAAoB3L,GAAO,CACjC,M,CAGJ,MAAM2N,EAAmB3N,EAAKsM,iBAAiBxI,KAC/C,MAAM9B,EAAQhC,EAAKsM,iBAAiBtK,MAEpC,OAAOZ,EAACuM,EAAgBtM,OAAAC,OAAA,GAAKU,G,EC5KrC,MAAM4L,EAAU,qt5JCgBhB,MAAMC,aAAEA,GAAiBC,E,MAwBZC,EAAI,M,uFAyCLpP,KAAAqP,aAAe,IAAIjD,EAyFnBpM,KAAAsP,MAAQ,KACZtP,KAAKuP,YAELvP,KAAKwP,gBAAgB,EAGjBxP,KAAAuP,UAAY,KAChB,GAAIvP,KAAKyP,QAAS,CACdzP,KAAK0P,WACL1P,KAAKyP,QAAU,I,CAGnB,MAAMlP,EAAUP,KAAKO,QAAQE,WAAWC,cACpC,wBAEJ,IAAKH,EAAS,CACV,M,CAGJP,KAAKyP,QAAU,IAAIE,EAAQpP,GAC3BP,KAAKyP,QAAQG,aAAe,IAAI,EAG5B5P,KAAAwP,eAAiB,KACrB,IAAKxP,KAAKyP,QAAS,CACf,M,CAGJzP,KAAKyP,QAAQI,SAASX,EAAclP,KAAK8P,cAEzC9P,KAAK8O,WAAa,CAAC,aAAc,QAAS,YAAYjJ,SAClD7F,KAAKkC,MAETlC,KAAK+P,SAAW/P,KAAKkC,OAAS,WAE9B,IAAKlC,KAAK8O,WAAY,CAClB,M,CAGJ9O,KAAKyP,QAAQO,OAAOd,EAAclP,KAAK8P,cACvC9P,KAAKyP,QAAQQ,iBAAmBjQ,KAAK+P,QAAQ,EAGzC/P,KAAA0P,SAAW,K,SACfvM,EAAAnD,KAAKyP,WAAO,MAAAtM,SAAA,SAAAA,EAAE0M,SAASX,EAAclP,KAAK8P,eAC1CI,EAAAlQ,KAAKyP,WAAO,MAAAS,SAAA,SAAAA,EAAE1E,SAAS,EAGnBxL,KAAA8P,aAAgB5I,IACpB,IAAKlH,KAAK+P,SAAU,CAChB/P,KAAKmQ,mBAAmBjJ,EAAMsB,OAAOoE,OAErC,M,CAGJ5M,KAAKoQ,kBAAkBlJ,EAAMsB,OAAOoE,MAAM,EAGtC5M,KAAAmQ,mBAAsBvD,IAC1B,MAAMyD,EAAYrQ,KAAK6J,MAAMO,OAAOpK,KAAKsQ,YACzC,GAAID,EAAUzD,GAAOhL,SAAU,CAC3B,M,CAGJ,MAAM2O,EAAyBF,EAAUG,MAAMnP,KAClCA,EAAKqL,WAGlB,GAAI6D,EAAc,CACdvQ,KAAK0K,OAAOC,KAAIjI,OAAAC,OAAAD,OAAAC,OAAA,GAAM4N,GAAY,CAAE7D,SAAU,Q,CAGlD,GAAI2D,EAAUzD,KAAW2D,EAAc,CACnCvQ,KAAK0K,OAAOC,KAAIjI,OAAAC,OAAAD,OAAAC,OAAA,GAAM0N,EAAUzD,IAAM,CAAEF,SAAU,O,GAIlD1M,KAAAoQ,kBAAqBxD,IACzB,MAAMyD,EAAYrQ,KAAK6J,MAAMO,OAAOpK,KAAKsQ,YACzC,GAAID,EAAUzD,GAAOhL,SAAU,CAC3B,M,CAGJ,MAAM6O,EAA4BJ,EAC7BjG,QAAO,CAAC/I,EAAgBqP,KACrB,GAAIA,IAAc9D,EAAO,CAGrB,OAAQvL,EAAKqL,Q,CAIjB,OAAOrL,EAAKqL,QAAQ,IAEvBtL,KAAKC,GACFqB,OAAAC,OAAAD,OAAAC,OAAA,GAAYtB,GAAI,CAAEqL,SAAU,SAGpC1M,KAAK0K,OAAOC,KAAK8F,EAAc,EAG3BzQ,KAAAsQ,WAAcjP,KACT,cAAeA,G,6DAvNA,Q,+CAkBY,C,CAwBjCgK,oBACHrL,KAAKsP,O,CAGF/D,uBACHvL,KAAK0P,U,CAGFpE,mBACHtL,KAAKsP,QACLtP,KAAK2Q,yB,CAGF/E,S,MACH5L,KAAKiL,OAAS,CACVsB,WAAYvM,KAAKuM,WACjBrK,KAAMlC,KAAKkC,KACXkM,SAAUpO,KAAKoO,UAEnB,IAAIwC,KAAyBzN,EAAAnD,KAAK4Q,yBAAqB,MAAAzN,SAAA,SAAAA,EAAE0N,WACzD,GAAI7Q,KAAK4Q,sBAAwB,EAAG,CAChCA,EAAwB,C,CAG5B,MAAMvL,EAAOrF,KAAKqP,aAAazD,OAAO5L,KAAK6J,MAAO7J,KAAKiL,QAEvD,OACIxI,EAACqO,EAAI,CACD1H,MAAO,CACH,0BAA2B,GAAGwH,MAGjCvL,E,CAMH0L,aACN/Q,KAAKwP,gB,CAICwB,eACN,IAAKhR,KAAKyP,QAAS,CACf,M,CAGJvQ,YAAW,KACPc,KAAKsP,QAEL,MAAMe,EAAYrQ,KAAK6J,MAAMO,OAAOpK,KAAKsQ,YAEzC,GAAItQ,KAAK+P,SAAU,CACf/P,KAAKyP,QAAQwB,cAAgBZ,EACxBjG,QAAQ/I,GAAmBA,EAAKqL,WAChCtL,KAAKC,GAAmBgP,EAAU9F,QAAQlJ,I,KAC5C,CACH,MAAM4P,EAAgBZ,EAAUa,WAC3B7P,GAAmBA,EAAKqL,WAG7B,GAAIuE,KAAmB,EAAG,CACtBjR,KAAKyP,QAAQ0B,oB,KACV,CACHnR,KAAKyP,QAAQwB,cAAgBA,C,KAGtC,E,CA4GCN,0BACJ,GAAI3Q,KAAK6J,MAAM+E,MAAMvN,GAAS,cAAeA,IAAO,CAEhD+P,QAAQC,KACJ,uK,oHCvRhB,MAAMC,EAAiB,0nI,MC0BVC,EAAW,M,0DAoDZvR,KAAAsP,MAAQ,KACZ,MAAMkC,EACFxR,KAAKyR,KAAKhR,WAAWC,cAAc,qBACvC,IAAK8Q,EAAa,CACd,M,CAGJxR,KAAK0R,YAAc,IAAIC,EAAeH,GACtCxR,KAAK0R,YAAYE,gBAAgBC,EAAOC,WAExC5J,SAASnH,iBAAiB,YAAaf,KAAK+R,oBAAqB,CAC7DC,QAAS,OAEbhS,KAAKyR,KAAK1Q,iBAAiB,UAAWf,KAAKiS,eAC3CnR,OAAOC,iBAAiB,SAAUf,KAAKkS,aAAc,CACjDjR,QAAS,MACX,EAGEjB,KAAA0P,SAAW,K,OACfvM,EAAAnD,KAAK0R,eAAW,MAAAvO,SAAA,SAAAA,EAAEqI,UAClBtD,SAASuD,oBAAoB,YAAazL,KAAK+R,oBAAqB,CAChEC,QAAS,OAEbhS,KAAKyR,KAAKhG,oBAAoB,UAAWzL,KAAKiS,eAC9CnR,OAAO2K,oBAAoB,SAAUzL,KAAKkS,aAAa,EAGnDlS,KAAA+R,oBAAuB7K,IAC3B,MAAMiL,EAAcjL,EAAMkL,aAAelL,EAAMkL,eAAiB,GAEhE,IAAKpS,KAAKkJ,KAAM,CACZ,M,CAGJ,GAAImJ,EAAanL,EAAMlB,OAAQhG,KAAKyR,MAAO,CACvC,M,CAGJ,GAAIzR,KAAKmJ,mBAAoB,CACzB,MAAMmJ,EAA0BH,EAAYtM,SACxC7F,KAAKmJ,oBAGT,GAAImJ,EAAyB,CACzB,M,EAIRtS,KAAKuS,QAAQ5H,OACb3K,KAAKwS,8BAA8B,EAG/BxS,KAAAkS,aAAe,KACnB,GAAIlS,KAAKkJ,KAAM,CACXlJ,KAAKuS,QAAQ5H,M,GAIb3K,KAAAwS,6BAA+B,KAMnCtK,SAASnH,iBAAiB,QAASf,KAAKyS,UAAW,CAC/CT,QAAS,KACTU,KAAM,OAGVxK,SAASnH,iBAAiB,UAAWf,KAAKyS,UAAW,CACjDT,QAAS,KACTU,KAAM,OAKVxK,SAASnH,iBACL,WACA,KACImH,SAASuD,oBAAoB,QAASzL,KAAKyS,UAAW,CAClDT,QAAS,MACX,GAEN,CACIU,KAAM,MAEb,EAGG1S,KAAAyS,UAAavL,IACjBA,EAAMqB,kBACNrB,EAAMkB,gBAAgB,EAGlBpI,KAAAiS,cAAiB/K,IACrB,MAAMyL,EACFzL,EAAME,MAAQ2C,GAAU7C,EAAMI,UAAY4C,EAC9C,MAAM0I,EAAQ1L,EAAME,MAAQC,GAAOH,EAAMI,UAAYC,EAErD,GAAIvH,KAAKkJ,OAASyJ,GAAYC,GAAQ,CAClC1L,EAAMqB,kBACNvI,KAAKuS,QAAQ5H,M,aArJP,M,kCAmBPU,oBACHrL,KAAKsP,O,CAGF/D,uBACHvL,KAAK0P,U,CAGFpE,mBACHtL,KAAKsP,O,CAGF1D,SACH,MAAMnK,EAAY,CACd,WAAY,KACZ,mBAAoB,KACpB,yBAA0BzB,KAAKkJ,KAC/B,2BAA4B,KAC5B,oBAAqB,MAGzB,OACIzG,EAAA,OAAKS,MAAOzB,EAAW2E,SAAS,MAC5B3D,EAAA,a"}

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ListSeparator } from '../list/list-item.types';
-import { OpenDirection, MenuItem, SurfaceWidth } from './menu.types';
+import { OpenDirection, MenuItem, SurfaceWidth, MenuSearcher } from './menu.types';
 /**
  * @slot trigger - Element to use as a trigger for the menu.
  * @exampleComponent limel-example-menu-basic
@@ -17,6 +17,7 @@ import { OpenDirection, MenuItem, SurfaceWidth } from './menu.types';
  * @exampleComponent limel-example-menu-sub-menus
  * @exampleComponent limel-example-menu-sub-menu-lazy-loading
  * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
+ * @exampleComponent limel-example-menu-searchable
  * @exampleComponent limel-example-menu-composite
  */
 export declare class Menu {
@@ -76,6 +77,19 @@ export declare class Menu {
    * Is emitted when a menu item is selected.
    */
   select: EventEmitter<MenuItem>;
+  /**
+   * A search function that takes a search-string as an argument,
+   * and returns a promise that will eventually be resolved with
+   * an array of `MenuItem`:s.
+   *
+   * See the docs for the type `MenuSearcher` for type information on
+   * the searcher function itself.
+   */
+  searcher: MenuSearcher;
+  /**
+   * Message to display when search returns 0 results.
+   */
+  emptyResultMessage?: string;
   /**
    * Is emitted when a menu item with a sub-menu is selected.
    */
@@ -83,26 +97,31 @@ export declare class Menu {
   private host;
   private loadingSubItems;
   private menuBreadCrumb;
+  private searchValue;
+  private searchResults;
   private list;
+  private searchInput;
   private portalId;
   private triggerElement;
+  private debouncedSearch;
   constructor();
+  componentDidLoad(): void;
   componentDidRender(): void;
   render(): any;
   protected itemsWatcher(): void;
   protected openWatcher(newValue: boolean): void;
   protected currentSubMenuWatcher(): void;
+  protected createDebouncedSearcher(newValue: MenuSearcher): void;
   private renderLoader;
   private renderBreadcrumb;
   private handleBreadcrumbsSelect;
+  private renderSearchField;
+  private renderEmptyMessage;
   private renderMenuList;
-  /**
-   * Key handler for the menu list
-   * Can go forward/back with righ/left arrow keys
-   * @param {KeyboardEvent} event event
-   * @returns {void}
-   */
+  private handleTextInput;
+  private handleInputKeyDown;
   private handleMenuKeyDown;
+  private clearSearch;
   private getCurrentItem;
   private goForward;
   private goBack;
@@ -114,6 +133,7 @@ export declare class Menu {
   private getCssProperties;
   private setListElement;
   private setFocus;
+  private setSearchElement;
   private focusMenuItem;
   private isMenuItem;
   private renderNotificationBadge;

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

@@ -80,6 +80,14 @@ export interface MenuItem<T = any> {
    */
   parentItem?: MenuItem;
 }
+/**
+ * A search function that takes a search-string as an argument, and returns
+ * a promise that will eventually be resolved with an array of `MenuItem`:s.
+ * @param {string} query A search query. What the user has written
+ * in the input field of a limel-menu.
+ * @returns {Promise<MenuItem[]>} The search result.
+ */
+export type MenuSearcher = (query: string) => Promise<MenuItem[]>;
 /**
  * A loader function that takes a `MenuItem` as an argument, and returns
  * a promise that will eventually be resolved with an array of `MenuItem`:s,

package/dist/types/components.d.ts

@@ -9,14 +9,14 @@ import { Action as Action1, ActionBarItem, ActionPosition, ActionScrollBehavior,
 import { Action } from "./components/collapsible-section/action";
 import { Languages as Languages1, ListItem } from "@limetech/lime-elements";
 import { OfficeViewer } from "./components/file-viewer/file-viewer.types";
-import { MenuItem as MenuItem1, OpenDirection as OpenDirection1, SurfaceWidth } from "./components/menu/menu.types";
+import { MenuItem as MenuItem1, MenuSearcher, OpenDirection as OpenDirection1, SurfaceWidth } from "./components/menu/menu.types";
 import { ListSeparator as ListSeparator1 } from "./components/list/list-item.types";
 import { Layout } from "./components/table/layout";
 export { Action as Action1, ActionBarItem, ActionPosition, ActionScrollBehavior, BreadcrumbsItem, Button, CalloutType, Chip, CircularProgressSize, ClosingActions, ColorScheme, Column, ColumnAggregate, ColumnSorter, DateType, DialogHeading, DockItem, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, FlowItem, FormError, IconSize, InfoTileProgress, InputType, Language, Languages, Link, ListItem as ListItem1, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize, Tab, TableParams, ValidationError, ValidationStatus } from "./interface";
 export { Action } from "./components/collapsible-section/action";
 export { Languages as Languages1, ListItem } from "@limetech/lime-elements";
 export { OfficeViewer } from "./components/file-viewer/file-viewer.types";
-export { MenuItem as MenuItem1, OpenDirection as OpenDirection1, SurfaceWidth } from "./components/menu/menu.types";
+export { MenuItem as MenuItem1, MenuSearcher, OpenDirection as OpenDirection1, SurfaceWidth } from "./components/menu/menu.types";
 export { ListSeparator as ListSeparator1 } from "./components/list/list-item.types";
 export { Layout } from "./components/table/layout";
 export namespace Components {
@@ -1409,6 +1409,7 @@ export namespace Components {
      * @exampleComponent limel-example-menu-sub-menus
      * @exampleComponent limel-example-menu-sub-menu-lazy-loading
      * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
+     * @exampleComponent limel-example-menu-searchable
      * @exampleComponent limel-example-menu-composite
      */
     interface LimelMenu {
@@ -1424,6 +1425,10 @@ export namespace Components {
           * Sets the disabled state of the menu.
          */
         "disabled": boolean;
+        /**
+          * Message to display when search returns 0 results.
+         */
+        "emptyResultMessage"?: string;
         /**
           * Renders list items in a grid layout, rather than a vertical list
          */
@@ -1444,6 +1449,10 @@ export namespace Components {
           * Decides the menu's location in relation to its trigger
          */
         "openDirection": OpenDirection1;
+        /**
+          * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `MenuItem`:s.  See the docs for the type `MenuSearcher` for type information on the searcher function itself.
+         */
+        "searcher": MenuSearcher;
         /**
           * Decides the width of menu's dropdown
          */
@@ -3075,6 +3084,7 @@ declare global {
      * @exampleComponent limel-example-menu-sub-menus
      * @exampleComponent limel-example-menu-sub-menu-lazy-loading
      * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
+     * @exampleComponent limel-example-menu-searchable
      * @exampleComponent limel-example-menu-composite
      */
     interface HTMLLimelMenuElement extends Components.LimelMenu, HTMLStencilElement {
@@ -5037,6 +5047,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-menu-sub-menus
      * @exampleComponent limel-example-menu-sub-menu-lazy-loading
      * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
+     * @exampleComponent limel-example-menu-searchable
      * @exampleComponent limel-example-menu-composite
      */
     interface LimelMenu {
@@ -5048,6 +5059,10 @@ declare namespace LocalJSX {
           * Sets the disabled state of the menu.
          */
         "disabled"?: boolean;
+        /**
+          * Message to display when search returns 0 results.
+         */
+        "emptyResultMessage"?: string;
         /**
           * Renders list items in a grid layout, rather than a vertical list
          */
@@ -5076,6 +5091,10 @@ declare namespace LocalJSX {
           * Decides the menu's location in relation to its trigger
          */
         "openDirection"?: OpenDirection1;
+        /**
+          * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `MenuItem`:s.  See the docs for the type `MenuSearcher` for type information on the searcher function itself.
+         */
+        "searcher"?: MenuSearcher;
         /**
           * Decides the width of menu's dropdown
          */
@@ -6533,6 +6552,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-menu-sub-menus
              * @exampleComponent limel-example-menu-sub-menu-lazy-loading
              * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
+             * @exampleComponent limel-example-menu-searchable
              * @exampleComponent limel-example-menu-composite
              */
             "limel-menu": LocalJSX.LimelMenu & JSXBase.HTMLAttributes<HTMLLimelMenuElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.66",
+  "version": "37.1.0-next.67",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",