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

package/dist/cjs/limel-tooltip_2.cjs.entry.js.map

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

package/dist/cjs/loader.cjs.js

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

package/dist/collection/components/portal/portal.js

@@ -23,23 +23,10 @@ import { createPopper, } from '@popperjs/core';
  * `connectedCallback`.
  * @slot - Content to put inside the portal
  * @private
- * @exampleComponent limel-example-portal
+ * @exampleComponent limel-example-portal-basic
  */
 /* eslint-enable jsdoc/check-indentation */
 export class Portal {
-  onVisible() {
-    if (!this.visible) {
-      this.hideContainer();
-      this.styleContainer();
-      this.destroyPopper();
-      return;
-    }
-    this.styleContainer();
-    this.createPopper();
-    requestAnimationFrame(() => {
-      this.showContainer();
-    });
-  }
   constructor() {
     this.loaded = false;
     this.openDirection = 'bottom';
@@ -87,6 +74,19 @@ export class Portal {
   render() {
     return h("slot", null);
   }
+  onVisible() {
+    if (!this.visible) {
+      this.hideContainer();
+      this.styleContainer();
+      this.destroyPopper();
+      return;
+    }
+    this.styleContainer();
+    this.createPopper();
+    requestAnimationFrame(() => {
+      this.showContainer();
+    });
+  }
   createContainer() {
     const slot = this.host.shadowRoot.querySelector('slot');
     const content = (slot.assignedElements && slot.assignedElements()) || [];
@@ -259,7 +259,7 @@ export class Portal {
           "text": "Decides which direction the portal content should open."
         },
         "attribute": "open-direction",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'bottom'"
       },
       "position": {
@@ -277,7 +277,7 @@ export class Portal {
           "text": "Position of the content."
         },
         "attribute": "position",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'absolute'"
       },
       "containerId": {
@@ -295,7 +295,7 @@ export class Portal {
           "text": "A unique ID."
         },
         "attribute": "container-id",
-        "reflect": false
+        "reflect": true
       },
       "containerStyle": {
         "type": "unknown",
@@ -348,7 +348,7 @@ export class Portal {
           "text": "Used to make a dropdown have the same width as the trigger, for example\nin `limel-picker`."
         },
         "attribute": "inherit-parent-width",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "visible": {
@@ -366,7 +366,7 @@ export class Portal {
           "text": "True if the content within the portal should be visible.\n\nIf the content is from within a dialog for instance, this can be set to\ntrue from false when the dialog opens to position the content properly."
         },
         "attribute": "visible",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n    createPopper,\n    Instance,\n    OptionsGeneric,\n    Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/* eslint-disable jsdoc/check-indentation */\n/**\n * The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n *\n * There are some caveats when using this component\n *\n * Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * Any styling that is applied to content from the parent will be lost, if the\n * content is just another web compoent it will work without any issues.\n * Alternatively, use the\n * `style=\"\"` html attribute.\n * Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal\n */\n/* eslint-enable jsdoc/check-indentation */\n@Component({\n    tag: 'limel-portal',\n    shadow: true,\n    styleUrl: 'portal.scss',\n})\nexport class Portal {\n    /**\n     * Decides which direction the portal content should open.\n     */\n    @Prop()\n    public openDirection: OpenDirection = 'bottom';\n\n    /**\n     * Position of the content.\n     */\n    @Prop()\n    public position: 'fixed' | 'absolute' = 'absolute';\n\n    /**\n     * A unique ID.\n     */\n    @Prop()\n    public containerId: string;\n\n    /**\n     * Dynamic styling that can be applied to the container holding the content.\n     */\n    @Prop()\n    public containerStyle: object = {};\n\n    /**\n     * Parent element to move the content to.\n     */\n    @Prop()\n    public parent: HTMLElement = document.body;\n\n    /**\n     * Used to make a dropdown have the same width as the trigger, for example\n     * in `limel-picker`.\n     */\n    @Prop()\n    public inheritParentWidth = false;\n\n    /**\n     * True if the content within the portal should be visible.\n     *\n     * If the content is from within a dialog for instance, this can be set to\n     * true from false when the dialog opens to position the content properly.\n     */\n    @Prop()\n    public visible = false;\n\n    private parents: WeakMap<HTMLElement, HTMLElement>;\n\n    @Watch('visible')\n    protected onVisible() {\n        if (!this.visible) {\n            this.hideContainer();\n            this.styleContainer();\n            this.destroyPopper();\n\n            return;\n        }\n\n        this.styleContainer();\n        this.createPopper();\n        requestAnimationFrame(() => {\n            this.showContainer();\n        });\n    }\n\n    @Element()\n    private host: HTMLLimelPortalElement;\n\n    private container: HTMLElement;\n\n    private popperInstance: Instance;\n\n    private loaded = false;\n\n    private observer: ResizeObserver;\n\n    constructor() {\n        this.parents = new WeakMap();\n    }\n\n    public disconnectedCallback() {\n        this.removeContainer();\n        this.destroyPopper();\n        if (this.observer) {\n            this.observer.unobserve(this.container);\n        }\n    }\n\n    public connectedCallback() {\n        if (!this.loaded) {\n            return;\n        }\n\n        this.createContainer();\n        this.hideContainer();\n        this.attachContainer();\n        this.styleContainer();\n\n        if (this.visible) {\n            this.createPopper();\n            this.showContainer();\n        }\n\n        if ('ResizeObserver' in window) {\n            const observer = new ResizeObserver(() => {\n                if (this.popperInstance) {\n                    this.styleContainer();\n                    this.popperInstance.update();\n                }\n            });\n            observer.observe(this.container);\n        }\n    }\n\n    public componentDidLoad() {\n        this.loaded = true;\n        this.connectedCallback();\n    }\n\n    public render() {\n        return <slot />;\n    }\n\n    private createContainer() {\n        const slot: HTMLSlotElement =\n            this.host.shadowRoot.querySelector('slot');\n        const content =\n            (slot.assignedElements && slot.assignedElements()) || [];\n\n        this.container = document.createElement('div');\n        this.container.setAttribute('id', this.containerId);\n        this.container.setAttribute('class', 'limel-portal--container');\n        Object.assign(this.container, {\n            portalSource: this.host,\n        });\n\n        content.forEach((element: HTMLElement) => {\n            this.parents.set(element, element.parentElement);\n            this.container.appendChild(element);\n        });\n    }\n\n    private attachContainer() {\n        this.parent.appendChild(this.container);\n    }\n\n    private removeContainer() {\n        if (!this.container) {\n            return;\n        }\n\n        Array.from(this.container.children).forEach((element: HTMLElement) => {\n            const parent = this.parents.get(element);\n            if (!parent) {\n                return;\n            }\n\n            parent.appendChild(element);\n        });\n\n        this.hideContainer();\n        this.container.parentElement.removeChild(this.container);\n    }\n\n    private hideContainer() {\n        this.container.style.opacity = '0';\n    }\n\n    private showContainer() {\n        this.container.style.opacity = '1';\n    }\n\n    private styleContainer() {\n        const hostWidth = this.host.getBoundingClientRect().width;\n\n        if (this.visible) {\n            this.container.style.display = 'block';\n        } else {\n            this.container.style.display = 'none';\n        }\n\n        if (this.inheritParentWidth) {\n            const containerWidth = this.getContentWidth(this.container);\n            let width = containerWidth;\n            if (hostWidth > 0) {\n                width = hostWidth;\n            }\n\n            this.container.style.width = `${width}px`;\n        }\n\n        this.ensureContainerFitsInViewPort();\n\n        Object.keys(this.containerStyle).forEach((property) => {\n            this.container.style[property] = this.containerStyle[property];\n        });\n    }\n\n    private getContentWidth(element: HTMLElement | Element) {\n        if (!element) {\n            return null;\n        }\n\n        const width = element.getBoundingClientRect().width;\n        if (width !== 0) {\n            return width;\n        }\n\n        const elementContent = element.querySelector('*');\n\n        return this.getContentWidth(elementContent);\n    }\n\n    private createPopper() {\n        const config = this.createPopperConfig();\n\n        this.popperInstance = createPopper(this.host, this.container, config);\n    }\n\n    private destroyPopper() {\n        this.popperInstance?.destroy();\n        this.popperInstance = null;\n    }\n\n    private createPopperConfig(): Partial<\n        OptionsGeneric<Partial<FlipModifier>>\n    > {\n        const placement = this.getPlacement(this.openDirection);\n        const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n        return {\n            strategy: this.position,\n            placement: placement,\n            modifiers: [\n                {\n                    name: 'flip',\n                    options: {\n                        fallbackPlacements: [flipPlacement],\n                    },\n                },\n            ],\n        };\n    }\n\n    private getPlacement(direction: OpenDirection): Placement {\n        const placements: Record<OpenDirection, Placement> = {\n            'left-start': 'left-start',\n            left: 'left',\n            'left-end': 'left-end',\n            'right-start': 'right-start',\n            right: 'right',\n            'right-end': 'right-end',\n            'top-start': 'top-start',\n            top: 'top',\n            'top-end': 'top-end',\n            'bottom-start': 'bottom-start',\n            bottom: 'bottom',\n            'bottom-end': 'bottom-end',\n        };\n\n        return placements[direction];\n    }\n\n    private getFlipPlacement(direction: OpenDirection): Placement {\n        const flipPlacements: Record<OpenDirection, Placement> = {\n            'left-start': 'right-start',\n            left: 'right',\n            'left-end': 'right-end',\n            'right-start': 'left-start',\n            right: 'left',\n            'right-end': 'left-end',\n            'top-start': 'bottom-start',\n            top: 'bottom',\n            'top-end': 'bottom-end',\n            'bottom-start': 'top-start',\n            bottom: 'top',\n            'bottom-end': 'top-end',\n        };\n\n        return flipPlacements[direction];\n    }\n\n    private ensureContainerFitsInViewPort() {\n        const viewHeight = Math.max(\n            document.documentElement.clientHeight || 0,\n            window.innerHeight || 0\n        );\n\n        const { top, bottom } = this.host.getBoundingClientRect();\n        const spaceAboveTopOfSurface = Math.max(top, 0);\n        const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n        const extraCosmeticSpace = 16;\n        const maxHeight =\n            Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n            extraCosmeticSpace;\n\n        this.container.style.maxHeight = `${maxHeight}px`;\n    }\n}\n"]}
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n    createPopper,\n    Instance,\n    OptionsGeneric,\n    Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/* eslint-disable jsdoc/check-indentation */\n/**\n * The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n *\n * There are some caveats when using this component\n *\n * Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * Any styling that is applied to content from the parent will be lost, if the\n * content is just another web compoent it will work without any issues.\n * Alternatively, use the\n * `style=\"\"` html attribute.\n * Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\n/* eslint-enable jsdoc/check-indentation */\n@Component({\n    tag: 'limel-portal',\n    shadow: true,\n    styleUrl: 'portal.scss',\n})\nexport class Portal {\n    /**\n     * Decides which direction the portal content should open.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom';\n\n    /**\n     * Position of the content.\n     */\n    @Prop({ reflect: true })\n    public position: 'fixed' | 'absolute' = 'absolute';\n\n    /**\n     * A unique ID.\n     */\n    @Prop({ reflect: true })\n    public containerId: string;\n\n    /**\n     * Dynamic styling that can be applied to the container holding the content.\n     */\n    @Prop()\n    public containerStyle: object = {};\n\n    /**\n     * Parent element to move the content to.\n     */\n    @Prop()\n    public parent: HTMLElement = document.body;\n\n    /**\n     * Used to make a dropdown have the same width as the trigger, for example\n     * in `limel-picker`.\n     */\n    @Prop({ reflect: true })\n    public inheritParentWidth = false;\n\n    /**\n     * True if the content within the portal should be visible.\n     *\n     * If the content is from within a dialog for instance, this can be set to\n     * true from false when the dialog opens to position the content properly.\n     */\n    @Prop({ reflect: true })\n    public visible = false;\n\n    @Element()\n    private host: HTMLLimelPortalElement;\n\n    private parents: WeakMap<HTMLElement, HTMLElement>;\n    private container: HTMLElement;\n    private popperInstance: Instance;\n    private loaded = false;\n    private observer: ResizeObserver;\n\n    constructor() {\n        this.parents = new WeakMap();\n    }\n\n    public disconnectedCallback() {\n        this.removeContainer();\n        this.destroyPopper();\n        if (this.observer) {\n            this.observer.unobserve(this.container);\n        }\n    }\n\n    public connectedCallback() {\n        if (!this.loaded) {\n            return;\n        }\n\n        this.createContainer();\n        this.hideContainer();\n        this.attachContainer();\n        this.styleContainer();\n\n        if (this.visible) {\n            this.createPopper();\n            this.showContainer();\n        }\n\n        if ('ResizeObserver' in window) {\n            const observer = new ResizeObserver(() => {\n                if (this.popperInstance) {\n                    this.styleContainer();\n                    this.popperInstance.update();\n                }\n            });\n            observer.observe(this.container);\n        }\n    }\n\n    public componentDidLoad() {\n        this.loaded = true;\n        this.connectedCallback();\n    }\n\n    public render() {\n        return <slot />;\n    }\n\n    @Watch('visible')\n    protected onVisible() {\n        if (!this.visible) {\n            this.hideContainer();\n            this.styleContainer();\n            this.destroyPopper();\n\n            return;\n        }\n\n        this.styleContainer();\n        this.createPopper();\n        requestAnimationFrame(() => {\n            this.showContainer();\n        });\n    }\n\n    private createContainer() {\n        const slot: HTMLSlotElement =\n            this.host.shadowRoot.querySelector('slot');\n        const content =\n            (slot.assignedElements && slot.assignedElements()) || [];\n\n        this.container = document.createElement('div');\n        this.container.setAttribute('id', this.containerId);\n        this.container.setAttribute('class', 'limel-portal--container');\n        Object.assign(this.container, {\n            portalSource: this.host,\n        });\n\n        content.forEach((element: HTMLElement) => {\n            this.parents.set(element, element.parentElement);\n            this.container.appendChild(element);\n        });\n    }\n\n    private attachContainer() {\n        this.parent.appendChild(this.container);\n    }\n\n    private removeContainer() {\n        if (!this.container) {\n            return;\n        }\n\n        Array.from(this.container.children).forEach((element: HTMLElement) => {\n            const parent = this.parents.get(element);\n            if (!parent) {\n                return;\n            }\n\n            parent.appendChild(element);\n        });\n\n        this.hideContainer();\n        this.container.parentElement.removeChild(this.container);\n    }\n\n    private hideContainer() {\n        this.container.style.opacity = '0';\n    }\n\n    private showContainer() {\n        this.container.style.opacity = '1';\n    }\n\n    private styleContainer() {\n        const hostWidth = this.host.getBoundingClientRect().width;\n\n        if (this.visible) {\n            this.container.style.display = 'block';\n        } else {\n            this.container.style.display = 'none';\n        }\n\n        if (this.inheritParentWidth) {\n            const containerWidth = this.getContentWidth(this.container);\n            let width = containerWidth;\n            if (hostWidth > 0) {\n                width = hostWidth;\n            }\n\n            this.container.style.width = `${width}px`;\n        }\n\n        this.ensureContainerFitsInViewPort();\n\n        Object.keys(this.containerStyle).forEach((property) => {\n            this.container.style[property] = this.containerStyle[property];\n        });\n    }\n\n    private getContentWidth(element: HTMLElement | Element) {\n        if (!element) {\n            return null;\n        }\n\n        const width = element.getBoundingClientRect().width;\n        if (width !== 0) {\n            return width;\n        }\n\n        const elementContent = element.querySelector('*');\n\n        return this.getContentWidth(elementContent);\n    }\n\n    private createPopper() {\n        const config = this.createPopperConfig();\n\n        this.popperInstance = createPopper(this.host, this.container, config);\n    }\n\n    private destroyPopper() {\n        this.popperInstance?.destroy();\n        this.popperInstance = null;\n    }\n\n    private createPopperConfig(): Partial<\n        OptionsGeneric<Partial<FlipModifier>>\n    > {\n        const placement = this.getPlacement(this.openDirection);\n        const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n        return {\n            strategy: this.position,\n            placement: placement,\n            modifiers: [\n                {\n                    name: 'flip',\n                    options: {\n                        fallbackPlacements: [flipPlacement],\n                    },\n                },\n            ],\n        };\n    }\n\n    private getPlacement(direction: OpenDirection): Placement {\n        const placements: Record<OpenDirection, Placement> = {\n            'left-start': 'left-start',\n            left: 'left',\n            'left-end': 'left-end',\n            'right-start': 'right-start',\n            right: 'right',\n            'right-end': 'right-end',\n            'top-start': 'top-start',\n            top: 'top',\n            'top-end': 'top-end',\n            'bottom-start': 'bottom-start',\n            bottom: 'bottom',\n            'bottom-end': 'bottom-end',\n        };\n\n        return placements[direction];\n    }\n\n    private getFlipPlacement(direction: OpenDirection): Placement {\n        const flipPlacements: Record<OpenDirection, Placement> = {\n            'left-start': 'right-start',\n            left: 'right',\n            'left-end': 'right-end',\n            'right-start': 'left-start',\n            right: 'left',\n            'right-end': 'left-end',\n            'top-start': 'bottom-start',\n            top: 'bottom',\n            'top-end': 'bottom-end',\n            'bottom-start': 'top-start',\n            bottom: 'top',\n            'bottom-end': 'top-end',\n        };\n\n        return flipPlacements[direction];\n    }\n\n    private ensureContainerFitsInViewPort() {\n        const viewHeight = Math.max(\n            document.documentElement.clientHeight || 0,\n            window.innerHeight || 0\n        );\n\n        const { top, bottom } = this.host.getBoundingClientRect();\n        const spaceAboveTopOfSurface = Math.max(top, 0);\n        const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n        const extraCosmeticSpace = 16;\n        const maxHeight =\n            Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n            extraCosmeticSpace;\n\n        this.container.style.maxHeight = `${maxHeight}px`;\n    }\n}\n"]}

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

@@ -2,14 +2,78 @@ import { MDCSlider } from '@material/slider';
 import { h, Host, } from '@stencil/core';
 import { getPercentageClass } from './getPercentageClass';
 import { createRandomString } from '../../util/random-string';
+const DEFAULT_FACTOR = 1;
+const DEFAULT_MAX_VALUE = 100;
+const DEFAULT_MIN_VALUE = 0;
 /**
- * @exampleComponent limel-example-slider
+ * @exampleComponent limel-example-slider-basic
  * @exampleComponent limel-example-slider-multiplier
  * @exampleComponent limel-example-slider-multiplier-percentage-colors
  * @exampleComponent limel-example-slider-composite
  */
 export class Slider {
   constructor() {
+    this.renderHelperLine = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
+    };
+    this.initialize = () => {
+      const inputElement = this.getInputElement();
+      if (!inputElement) {
+        return;
+      }
+      const value = this.getValue();
+      /*
+      For some reason the input element's `value` attribute is removed
+      (probably by Stencil) when the element is first rendered. But if the
+      attribute is missing when MDCSlider is initialized (MDC v11.0.0),
+      MDCSlider crashes.
+      So we add the attribute right before initializing MDCSlider. /Ads
+      */
+      inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
+      /*
+      When creating the `mdcSlider` component, its important that the value set in
+      the input field obeys the range and the step size.
+
+      The MDCSlider will throw an exception unless the value in the input element
+      is dividible by the step value and is in the provided range.
+      If an exception occurs, this component will crash and it will be impossible to change
+      its value.
+      The logic below ensures that the component will render even though the
+      provided value is wrong.
+      This could be considered wrong, but it at least fixes so that it's possible
+      to change the value from the UI.
+      */
+      const greaterThanOrEqualMin = value >= this.valuemin;
+      const lessThanOrEqualMax = value <= this.valuemax;
+      if (!greaterThanOrEqualMin) {
+        const newMin = this.multiplyByFactor(value);
+        inputElement.setAttribute('min', `${newMin}`);
+      }
+      if (!lessThanOrEqualMax) {
+        const newMax = this.multiplyByFactor(value);
+        inputElement.setAttribute('max', `${newMax}`);
+      }
+      if (!this.isMultipleOfStep(value, this.step)) {
+        inputElement.removeAttribute('step');
+      }
+      this.createMDCSlider();
+    };
+    this.reCreateSliderWithStep = () => {
+      const inputElement = this.getInputElement();
+      const step = `${this.multiplyByFactor(this.step)}`;
+      inputElement.setAttribute('step', step);
+      this.destroyMDCSlider();
+      this.createMDCSlider();
+    };
+    this.createMDCSlider = () => {
+      const element = this.getRootElement();
+      this.mdcSlider = new MDCSlider(element);
+      this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
+      this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
+    };
     this.changeHandler = (event) => {
       let value = event.detail.value;
       const step = this.multiplyByFactor(this.step);
@@ -18,82 +82,97 @@ export class Slider {
       }
       this.change.emit(value / this.factor);
     };
+    this.inputHandler = (event) => {
+      this.setPercentageClass(event.detail.value / this.factor);
+    };
+    this.getContainerClassList = () => {
+      return {
+        [this.percentageClass]: true,
+        disabled: this.disabled || this.readonly,
+        readonly: this.readonly,
+      };
+    };
+    this.resizeObserverCallback = () => {
+      var _a;
+      (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
+    };
+    this.updateDisabledState = () => {
+      var _a;
+      if (!this.mdcSlider) {
+        return;
+      }
+      (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
+    };
+    this.multiplyByFactor = (value) => {
+      return Math.round(value * this.factor);
+    };
+    this.getValue = () => {
+      let value = this.value;
+      if (!isFinite(value)) {
+        value = this.valuemin;
+      }
+      return value;
+    };
+    this.setPercentageClass = (value) => {
+      this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
+    };
+    this.isMultipleOfStep = (value, step) => {
+      if (!step) {
+        return true;
+      }
+      return value % step === 0;
+    };
+    this.roundToStep = (value, step) => {
+      return Math.round(value / step) * step;
+    };
+    this.getRootElement = () => {
+      return this.rootElement.shadowRoot.querySelector('.mdc-slider');
+    };
+    this.getInputElement = () => {
+      const element = this.getRootElement();
+      if (!element) {
+        return;
+      }
+      return element.querySelector('input');
+    };
+    this.isStepConfigured = () => {
+      if (!this.step) {
+        return true;
+      }
+      const input = this.getInputElement();
+      if (!input) {
+        return true;
+      }
+      return input.hasAttribute('step');
+    };
     this.disabled = false;
     this.readonly = false;
-    this.factor = 1;
+    this.factor = DEFAULT_FACTOR;
     this.label = undefined;
     this.helperText = undefined;
     this.unit = '';
     this.value = undefined;
-    this.valuemax = 100;
-    this.valuemin = 0;
+    this.valuemax = DEFAULT_MAX_VALUE;
+    this.valuemin = DEFAULT_MIN_VALUE;
     this.step = undefined;
     this.percentageClass = undefined;
-    this.inputHandler = this.inputHandler.bind(this);
-    this.getContainerClassList = this.getContainerClassList.bind(this);
     this.labelId = createRandomString();
     this.helperTextId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
-  }
-  componentDidLoad() {
-    this.initialize();
-  }
-  initialize() {
-    const inputElement = this.getInputElement();
-    if (!inputElement) {
-      return;
-    }
-    const value = this.getValue();
-    /*
-    For some reason the input element's `value` attribute is removed
-    (probably by Stencil) when the element is first rendered. But if the
-    attribute is missing when MDCSlider is initialized (MDC v11.0.0),
-    MDCSlider crashes.
-    So we add the attribute right before initializing MDCSlider. /Ads
-    */
-    inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
-    /*
-    When creating the `mdcSlider` component, its important that the value set in
-    the input field obeys the range and the step size.
-
-    The MDCSlider will throw an exception unless the value in the input element
-    is dividible by the step value and is in the provided range.
-    If an exception occurs, this component will crash and it will be impossible to change
-    its value.
-    The logic below ensures that the component will render even though the
-    provided value is wrong.
-    This could be considered wrong, but it at least fixes so that it's possible
-    to change the value from the UI.
-    */
-    const greaterThanOrEqualMin = value >= this.valuemin;
-    const lessThanOrEqualMax = value <= this.valuemax;
-    if (!greaterThanOrEqualMin) {
-      const newMin = this.multiplyByFactor(value);
-      inputElement.setAttribute('min', `${newMin}`);
-    }
-    if (!lessThanOrEqualMax) {
-      const newMax = this.multiplyByFactor(value);
-      inputElement.setAttribute('max', `${newMax}`);
-    }
-    if (!this.isMultipleOfStep(value, this.step)) {
-      inputElement.removeAttribute('step');
-    }
-    this.createMDCSlider();
+    this.observer = new ResizeObserver(this.resizeObserverCallback);
+    this.observer.observe(this.rootElement);
   }
   componentWillLoad() {
     this.setPercentageClass(this.value);
   }
+  componentDidLoad() {
+    this.initialize();
+  }
   disconnectedCallback() {
     this.destroyMDCSlider();
-  }
-  getContainerClassList() {
-    return {
-      [this.percentageClass]: true,
-      disabled: this.disabled || this.readonly,
-      readonly: this.readonly,
-    };
+    this.observer.disconnect();
   }
   render() {
     const inputProps = {};
@@ -109,12 +188,6 @@ export class Slider {
         'mdc-slider--disabled': this.disabled || this.readonly,
       } }, h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-labelledby": this.labelId, "aria-controls": this.helperTextId }, inputProps)), h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))), h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" }))), this.renderHelperLine()));
   }
