@limetech/lime-elements 38.31.1 → 38.32.0

package/dist/lime-elements/p-8539647d.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["checkboxCss","Checkbox","this","shouldReinitialize","id","createRandomString","helperTextId","destroyMDCInstances","input","getCheckboxElement","dataset","indeterminate","isInvalid","invalid","required","modified","checked","initialize","_b","_a","limelCheckbox","shadowRoot","querySelector","onChange","event","stopPropagation","currentTarget","isChecked","change","emit","handleCheckedChange","newValue","handleIndeterminateChange","handleReadonlyChange","componentDidRender","connectedCallback","componentDidLoad","disconnectedCallback","render","h","CheckboxTemplate","disabled","readonly","label","readonlyLabels","helperText"],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,k6J,MC4CPC,EAAQ,M,wDA6DTC,KAAAC,mBAAqB,MAUrBD,KAAAE,GAAaC,IACbH,KAAAI,aAAuBD,IA4CvBH,KAAAK,oBAAsB,KAC1B,MAAMC,EAAQN,KAAKO,qBACnB,GAAID,EAAO,QACAA,EAAME,QAAQ,iBACrBF,EAAMG,cAAgB,K,GA2BtBT,KAAAU,UAAY,KAChB,GAAIV,KAAKW,QAAS,CACd,OAAO,I,CAGX,GAAIX,KAAKY,UAAYZ,KAAKa,WAAab,KAAKc,QAAS,CACjD,OAAO,I,GAIPd,KAAAe,WAAa,KACjB,MAAMT,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMG,cAAgBT,KAAKS,cAC3BH,EAAMQ,QAAUd,KAAKc,SAAWd,KAAKS,aAAa,EAG9CT,KAAAO,mBAAqB,K,QACzB,QACIS,GAAAC,EAAAjB,KAAKkB,iBAAa,MAAAD,SAAA,SAAAA,EAAEE,cAAU,MAAAH,SAAA,SAAAA,EAAEI,cAC5B,4BACC,IAAI,EAITpB,KAAAqB,SAAYC,I,MAChBA,EAAMC,kBACN,MAAMjB,EAAQgB,EAAME,cACpB,MAAMC,GAAYR,EAAAX,IAAK,MAALA,SAAK,SAALA,EAAOQ,WAAO,MAAAG,SAAA,EAAAA,EAAIjB,KAAKc,QACzCd,KAAK0B,OAAOC,KAAKF,GACjBzB,KAAKa,SAAW,IAAI,E,cA9KN,M,cAQA,M,mFAwBD,M,mBAMM,M,cAMI,M,oBAOqB,G,cAG7B,K,CAeTe,oBAAoBC,GAC1B,MAAMvB,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMQ,QAAUe,GAAY7B,KAAKS,a,CAI3BqB,0BAA0BD,GAChC,MAAMvB,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMQ,QAAUd,KAAKc,SAAWe,EAChCvB,EAAMG,cAAgBoB,C,CAIhBE,uBACN/B,KAAKK,sBACLL,KAAKC,mBAAqB,I,CAG9B+B,qBACI,GAAIhC,KAAKC,mBAAoB,CACzBD,KAAKe,aACLf,KAAKC,mBAAqB,K,EAI3BgC,oBACHjC,KAAKe,Y,CAGFmB,mBACHlC,KAAKe,Y,CAWFoB,uBACHnC,KAAKK,qB,CAGF+B,SACH,OACIC,EAACC,EAAgB,CACbC,SAAUvC,KAAKuC,UAAYvC,KAAKwC,SAChCC,MAAOzC,KAAKyC,MACZC,eAAgB1C,KAAK0C,eACrBC,WAAY3C,KAAK2C,WACjBvC,aAAcJ,KAAKI,aACnBU,QAASd,KAAKc,SAAWd,KAAKS,cAC9BA,cAAeT,KAAKS,cACpBG,SAAUZ,KAAKY,SACf4B,SAAUxC,KAAKwC,SACf7B,QAASX,KAAKU,YACdW,SAAUrB,KAAKqB,SACfnB,GAAIF,KAAKE,I"}
+{"version":3,"names":["checkboxCss","Checkbox","this","shouldReinitialize","id","createRandomString","helperTextId","destroyMDCInstances","input","getCheckboxElement","dataset","indeterminate","isInvalid","invalid","required","modified","checked","initialize","_b","_a","limelCheckbox","shadowRoot","querySelector","onChange","event","stopPropagation","currentTarget","isChecked","change","emit","handleCheckedChange","newValue","handleIndeterminateChange","handleReadonlyChange","componentDidRender","connectedCallback","componentDidLoad","disconnectedCallback","render","h","CheckboxTemplate","disabled","readonly","label","readonlyLabels","helperText"],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,k6J,MC4CPC,EAAQ,M,wDA6DTC,KAAAC,mBAAqB,MAUrBD,KAAAE,GAAaC,IACbH,KAAAI,aAAuBD,IA4CvBH,KAAAK,oBAAsB,KAC1B,MAAMC,EAAQN,KAAKO,qBACnB,GAAID,EAAO,QACAA,EAAME,QAAQ,iBACrBF,EAAMG,cAAgB,K,GA2BtBT,KAAAU,UAAY,KAChB,GAAIV,KAAKW,QAAS,CACd,OAAO,I,CAGX,GAAIX,KAAKY,UAAYZ,KAAKa,WAAab,KAAKc,QAAS,CACjD,OAAO,I,GAIPd,KAAAe,WAAa,KACjB,MAAMT,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMG,cAAgBT,KAAKS,cAC3BH,EAAMQ,QAAUd,KAAKc,SAAWd,KAAKS,aAAa,EAG9CT,KAAAO,mBAAqB,K,QACzB,QACIS,GAAAC,EAAAjB,KAAKkB,iBAAa,MAAAD,SAAA,SAAAA,EAAEE,cAAU,MAAAH,SAAA,SAAAA,EAAEI,cAC5B,4BACC,IAAI,EAITpB,KAAAqB,SAAYC,I,MAChBA,EAAMC,kBACN,MAAMjB,EAAQgB,EAAME,cACpB,MAAMC,GAAYR,EAAAX,IAAK,MAALA,SAAK,SAALA,EAAOQ,WAAO,MAAAG,SAAA,EAAAA,EAAIjB,KAAKc,QACzCd,KAAK0B,OAAOC,KAAKF,GACjBzB,KAAKa,SAAW,IAAI,E,cA9KN,M,cAQA,M,mFAwBD,M,mBAMM,M,cAMI,M,oBAOqB,G,cAG7B,K,CAeTe,oBAAoBC,GAC1B,MAAMvB,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMQ,QAAUe,GAAY7B,KAAKS,a,CAI3BqB,0BAA0BD,GAChC,MAAMvB,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMQ,QAAUd,KAAKc,SAAWe,EAChCvB,EAAMG,cAAgBoB,C,CAIhBE,uBACN/B,KAAKK,sBACLL,KAAKC,mBAAqB,I,CAG9B+B,qBACI,GAAIhC,KAAKC,mBAAoB,CACzBD,KAAKe,aACLf,KAAKC,mBAAqB,K,EAI3BgC,oBACHjC,KAAKe,Y,CAGFmB,mBACHlC,KAAKe,Y,CAWFoB,uBACHnC,KAAKK,qB,CAGF+B,SACH,OACIC,EAACC,EAAgB,CACbC,SAAUvC,KAAKuC,UAAYvC,KAAKwC,SAChCC,MAAOzC,KAAKyC,MACZC,eAAgB1C,KAAK0C,eACrBC,WAAY3C,KAAK2C,WACjBvC,aAAcJ,KAAKI,aACnBU,QAASd,KAAKc,SAAWd,KAAKS,cAC9BA,cAAeT,KAAKS,cACpBG,SAAUZ,KAAKY,SACf4B,SAAUxC,KAAKwC,SACf7B,QAASX,KAAKU,YACdW,SAAUrB,KAAKqB,SACfnB,GAAIF,KAAKE,I"}

package/dist/lime-elements/p-8ea3b80a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r,H as a}from"./p-288f0842.js";import{t as l}from"./p-5df2361b.js";const n='@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 t=class{constructor(r){e(this,r);this.dragHandleId="drag-handle-"+crypto.randomUUID();this.handleClick=e=>{e.preventDefault();e.stopPropagation()};this.dragDirection="vertical";this.tooltipOpenDirection="left";this.language="en"}render(){const e=l.get("drag-handle.drag-to-reorder",this.language);const n=l.get("drag-handle.drag-handle",this.language);return r(a,null,r("button",{"data-drag-handle":true,type:"button",class:"limel-drag-handle",tabindex:-1,"aria-label":n,id:this.dragHandleId,onClick:this.handleClick},r("div",{class:"drag-icon",role:"presentation","aria-hidden":"true"},r("div",{key:"1"}),r("div",{key:"2"}),r("div",{key:"3"}),r("div",{key:"4"}),r("div",{key:"5"}),r("div",{key:"6"})),r("limel-tooltip",{openDirection:this.tooltipOpenDirection,elementId:this.dragHandleId,label:e})))}};t.style=n;export{t as limel_drag_handle};
+//# sourceMappingURL=p-8ea3b80a.entry.js.map

