@limetech/lime-elements 37.3.0 → 37.4.0

package/dist/lime-elements/p-dfa06174.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","globalConfig","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","config","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.lime-text-field--empty {\n    .mdc-text-field__icon--trailing {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\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\n// To make the input field render smaller than the default MDC UI\n.mdc-text-field {\n    &.mdc-text-field--outlined {\n        height: shared_input-select-picker.$height-of-mdc-text-field;\n    }\n}\n.mdc-text-field--with-trailing-icon {\n    .mdc-text-field__icon--trailing {\n        padding: 0.25rem;\n        margin-right: 0.25rem;\n    }\n}\n.mdc-text-field--outlined.mdc-text-field--with-leading-icon {\n    .mdc-text-field__icon--leading {\n        margin-left: 0.25rem;\n    }\n    .mdc-floating-label {\n        left: 1.5rem;\n    }\n}\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 } from '../input-field/input-field.types';\nimport { ListItem } from '../list/list-item.types';\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 { globalConfig } 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 = globalConfig.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     *\n     * @param event - event\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()) >\n                -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 } from '../list/list-item.types';\nimport { MenuItem } from '../menu/menu.types';\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     *\n     * @param items - the items of the list, including any `ListSeparator`:s\n     * @returns 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     *\n     * @param item - the item to render\n     * @param index - the index the item had in the `items` array\n     * @returns 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                {this.renderIcon(this.config, item)}\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     *\n     * @param item - the list item\n     * @returns 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     *\n     * @param config - the config object, passed on from the `renderListItem` function\n     * @param item - the list item\n     * @returns the icon element\n     */\n    private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n        const style: any = {};\n        const name = getIconName(item.icon);\n        if (!name) {\n            return;\n        }\n\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-deprecated-list-item__secondary-text {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\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        min-height: 2.5rem;\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) - var(\n                            --list-right-padding\n                        )\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    }\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 } from '../icon/icon.types';\nimport { ListItem, ListSeparator } from './list-item.types';\nimport { ListType } from './list.types';\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":"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"}

package/dist/lime-elements/style/internal/shared_input-select-picker.scss

@@ -25,7 +25,7 @@ $input-text-leading-icon-color: rgb(var(--contrast-900));
 $input-text-color-disabled: rgba(var(--contrast-1400), 0.5);
 $helper-text-color: $label-color;
 
-$height-of-mdc-text-field: 3.5rem; //This is written directly in rem, beucase the vaiable used to calculate things elsewhere
+$height-of-mdc-text-field: 2.5rem; //This is written directly in `rem`, becurse the variable used to calculate things elsewhere
 $height-of-mdc-helper-text-block: 0.9375rem;
 
 $mdc-chip-background-color: rgb(var(--contrast-100));
@@ -119,6 +119,15 @@ $cropped-label-hack--font-size: 0.875rem; //14px
             }
         }
     }
