@limetech/lime-elements 37.60.2 → 37.61.1

package/dist/collection/components/chip/chip.js

@@ -36,7 +36,6 @@ import { isEmpty } from 'lodash-es';
  * or navigating to a page with more information about the item in the shopping list.
  * :::
  *
- * @beta
  * @exampleComponent limel-example-chip-button
  * @exampleComponent limel-example-chip-link
  * @exampleComponent limel-example-chip-icon-colors

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

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @beta\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('remove', this.language) + ' ' + this.text;\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>,\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('remove', this.language) + ' ' + this.text;\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>,\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n}\n"]}

package/dist/collection/components/portal/portal.css

@@ -12,4 +12,8 @@
 
 :host([hidden]) {
   display: none;
+}
+
+slot {
+  display: none;
 }

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

@@ -64,6 +64,15 @@ export class Portal {
     if (!this.loaded) {
       return;
     }
+    if (this.visible) {
+      this.init();
+    }
+  }
+  componentDidLoad() {
+    this.loaded = true;
+    this.connectedCallback();
+  }
+  init() {
     this.createContainer();
     this.hideContainer();
     this.attachContainer();
@@ -82,14 +91,13 @@ export class Portal {
       observer.observe(this.container);
     }
   }
-  componentDidLoad() {
-    this.loaded = true;
-    this.connectedCallback();
-  }
   render() {
     return h("slot", null);
   }
   onVisible() {
+    if (!this.container && this.visible) {
+      this.init();
+    }
     if (!this.visible) {
       this.hideContainer();
       this.styleContainer();

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/**\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 * When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n *\n * This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n *\n * Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n *\n * :::important\n * There are some caveats when using this component\n *\n * 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. 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 * 4. 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 * :::\n *\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\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     * The `parent` property specifies the parent element where the content\n     * of the portal will be moved to.\n     * By default, it is set to `document.body`, meaning the content\n     * will be appended as a child of the body element in the DOM.\n     * If you want the content to be appended to a different element,\n     * you can specify that element by setting this property.\n     * Please note that the specified parent element should exist\n     * in the DOM at the time of rendering the portal.\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    /**\n     * The element that the content should be positioned relative to.\n     * Defaults to the limel-portal element.\n     */\n    @Prop()\n    public anchor?: HTMLElement = null;\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        this.container.style.fontFamily =\n            'var(--limel-portal-font-family, inherit)';\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(\n            this.anchor || this.host,\n            this.container,\n            config,\n        );\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/**\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 * When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n *\n * This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n *\n * Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n *\n * :::important\n * There are some caveats when using this component\n *\n * 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. 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 * 4. 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 * :::\n *\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\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     * The `parent` property specifies the parent element where the content\n     * of the portal will be moved to.\n     * By default, it is set to `document.body`, meaning the content\n     * will be appended as a child of the body element in the DOM.\n     * If you want the content to be appended to a different element,\n     * you can specify that element by setting this property.\n     * Please note that the specified parent element should exist\n     * in the DOM at the time of rendering the portal.\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    /**\n     * The element that the content should be positioned relative to.\n     * Defaults to the limel-portal element.\n     */\n    @Prop()\n    public anchor?: HTMLElement = null;\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        if (this.visible) {\n            this.init();\n        }\n    }\n\n    public componentDidLoad() {\n        this.loaded = true;\n        this.connectedCallback();\n    }\n\n    private init() {\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 render() {\n        return <slot />;\n    }\n\n    @Watch('visible')\n    protected onVisible() {\n        if (!this.container && this.visible) {\n            this.init();\n        }\n\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        this.container.style.fontFamily =\n            'var(--limel-portal-font-family, inherit)';\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(\n            this.anchor || this.host,\n            this.container,\n            config,\n        );\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"]}