package/dist/lime-elements/p-8ea3b80a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dragHandleCss","DragHandleComponent","this","dragHandleId","crypto","randomUUID","handleClick","event","preventDefault","stopPropagation","render","tooltipLabel","translate","get","language","ariaLabel","h","Host","type","class","tabindex","id","onClick","role","key","openDirection","tooltipOpenDirection","elementId","label"],"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"],"mappings":"sFAAA,MAAMA,EAAgB,o7E,MCkCTC,EAAmB,M,yBAqBXC,KAAAC,aAAe,eAAiBC,OAAOC,aA6CvCH,KAAAI,YAAeC,IAG5BA,EAAMC,iBACND,EAAME,iBAAiB,E,mBAjEuB,W,0BAQL,O,cAMhB,I,CAItBC,SACH,MAAMC,EAAeC,EAAUC,IAC3B,8BACAX,KAAKY,UAET,MAAMC,EAAYH,EAAUC,IACxB,0BACAX,KAAKY,UAGT,OACIE,EAACC,EAAI,KACDD,EAAA,kCAEIE,KAAK,SACLC,MAAM,oBACNC,UAAW,EAAC,aACAL,EACZM,GAAInB,KAAKC,aACTmB,QAASpB,KAAKI,aAEdU,EAAA,OACIG,MAAM,YACNI,KAAK,eAAc,cACP,QAEZP,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,OAEbR,EAAA,iBACIS,cAAevB,KAAKwB,qBACpBC,UAAWzB,KAAKC,aAChByB,MAAOjB,K"}