@limetech/lime-elements 37.12.1 → 37.13.0

package/dist/collection/components/checkbox/checkbox.js

@@ -26,6 +26,7 @@ import { CheckboxTemplate } from './checkbox.template';
  *
  * @exampleComponent limel-example-checkbox
  * @exampleComponent limel-example-checkbox-helper-text
+ * @exampleComponent limel-example-checkbox-readonly
  */
 export class Checkbox {
   constructor() {
@@ -64,9 +65,13 @@ export class Checkbox {
     this.checked = false;
     this.indeterminate = false;
     this.required = false;
+    this.readonlyLabels = [];
     this.modified = false;
   }
   handleCheckedChange(newValue) {
+    if (!this.mdcCheckbox) {
+      return;
+    }
     this.mdcCheckbox.checked = newValue;
   }
   handleIndeterminateChange(newValue) {
@@ -89,7 +94,7 @@ export class Checkbox {
     }
   }
   render() {
-    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
+    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -245,6 +250,33 @@ export class Checkbox {
         "attribute": "required",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "readonlyLabels": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<Label<boolean>>",
+          "resolved": "Label<boolean>[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Label": {
+              "location": "import",
+              "path": "../dynamic-label/label.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "beta",
+              "text": undefined
+            }],
+          "text": "The labels to use to clarify what kind of data is being visualized,\nwhen the component is `readonly`."
+        },
+        "defaultValue": "[]"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\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 */\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    @State()\n    private modified = 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\n    private formField: MDCFormField;\n    private mdcCheckbox: MDCCheckbox;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        this.mdcCheckbox.checked = newValue;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        this.mdcCheckbox.checked = this.checked;\n        this.mdcCheckbox.indeterminate = newValue;\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        this.mdcCheckbox?.destroy();\n        this.formField?.destroy();\n\n        const checkboxElement = this.getCheckboxElement();\n        if (checkboxElement) {\n            checkboxElement.classList.remove(\n                cssClasses.ANIM_CHECKED_INDETERMINATE,\n                cssClasses.ANIM_CHECKED_UNCHECKED,\n                cssClasses.ANIM_INDETERMINATE_CHECKED,\n                cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n                cssClasses.ANIM_UNCHECKED_CHECKED,\n                cssClasses.ANIM_UNCHECKED_INDETERMINATE,\n            );\n        }\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\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 element =\n            this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n        if (!element) {\n            return;\n        }\n\n        this.formField = new MDCFormField(element);\n        this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n        this.formField.input = this.mdcCheckbox;\n    };\n\n    private getCheckboxElement = () => {\n        return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        this.change.emit(this.mdcCheckbox.checked);\n        this.modified = true;\n    };\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAMH,MAAM,OAAO,QAAQ;;IA0ET,OAAE,GAAW,kBAAkB,EAAE,CAAC;IAClC,iBAAY,GAAW,kBAAkB,EAAE,CAAC;IA6D5C,cAAS,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;MAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACjD,OAAO,IAAI,CAAC;OACf;IACL,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACtB,MAAM,OAAO,GACT,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;MACnE,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,IAAI,CAAC,SAAS,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;MAC9D,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;IAC5C,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC,CAAC;oBAhKgB,KAAK;oBAQL,KAAK;;;;mBAwBN,KAAK;yBAMC,KAAK;oBAMD,KAAK;0BAQgB,EAAE;oBAG/B,KAAK;;EAiBd,mBAAmB,CAAC,QAAiB;IAC3C,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACnB,OAAO;KACV;IAED,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;EACxC,CAAC;EAGS,yBAAyB,CAAC,QAAiB;IACjD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,IAAI,CAAC,WAAW,CAAC,aAAa,GAAG,QAAQ,CAAC;EAC9C,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,EAAE,CAAC;IAC5B,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;IAE1B,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,IAAI,eAAe,EAAE;MACjB,eAAe,CAAC,SAAS,CAAC,MAAM,CAC5B,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,4BAA4B,EACvC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,4BAA4B,CAC1C,CAAC;KACL;EACL,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,gBAAgB,IACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,GACb,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCJ","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { 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     * @beta\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = 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\n    private formField: MDCFormField;\n    private mdcCheckbox: MDCCheckbox;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        if (!this.mdcCheckbox) {\n            return;\n        }\n\n        this.mdcCheckbox.checked = newValue;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        this.mdcCheckbox.checked = this.checked;\n        this.mdcCheckbox.indeterminate = newValue;\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    public disconnectedCallback() {\n        this.mdcCheckbox?.destroy();\n        this.formField?.destroy();\n\n        const checkboxElement = this.getCheckboxElement();\n        if (checkboxElement) {\n            checkboxElement.classList.remove(\n                cssClasses.ANIM_CHECKED_INDETERMINATE,\n                cssClasses.ANIM_CHECKED_UNCHECKED,\n                cssClasses.ANIM_INDETERMINATE_CHECKED,\n                cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n                cssClasses.ANIM_UNCHECKED_CHECKED,\n                cssClasses.ANIM_UNCHECKED_INDETERMINATE,\n            );\n        }\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 element =\n            this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n        if (!element) {\n            return;\n        }\n\n        this.formField = new MDCFormField(element);\n        this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n        this.formField.input = this.mdcCheckbox;\n    };\n\n    private getCheckboxElement = () => {\n        return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        this.change.emit(this.mdcCheckbox.checked);\n        this.modified = true;\n    };\n}\n"]}

package/dist/collection/components/checkbox/checkbox.template.js

@@ -1,6 +1,19 @@
 import { h } from '@stencil/core';
 export const CheckboxTemplate = (props) => {
   const inputProps = {};
+  if (props.readonly) {
+    let icon = 'minus';
+    if (props.checked) {
+      icon = {
+        name: 'ok',
+        color: 'var(--mdc-theme-primary)',
+      };
+    }
+    return [
+      h("limel-dynamic-label", { value: props.checked, "aria-controls": props.helperTextId, defaultLabel: { text: props.label, icon: icon }, labels: props.readonlyLabels }),
+      h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
+    ];
+  }
   if (props.indeterminate) {
     inputProps['data-indeterminate'] = 'true';
   }
@@ -19,7 +32,7 @@ export const CheckboxTemplate = (props) => {
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
       }, htmlFor: props.id }, props.label)),