-  renderHelperLine() {
-    if (!this.helperText) {
-      return;
-    }
-    return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
-  }
   watchDisabled() {
     this.updateDisabledState();
   }
@@ -136,70 +209,6 @@ export class Slider {
     }
     this.reCreateSliderWithStep();
   }
-  updateDisabledState() {
-    if (!this.mdcSlider) {
-      return;
-    }
-    this.mdcSlider.setDisabled(this.disabled || this.readonly);
-  }
-  multiplyByFactor(value) {
-    return Math.round(value * this.factor);
-  }
-  getValue() {
-    let value = this.value;
-    if (!isFinite(value)) {
-      value = this.valuemin;
-    }
-    return value;
-  }
-  inputHandler(event) {
-    this.setPercentageClass(event.detail.value / this.factor);
-  }
-  setPercentageClass(value) {
-    this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
-  }
-  isMultipleOfStep(value, step) {
-    if (!step) {
-      return true;
-    }
-    return value % step === 0;
-  }
-  roundToStep(value, step) {
-    return Math.round(value / step) * step;
-  }
-  getRootElement() {
-    return this.rootElement.shadowRoot.querySelector('.mdc-slider');
-  }
-  getInputElement() {
-    const element = this.getRootElement();
-    if (!element) {
-      return;
-    }
-    return element.querySelector('input');
-  }
-  isStepConfigured() {
-    if (!this.step) {
-      return true;
-    }
-    const input = this.getInputElement();
-    if (!input) {
-      return true;
-    }
-    return input.hasAttribute('step');
-  }
-  reCreateSliderWithStep() {
-    const inputElement = this.getInputElement();
-    const step = `${this.multiplyByFactor(this.step)}`;
-    inputElement.setAttribute('step', step);
-    this.destroyMDCSlider();
-    this.createMDCSlider();
-  }
-  createMDCSlider() {
-    const element = this.getRootElement();
-    this.mdcSlider = new MDCSlider(element);
-    this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
-    this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
-  }
   destroyMDCSlider() {
     this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);
     this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);
@@ -272,7 +281,7 @@ export class Slider {
         },
         "attribute": "factor",
         "reflect": true,
-        "defaultValue": "1"
+        "defaultValue": "DEFAULT_FACTOR"
       },
       "label": {
         "type": "string",
@@ -359,7 +368,7 @@ export class Slider {
         },
         "attribute": "valuemax",
         "reflect": true,
-        "defaultValue": "100"
+        "defaultValue": "DEFAULT_MAX_VALUE"
       },
       "valuemin": {
         "type": "number",
@@ -377,7 +386,7 @@ export class Slider {
         },
         "attribute": "valuemin",
         "reflect": true,
-        "defaultValue": "0"
+        "defaultValue": "DEFAULT_MIN_VALUE"
       },
       "step": {
         "type": "number",