@limetech/lime-elements 37.1.0-next.12 → 37.1.0-next.13

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

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;GAKG;AAMH,MAAM,OAAO,MAAM;EAsFf;IAuMQ,2BAAsB,GAAG,GAAG,EAAE;;MAClC,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,EAAE,CAAC;IAC7B,CAAC,CAAC;IAUM,kBAAa,GAAG,CAAC,KAAK,EAAE,EAAE;MAC9B,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAE9C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;QACrC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;OACzC;MAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC,CAAC;oBA1SgB,KAAK;oBAQL,KAAK;kBASC,CAAC;;;gBAkBH,EAAE;;oBAYE,GAAG;oBAMH,CAAC;;;IA0BvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnE,IAAI,CAAC,OAAO,GAAG,kBAAkB,EAAE,CAAC;IACpC,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAE,CAAC;GAC5C;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAC5C,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;MACf,OAAO;KACV;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAE9B;;;;;;MAME;IACF,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAEtE;;;;;;;;;;;;MAYE;IACF,MAAM,qBAAqB,GAAG,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;IACrD,MAAM,kBAAkB,GAAG,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;IAElD,IAAI,CAAC,qBAAqB,EAAE;MACxB,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;MAC5C,YAAY,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;KACjD;IAED,IAAI,CAAC,kBAAkB,EAAE;MACrB,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;MAC5C,YAAY,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;KACjD;IAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;MAC1C,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;KACxC;IAED,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;EAC/B,CAAC;EAEO,qBAAqB;IACzB,OAAO;MACH,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,IAAI;MAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;MACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ;KAC1B,CAAC;EACN,CAAC;EAEM,MAAM;IACT,MAAM,UAAU,GAAQ,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtD;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC;KAC9B;IAED,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE;MACrC,aACI,KAAK,EAAC,kEAAkE,EACxE,EAAE,EAAE,IAAI,CAAC,OAAO,IAEf,IAAI,CAAC,KAAK,CACP;MACR,WAAK,KAAK,EAAC,iCAAiC;QACxC,YAAM,KAAK,EAAC,2BAA2B;UAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;UACpC,IAAI,CAAC,IAAI,CACP;QACP,YAAM,KAAK,EAAC,2BAA2B;UAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;UACpC,IAAI,CAAC,IAAI,CACP,CACL;MACN,WACI,KAAK,EAAE;UACH,YAAY,EAAE,IAAI;UAClB,sBAAsB,EAAE,IAAI;UAC5B,sBAAsB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACzD;QAED,2BACI,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,GAAG,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,OAAO,mBACd,IAAI,CAAC,YAAY,IAC5B,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,mBAAmB;UAC1B,WAAK,KAAK,EAAC,6BAA6B,GAAO;UAC/C,WAAK,KAAK,EAAC,2BAA2B;YAClC,WAAK,KAAK,EAAC,gCAAgC,GAAO,CAChD,CACJ;QACN,WAAK,KAAK,EAAC,mBAAmB;UAC1B,WACI,KAAK,EAAC,uCAAuC,iBACjC,MAAM;YAElB,WAAK,KAAK,EAAC,6BAA6B;cACpC,YAAM,KAAK,EAAC,kCAAkC,IACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAC/B,CACL,CACJ;UACN,WAAK,KAAK,EAAC,wBAAwB,GAAO,CACxC,CACJ;MACL,IAAI,CAAC,gBAAgB,EAAE,CACrB,CACV,CAAC;EACN,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClB,OAAO;KACV;IAED,OAAO,CACH,yBACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACL,CAAC;EACN,CAAC;EAGS,aAAa;IACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAGS,aAAa;IACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAGS,UAAU;IAChB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;MACzB,OAAO;KACV;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;MACrC,OAAO;KACV;IAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;EAClC,CAAC;EAMO,mBAAmB;IACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC/D,CAAC;EAaO,gBAAgB,CAAC,KAAK;IAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;EAC3C,CAAC;EAEO,QAAQ;IACZ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MAClB,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;KACzB;IAED,OAAO,KAAK,CAAC;EACjB,CAAC;EAEO,YAAY,CAAC,KAAK;IACtB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;EAC9D,CAAC;EAEO,kBAAkB,CAAC,KAAK;IAC5B,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACrC,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAC5D,CAAC;EACN,CAAC;EAEO,gBAAgB,CAAC,KAAa,EAAE,IAAY;IAChD,IAAI,CAAC,IAAI,EAAE;MACP,OAAO,IAAI,CAAC;KACf;IAED,OAAO,KAAK,GAAG,IAAI,KAAK,CAAC,CAAC;EAC9B,CAAC;EAEO,WAAW,CAAC,KAAa,EAAE,IAAY;IAC3C,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;EAC3C,CAAC;EAEO,cAAc;IAClB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACpE,CAAC;EAEO,eAAe;IACnB,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,OAAO,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC1C,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO,IAAI,CAAC;KACf;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACrC,IAAI,CAAC,KAAK,EAAE;MACR,OAAO,IAAI,CAAC;KACf;IAED,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;EACtC,CAAC;EAEO,sBAAsB;IAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC5C,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IAEnD,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAExC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEO,eAAe;IACnB,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtC,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;EAChE,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9D,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;EAC/B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { MDCSlider } from '@material/slider';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { getPercentageClass } from './getPercentageClass';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-slider\n * @exampleComponent limel-example-slider-multiplier\n * @exampleComponent limel-example-slider-multiplier-percentage-colors\n * @exampleComponent limel-example-slider-composite\n */\n@Component({\n    tag: 'limel-slider',\n    shadow: true,\n    styleUrl: 'slider.scss',\n})\nexport class Slider {\n    /**\n     * Disables the slider when `true`,\n     * and visually shows that the field is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the slider may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the slider when `true`. This visualizes the slider slightly differently.\n     * But shows no visual sign indicating that the slider field\n     * is disabled or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Default value: 1.\n     * The factor that the properties `value`, `valuemax`, `valuemin`, and\n     * `step` are multiplied by. On `change` divides the value by the factor,\n     * so the original format stays the same.\n     */\n    @Prop({ reflect: true })\n    public factor: number = 1;\n\n    /**\n     * Label to display next to the input\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the slider\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Unit to display next to the value\n     */\n    @Prop({ reflect: true })\n    public unit: string = '';\n\n    /**\n     * The value of the input\n     */\n    @Prop({ reflect: true })\n    public value: number;\n\n    /**\n     * The maximum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemax: number = 100; // eslint-disable-line no-magic-numbers\n\n    /**\n     * The minimum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemin: number = 0;\n\n    /**\n     * The stepping interval to use when adjusting the value\n     */\n    @Prop({ reflect: true })\n    public step: number;\n\n    /**\n     * Emitted when the value has been changed\n     */\n    @Event()\n    private change: EventEmitter<number>;\n\n    @Element()\n    private rootElement: HTMLLimelSliderElement;\n\n    private mdcSlider: MDCSlider;\n    private labelId: string;\n    private helperTextId: string;\n    private observer: ResizeObserver;\n\n    @State()\n    private percentageClass: string;\n\n    public constructor() {\n        this.inputHandler = this.inputHandler.bind(this);\n        this.getContainerClassList = this.getContainerClassList.bind(this);\n        this.labelId = createRandomString();\n        this.helperTextId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n        this.observer = new ResizeObserver(this.resizeObserverCallback);\n        this.observer.observe(this.rootElement);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const inputElement = this.getInputElement();\n        if (!inputElement) {\n            return;\n        }\n\n        const value = this.getValue();\n\n        /*\n        For some reason the input element's `value` attribute is removed\n        (probably by Stencil) when the element is first rendered. But if the\n        attribute is missing when MDCSlider is initialized (MDC v11.0.0),\n        MDCSlider crashes.\n        So we add the attribute right before initializing MDCSlider. /Ads\n        */\n        inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);\n\n        /*\n        When creating the `mdcSlider` component, its important that the value set in\n        the input field obeys the range and the step size.\n\n        The MDCSlider will throw an exception unless the value in the input element\n        is dividible by the step value and is in the provided range.\n        If an exception occurs, this component will crash and it will be impossible to change\n        its value.\n        The logic below ensures that the component will render even though the\n        provided value is wrong.\n        This could be considered wrong, but it at least fixes so that it's possible\n        to change the value from the UI.\n        */\n        const greaterThanOrEqualMin = value >= this.valuemin;\n        const lessThanOrEqualMax = value <= this.valuemax;\n\n        if (!greaterThanOrEqualMin) {\n            const newMin = this.multiplyByFactor(value);\n            inputElement.setAttribute('min', `${newMin}`);\n        }\n\n        if (!lessThanOrEqualMax) {\n            const newMax = this.multiplyByFactor(value);\n            inputElement.setAttribute('max', `${newMax}`);\n        }\n\n        if (!this.isMultipleOfStep(value, this.step)) {\n            inputElement.removeAttribute('step');\n        }\n\n        this.createMDCSlider();\n    }\n\n    public componentWillLoad() {\n        this.setPercentageClass(this.value);\n    }\n\n    public disconnectedCallback() {\n        this.destroyMDCSlider();\n        this.observer.disconnect();\n    }\n\n    private getContainerClassList() {\n        return {\n            [this.percentageClass]: true,\n            disabled: this.disabled || this.readonly,\n            readonly: this.readonly,\n        };\n    }\n\n    public render() {\n        const inputProps: any = {};\n        if (this.step) {\n            inputProps.step = this.multiplyByFactor(this.step);\n        }\n\n        if (this.disabled || this.readonly) {\n            inputProps.disabled = true;\n        }\n\n        return (\n            <Host class={this.getContainerClassList()}>\n                <label\n                    class=\"slider__label mdc-floating-label mdc-floating-label--float-above\"\n                    id={this.labelId}\n                >\n                    {this.label}\n                </label>\n                <div class=\"slider__content-range-container\">\n                    <span class=\"slider__content-min-label\">\n                        {this.multiplyByFactor(this.valuemin)}\n                        {this.unit}\n                    </span>\n                    <span class=\"slider__content-max-label\">\n                        {this.multiplyByFactor(this.valuemax)}\n                        {this.unit}\n                    </span>\n                </div>\n                <div\n                    class={{\n                        'mdc-slider': true,\n                        'mdc-slider--discrete': true,\n                        'mdc-slider--disabled': this.disabled || this.readonly,\n                    }}\n                >\n                    <input\n                        class=\"mdc-slider__input\"\n                        type=\"range\"\n                        min={this.multiplyByFactor(this.valuemin)}\n                        max={this.multiplyByFactor(this.valuemax)}\n                        value={this.multiplyByFactor(this.value)}\n                        name=\"volume\"\n                        aria-labelledby={this.labelId}\n                        aria-controls={this.helperTextId}\n                        {...inputProps}\n                    />\n                    <div class=\"mdc-slider__track\">\n                        <div class=\"mdc-slider__track--inactive\"></div>\n                        <div class=\"mdc-slider__track--active\">\n                            <div class=\"mdc-slider__track--active_fill\"></div>\n                        </div>\n                    </div>\n                    <div class=\"mdc-slider__thumb\">\n                        <div\n                            class=\"mdc-slider__value-indicator-container\"\n                            aria-hidden=\"true\"\n                        >\n                            <div class=\"mdc-slider__value-indicator\">\n                                <span class=\"mdc-slider__value-indicator-text\">\n                                    {this.multiplyByFactor(this.value)}\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"mdc-slider__thumb-knob\"></div>\n                    </div>\n                </div>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    private renderHelperLine() {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n            />\n        );\n    }\n\n    @Watch('disabled')\n    protected watchDisabled() {\n        this.updateDisabledState();\n    }\n\n    @Watch('readonly')\n    protected watchReadonly() {\n        this.updateDisabledState();\n    }\n\n    @Watch('value')\n    protected watchValue() {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        const value = this.multiplyByFactor(this.getValue());\n        this.mdcSlider.setValue(value);\n\n        if (this.isStepConfigured()) {\n            return;\n        }\n\n        const step = this.multiplyByFactor(this.step);\n        if (!this.isMultipleOfStep(value, step)) {\n            return;\n        }\n\n        this.reCreateSliderWithStep();\n    }\n\n    private resizeObserverCallback = () => {\n        this.mdcSlider?.layout();\n    };\n\n    private updateDisabledState() {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        this.mdcSlider.setDisabled(this.disabled || this.readonly);\n    }\n\n    private changeHandler = (event) => {\n        let value = event.detail.value;\n        const step = this.multiplyByFactor(this.step);\n\n        if (!this.isMultipleOfStep(value, step)) {\n            value = this.roundToStep(value, step);\n        }\n\n        this.change.emit(value / this.factor);\n    };\n\n    private multiplyByFactor(value) {\n        return Math.round(value * this.factor);\n    }\n\n    private getValue() {\n        let value = this.value;\n        if (!isFinite(value)) {\n            value = this.valuemin;\n        }\n\n        return value;\n    }\n\n    private inputHandler(event) {\n        this.setPercentageClass(event.detail.value / this.factor);\n    }\n\n    private setPercentageClass(value) {\n        this.percentageClass = getPercentageClass(\n            (value - this.valuemin) / (this.valuemax - this.valuemin)\n        );\n    }\n\n    private isMultipleOfStep(value: number, step: number): boolean {\n        if (!step) {\n            return true;\n        }\n\n        return value % step === 0;\n    }\n\n    private roundToStep(value: number, step: number): number {\n        return Math.round(value / step) * step;\n    }\n\n    private getRootElement(): HTMLElement | undefined {\n        return this.rootElement.shadowRoot.querySelector('.mdc-slider');\n    }\n\n    private getInputElement(): HTMLInputElement | undefined {\n        const element = this.getRootElement();\n        if (!element) {\n            return;\n        }\n\n        return element.querySelector('input');\n    }\n\n    private isStepConfigured(): boolean {\n        if (!this.step) {\n            return true;\n        }\n\n        const input = this.getInputElement();\n        if (!input) {\n            return true;\n        }\n\n        return input.hasAttribute('step');\n    }\n\n    private reCreateSliderWithStep() {\n        const inputElement = this.getInputElement();\n        const step = `${this.multiplyByFactor(this.step)}`;\n\n        inputElement.setAttribute('step', step);\n\n        this.destroyMDCSlider();\n        this.createMDCSlider();\n    }\n\n    private createMDCSlider() {\n        const element = this.getRootElement();\n\n        this.mdcSlider = new MDCSlider(element);\n        this.mdcSlider.listen('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.listen('MDCSlider:input', this.inputHandler);\n    }\n\n    private destroyMDCSlider() {\n        this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);\n        this.mdcSlider.destroy();\n        this.mdcSlider = undefined;\n    }\n}\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSlider, MDCSliderChangeEventDetail } from '@material/slider';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { getPercentageClass } from './getPercentageClass';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_FACTOR = 1;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_MIN_VALUE = 0;\n\n/**\n * @exampleComponent limel-example-slider-basic\n * @exampleComponent limel-example-slider-multiplier\n * @exampleComponent limel-example-slider-multiplier-percentage-colors\n * @exampleComponent limel-example-slider-composite\n */\n@Component({\n    tag: 'limel-slider',\n    shadow: true,\n    styleUrl: 'slider.scss',\n})\nexport class Slider {\n    /**\n     * Disables the slider when `true`,\n     * and visually shows that the field is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the slider may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the slider when `true`. This visualizes the slider slightly differently.\n     * But shows no visual sign indicating that the slider field\n     * is disabled or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Default value: 1.\n     * The factor that the properties `value`, `valuemax`, `valuemin`, and\n     * `step` are multiplied by. On `change` divides the value by the factor,\n     * so the original format stays the same.\n     */\n    @Prop({ reflect: true })\n    public factor: number = DEFAULT_FACTOR;\n\n    /**\n     * Label to display next to the input\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the slider\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Unit to display next to the value\n     */\n    @Prop({ reflect: true })\n    public unit: string = '';\n\n    /**\n     * The value of the input\n     */\n    @Prop({ reflect: true })\n    public value: number;\n\n    /**\n     * The maximum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemax: number = DEFAULT_MAX_VALUE;\n\n    /**\n     * The minimum value allowed\n     */\n    @Prop({ reflect: true })\n    public valuemin: number = DEFAULT_MIN_VALUE;\n\n    /**\n     * The stepping interval to use when adjusting the value\n     */\n    @Prop({ reflect: true })\n    public step: number;\n\n    /**\n     * Emitted when the value has been changed\n     */\n    @Event()\n    private change: EventEmitter<number>;\n\n    @Element()\n    private rootElement: HTMLLimelSliderElement;\n\n    @State()\n    private percentageClass: string;\n\n    private mdcSlider: MDCSlider;\n    private labelId: string;\n    private helperTextId: string;\n    private observer: ResizeObserver;\n\n    public constructor() {\n        this.labelId = createRandomString();\n        this.helperTextId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n        this.observer = new ResizeObserver(this.resizeObserverCallback);\n        this.observer.observe(this.rootElement);\n    }\n\n    public componentWillLoad() {\n        this.setPercentageClass(this.value);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        this.destroyMDCSlider();\n        this.observer.disconnect();\n    }\n\n    public render() {\n        const inputProps: any = {};\n        if (this.step) {\n            inputProps.step = this.multiplyByFactor(this.step);\n        }\n\n        if (this.disabled || this.readonly) {\n            inputProps.disabled = true;\n        }\n\n        return (\n            <Host class={this.getContainerClassList()}>\n                <label\n                    class=\"slider__label mdc-floating-label mdc-floating-label--float-above\"\n                    id={this.labelId}\n                >\n                    {this.label}\n                </label>\n                <div class=\"slider__content-range-container\">\n                    <span class=\"slider__content-min-label\">\n                        {this.multiplyByFactor(this.valuemin)}\n                        {this.unit}\n                    </span>\n                    <span class=\"slider__content-max-label\">\n                        {this.multiplyByFactor(this.valuemax)}\n                        {this.unit}\n                    </span>\n                </div>\n                <div\n                    class={{\n                        'mdc-slider': true,\n                        'mdc-slider--discrete': true,\n                        'mdc-slider--disabled': this.disabled || this.readonly,\n                    }}\n                >\n                    <input\n                        class=\"mdc-slider__input\"\n                        type=\"range\"\n                        min={this.multiplyByFactor(this.valuemin)}\n                        max={this.multiplyByFactor(this.valuemax)}\n                        value={this.multiplyByFactor(this.value)}\n                        name=\"volume\"\n                        aria-labelledby={this.labelId}\n                        aria-controls={this.helperTextId}\n                        {...inputProps}\n                    />\n                    <div class=\"mdc-slider__track\">\n                        <div class=\"mdc-slider__track--inactive\"></div>\n                        <div class=\"mdc-slider__track--active\">\n                            <div class=\"mdc-slider__track--active_fill\"></div>\n                        </div>\n                    </div>\n                    <div class=\"mdc-slider__thumb\">\n                        <div\n                            class=\"mdc-slider__value-indicator-container\"\n                            aria-hidden=\"true\"\n                        >\n                            <div class=\"mdc-slider__value-indicator\">\n                                <span class=\"mdc-slider__value-indicator-text\">\n                                    {this.multiplyByFactor(this.value)}\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"mdc-slider__thumb-knob\"></div>\n                    </div>\n                </div>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('disabled')\n    protected watchDisabled() {\n        this.updateDisabledState();\n    }\n\n    @Watch('readonly')\n    protected watchReadonly() {\n        this.updateDisabledState();\n    }\n\n    @Watch('value')\n    protected watchValue() {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        const value = this.multiplyByFactor(this.getValue());\n        this.mdcSlider.setValue(value);\n\n        if (this.isStepConfigured()) {\n            return;\n        }\n\n        const step = this.multiplyByFactor(this.step);\n        if (!this.isMultipleOfStep(value, step)) {\n            return;\n        }\n\n        this.reCreateSliderWithStep();\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n            />\n        );\n    };\n\n    private initialize = () => {\n        const inputElement = this.getInputElement();\n        if (!inputElement) {\n            return;\n        }\n\n        const value = this.getValue();\n\n        /*\n        For some reason the input element's `value` attribute is removed\n        (probably by Stencil) when the element is first rendered. But if the\n        attribute is missing when MDCSlider is initialized (MDC v11.0.0),\n        MDCSlider crashes.\n        So we add the attribute right before initializing MDCSlider. /Ads\n        */\n        inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);\n\n        /*\n        When creating the `mdcSlider` component, its important that the value set in\n        the input field obeys the range and the step size.\n\n        The MDCSlider will throw an exception unless the value in the input element\n        is dividible by the step value and is in the provided range.\n        If an exception occurs, this component will crash and it will be impossible to change\n        its value.\n        The logic below ensures that the component will render even though the\n        provided value is wrong.\n        This could be considered wrong, but it at least fixes so that it's possible\n        to change the value from the UI.\n        */\n        const greaterThanOrEqualMin = value >= this.valuemin;\n        const lessThanOrEqualMax = value <= this.valuemax;\n\n        if (!greaterThanOrEqualMin) {\n            const newMin = this.multiplyByFactor(value);\n            inputElement.setAttribute('min', `${newMin}`);\n        }\n\n        if (!lessThanOrEqualMax) {\n            const newMax = this.multiplyByFactor(value);\n            inputElement.setAttribute('max', `${newMax}`);\n        }\n\n        if (!this.isMultipleOfStep(value, this.step)) {\n            inputElement.removeAttribute('step');\n        }\n\n        this.createMDCSlider();\n    };\n\n    private reCreateSliderWithStep = () => {\n        const inputElement = this.getInputElement();\n        const step = `${this.multiplyByFactor(this.step)}`;\n\n        inputElement.setAttribute('step', step);\n\n        this.destroyMDCSlider();\n        this.createMDCSlider();\n    };\n\n    private createMDCSlider = () => {\n        const element = this.getRootElement();\n\n        this.mdcSlider = new MDCSlider(element);\n        this.mdcSlider.listen('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.listen('MDCSlider:input', this.inputHandler);\n    };\n\n    private destroyMDCSlider() {\n        this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);\n        this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);\n        this.mdcSlider.destroy();\n        this.mdcSlider = undefined;\n    }\n\n    private changeHandler = (\n        event: CustomEvent<MDCSliderChangeEventDetail>\n    ) => {\n        let value = event.detail.value;\n        const step = this.multiplyByFactor(this.step);\n\n        if (!this.isMultipleOfStep(value, step)) {\n            value = this.roundToStep(value, step);\n        }\n\n        this.change.emit(value / this.factor);\n    };\n\n    private inputHandler = (event: CustomEvent<MDCSliderChangeEventDetail>) => {\n        this.setPercentageClass(event.detail.value / this.factor);\n    };\n\n    private getContainerClassList = () => {\n        return {\n            [this.percentageClass]: true,\n            disabled: this.disabled || this.readonly,\n            readonly: this.readonly,\n        };\n    };\n\n    private resizeObserverCallback = () => {\n        this.mdcSlider?.layout();\n    };\n\n    private updateDisabledState = () => {\n        if (!this.mdcSlider) {\n            return;\n        }\n\n        this.mdcSlider?.setDisabled(this.disabled || this.readonly);\n    };\n\n    private multiplyByFactor = (value: number) => {\n        return Math.round(value * this.factor);\n    };\n\n    private getValue = () => {\n        let value = this.value;\n        if (!isFinite(value)) {\n            value = this.valuemin;\n        }\n\n        return value;\n    };\n\n    private setPercentageClass = (value: number) => {\n        this.percentageClass = getPercentageClass(\n            (value - this.valuemin) / (this.valuemax - this.valuemin)\n        );\n    };\n\n    private isMultipleOfStep = (value: number, step: number): boolean => {\n        if (!step) {\n            return true;\n        }\n\n        return value % step === 0;\n    };\n\n    private roundToStep = (value: number, step: number): number => {\n        return Math.round(value / step) * step;\n    };\n\n    private getRootElement = (): HTMLElement | undefined => {\n        return this.rootElement.shadowRoot.querySelector('.mdc-slider');\n    };\n\n    private getInputElement = (): HTMLInputElement | undefined => {\n        const element = this.getRootElement();\n        if (!element) {\n            return;\n        }\n\n        return element.querySelector('input');\n    };\n\n    private isStepConfigured = (): boolean => {\n        if (!this.step) {\n            return true;\n        }\n\n        const input = this.getInputElement();\n        if (!input) {\n            return true;\n        }\n\n        return input.hasAttribute('step');\n    };\n}\n"]}