-    h(HelperText, { text: props.helperText, helperTextId: props.helperTextId }),
+    h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
   ];
 };
 const HelperText = (props) => {

package/dist/collection/components/checkbox/checkbox.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAgBvD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC;GACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK,EAAE,EAAE;EACX,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,CACH,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props,\n) => {\n    const inputProps = {};\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"]}
+{"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props,\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--mdc-theme-primary)',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"]}

package/dist/collection/components/dynamic-label/dynamic-label.css

@@ -0,0 +1,84 @@
+@charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+* {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+:host(limel-dynamic-label) {
+  --limel-dynamic-label-min-height: 1.75rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  border-radius: 0.5rem;
+  min-width: 0;
+}
+
+limel-icon {
+  --limel-icon-svg-margin: 0.125rem;
+  border-radius: 0.25rem;
+  flex-shrink: 0;
+  width: var(--limel-dynamic-label-min-height);
+  color: rgb(var(--contrast-900));
+}
+
+span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+  font-size: 0.8125rem;
+  color: var(--mdc-theme-on-surface);
+}

package/dist/collection/components/dynamic-label/dynamic-label.js

@@ -0,0 +1,142 @@
+import { getIconName } from '../icon/get-icon-props';
+import { h } from '@stencil/core';
+/**
+ * This components displays a different label depending on the current given
+ * value. A label can consist of a text and an optional icon. If no matching
+ * label is found among the given `labels`, the `defaultLabel` will be displayed.
+ *
+ * One use case of the component is to enhance the visualization of a `boolean`
+ * field like a checkbox or switch in a `readonly` state.
+ *
+ * The reason we offer this component is that the default styling
+ * of the Checkbox or Toggle switch in the `readonly` state may not always
+ * provide the best way of _visualizing information_, potentially leading to
+ * confusion and negatively affecting the end-users' experience.
+ *
+ * @exampleComponent limel-example-dynamic-label
+ * @exampleComponent limel-example-dynamic-label-readonly-boolean
+ * @beta
+ */
+export class DynamicLabel {
+  constructor() {
+    this.value = undefined;
+    this.defaultLabel = {};
+    this.labels = [];
+  }
+  render() {
+    var _a, _b;
+    const label = this.labels.find((l) => l.value === this.value);
+    return [
+      this.renderIcon((_a = label === null || label === void 0 ? void 0 : label.icon) !== null && _a !== void 0 ? _a : this.defaultLabel.icon),
+      this.renderLabel((_b = label === null || label === void 0 ? void 0 : label.text) !== null && _b !== void 0 ? _b : this.defaultLabel.text),
+    ];
+  }
+  renderIcon(icon) {
+    const iconName = getIconName(icon);
+    if (!iconName) {
+      return;
+    }
+    let iconColor;
+    let iconBackgroundColor;
+    if (typeof icon === 'object') {
+      iconColor = icon.color;
+      iconBackgroundColor = icon.backgroundColor;
+    }
+    const iconProps = {
+      role: 'presentation',
+      name: iconName,
+      style: {
+        color: iconColor,
+        'background-color': iconBackgroundColor,
+      },
+    };
+    return h("limel-icon", Object.assign({}, iconProps));
+  }
+  renderLabel(label = '') {
+    return h("span", null, label);
+  }
+  static get is() { return "limel-dynamic-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dynamic-label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dynamic-label.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "LabelValue",
+          "resolved": "boolean | number | string",
+          "references": {
+            "LabelValue": {
+              "location": "import",
+              "path": "./label.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current value of the component which is used to match with the given\n`labels` to determine what label to display.\n\nIf not matching label is found, the `defaultLabel` is displayed."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "defaultLabel": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Omit<Label, 'value'>",
+          "resolved": "{ text?: string; icon?: string | Icon; }",
+          "references": {
+            "Omit": {
+              "location": "global"
+            },
+            "Label": {
+              "location": "import",
+              "path": "./label.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label to display when no matching value is found in the `labels`\narray. This is a fallback label that ensures there's always a label\ndisplayed for the component."
+        },
+        "defaultValue": "{}"
+      },
+      "labels": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Label[]",
+          "resolved": "Label<LabelValue>[]",
+          "references": {
+            "Label": {
+              "location": "import",
+              "path": "./label.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A list of available labels. Each label has a corresponding value that\nwill be matched with the current `value` of the component to determine\nwhat label to display."
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+}
+//# sourceMappingURL=dynamic-label.js.map

package/dist/collection/components/dynamic-label/dynamic-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-label.js","sourceRoot":"","sources":["../../../src/components/dynamic-label/dynamic-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;EACzC,CAAC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,gBAAO,KAAK,CAAQ,CAAC;EAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <span>{label}</span>;\n    }\n}\n"]}

package/dist/collection/components/dynamic-label/label.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=label.types.js.map

package/dist/collection/components/dynamic-label/label.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.types.js","sourceRoot":"","sources":["../../../src/components/dynamic-label/label.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../interface';\n\nexport type LabelValue = string | number | boolean | null | undefined;\n\n/**\n * @beta\n */\nexport interface Label<T = LabelValue> {\n    /**\n     * The value of the label\n     */\n    value: T;\n\n    /**\n     * Text to display when the label is active\n     */\n    text?: string;\n\n    /**\n     * Icon to display when the label is active\n     */\n    icon?: string | Icon;\n}\n"]}

package/dist/collection/components/form/widgets/checkbox.js

@@ -8,13 +8,12 @@ export class Checkbox extends React.Component {
   }
   render() {
     const props = this.props;
+    const additionalProps = getAdditionalProps(props.schema);
     return React.createElement(LimeElementsWidgetAdapter, {
       name: 'limel-checkbox',
       value: props.value,
       widgetProps: props,
-      extraProps: {
-        checked: !!props.value,
-      },
+      extraProps: Object.assign({ checked: !!props.value }, additionalProps),
       events: {
         change: this.handleChange,
       },
@@ -29,4 +28,8 @@ export class Checkbox extends React.Component {
     props.onChange(event.detail);
   }
 }
+function getAdditionalProps(schema) {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {};
+}
 //# sourceMappingURL=checkbox.js.map

package/dist/collection/components/form/widgets/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/form/widgets/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS;EAGzC,YAAmB,KAAkB;IACjC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAa;IAEjC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrD,CAAC;EAEM,MAAM;IACT,MAAM,KAAK,GAAgB,IAAI,CAAC,KAAK,CAAC;IAEtC,OAAO,KAAK,CAAC,aAAa,CAAC,yBAAyB,EAAE;MAClD,IAAI,EAAE,gBAAgB;MACtB,KAAK,EAAE,KAAK,CAAC,KAAK;MAClB,WAAW,EAAE,KAAK;MAClB,UAAU,EAAE;QACR,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK;OACzB;MACD,MAAM,EAAE;QACJ,MAAM,EAAE,IAAI,CAAC,YAAY;OAC5B;KACJ,CAAC,CAAC;EACP,CAAC;EAEO,YAAY,CAAC,KAA2B;IAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;MACjB,OAAO;KACV;IAED,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EACjC,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { WidgetProps } from './types';\nimport { LimeElementsWidgetAdapter } from '../adapters';\n\nexport class Checkbox extends React.Component {\n    public refs: any;\n\n    constructor(public props: WidgetProps) {\n        super(props);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    public render() {\n        const props: WidgetProps = this.props;\n\n        return React.createElement(LimeElementsWidgetAdapter, {\n            name: 'limel-checkbox',\n            value: props.value,\n            widgetProps: props,\n            extraProps: {\n                checked: !!props.value,\n            },\n            events: {\n                change: this.handleChange,\n            },\n        });\n    }\n\n    private handleChange(event: CustomEvent<boolean>) {\n        const props = this.props;\n        event.stopPropagation();\n\n        if (!props.onChange) {\n            return;\n        }\n\n        props.onChange(event.detail);\n    }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/form/widgets/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS;EAGzC,YAAmB,KAAkB;IACjC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAa;IAEjC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrD,CAAC;EAEM,MAAM;IACT,MAAM,KAAK,GAAgB,IAAI,CAAC,KAAK,CAAC;IACtC,MAAM,eAAe,GAAG,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzD,OAAO,KAAK,CAAC,aAAa,CAAC,yBAAyB,EAAE;MAClD,IAAI,EAAE,gBAAgB;MACtB,KAAK,EAAE,KAAK,CAAC,KAAK;MAClB,WAAW,EAAE,KAAK;MAClB,UAAU,kBACN,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IACnB,eAAe,CACrB;MACD,MAAM,EAAE;QACJ,MAAM,EAAE,IAAI,CAAC,YAAY;OAC5B;KACJ,CAAC,CAAC;EACP,CAAC;EAEO,YAAY,CAAC,KAA2B;IAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;MACjB,OAAO;KACV;IAED,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EACjC,CAAC;CACJ;AAED,SAAS,kBAAkB,CAAC,MAAkB;;EAC1C,OAAO,MAAA,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,KAAK,mCAAI,EAAE,CAAC;AAC/C,CAAC","sourcesContent":["import React from 'react';\nimport { WidgetProps } from './types';\nimport { LimeElementsWidgetAdapter } from '../adapters';\nimport { FormSchema } from '../form.types';\n\nexport class Checkbox extends React.Component {\n    public refs: any;\n\n    constructor(public props: WidgetProps) {\n        super(props);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    public render() {\n        const props: WidgetProps = this.props;\n        const additionalProps = getAdditionalProps(props.schema);\n\n        return React.createElement(LimeElementsWidgetAdapter, {\n            name: 'limel-checkbox',\n            value: props.value,\n            widgetProps: props,\n            extraProps: {\n                checked: !!props.value,\n                ...additionalProps,\n            },\n            events: {\n                change: this.handleChange,\n            },\n        });\n    }\n\n    private handleChange(event: CustomEvent<boolean>) {\n        const props = this.props;\n        event.stopPropagation();\n\n        if (!props.onChange) {\n            return;\n        }\n\n        props.onChange(event.detail);\n    }\n}\n\nfunction getAdditionalProps(schema: FormSchema) {\n    return schema.lime?.component?.props ?? {};\n}\n"]}

package/dist/collection/components/list/list.css

@@ -946,30 +946,6 @@
   will-change: grid-template-rows;
 }
 
-.lime-checkbox--readonly.mdc-checkbox--disabled {
-  opacity: 1;
-  --mdc-ripple-press-opacity: 1;
-  --mdc-checkbox-disabled-color: rgb(var(--contrast-1000));
-  --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__background {
-  border-radius: 50%;
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__checkmark {
-  scale: 0.8;
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
-  --mdc-checkbox-disabled-color: transparent;
-  --mdc-checkbox-ink-color: transparent;
-  --lime-checkbox-unchecked-color: rgb(var(--contrast-900));
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background:after {
-  content: "–";
-  color: var(--mdc-theme-on-primary);
-  font-size: 1.25rem;
-  position: absolute;
-}
-
 /**
  * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
  * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.
@@ -5421,30 +5397,6 @@ a.mdc-list-item {
   will-change: grid-template-rows;
 }
 
-.lime-checkbox--readonly.mdc-checkbox--disabled {
-  opacity: 1;
-  --mdc-ripple-press-opacity: 1;
-  --mdc-checkbox-disabled-color: rgb(var(--contrast-1000));
-  --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__background {
-  border-radius: 50%;
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__checkmark {
-  scale: 0.8;
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
-  --mdc-checkbox-disabled-color: transparent;
-  --mdc-checkbox-ink-color: transparent;
-  --lime-checkbox-unchecked-color: rgb(var(--contrast-900));
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background:after {
-  content: "–";
-  color: var(--mdc-theme-on-primary);
-  font-size: 1.25rem;
-  position: absolute;
-}
-
 .mdc-radio {
   padding: calc((40px - 20px) / 2);
 }

package/dist/collection/components/menu-list/menu-list.css

@@ -1016,34 +1016,6 @@
   will-change: grid-template-rows;
 }
 
-.lime-checkbox--readonly.mdc-checkbox--disabled {
-  opacity: 1;
-  --mdc-ripple-press-opacity: 1;
-  --mdc-checkbox-disabled-color: rgb(var(--contrast-1000));
-  --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);
-}
-
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__background {
-  border-radius: 50%;
-}
-
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__checkmark {
-  scale: 0.8;
-}
-
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
-  --mdc-checkbox-disabled-color: transparent;
-  --mdc-checkbox-ink-color: transparent;
-  --lime-checkbox-unchecked-color: rgb(var(--contrast-900));
-}
-
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background:after {
-  content: "–";
-  color: var(--mdc-theme-on-primary);
-  font-size: 1.25rem;
-  position: absolute;
-}
-
 /**
  * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
  * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.
@@ -5495,30 +5467,6 @@ a.mdc-list-item {
   will-change: grid-template-rows;
 }
 
-.lime-checkbox--readonly.mdc-checkbox--disabled {
-  opacity: 1;
-  --mdc-ripple-press-opacity: 1;
-  --mdc-checkbox-disabled-color: rgb(var(--contrast-1000));
-  --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__background {
-  border-radius: 50%;
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled .mdc-checkbox__checkmark {
-  scale: 0.8;
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
-  --mdc-checkbox-disabled-color: transparent;
-  --mdc-checkbox-ink-color: transparent;
-  --lime-checkbox-unchecked-color: rgb(var(--contrast-900));
-}
-.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background:after {
-  content: "–";
-  color: var(--mdc-theme-on-primary);
-  font-size: 1.25rem;
-  position: absolute;
-}
-
 .mdc-radio {
   padding: calc((40px - 20px) / 2);
 }