+
+    .mdc-floating-label--float-above {
+        transform: translateY(#{functions.pxToRem(-27)}) scale(0.75) !important;
+
+        .mdc-text-field--with-leading-icon & {
+            transform: translateY(#{functions.pxToRem(-25)})
+                translateX(#{functions.pxToRem(-20)}) scale(0.75) !important;
+        }
+    }
 }
 
 @mixin outlined-style-overrides {
@@ -325,7 +334,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 
                 limel-icon {
                     width: 1.5rem;
-                    margin-right: 0.5rem;
+                    margin-right: 0.25rem;
                 }
             }
 

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

@@ -40,6 +40,7 @@ import { Icon } from '../../interface';
  * :::
  *
  * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-slot-actions
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow

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

@@ -6,7 +6,6 @@ import { Option } from '../select/option.types';
  * @exampleComponent limel-example-select-with-empty-option
  * @exampleComponent limel-example-select-preselected
  * @exampleComponent limel-example-select-change-options
- * @exampleComponent limel-example-select-narrow
  * @exampleComponent limel-example-select-dialog
  */
 export declare class Select {

package/dist/types/components.d.ts

@@ -1157,6 +1157,7 @@ export namespace Components {
      * and take a lot of attention from users.
      * :::
      * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
      * @exampleComponent limel-example-header-narrow
@@ -1928,7 +1929,6 @@ export namespace Components {
      * @exampleComponent limel-example-select-with-empty-option
      * @exampleComponent limel-example-select-preselected
      * @exampleComponent limel-example-select-change-options
-     * @exampleComponent limel-example-select-narrow
      * @exampleComponent limel-example-select-dialog
      */
     interface LimelSelect {
@@ -3132,6 +3132,7 @@ declare global {
      * and take a lot of attention from users.
      * :::
      * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
      * @exampleComponent limel-example-header-narrow
@@ -3514,7 +3515,6 @@ declare global {
      * @exampleComponent limel-example-select-with-empty-option
      * @exampleComponent limel-example-select-preselected
      * @exampleComponent limel-example-select-change-options
-     * @exampleComponent limel-example-select-narrow
      * @exampleComponent limel-example-select-dialog
      */
     interface HTMLLimelSelectElement extends Components.LimelSelect, HTMLStencilElement {
@@ -5020,6 +5020,7 @@ declare namespace LocalJSX {
      * and take a lot of attention from users.
      * :::
      * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
      * @exampleComponent limel-example-header-narrow
@@ -5843,7 +5844,6 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-select-with-empty-option
      * @exampleComponent limel-example-select-preselected
      * @exampleComponent limel-example-select-change-options
-     * @exampleComponent limel-example-select-narrow
      * @exampleComponent limel-example-select-dialog
      */
     interface LimelSelect {
@@ -6880,6 +6880,7 @@ declare module "@stencil/core" {
              * and take a lot of attention from users.
              * :::
              * @exampleComponent limel-example-header
+             * @exampleComponent limel-example-header-slot-actions
              * @exampleComponent limel-example-header-colors
              * @exampleComponent limel-example-header-responsive
              * @exampleComponent limel-example-header-narrow
@@ -7162,7 +7163,6 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-select-with-empty-option
              * @exampleComponent limel-example-select-preselected
              * @exampleComponent limel-example-select-change-options
-             * @exampleComponent limel-example-select-narrow
              * @exampleComponent limel-example-select-dialog
              */
             "limel-select": LocalJSX.LimelSelect & JSXBase.HTMLAttributes<HTMLLimelSelectElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.3.0",
+  "version": "37.4.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^18.6.2",
-    "@microsoft/api-extractor": "^7.40.1",
+    "@microsoft/api-extractor": "^7.40.2",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -54,11 +54,11 @@
     "@types/html-escaper": "^3.0.2",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",

package/dist/lime-elements/p-1291ed2c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as t,g as r}from"./p-3075aa67.js";import{d as n}from"./p-c70b1ea3.js";import{m as i,r as s}from"./p-fa37036b.js";import{c as a}from"./p-3ccdc4a3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;padding-right:0.5rem;height:3rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}';const c=class{constructor(r){e(this,r);this.open=o(this,"open",7);this.close=o(this,"close",7);this.action=o(this,"action",7);this.bodyId=a();this.onClick=()=>{this.handleInteraction()};this.handleInteraction=()=>{this.isOpen=!this.isOpen;if(this.isOpen){this.open.emit();const e=100;setTimeout(n,e)}else{this.close.emit()}};this.renderActions=()=>{if(!this.actions){return}return t("div",{class:"actions"},this.actions.map(this.renderActionButton))};this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)});this.handleActionClick=e=>o=>{o.stopPropagation();this.action.emit(e)};this.isOpen=false;this.header=undefined;this.actions=undefined}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");i(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");s(e)}render(){return t("section",{class:`${this.isOpen?"open":""}`},t("header",null,t("button",{class:"open-close-toggle",onClick:this.onClick,"aria-controls":this.bodyId}),t("div",{class:"expand-icon"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"})),t("h2",{class:"title mdc-typography mdc-typography--headline2"},this.header),t("div",{class:"divider-line"}),this.renderActions()),t("div",{class:"body","aria-hidden":String(!this.isOpen),id:this.bodyId},t("slot",null)))}get host(){return r(this)}};c.style=l;export{c as limel_collapsible_section};
-//# sourceMappingURL=p-1291ed2c.entry.js.map

package/dist/lime-elements/p-1291ed2c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","bodyId","createRandomString","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderActions","actions","h","class","map","renderActionButton","action","icon","label","disabled","handleActionClick","event","stopPropagation","componentDidRender","button","host","shadowRoot","querySelector","makeEnterClickable","disconnectedCallback","removeEnterClickable","render","header","String","id"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n    height: 3rem;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from 'src/util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"mappings":"4KAAA,MAAMA,EAAwB,soM,MC6BjBC,EAAkB,M,gHAwCnBC,KAAAC,OAASC,IAkDTF,KAAAG,QAAU,KACdH,KAAKI,mBAAmB,EAGpBJ,KAAAI,kBAAoB,KACxBJ,KAAKK,QAAUL,KAAKK,OAEpB,GAAIL,KAAKK,OAAQ,CACbL,KAAKM,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHR,KAAKW,MAAMJ,M,GAIXP,KAAAY,cAAgB,KACpB,IAAKZ,KAAKa,QAAS,CACf,M,CAGJ,OACIC,EAAA,OAAKC,MAAM,WACNf,KAAKa,QAAQG,IAAIhB,KAAKiB,oBACrB,EAINjB,KAAAiB,mBAAsBC,GAEtBJ,EAAA,qBACIK,KAAMD,EAAOC,KACbC,MAAOF,EAAOE,MACdC,SAAUH,EAAOG,SACjBlB,QAASH,KAAKsB,kBAAkBJ,KAKpClB,KAAAsB,kBAAqBJ,GAAoBK,IAC7CA,EAAMC,kBACNxB,KAAKkB,OAAOX,KAAKW,EAAO,E,YA9HH,M,6CAqClBO,qBACH,MAAMC,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJC,EAAmBJ,E,CAGhBK,uBACH,MAAML,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJG,EAAqBN,E,CAGlBO,SACH,OACInB,EAAA,WAASC,MAAO,GAAGf,KAAKK,OAAS,OAAS,MACtCS,EAAA,cACIA,EAAA,UACIC,MAAM,oBACNZ,QAASH,KAAKG,QAAO,gBACNH,KAAKC,SAExBa,EAAA,OAAKC,MAAM,eACPD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAEfD,EAAA,MAAIC,MAAM,kDACLf,KAAKkC,QAEVpB,EAAA,OAAKC,MAAM,iBACVf,KAAKY,iBAEVE,EAAA,OACIC,MAAM,OAAM,cACCoB,QAAQnC,KAAKK,QAC1B+B,GAAIpC,KAAKC,QAETa,EAAA,c"}

package/dist/lime-elements/p-5240b8a3.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,H as t}from"./p-3075aa67.js";const s=":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";const r=class{constructor(t){e(this,t);this.hasContent=()=>!!(this.maxLength>0||this.helperText&&this.helperText.length>0);this.renderHelperText=()=>{if(!this.helperText){return}return i("span",{class:"helper-text",id:this.helperTextId},this.helperText)};this.renderCharacterCounter=()=>{const e=`${this.length} / ${this.maxLength}`;if(!this.maxLength){return}return i("span",{class:"counter"},e)};this.helperText=undefined;this.length=undefined;this.maxLength=undefined;this.invalid=false;this.helperTextId=undefined}render(){return i(t,{tabIndex:-1,class:{invalid:this.invalid},style:!this.hasContent()?{display:"none"}:{},"aria-hidden":!this.hasContent()},i("div",null,this.renderHelperText(),this.renderCharacterCounter()))}};r.style=s;export{r as limel_helper_line};
-//# sourceMappingURL=p-5240b8a3.entry.js.map

package/dist/lime-elements/p-5240b8a3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["helperLineCss","HelperLine","this","hasContent","maxLength","helperText","length","renderHelperText","h","class","id","helperTextId","renderCharacterCounter","counter","render","Host","tabIndex","invalid","style","display"],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":[":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,6xB,MC2BTC,EAAU,M,yBAqDXC,KAAAC,WAAa,OAEbD,KAAKE,UAAY,GAChBF,KAAKG,YAAcH,KAAKG,WAAWC,OAAS,GAI7CJ,KAAAK,iBAAmB,KACvB,IAAKL,KAAKG,WAAY,CAClB,M,CAGJ,OACIG,EAAA,QAAMC,MAAM,cAAcC,GAAIR,KAAKS,cAC9BT,KAAKG,WACH,EAIPH,KAAAU,uBAAyB,KAC7B,MAAMC,EAAU,GAAGX,KAAKI,YAAYJ,KAAKE,YAEzC,IAAKF,KAAKE,UAAW,CACjB,M,CAGJ,OAAOI,EAAA,QAAMC,MAAM,WAAWI,EAAe,E,sFApDtB,M,4BAQpBC,SACH,OACIN,EAACO,EAAI,CACDC,UAAW,EACXP,MAAO,CACHQ,QAASf,KAAKe,SAElBC,OAAQhB,KAAKC,aAAe,CAAEgB,QAAS,QAAW,GAAE,eACtCjB,KAAKC,cAEnBK,EAAA,WACKN,KAAKK,mBACLL,KAAKU,0B"}

package/dist/lime-elements/p-91aaa8b4.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,g as i}from"./p-3075aa67.js";import{a as o}from"./p-2f777fdb.js";const r=":host{--step-height:2.5rem;--selected-indicator-right:-0.5rem;--max-text-width:10rem;isolation:isolate;box-sizing:border-box;width:100%;display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0.25rem}:host::-webkit-scrollbar{display:none}:host(.is-narrow){--step-height:1.5rem;--selected-indicator-right:0}";const n=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.renderRegularFlowItem=(t,e,i)=>s("limel-progress-flow-item",{class:{"flow-item":true,first:e===0,last:e===i.length-1,passed:e<this.selectedItemIndex,selected:t.selected},style:this.getItemStyle(t),disabled:this.disabled||this.readonly,readonly:this.readonly,item:t,onInteract:this.handleFlowItemClick(t),"data-tracking-value":t.value,currentStep:e===this.selectedItemIndex});this.renderEndPhaseItem=(t,e,i)=>s("limel-progress-flow-item",{class:{"flow-item":true,"off-progress-item":true,selected:t.selected,"first-off-progress-item":e===0,"last-off-progress-item":e===i.length-1},style:this.getItemStyle(t),disabled:this.disabled||this.readonly,readonly:this.readonly,item:t,onInteract:this.handleFlowItemClick(t),"data-tracking-value":t.value});this.handleFlowItemClick=t=>()=>{if(!t.selected&&!t.disabled&&!this.disabled){this.change.emit(t)}};this.flowItems=[];this.disabled=false;this.readonly=false}componentDidRender(){this.scrollToSelectedItem()}componentDidLoad(){this.triggerIconColorWarning()}render(){const t=this.flowItems.filter((t=>!t.isOffProgress));const e=this.flowItems.filter((t=>t.isOffProgress));this.selectedItemIndex=t.findIndex((t=>t.selected));return[t.map(this.renderRegularFlowItem),e.map(this.renderEndPhaseItem)]}getItemStyle(t){const e=o(t.icon,t.iconColor);const s={};if(t===null||t===void 0?void 0:t.selectedColor){s["--progress-flow-step-background-color--selected"]=t.selectedColor}if(t===null||t===void 0?void 0:t.passedColor){s["--progress-flow-step-background-color--passed"]=t.passedColor}if(e){s["--progress-flow-icon-color--inactive"]=e}return s}scrollToSelectedItem(){const t=this.getElementForSelectedItem();if(t){const e=t.offsetLeft-this.element.offsetLeft;const s=e-this.element.offsetWidth/2;const i=s+t.offsetWidth/2;this.element.scrollTo({behavior:"smooth",left:i})}}getElementForSelectedItem(){return this.element.shadowRoot.querySelector(".flow-item.selected")}triggerIconColorWarning(){for(const t of this.flowItems){if(t.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}}get element(){return i(this)}};n.style=r;export{n as limel_progress_flow};
-//# sourceMappingURL=p-91aaa8b4.entry.js.map

package/dist/lime-elements/p-91aaa8b4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressFlowCss","ProgressFlow","this","renderRegularFlowItem","item","index","array","h","class","first","last","length","passed","selectedItemIndex","selected","style","getItemStyle","disabled","readonly","onInteract","handleFlowItemClick","value","currentStep","renderEndPhaseItem","flowItem","change","emit","componentDidRender","scrollToSelectedItem","componentDidLoad","triggerIconColorWarning","render","regularFlowItems","flowItems","filter","isOffProgress","endPhaseItems","findIndex","map","color","getIconColor","icon","iconColor","selectedColor","passedColor","selectedElement","getElementForSelectedItem","selectedItemLeftPosition","offsetLeft","element","selectedElementLeftPositionCentered","offsetWidth","selectedElementCentered","scrollTo","behavior","left","shadowRoot","querySelector","console","warn"],"sources":["./src/components/progress-flow/progress-flow.scss?tag=limel-progress-flow&encapsulation=shadow","./src/components/progress-flow/progress-flow.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/**\n* @prop --progress-flow-step-background-color: Background color of steps, defaults to `--contrast-600`.\n* @prop --progress-flow-step-background-color--selected: Background color of selected step, defaults to `--lime-primary-color`.\n* @prop --progress-flow-step-background-color--passed: Background color of passed steps, defaults to the background color the step has when selected.\n* @prop --progress-flow-step-text-color: Text of steps, defaults to `--contrast-1200`.\n* @prop --progress-flow-step-text-color--selected: Text color of selected step, defaults to `--lime-primary-color`.\n* @prop --progress-flow-step-text-color--passed: Text color of passed steps, defaults to the text color the step has when selected.\n* @prop --progress-flow-step-divider-color: Color of the arrow shaped dividers between steps which must be the same as component's background, defaults to `--contrast-100`.\n* @prop --progress-flow-icon-color--inactive: Color of the optional icons used in each step. Only affects inactive steps, defaults to text colors for inactive, active, or passed step.\n*/\n\n:host {\n    --step-height: 2.5rem;\n    --selected-indicator-right: -0.5rem;\n    --max-text-width: 10rem;\n\n    isolation: isolate;\n    box-sizing: border-box;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    overflow-x: auto;\n    scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n    -ms-overflow-style: none; // Same as above for IE 11\n    padding: functions.pxToRem(4); // needed for the focus effect\n\n    &::-webkit-scrollbar {\n        display: none; // This hides the scrollbars appearing under in Chrome\n    }\n}\n\n:host(.is-narrow) {\n    --step-height: 1.5rem;\n    --selected-indicator-right: 0;\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from './progress-flow.types';\nimport { getIconColor } from '../icon/get-icon-props';\n\n/**\n * @exampleComponent limel-example-progress-flow-basic\n * @exampleComponent limel-example-progress-flow-secondary-text\n * @exampleComponent limel-example-progress-flow-disabled-step\n * @exampleComponent limel-example-progress-flow-colors\n * @exampleComponent limel-example-progress-flow-colors-css\n * @exampleComponent limel-example-progress-flow-off-progress-steps\n * @exampleComponent limel-example-progress-flow-narrow\n */\n@Component({\n    tag: 'limel-progress-flow',\n    shadow: true,\n    styleUrl: 'progress-flow.scss',\n})\nexport class ProgressFlow {\n    @Element()\n    public element: HTMLLimelProgressFlowElement;\n\n    /**\n     * What flow items to render\n     */\n    @Prop()\n    public flowItems: FlowItem[] = [];\n\n    /**\n     * Set to `true` to disable the progress flow.\n     * Use `disabled` to indicate that the component can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * Disables the progress flow when `true`.\n     * This does not visualize the component that much differently.\n     * But since the component does not provide any feedback that users can\n     * interact with the component, it makes it perfect for illustrative and\n     * informative porpuses.\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * Fired when a new value has been selected from the progress flow\n     */\n    @Event()\n    public change: EventEmitter<FlowItem>;\n\n    private selectedItemIndex: number;\n\n    public componentDidRender() {\n        this.scrollToSelectedItem();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public render() {\n        const regularFlowItems = this.flowItems.filter((item) => {\n            return !item.isOffProgress;\n        });\n        const endPhaseItems = this.flowItems.filter((item) => {\n            return item.isOffProgress;\n        });\n        this.selectedItemIndex = regularFlowItems.findIndex((item) => {\n            return item.selected;\n        });\n\n        return [\n            regularFlowItems.map(this.renderRegularFlowItem),\n            endPhaseItems.map(this.renderEndPhaseItem),\n        ];\n    }\n\n    private renderRegularFlowItem = (\n        item: FlowItem,\n        index: number,\n        array: FlowItem[],\n    ) => {\n        return (\n            <limel-progress-flow-item\n                class={{\n                    'flow-item': true,\n                    first: index === 0,\n                    last: index === array.length - 1,\n                    passed: index < this.selectedItemIndex,\n                    selected: item.selected,\n                }}\n                style={this.getItemStyle(item)}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                item={item}\n                onInteract={this.handleFlowItemClick(item)}\n                data-tracking-value={item.value}\n                currentStep={index === this.selectedItemIndex}\n            />\n        );\n    };\n\n    private renderEndPhaseItem = (\n        item: FlowItem,\n        index: number,\n        array: FlowItem[],\n    ) => {\n        return (\n            <limel-progress-flow-item\n                class={{\n                    'flow-item': true,\n                    'off-progress-item': true,\n                    selected: item.selected,\n                    'first-off-progress-item': index === 0,\n                    'last-off-progress-item': index === array.length - 1,\n                }}\n                style={this.getItemStyle(item)}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                item={item}\n                onInteract={this.handleFlowItemClick(item)}\n                data-tracking-value={item.value}\n            />\n        );\n    };\n\n    private handleFlowItemClick = (flowItem: FlowItem) => () => {\n        if (!flowItem.selected && !flowItem.disabled && !this.disabled) {\n            this.change.emit(flowItem);\n        }\n    };\n\n    private getItemStyle(flowItem: FlowItem) {\n        const color = getIconColor(flowItem.icon, flowItem.iconColor);\n        const style: any = {};\n\n        if (flowItem?.selectedColor) {\n            style['--progress-flow-step-background-color--selected'] =\n                flowItem.selectedColor;\n        }\n\n        if (flowItem?.passedColor) {\n            style['--progress-flow-step-background-color--passed'] =\n                flowItem.passedColor;\n        }\n\n        if (color) {\n            style['--progress-flow-icon-color--inactive'] = color;\n        }\n\n        return style;\n    }\n\n    private scrollToSelectedItem() {\n        const selectedElement = this.getElementForSelectedItem();\n        if (selectedElement) {\n            const selectedItemLeftPosition =\n                selectedElement.offsetLeft - this.element.offsetLeft;\n            const selectedElementLeftPositionCentered =\n                // eslint-disable-next-line no-magic-numbers\n                selectedItemLeftPosition - this.element.offsetWidth / 2;\n            const selectedElementCentered =\n                selectedElementLeftPositionCentered +\n                // eslint-disable-next-line no-magic-numbers\n                selectedElement.offsetWidth / 2;\n            this.element.scrollTo({\n                behavior: 'smooth',\n                left: selectedElementCentered,\n            });\n        }\n    }\n\n    private getElementForSelectedItem(): HTMLLimelProgressFlowItemElement {\n        return this.element.shadowRoot.querySelector('.flow-item.selected');\n    }\n\n    private triggerIconColorWarning() {\n        for (const flowItem of this.flowItems) {\n            if (flowItem.iconColor) {\n                /* eslint-disable-next-line no-console */\n                console.warn(\n                    \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n                );\n            }\n        }\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,yX,MCyBXC,EAAY,M,wDA8DbC,KAAAC,sBAAwB,CAC5BC,EACAC,EACAC,IAGIC,EAAA,4BACIC,MAAO,CACH,YAAa,KACbC,MAAOJ,IAAU,EACjBK,KAAML,IAAUC,EAAMK,OAAS,EAC/BC,OAAQP,EAAQH,KAAKW,kBACrBC,SAAUV,EAAKU,UAEnBC,MAAOb,KAAKc,aAAaZ,GACzBa,SAAUf,KAAKe,UAAYf,KAAKgB,SAChCA,SAAUhB,KAAKgB,SACfd,KAAMA,EACNe,WAAYjB,KAAKkB,oBAAoBhB,GAAK,sBACrBA,EAAKiB,MAC1BC,YAAajB,IAAUH,KAAKW,oBAKhCX,KAAAqB,mBAAqB,CACzBnB,EACAC,EACAC,IAGIC,EAAA,4BACIC,MAAO,CACH,YAAa,KACb,oBAAqB,KACrBM,SAAUV,EAAKU,SACf,0BAA2BT,IAAU,EACrC,yBAA0BA,IAAUC,EAAMK,OAAS,GAEvDI,MAAOb,KAAKc,aAAaZ,GACzBa,SAAUf,KAAKe,UAAYf,KAAKgB,SAChCA,SAAUhB,KAAKgB,SACfd,KAAMA,EACNe,WAAYjB,KAAKkB,oBAAoBhB,GAAK,sBACrBA,EAAKiB,QAK9BnB,KAAAkB,oBAAuBI,GAAuB,KAClD,IAAKA,EAASV,WAAaU,EAASP,WAAaf,KAAKe,SAAU,CAC5Df,KAAKuB,OAAOC,KAAKF,E,kBAzGM,G,cASb,M,cAUA,K,CAUXG,qBACHzB,KAAK0B,sB,CAGFC,mBACH3B,KAAK4B,yB,CAGFC,SACH,MAAMC,EAAmB9B,KAAK+B,UAAUC,QAAQ9B,IACpCA,EAAK+B,gBAEjB,MAAMC,EAAgBlC,KAAK+B,UAAUC,QAAQ9B,GAClCA,EAAK+B,gBAEhBjC,KAAKW,kBAAoBmB,EAAiBK,WAAWjC,GAC1CA,EAAKU,WAGhB,MAAO,CACHkB,EAAiBM,IAAIpC,KAAKC,uBAC1BiC,EAAcE,IAAIpC,KAAKqB,oB,CA2DvBP,aAAaQ,GACjB,MAAMe,EAAQC,EAAahB,EAASiB,KAAMjB,EAASkB,WACnD,MAAM3B,EAAa,GAEnB,GAAIS,IAAQ,MAARA,SAAQ,SAARA,EAAUmB,cAAe,CACzB5B,EAAM,mDACFS,EAASmB,a,CAGjB,GAAInB,IAAQ,MAARA,SAAQ,SAARA,EAAUoB,YAAa,CACvB7B,EAAM,iDACFS,EAASoB,W,CAGjB,GAAIL,EAAO,CACPxB,EAAM,wCAA0CwB,C,CAGpD,OAAOxB,C,CAGHa,uBACJ,MAAMiB,EAAkB3C,KAAK4C,4BAC7B,GAAID,EAAiB,CACjB,MAAME,EACFF,EAAgBG,WAAa9C,KAAK+C,QAAQD,WAC9C,MAAME,EAEFH,EAA2B7C,KAAK+C,QAAQE,YAAc,EAC1D,MAAMC,EACFF,EAEAL,EAAgBM,YAAc,EAClCjD,KAAK+C,QAAQI,SAAS,CAClBC,SAAU,SACVC,KAAMH,G,EAKVN,4BACJ,OAAO5C,KAAK+C,QAAQO,WAAWC,cAAc,sB,CAGzC3B,0BACJ,IAAK,MAAMN,KAAYtB,KAAK+B,UAAW,CACnC,GAAIT,EAASkB,UAAW,CAEpBgB,QAAQC,KACJ,uK"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o}from"./p-3075aa67.js";const t='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill=\'rgba(186,186,192,0.16)\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}';const i=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return o("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return o("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),o("limel-color-picker-palette",{value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return o("button",{class:"picker-trigger",slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button"})};this.openPopover=e=>{e.stopPropagation();this.isOpen=true};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.readonly=undefined;this.isOpen=false}render(){return[this.renderTooltip(),o("div",{class:"color-picker"},this.renderPickerPalette(),o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,class:"chosen-color-input"}))]}};i.style=t;export{i as limel_color_picker};
-//# sourceMappingURL=p-e0f37631.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","value","helperText","onChange","handleChange","required","background","class","slot","style","role","onClick","openPopover","id","event","stopPropagation","change","emit","detail","render"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.5rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: 3.5rem;\n    height: 3.5rem;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateY(1rem);\n}\n","/* eslint-disable multiline-ternary */\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,wrG,MCuBVC,EAAW,M,wDAgEZC,KAAAC,cAAgB,KACpB,IAAKD,KAAKE,UAAYF,KAAKG,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAOL,KAAKG,aACZG,UAAU,kB,GAMlBN,KAAAO,oBAAsB,KAC1B,GAAIP,KAAKE,SAAU,CACf,OAAOF,KAAKQ,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMT,KAAKU,OACXC,cAAc,eACdC,QAASZ,KAAKa,gBAEbb,KAAKQ,sBACNJ,EAAA,8BACIU,MAAOd,KAAKc,MACZT,MAAOL,KAAKK,MACZU,WAAYf,KAAKe,WACjBC,SAAUhB,KAAKiB,aACfC,SAAUlB,KAAKkB,WAEP,EAIhBlB,KAAAQ,oBAAsB,KAC1B,MAAMW,EAAanB,KAAKc,MAAQ,CAAE,eAAgBd,KAAKc,OAAU,GAEjE,OACIV,EAAA,UACIgB,MAAM,iBACNC,KAAK,UACLC,MAAOH,EACPI,KAAK,SACLC,QAASxB,KAAKyB,YACdC,GAAG,kBACL,EAIF1B,KAAAyB,YAAeE,IACnBA,EAAMC,kBACN5B,KAAKU,OAAS,IAAI,EAGdV,KAAAa,eAAkBc,IACtBA,EAAMC,kBACN5B,KAAKU,OAAS,KAAK,EAGfV,KAAAiB,aAAgBU,IACpBA,EAAMC,kBACN5B,KAAK6B,OAAOC,KAAKH,EAAMI,OAAO,E,4JAjFjB,K,CAEVC,SACH,MAAO,CACHhC,KAAKC,gBACLG,EAAA,OAAKgB,MAAM,gBACNpB,KAAKO,sBAENH,EAAA,qBACIC,MAAOL,KAAKK,MACZU,WAAYf,KAAKe,WACjBD,MAAOd,KAAKc,MACZE,SAAUhB,KAAKiB,aACfC,SAAUlB,KAAKkB,SACfhB,SAAUF,KAAKE,SACfkB,MAAM,wB"}