package/dist/collection/components/tooltip/tooltip.js

@@ -39,7 +39,7 @@ const DEFAULT_MAX_LENGTH = 50;
  * use that, not a tooltip.
  * - Make sure to use the tooltip on an element that users naturally and
  * effortlessly recognize can be hovered.
- * @exampleComponent limel-example-tooltip
+ * @exampleComponent limel-example-tooltip-basic
  * @exampleComponent limel-example-tooltip-max-character
  * @exampleComponent limel-example-tooltip-composite
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment.\n * A good practice is to just place them next to each other like below:\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n * @private\n */\n@Component({\n    tag: 'limel-tooltip',\n    shadow: true,\n    styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n    /**\n     * ID of the owner element that the tooltip should describe.\n     * Must be a child within the same document fragment as the tooltip element\n     * itself.\n     */\n    @Prop({ reflect: true })\n    public elementId!: string;\n\n    /**\n     * Short descriptive text of the owner element.\n     */\n    @Prop({ reflect: true })\n    public label!: string;\n\n    /**\n     * Additional helper text for the element.\n     * Example usage can be a keyboard shortcut to activate the function of the\n     * owner element.\n     */\n    @Prop({ reflect: true })\n    public helperLabel?: string;\n\n    /**\n     * The maximum amount of characters before rendering 'label' and\n     * 'helperLabel' in two rows.\n     */\n    @Prop({ reflect: true })\n    public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n    @State()\n    private open: boolean;\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    private portalId: string;\n    private tooltipId: string;\n    private showTooltipTimeoutHandle: number;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render() {\n        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--tooltip-z-index'\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection=\"bottom-start\"\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                >\n                    <limel-tooltip-content\n                        label={this.label}\n                        helperLabel={this.helperLabel}\n                        maxlength={this.maxlength}\n                        role=\"tooltip\"\n                        aria-hidden={!this.open}\n                        id={this.tooltipId}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private setOwnerAriaLabel() {\n        const owner = this.getOwnerElement();\n        owner?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        const owner = this.getOwnerElement();\n        owner?.addEventListener('mouseover', this.showTooltip);\n        owner?.addEventListener('mouseout', this.hideTooltip);\n        owner?.addEventListener('click', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        const owner = this.getOwnerElement();\n        owner?.removeEventListener('mouseover', this.showTooltip);\n        owner?.removeEventListener('mouseout', this.hideTooltip);\n        owner?.removeEventListener('click', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        const tooltipDelay = 500;\n        this.showTooltipTimeoutHandle = window.setTimeout(() => {\n            this.open = true;\n        }, tooltipDelay);\n    };\n\n    private hideTooltip = () => {\n        clearTimeout(this.showTooltipTimeoutHandle);\n        this.open = false;\n    };\n\n    private getOwnerElement(): HTMLElement | undefined {\n        let element: Node = this.host;\n\n        do {\n            element = element.parentNode;\n        } while (\n            element &&\n            element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n            element.nodeType !== Node.DOCUMENT_NODE\n        );\n\n        return (element as ShadowRoot)?.getElementById(this.elementId);\n    }\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment.\n * A good practice is to just place them next to each other like below:\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n * @private\n */\n@Component({\n    tag: 'limel-tooltip',\n    shadow: true,\n    styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n    /**\n     * ID of the owner element that the tooltip should describe.\n     * Must be a child within the same document fragment as the tooltip element\n     * itself.\n     */\n    @Prop({ reflect: true })\n    public elementId!: string;\n\n    /**\n     * Short descriptive text of the owner element.\n     */\n    @Prop({ reflect: true })\n    public label!: string;\n\n    /**\n     * Additional helper text for the element.\n     * Example usage can be a keyboard shortcut to activate the function of the\n     * owner element.\n     */\n    @Prop({ reflect: true })\n    public helperLabel?: string;\n\n    /**\n     * The maximum amount of characters before rendering 'label' and\n     * 'helperLabel' in two rows.\n     */\n    @Prop({ reflect: true })\n    public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    @State()\n    private open: boolean;\n\n    private portalId: string;\n    private tooltipId: string;\n    private showTooltipTimeoutHandle: number;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render(): JSX.Element {\n        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--tooltip-z-index'\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection=\"bottom-start\"\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                >\n                    <limel-tooltip-content\n                        label={this.label}\n                        helperLabel={this.helperLabel}\n                        maxlength={this.maxlength}\n                        role=\"tooltip\"\n                        aria-hidden={!this.open}\n                        id={this.tooltipId}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private setOwnerAriaLabel() {\n        const owner = this.getOwnerElement();\n        owner?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        const owner = this.getOwnerElement();\n        owner?.addEventListener('mouseover', this.showTooltip);\n        owner?.addEventListener('mouseout', this.hideTooltip);\n        owner?.addEventListener('click', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        const owner = this.getOwnerElement();\n        owner?.removeEventListener('mouseover', this.showTooltip);\n        owner?.removeEventListener('mouseout', this.hideTooltip);\n        owner?.removeEventListener('click', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        const tooltipDelay = 500;\n        this.showTooltipTimeoutHandle = window.setTimeout(() => {\n            this.open = true;\n        }, tooltipDelay);\n    };\n\n    private hideTooltip = () => {\n        clearTimeout(this.showTooltipTimeoutHandle);\n        this.open = false;\n    };\n\n    private getOwnerElement(): HTMLElement | undefined {\n        let element: Node = this.host;\n\n        do {\n            element = element.parentNode;\n        } while (\n            element &&\n            element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n            element.nodeType !== Node.DOCUMENT_NODE\n        );\n\n        return (element as ShadowRoot)?.getElementById(this.elementId);\n    }\n}\n"]}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-list_2",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-portal",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-menu_2",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]]], options);
+  return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-list_2",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-portal",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516]}]]],["limel-menu_2",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]]], options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

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

@@ -1794,19 +1794,6 @@ var createPopper = /*#__PURE__*/popperGenerator({
 const portalCss = ":host(limel-portal){display:block;position:absolute;top:0;bottom:0;width:100%;pointer-events:none}:host([hidden]){display:none}";
 
 const Portal = class {
-  onVisible() {
-    if (!this.visible) {
-      this.hideContainer();
-      this.styleContainer();
-      this.destroyPopper();
-      return;
-    }
-    this.styleContainer();
-    this.createPopper();
-    requestAnimationFrame(() => {
-      this.showContainer();
-    });
-  }
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.loaded = false;
@@ -1855,6 +1842,19 @@ const Portal = class {
   render() {
     return h("slot", null);
   }
+  onVisible() {
+    if (!this.visible) {
+      this.hideContainer();
+      this.styleContainer();
+      this.destroyPopper();
+      return;
+    }
+    this.styleContainer();
+    this.createPopper();
+    requestAnimationFrame(() => {
+      this.showContainer();
+    });
+  }
   createContainer() {
     const slot = this.host.shadowRoot.querySelector('slot');
     const content = (slot.assignedElements && slot.assignedElements()) || [];