@limetech/lime-elements 38.31.2 → 38.32.0

package/dist/collection/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.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-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\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` 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 placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\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 componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\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                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\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                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\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"]}
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.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-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\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` 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 placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\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 componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\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                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\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                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\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"]}

package/dist/collection/components/form/form.css

@@ -284,10 +284,9 @@ h1 {
   font-weight: 500;
 }
 
-p {
-  margin-top: 0;
-  margin-bottom: 0.75rem;
-  font-size: var(--limel-theme-default-font-size);
+limel-markdown {
+  display: block;
+  margin-bottom: 0.5rem;
 }
 
 .form-group {
@@ -298,8 +297,7 @@ p {
   top: calc(var(--form-row-gap, 1rem) * -0.5);
   left: calc(var(--form-column-gap, 1rem) * -0.5);
 }
-.form-group h1,
-.form-group p {
+.form-group h1 {
   color: rgb(var(--contrast-1400), 0.8);
 }
 .form-group h1 {

package/dist/collection/components/form/row/row.js

@@ -30,7 +30,10 @@ export class Row extends React.Component {
   renderDescription() {
     var _a;
     if ((_a = this.schema) === null || _a === void 0 ? void 0 : _a.description) {
-      return React.createElement('p', { className: 'description' }, this.schema.description);
+      return React.createElement('limel-markdown', {
+        class: 'description',
+        value: this.schema.description,
+      });
     }
   }
   renderChildren() {

package/dist/collection/components/form/row/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/form/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAmB;EAC9C,YAAmB,KAAe;IAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAU;EAElC,CAAC;EAEM,MAAM;IACT,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC5B;IAED,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KAC/B,EACD,IAAI,CAAC,qBAAqB,EAAE,EAC5B,IAAI,CAAC,iBAAiB,EAAE,CAC3B,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;QACrC,IAAI,EAAE,IAAI,CAAC,IAAI;OAClB,CAAC,CAAC;KACN;EACL,CAAC;EAEO,qBAAqB;IACzB,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL,EAAE,SAAS,EAAE,kBAAkB,EAAE,EACjC,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,CACxB,CAAC;EACN,CAAC;EACO,WAAW;;IACf,OAAO,KAAK,CAAC,aAAa,CACtB,IAAI,EACJ,EAAE,SAAS,EAAE,OAAO,EAAE,EACtB,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CACrB,CAAC;EACN,CAAC;EAEO,iBAAiB;;IACrB,IAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,EAAE;MAC1B,OAAO,KAAK,CAAC,aAAa,CACtB,GAAG,EACH,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5B,IAAI,CAAC,MAAM,CAAC,WAAW,CAC1B,CAAC;KACL;EACL,CAAC;EAEO,cAAc;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAErC,uCACO,QAAQ,KACX,KAAK,kCACE,QAAQ,CAAC,KAAK,KACjB,MAAM,kCACC,QAAQ,CAAC,KAAK,CAAC,MAAM,KACxB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,IAAI,UAG3B;EACN,CAAC;EAED,IAAY,MAAM;IACd,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;EAC5C,CAAC;EAED,IAAY,IAAI;;IACZ,OAAO,MAAA,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,0CAAE,MAAM,0CAAE,IAAI,CAAC;EAC3C,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { RowProps } from '../templates/types';\n\nexport class Row extends React.Component<RowProps> {\n    constructor(public props: RowProps) {\n        super(props);\n    }\n\n    public render() {\n        const classes = ['row'];\n        if (this.icon) {\n            classes.push('has-icon');\n        }\n\n        return React.createElement(\n            'div',\n            {\n                className: classes.join(' '),\n            },\n            this.renderMainInformation(),\n            this.renderDescription()\n        );\n    }\n\n    private renderIcon() {\n        if (this.icon) {\n            return React.createElement('limel-icon', {\n                name: this.icon,\n            });\n        }\n    }\n\n    private renderMainInformation() {\n        return React.createElement(\n            'div',\n            { className: 'main-information' },\n            this.renderIcon(),\n            this.renderTitle(),\n            this.renderChildren()\n        );\n    }\n    private renderTitle() {\n        return React.createElement(\n            'h1',\n            { className: 'title' },\n            this.schema?.title\n        );\n    }\n\n    private renderDescription() {\n        if (this.schema?.description) {\n            return React.createElement(\n                'p',\n                { className: 'description' },\n                this.schema.description\n            );\n        }\n    }\n\n    private renderChildren() {\n        const children = this.props.children;\n\n        return {\n            ...children,\n            props: {\n                ...children.props,\n                schema: {\n                    ...children.props.schema,\n                    title: null,\n                    description: null,\n                },\n            },\n        };\n    }\n\n    private get schema() {\n        return this.props.children.props.schema;\n    }\n\n    private get icon() {\n        return this.schema?.lime?.layout?.icon;\n    }\n}\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/form/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAmB;EAC9C,YAAmB,KAAe;IAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAU;EAElC,CAAC;EAEM,MAAM;IACT,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC5B;IAED,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KAC/B,EACD,IAAI,CAAC,qBAAqB,EAAE,EAC5B,IAAI,CAAC,iBAAiB,EAAE,CAC3B,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;QACrC,IAAI,EAAE,IAAI,CAAC,IAAI;OAClB,CAAC,CAAC;KACN;EACL,CAAC;EAEO,qBAAqB;IACzB,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL,EAAE,SAAS,EAAE,kBAAkB,EAAE,EACjC,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,CACxB,CAAC;EACN,CAAC;EACO,WAAW;;IACf,OAAO,KAAK,CAAC,aAAa,CACtB,IAAI,EACJ,EAAE,SAAS,EAAE,OAAO,EAAE,EACtB,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CACrB,CAAC;EACN,CAAC;EAEO,iBAAiB;;IACrB,IAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,EAAE;MAC1B,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE;QACzC,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW;OACjC,CAAC,CAAC;KACN;EACL,CAAC;EAEO,cAAc;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAErC,uCACO,QAAQ,KACX,KAAK,kCACE,QAAQ,CAAC,KAAK,KACjB,MAAM,kCACC,QAAQ,CAAC,KAAK,CAAC,MAAM,KACxB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,IAAI,UAG3B;EACN,CAAC;EAED,IAAY,MAAM;IACd,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;EAC5C,CAAC;EAED,IAAY,IAAI;;IACZ,OAAO,MAAA,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,0CAAE,MAAM,0CAAE,IAAI,CAAC;EAC3C,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { RowProps } from '../templates/types';\n\nexport class Row extends React.Component<RowProps> {\n    constructor(public props: RowProps) {\n        super(props);\n    }\n\n    public render() {\n        const classes = ['row'];\n        if (this.icon) {\n            classes.push('has-icon');\n        }\n\n        return React.createElement(\n            'div',\n            {\n                className: classes.join(' '),\n            },\n            this.renderMainInformation(),\n            this.renderDescription()\n        );\n    }\n\n    private renderIcon() {\n        if (this.icon) {\n            return React.createElement('limel-icon', {\n                name: this.icon,\n            });\n        }\n    }\n\n    private renderMainInformation() {\n        return React.createElement(\n            'div',\n            { className: 'main-information' },\n            this.renderIcon(),\n            this.renderTitle(),\n            this.renderChildren()\n        );\n    }\n    private renderTitle() {\n        return React.createElement(\n            'h1',\n            { className: 'title' },\n            this.schema?.title\n        );\n    }\n\n    private renderDescription() {\n        if (this.schema?.description) {\n            return React.createElement('limel-markdown', {\n                class: 'description',\n                value: this.schema.description,\n            });\n        }\n    }\n\n    private renderChildren() {\n        const children = this.props.children;\n\n        return {\n            ...children,\n            props: {\n                ...children.props,\n                schema: {\n                    ...children.props.schema,\n                    title: null,\n                    description: null,\n                },\n            },\n        };\n    }\n\n    private get schema() {\n        return this.props.children.props.schema;\n    }\n\n    private get icon() {\n        return this.schema?.lime?.layout?.icon;\n    }\n}\n"]}

package/dist/collection/components/form/templates/common.js

@@ -19,7 +19,9 @@ export function renderDescription(description) {
   if (!description) {
     return;
   }
-  return React.createElement('p', { className: 'mdc-typography mdc-typography--body1' }, description);
+  return React.createElement('limel-markdown', {
+    value: description,
+  });
 }
 /**
  * Find a suitable title for a nested structure.

package/dist/collection/components/form/templates/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/components/form/templates/common.ts"],"names":[],"mappings":"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","sourcesContent":["import { get, isEmpty } from 'lodash-es';\nimport React from 'react';\nimport { isArrayType, isObjectType } from '../schema';\nimport { FormSchema } from '../form.types';\nimport { JSONSchema7 } from 'json-schema';\n\n/**\n *\n * @param title\n */\nexport function renderTitle(title: string) {\n    if (!title) {\n        return;\n    }\n\n    return React.createElement(\n        'h1',\n        { className: 'mdc-typography mdc-typography--headline1' },\n        title\n    );\n}\n\n/**\n *\n * @param description\n */\nexport function renderDescription(description: string) {\n    if (!description) {\n        return;\n    }\n\n    return React.createElement(\n        'p',\n        { className: 'mdc-typography mdc-typography--body1' },\n        description\n    );\n}\n\n/**\n * Find a suitable title for a nested structure.\n *\n * If an object has the key 'title' it will have priority, followed by the key 'name'.\n * If 'title' nor 'name' is found, a required item will be considered.\n * Otherwise the first occurrence of a nonempty string is chosen.\n *\n * @param data - the data to find the title for\n * @param fieldSchema - schema for the item\n * @param formSchema - schema for the form\n * @returns describing title of the data\n */\nexport function findTitle(\n    data: any,\n    fieldSchema: JSONSchema7,\n    formSchema: JSONSchema7\n) {\n    if (!data) {\n        return null;\n    }\n\n    if (Array.isArray(data) && isObjectType(fieldSchema.items as FormSchema)) {\n        return findTitle(data[0], fieldSchema, formSchema);\n    }\n\n    if (Array.isArray(data) || typeof data !== 'object') {\n        return findSchemaTitle(data, fieldSchema);\n    }\n\n    const subSchema = findSubSchema(\n        fieldSchema as FormSchema,\n        formSchema as FormSchema\n    );\n\n    data = sortDataByProperties(data, subSchema.properties);\n\n    const firstEntry = findFirstEntry(data, subSchema);\n    if (!firstEntry) {\n        return null;\n    }\n\n    if (!subSchema.properties) {\n        return null;\n    }\n\n    const [key, value] = firstEntry;\n\n    return findTitle(value, subSchema.properties[key], formSchema);\n}\n\nfunction sortDataByProperties(data: any, properties: object) {\n    if (!properties || isEmpty(properties)) {\n        return data;\n    }\n\n    const newData = {};\n    for (const key of Object.keys(properties)) newData[key] = data[key];\n\n    return newData;\n}\n\nfunction findFirstEntry(data: any, subSchema: FormSchema) {\n    const entries = [\n        ['title', data.title],\n        ['name', data.name],\n        getRequiredEntry(data, subSchema),\n        ...Object.entries(data),\n    ];\n\n    return entries.find((entry) => {\n        const value = entry[1];\n\n        return !!value && typeof value !== 'boolean';\n    });\n}\n\nfunction getRequiredEntry(data: any, subSchema: FormSchema) {\n    if (!('required' in subSchema)) {\n        return [null, null];\n    }\n\n    const firstNonEmptyRequiredKey = Object.keys(data).find((key) =>\n        subSchema.required.includes(key)\n    );\n    if (!firstNonEmptyRequiredKey) {\n        return [null, null];\n    }\n\n    return [firstNonEmptyRequiredKey, data[firstNonEmptyRequiredKey]];\n}\n\nfunction findSubSchema(schema: FormSchema, formSchema: FormSchema) {\n    let subSchema = schema;\n    if (isArrayType(schema)) {\n        subSchema = schema.items as FormSchema;\n    }\n\n    if (subSchema.$ref) {\n        const path = subSchema.$ref.split('/').slice(1).join('.');\n        subSchema = get(formSchema, path);\n    }\n\n    return subSchema;\n}\n\nfunction findSchemaTitle(value: any, schema: JSONSchema7) {\n    if (\n        isArrayType(schema as FormSchema) &&\n        (schema.items as JSONSchema7).anyOf\n    ) {\n        const titles = ((schema.items as JSONSchema7).anyOf as JSONSchema7[])\n            .filter((item) => value.includes(item.const))\n            .map((item) => item.title);\n\n        return titles.join(', ');\n    }\n\n    if (schema.oneOf) {\n        return (\n            (schema.oneOf as JSONSchema7[]).find((item) => value === item.const)\n                ?.title || `${value} is an invalid option`\n        );\n    }\n\n    return value;\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/components/form/templates/common.ts"],"names":[],"mappings":"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","sourcesContent":["import { get, isEmpty } from 'lodash-es';\nimport React from 'react';\nimport { isArrayType, isObjectType } from '../schema';\nimport { FormSchema } from '../form.types';\nimport { JSONSchema7 } from 'json-schema';\n\n/**\n *\n * @param title\n */\nexport function renderTitle(title: string) {\n    if (!title) {\n        return;\n    }\n\n    return React.createElement(\n        'h1',\n        { className: 'mdc-typography mdc-typography--headline1' },\n        title\n    );\n}\n\n/**\n *\n * @param description\n */\nexport function renderDescription(description: string) {\n    if (!description) {\n        return;\n    }\n\n    return React.createElement('limel-markdown', {\n        value: description,\n    });\n}\n\n/**\n * Find a suitable title for a nested structure.\n *\n * If an object has the key 'title' it will have priority, followed by the key 'name'.\n * If 'title' nor 'name' is found, a required item will be considered.\n * Otherwise the first occurrence of a nonempty string is chosen.\n *\n * @param data - the data to find the title for\n * @param fieldSchema - schema for the item\n * @param formSchema - schema for the form\n * @returns describing title of the data\n */\nexport function findTitle(\n    data: any,\n    fieldSchema: JSONSchema7,\n    formSchema: JSONSchema7\n) {\n    if (!data) {\n        return null;\n    }\n\n    if (Array.isArray(data) && isObjectType(fieldSchema.items as FormSchema)) {\n        return findTitle(data[0], fieldSchema, formSchema);\n    }\n\n    if (Array.isArray(data) || typeof data !== 'object') {\n        return findSchemaTitle(data, fieldSchema);\n    }\n\n    const subSchema = findSubSchema(\n        fieldSchema as FormSchema,\n        formSchema as FormSchema\n    );\n\n    data = sortDataByProperties(data, subSchema.properties);\n\n    const firstEntry = findFirstEntry(data, subSchema);\n    if (!firstEntry) {\n        return null;\n    }\n\n    if (!subSchema.properties) {\n        return null;\n    }\n\n    const [key, value] = firstEntry;\n\n    return findTitle(value, subSchema.properties[key], formSchema);\n}\n\nfunction sortDataByProperties(data: any, properties: object) {\n    if (!properties || isEmpty(properties)) {\n        return data;\n    }\n\n    const newData = {};\n    for (const key of Object.keys(properties)) newData[key] = data[key];\n\n    return newData;\n}\n\nfunction findFirstEntry(data: any, subSchema: FormSchema) {\n    const entries = [\n        ['title', data.title],\n        ['name', data.name],\n        getRequiredEntry(data, subSchema),\n        ...Object.entries(data),\n    ];\n\n    return entries.find((entry) => {\n        const value = entry[1];\n\n        return !!value && typeof value !== 'boolean';\n    });\n}\n\nfunction getRequiredEntry(data: any, subSchema: FormSchema) {\n    if (!('required' in subSchema)) {\n        return [null, null];\n    }\n\n    const firstNonEmptyRequiredKey = Object.keys(data).find((key) =>\n        subSchema.required.includes(key)\n    );\n    if (!firstNonEmptyRequiredKey) {\n        return [null, null];\n    }\n\n    return [firstNonEmptyRequiredKey, data[firstNonEmptyRequiredKey]];\n}\n\nfunction findSubSchema(schema: FormSchema, formSchema: FormSchema) {\n    let subSchema = schema;\n    if (isArrayType(schema)) {\n        subSchema = schema.items as FormSchema;\n    }\n\n    if (subSchema.$ref) {\n        const path = subSchema.$ref.split('/').slice(1).join('.');\n        subSchema = get(formSchema, path);\n    }\n\n    return subSchema;\n}\n\nfunction findSchemaTitle(value: any, schema: JSONSchema7) {\n    if (\n        isArrayType(schema as FormSchema) &&\n        (schema.items as JSONSchema7).anyOf\n    ) {\n        const titles = ((schema.items as JSONSchema7).anyOf as JSONSchema7[])\n            .filter((item) => value.includes(item.const))\n            .map((item) => item.title);\n\n        return titles.join(', ');\n    }\n\n    if (schema.oneOf) {\n        return (\n            (schema.oneOf as JSONSchema7[]).find((item) => value === item.const)\n                ?.title || `${value} is an invalid option`\n        );\n    }\n\n    return value;\n}\n"]}

package/dist/collection/components/snackbar/snackbar.js

@@ -21,9 +21,9 @@ const hideAnimationDuration = 300;
  * :::note
  * If the information you want to display has a higher importance or priority,
  * and you need to make sure that the user takes an action to dismiss it,
- * consider using the [Banner](/#/component/limel-banner/) component instead.
+ * consider using the [Banner](#/component/limel-banner/) component instead.
  * For more complex interactions and for delivering more detailed information,
- * [Dialog](/#/component/limel-dialog/) is a better choice.
+ * [Dialog](#/component/limel-dialog/) is a better choice.
  * :::
  *
  * @exampleComponent limel-example-snackbar

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

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from '../../util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n */\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * `true` if the snackbar is open, `false` otherwise.\n     */\n    @Prop({ reflect: true })\n    public open: boolean = false;\n\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     * If set to `-1`, the snackbar will be persistent.\n     * This means:\n     * - either the end user will need to close it manually,\n     * which requires the `dismissible` property to be set to `true`.\n     * - or the snackbar needs to be closed programmatically.\n     */\n    @Prop({ reflect: true })\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private readonly host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private readonly action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private readonly hide: EventEmitter<void>;\n\n    @State()\n    private offset: number = 0;\n\n    @State()\n    private isOpen: boolean = false;\n\n    @State()\n    private closing: boolean = true;\n\n    private readonly snackbarId: string;\n    private timeoutId?: number;\n\n    public constructor() {\n        this.snackbarId = createRandomString();\n    }\n\n    public componentDidLoad() {\n        if (this.open) {\n            requestAnimationFrame(this.handleOpen);\n        }\n    }\n\n    @Listen('changeOffset')\n    protected onChangeIndex(event: CustomEvent<number>) {\n        event.stopPropagation();\n        this.offset = event.detail;\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        if (this.open) {\n            this.handleOpen();\n        } else {\n            this.handleClose();\n        }\n\n        this.isOpen = this.open;\n    }\n\n    /**\n     * Show the snackbar\n     * @deprecated Use the `open` property instead.\n     */\n    @Method()\n    public async show() {\n        console.warn(\n            'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.'\n        );\n        if (!this.open) {\n            this.handleOpen();\n        }\n    }\n\n    public handleOpen = () => {\n        if (this.isOpen) {\n            return;\n        }\n\n        this.isOpen = true;\n        this.closing = false;\n        container.add(this.host);\n\n        if (this.timeout && this.timeout !== -1) {\n            this.timeoutId = window.setTimeout(\n                this.handleClose,\n                Math.max(\n                    this.timeout - hideAnimationDuration,\n                    hideAnimationDuration\n                )\n            );\n        }\n    };\n\n    private readonly handleClose = () => {\n        if (!this.isOpen) {\n            return;\n        }\n\n        this.closing = true;\n\n        if (this.timeoutId) {\n            clearTimeout(this.timeoutId);\n            this.timeoutId = undefined;\n        }\n\n        setTimeout(() => {\n            this.isOpen = false;\n            container.remove(this.host);\n            this.hide.emit();\n            this.offset = 0;\n        }, hideAnimationDuration);\n    };\n\n    public render() {\n        return (\n            <aside\n                popover=\"manual\"\n                style={{\n                    '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,\n                    '--snackbar-distance-to-top-edge': `${this.offset}px`,\n                }}\n                class={{\n                    open: this.open,\n                    'is-closing': this.closing,\n                    'limel-portal--parent': true,\n                }}\n                id={this.snackbarId}\n                role={this.setAriaRoles()}\n                aria-relevant={this.open ? 'additions' : undefined}\n            >\n                <div class=\"surface\" aria-atomic=\"false\">\n                    <div class=\"label\">{this.message}</div>\n                    {this.renderActions(this.actionText)}\n                    {this.renderDismissButton(this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private setAriaRoles() {\n        if (!this.open) {\n            return;\n        }\n\n        if (!this.timeout || this.timeout === -1) {\n            return 'alertdialog';\n        }\n\n        return 'status';\n    }\n\n    private readonly handleClickAction = () => {\n        this.action.emit();\n    };\n\n    private renderActions(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button label={actionText} onClick={this.handleClickAction} />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"dismiss-button\"\n                    icon=\"multiply\"\n                    label={label}\n                    onClick={this.handleClose}\n                    aria-controls={this.snackbarId}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        if (!this.timeout || this.timeout === -1) {\n            return;\n        }\n\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from '../../util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n */\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * `true` if the snackbar is open, `false` otherwise.\n     */\n    @Prop({ reflect: true })\n    public open: boolean = false;\n\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     * If set to `-1`, the snackbar will be persistent.\n     * This means:\n     * - either the end user will need to close it manually,\n     * which requires the `dismissible` property to be set to `true`.\n     * - or the snackbar needs to be closed programmatically.\n     */\n    @Prop({ reflect: true })\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private readonly host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private readonly action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private readonly hide: EventEmitter<void>;\n\n    @State()\n    private offset: number = 0;\n\n    @State()\n    private isOpen: boolean = false;\n\n    @State()\n    private closing: boolean = true;\n\n    private readonly snackbarId: string;\n    private timeoutId?: number;\n\n    public constructor() {\n        this.snackbarId = createRandomString();\n    }\n\n    public componentDidLoad() {\n        if (this.open) {\n            requestAnimationFrame(this.handleOpen);\n        }\n    }\n\n    @Listen('changeOffset')\n    protected onChangeIndex(event: CustomEvent<number>) {\n        event.stopPropagation();\n        this.offset = event.detail;\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        if (this.open) {\n            this.handleOpen();\n        } else {\n            this.handleClose();\n        }\n\n        this.isOpen = this.open;\n    }\n\n    /**\n     * Show the snackbar\n     * @deprecated Use the `open` property instead.\n     */\n    @Method()\n    public async show() {\n        console.warn(\n            'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.'\n        );\n        if (!this.open) {\n            this.handleOpen();\n        }\n    }\n\n    public handleOpen = () => {\n        if (this.isOpen) {\n            return;\n        }\n\n        this.isOpen = true;\n        this.closing = false;\n        container.add(this.host);\n\n        if (this.timeout && this.timeout !== -1) {\n            this.timeoutId = window.setTimeout(\n                this.handleClose,\n                Math.max(\n                    this.timeout - hideAnimationDuration,\n                    hideAnimationDuration\n                )\n            );\n        }\n    };\n\n    private readonly handleClose = () => {\n        if (!this.isOpen) {\n            return;\n        }\n\n        this.closing = true;\n\n        if (this.timeoutId) {\n            clearTimeout(this.timeoutId);\n            this.timeoutId = undefined;\n        }\n\n        setTimeout(() => {\n            this.isOpen = false;\n            container.remove(this.host);\n            this.hide.emit();\n            this.offset = 0;\n        }, hideAnimationDuration);\n    };\n\n    public render() {\n        return (\n            <aside\n                popover=\"manual\"\n                style={{\n                    '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,\n                    '--snackbar-distance-to-top-edge': `${this.offset}px`,\n                }}\n                class={{\n                    open: this.open,\n                    'is-closing': this.closing,\n                    'limel-portal--parent': true,\n                }}\n                id={this.snackbarId}\n                role={this.setAriaRoles()}\n                aria-relevant={this.open ? 'additions' : undefined}\n            >\n                <div class=\"surface\" aria-atomic=\"false\">\n                    <div class=\"label\">{this.message}</div>\n                    {this.renderActions(this.actionText)}\n                    {this.renderDismissButton(this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private setAriaRoles() {\n        if (!this.open) {\n            return;\n        }\n\n        if (!this.timeout || this.timeout === -1) {\n            return 'alertdialog';\n        }\n\n        return 'status';\n    }\n\n    private readonly handleClickAction = () => {\n        this.action.emit();\n    };\n\n    private renderActions(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button label={actionText} onClick={this.handleClickAction} />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"dismiss-button\"\n                    icon=\"multiply\"\n                    label={label}\n                    onClick={this.handleClose}\n                    aria-controls={this.snackbarId}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        if (!this.timeout || this.timeout === -1) {\n            return;\n        }\n\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"]}

package/dist/collection/components/switch/switch.js

@@ -14,7 +14,7 @@ import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter
  * :::important
  * Checkboxes are sometimes used interchangeably with switches in user interfaces.
  * But there is an important difference between the two! Please read our guidelines about
- * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+ * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
  *
  * @exampleComponent limel-example-switch
  * @exampleComponent limel-example-switch-helper-text

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch'\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        if (this.readonly) {\n            let icon: string | Icon = 'minus';\n            if (this.value) {\n                icon = {\n                    name: 'ok',\n                    color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n                };\n            }\n\n            return [\n                <limel-dynamic-label\n                    value={this.value}\n                    aria-controls={\n                        this.helperText ? this.helperTextId : undefined\n                    }\n                    defaultLabel={{ text: this.label, icon: icon }}\n                    labels={this.readonlyLabels}\n                />,\n                this.renderHelperLine(),\n            ];\n        }\n\n        return [\n            <button\n                id={this.fieldId}\n                class={{\n                    'mdc-switch': true,\n                    'mdc-switch--unselected': !this.value,\n                    'mdc-switch--selected': this.value,\n                }}\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={this.value}\n                disabled={this.disabled}\n                onClick={this.handleClick}\n                aria-controls={this.helperText ? this.helperTextId : undefined}\n            >\n                <div class=\"mdc-switch__track\" />\n                <div class=\"mdc-switch__handle-track\">\n                    <div class=\"mdc-switch__handle\">\n                        <div class=\"mdc-switch__shadow\">\n                            <div class=\"mdc-elevation-overlay\"></div>\n                        </div>\n                        <div class=\"mdc-switch__ripple\"></div>\n                        <div class=\"mdc-switch__icons\">\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                            </svg>\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M20 13H4v-2h16v2z\" />\n                            </svg>\n                        </div>\n                    </div>\n                </div>\n            </button>,\n            <label\n                class={`${this.disabled ? 'disabled' : ''}`}\n                htmlFor={this.fieldId}\n            >\n                {this.label}\n            </label>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                invalid={this.invalid}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AAIzC;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,MAAM;;IAyDP,iBAAY,GAAW,kBAAkB,EAAE,CAAC;IAoH5C,qBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;QACvB,OAAO;OACV;MAED,OAAO,CACH,yBACI,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,GACvB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC;IACrE,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;;oBApLgB,KAAK;oBAQL,KAAK;;iBAYR,KAAK;;0BAa4B,EAAE;mBAahC,kBAAkB,EAAE;;EAI/B,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,aAAa,CACK,CAAC;IACvB,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5C,CAAC;EAEM,oBAAoB;;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;EAC9B,CAAC;EAEM,MAAM;IACT,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,IAAI,GAAkB,OAAO,CAAC;MAClC,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,GAAG;UACH,IAAI,EAAE,IAAI;UACV,KAAK,EAAE,6DAA6D;SACvE,CAAC;OACL;MAED,OAAO;QACH,2BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBAEb,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAEnD,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC9C,MAAM,EAAE,IAAI,CAAC,cAAc,GAC7B;QACF,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACH,cACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE;UACH,YAAY,EAAE,IAAI;UAClB,wBAAwB,EAAE,CAAC,IAAI,CAAC,KAAK;UACrC,sBAAsB,EAAE,IAAI,CAAC,KAAK;SACrC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,mBACV,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;QAE9D,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,oBAAoB;YAC3B,WAAK,KAAK,EAAC,oBAAoB;cAC3B,WAAK,KAAK,EAAC,uBAAuB,GAAO,CACvC;YACN,WAAK,KAAK,EAAC,oBAAoB,GAAO;YACtC,WAAK,KAAK,EAAC,mBAAmB;cAC1B,WACI,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,qEAAqE,GAAG,CAC9E;cACN,WACI,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,mBAAmB,GAAG,CAC5B,CACJ,CACJ,CACJ,CACD;MACT,aACI,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACP;MACR,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB;IACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;EACvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBJ","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch'\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        if (this.readonly) {\n            let icon: string | Icon = 'minus';\n            if (this.value) {\n                icon = {\n                    name: 'ok',\n                    color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n                };\n            }\n\n            return [\n                <limel-dynamic-label\n                    value={this.value}\n                    aria-controls={\n                        this.helperText ? this.helperTextId : undefined\n                    }\n                    defaultLabel={{ text: this.label, icon: icon }}\n                    labels={this.readonlyLabels}\n                />,\n                this.renderHelperLine(),\n            ];\n        }\n\n        return [\n            <button\n                id={this.fieldId}\n                class={{\n                    'mdc-switch': true,\n                    'mdc-switch--unselected': !this.value,\n                    'mdc-switch--selected': this.value,\n                }}\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={this.value}\n                disabled={this.disabled}\n                onClick={this.handleClick}\n                aria-controls={this.helperText ? this.helperTextId : undefined}\n            >\n                <div class=\"mdc-switch__track\" />\n                <div class=\"mdc-switch__handle-track\">\n                    <div class=\"mdc-switch__handle\">\n                        <div class=\"mdc-switch__shadow\">\n                            <div class=\"mdc-elevation-overlay\"></div>\n                        </div>\n                        <div class=\"mdc-switch__ripple\"></div>\n                        <div class=\"mdc-switch__icons\">\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                            </svg>\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M20 13H4v-2h16v2z\" />\n                            </svg>\n                        </div>\n                    </div>\n                </div>\n            </button>,\n            <label\n                class={`${this.disabled ? 'disabled' : ''}`}\n                htmlFor={this.fieldId}\n            >\n                {this.label}\n            </label>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                invalid={this.invalid}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}

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

@@ -34,11 +34,11 @@ const DEFAULT_MAX_LENGTH = 50;
  * Use them only when they add significant value.
  * - A good tip is concise, helpful, and informative.
  * Don't explain the obvious or simply repeat what is already on the screen.
- * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+ * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
  * - If the tip is essential to the primary tasks that the user is performing,
  * such as warnings or important notes, include the information directly in the
  * interface instead.
- * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+ * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
  * use that, not a tooltip.
  * - Make sure to use the tooltip on an element that users naturally and
  * effortlessly recognize can be hovered.

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 { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './get-owner-element';\nimport { TooltipTimer } from './tooltip-timer';\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 (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\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 *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\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    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\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 ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false)\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\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={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\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        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\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';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './get-owner-element';\nimport { TooltipTimer } from './tooltip-timer';\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 (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\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 *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\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    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\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 ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false)\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\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={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\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        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\n    };\n}\n"]}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"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],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"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\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"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\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[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-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-badge\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[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\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"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\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-drag-handle\",[[0,\"limel-drag-handle\",{\"dragDirection\":[513,\"drag-direction\"],\"tooltipOpenDirection\":[513,\"tooltip-open-direction\"],\"language\":[513]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"lineWrapping\":[4,\"line-wrapping\"],\"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\":[513],\"justify\":[513],\"align\":[513],\"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-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-breadcrumbs_8\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[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\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-helper-line\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-portal_3\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"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],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"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\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"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\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[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-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[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\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"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\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-drag-handle\",[[0,\"limel-drag-handle\",{\"dragDirection\":[513,\"drag-direction\"],\"tooltipOpenDirection\":[513,\"tooltip-open-direction\"],\"language\":[513]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-menu-item-meta\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"lineWrapping\":[4,\"line-wrapping\"],\"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\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-helper-line\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-badge\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-breadcrumbs_8\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[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\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]]]"), options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

package/dist/esm/limel-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"limel-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}
+{"file":"limel-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}