@limetech/lime-elements 38.31.1 → 38.32.0

package/dist/esm/limel-color-picker.entry.js.map

@@ -1 +1 @@
-{"file":"limel-color-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}
+{"file":"limel-color-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}

package/dist/esm/limel-drag-handle.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host } from './index-2714248e.js';
+import { t as translate } from './translations-9bfde9f4.js';
+
+const dragHandleCss = "@charset \"UTF-8\";limel-drag-handle{display:inline-flex;align-items:center;justify-content:center}button.limel-drag-handle{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent;touch-action:none;cursor:grab;display:inline-flex;align-items:center;justify-content:center;border-radius:0.4rem;padding:0.5rem;max-height:2.25rem;max-width:2.25rem;color:rgb(var(--contrast-900))}button.limel-drag-handle:focus{outline:none}button.limel-drag-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.limel-drag-handle:hover,button.limel-drag-handle:focus,button.limel-drag-handle:focus-visible{will-change:color, background-color, box-shadow, transform}button.limel-drag-handle:hover,button.limel-drag-handle:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-primary);background-color:transparent}button.limel-drag-handle:hover{box-shadow:var(--button-shadow-hovered)}button.limel-drag-handle:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.limel-drag-handle:hover,button.limel-drag-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.limel-drag-handle:active{cursor:grabbing}button.limel-drag-handle:active,button.limel-drag-handle:hover{box-shadow:none !important}button.limel-drag-handle .drag-icon{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.2rem}limel-drag-handle[drag-direction=horizontal] button.limel-drag-handle .drag-icon{grid-template-columns:1fr 1fr}button.limel-drag-handle .drag-icon div{transition:transform 0.2s ease, background-color 0.2s ease;height:0.125rem;width:0.125rem;border-radius:1rem;background-color:currentColor;transform:scale(1)}.is-being-dragged button.limel-drag-handle .drag-icon div,button.limel-drag-handle:active .drag-icon div,button.limel-drag-handle:focus .drag-icon div,button.limel-drag-handle:hover .drag-icon div,button.limel-drag-handle:focus-visible .drag-icon div{background-color:var(--mdc-theme-primary);transform:scale(1.5)}";
+
+const DragHandleComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dragHandleId = 'drag-handle-' + crypto.randomUUID();
+    this.handleClick = (event) => {
+      // Prevent bubbling so the parent item does not treat the pointer click as
+      // a toggle or reorder action.
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this.dragDirection = 'vertical';
+    this.tooltipOpenDirection = 'left';
+    this.language = 'en';
+  }
+  render() {
+    const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
+    const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
+    return (h(Host, null, h("button", { "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+  }
+};
+DragHandleComponent.style = dragHandleCss;
+
+export { DragHandleComponent as limel_drag_handle };
+
+//# sourceMappingURL=limel-drag-handle.entry.js.map

package/dist/esm/limel-drag-handle.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-drag-handle.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,q7EAAq7E;;MCkC97E,mBAAmB;;;IAqBX,iBAAY,GAAG,cAAc,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IA6CpD,gBAAW,GAAG,CAAC,KAAiB;;;MAG7C,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B,CAAC;yBAlEgD,UAAU;gCAQf,MAAM;oBAMtB,IAAI;;EAI1B,MAAM;IACT,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAC9B,6BAA6B,EAC7B,IAAI,CAAC,QAAQ,CAChB,CAAC;IACF,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAC3B,yBAAyB,EACzB,IAAI,CAAC,QAAQ,CAChB,CAAC;IAEF,QACI,EAAC,IAAI,QACD,wCAEI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,CAAC,CAAC,gBACA,SAAS,EACrB,EAAE,EAAE,IAAI,CAAC,YAAY,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,WACI,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,cAAc,iBACP,MAAM,IAElB,WAAK,GAAG,EAAC,GAAG,GAAG,EACf,WAAK,GAAG,EAAC,GAAG,GAAG,EACf,WAAK,GAAG,EAAC,GAAG,GAAG,EACf,WAAK,GAAG,EAAC,GAAG,GAAG,EACf,WAAK,GAAG,EAAC,GAAG,GAAG,EACf,WAAK,GAAG,EAAC,GAAG,GAAG,CACb,EACN,qBACI,aAAa,EAAE,IAAI,CAAC,oBAAoB,EACxC,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,KAAK,EAAE,YAAY,GACrB,CACG,CACN,EACT;GACL;;;;;;","names":[],"sources":["./src/components/drag-handle/drag-handle.scss?tag=limel-drag-handle","./src/components/drag-handle/drag-handle.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-drag-handle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nbutton.limel-drag-handle {\n    all: unset;\n    @include mixins.visualize-keyboard-focus();\n    @include mixins.is-flat-clickable(\n        $color--hovered: var(--mdc-theme-primary),\n        $background-color--hovered: transparent\n    );\n\n    touch-action: none;\n    cursor: grab;\n\n    &:active {\n        cursor: grabbing;\n    }\n\n    &:active,\n    &:hover {\n        box-shadow: none !important; // override is-flat-clickable styles\n    }\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 0.4rem; // like `limel-button`\n\n    padding: 0.5rem;\n    max-height: 2.25rem;\n    max-width: 2.25rem;\n\n    color: rgb(var(--contrast-900));\n\n    .drag-icon {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 0.2rem;\n\n        limel-drag-handle[drag-direction='horizontal'] & {\n            grid-template-columns: 1fr 1fr;\n        }\n\n        div {\n            transition:\n                transform 0.2s ease,\n                background-color 0.2s ease;\n            height: 0.125rem;\n            width: 0.125rem;\n            border-radius: 1rem;\n            background-color: currentColor;\n            transform: scale(1);\n        }\n    }\n}\n\n.is-being-dragged button.limel-drag-handle,\nbutton.limel-drag-handle:active,\nbutton.limel-drag-handle:focus,\nbutton.limel-drag-handle:hover,\nbutton.limel-drag-handle:focus-visible {\n    .drag-icon div {\n        background-color: var(--mdc-theme-primary);\n        transform: scale(1.5);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * This component resembles a drag handle button, but is implemented\n * as a `private` component to allow for easier styling and future extensions.\n *\n * :::important\n * This component has its `shadow` set to `false` in order to\n * integrate well with the drag-and-drop functionality, as well as\n * providing a better accessibility.\n *\n * Keep in mind that its styles might be affected by the consumer\n * component, due to its light dom.\n * :::\n *\n * :::tip\n * It's recommended to place the drag handle on the right side of\n * the item it is meant to reorder, to ensure consistent layout\n * design conventions.\n * :::\n *\n * @exampleComponent limel-example-drag-handle-basic\n * @exampleComponent limel-example-drag-handle-horizontal\n *\n * @private\n */\n@Component({\n    tag: 'limel-drag-handle',\n    shadow: false,\n    styleUrl: 'drag-handle.scss',\n})\nexport class DragHandleComponent {\n    /**\n     * The direction in which the drag handle can be used to reorder items.\n     */\n    @Prop({ reflect: true })\n    public dragDirection: 'vertical' | 'horizontal' = 'vertical';\n\n    /**\n     * The preferred direction for the tooltip to open.\n     * Defaults to 'left', as our recommended placement for a drag handle\n     * in the UI is on the far right side of draggable elements.\n     */\n    @Prop({ reflect: true })\n    public tooltipOpenDirection: OpenDirection = 'left';\n\n    /**\n     * Language to use for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    private readonly dragHandleId = 'drag-handle-' + crypto.randomUUID();\n\n    public render() {\n        const tooltipLabel = translate.get(\n            'drag-handle.drag-to-reorder',\n            this.language\n        );\n        const ariaLabel = translate.get(\n            'drag-handle.drag-handle',\n            this.language\n        );\n\n        return (\n            <Host>\n                <button\n                    data-drag-handle\n                    type=\"button\"\n                    class=\"limel-drag-handle\"\n                    tabindex={-1}\n                    aria-label={ariaLabel}\n                    id={this.dragHandleId}\n                    onClick={this.handleClick}\n                >\n                    <div\n                        class=\"drag-icon\"\n                        role=\"presentation\"\n                        aria-hidden=\"true\"\n                    >\n                        <div key=\"1\" />\n                        <div key=\"2\" />\n                        <div key=\"3\" />\n                        <div key=\"4\" />\n                        <div key=\"5\" />\n                        <div key=\"6\" />\n                    </div>\n                    <limel-tooltip\n                        openDirection={this.tooltipOpenDirection}\n                        elementId={this.dragHandleId}\n                        label={tooltipLabel}\n                    />\n                </button>\n            </Host>\n        );\n    }\n\n    private readonly handleClick = (event: MouseEvent) => {\n        // Prevent bubbling so the parent item does not treat the pointer click as\n        // a toggle or reorder action.\n        event.preventDefault();\n        event.stopPropagation();\n    };\n}\n"],"version":3}

package/dist/esm/limel-file-viewer.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js';
-import { t as translate } from './translations-91c611da.js';
+import { t as translate } from './translations-9bfde9f4.js';
 
 /**
  *

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-2714248e.js';
-import { t as translate } from './translations-91c611da.js';
+import { t as translate } from './translations-9bfde9f4.js';
 import { g as getFileIcon, a as getFileExtensionTitle, b as getFileColor, c as getFileBackgroundColor } from './file-metadata-ce643c6e.js';
 import './get-icon-props-37514418.js';
 

package/dist/esm/limel-flatpickr-adapter.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-2714248e.js';
-import { t as translate } from './translations-91c611da.js';
+import { t as translate } from './translations-9bfde9f4.js';
 import { c as createCommonjsModule, a as commonjsGlobal, d as getDefaultExportFromCjs } from './_commonjsHelpers-9b95d21f.js';
 import './sv-d8302491.js';
 import { m as moment } from './moment-fbe0e39e.js';