@limetech/lime-elements 37.12.2 → 37.13.1

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);
 }

package/dist/collection/components/switch/switch.css

@@ -851,20 +851,6 @@ label {
   transform: scale(0.8);
 }
 
-.mdc-switch.lime-switch--readonly {
-  --mdc-switch-disabled-selected-track-color: rgb(var(--contrast-1000));
-  --mdc-switch-disabled-unselected-track-color: rgb(var(--contrast-900));
-  --mdc-switch-handle-surface-color: transparent;
-  --mdc-switch-disabled-selected-handle-color: transparent;
-  --mdc-switch-disabled-unselected-handle-color: transparent;
-  --mdc-switch-disabled-track-opacity: 1;
-  --mdc-switch-track-width: 1.25rem;
-}
-.mdc-switch.lime-switch--readonly + label.disabled {
-  cursor: default;
-  opacity: 1;
-}
-
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.

package/dist/collection/components/switch/switch.js

@@ -1,5 +1,5 @@
 import { MDCSwitch } from '@material/switch';
-import { Host, h, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
 /**
@@ -18,6 +18,7 @@ import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter
  *
  * @exampleComponent limel-example-switch
  * @exampleComponent limel-example-switch-helper-text
+ * @exampleComponent limel-example-switch-readonly
  */
 export class Switch {
   constructor() {
@@ -41,6 +42,7 @@ export class Switch {
     this.invalid = undefined;
     this.value = false;
     this.helperText = undefined;
+    this.readonlyLabels = [];
     this.fieldId = createRandomString();
   }
   connectedCallback() {
@@ -65,12 +67,28 @@ export class Switch {
     (_a = this.mdcSwitch) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, null, h("button", { id: this.fieldId, class: {
-        'mdc-switch': true,
-        'lime-switch--readonly': this.readonly,
-        'mdc-switch--unselected': !this.value,
-        'mdc-switch--selected': this.value,
-      }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick, "aria-controls": this.helperTextId }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))), h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label), this.renderHelperLine()));
+    if (this.readonly) {
+      let icon = 'minus';
+      if (this.value) {
+        icon = {
+          name: 'ok',
+          color: 'var(--mdc-theme-primary)',
+        };
+      }
+      return [
+        h("limel-dynamic-label", { value: this.value, "aria-controls": this.helperTextId, defaultLabel: { text: this.label, icon: icon }, labels: this.readonlyLabels }),
+        this.renderHelperLine(),
+      ];
+    }
+    return [
+      h("button", { id: this.fieldId, class: {
+          'mdc-switch': true,
+          'mdc-switch--unselected': !this.value,
+          'mdc-switch--selected': this.value,
+        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled, onClick: this.handleClick, "aria-controls": this.helperTextId }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))),
+      h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
+      this.renderHelperLine(),
+    ];
   }
   valueWatcher(newValue) {
     if (!this.mdcSwitch) {
@@ -196,6 +214,33 @@ export class Switch {
         },
         "attribute": "helper-text",
         "reflect": true
+      },
+      "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/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Host,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\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-switch\n * @exampleComponent limel-example-switch-helper-text\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch 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 value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch',\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <button\n                    id={this.fieldId}\n                    class={{\n                        'mdc-switch': true,\n                        'lime-switch--readonly': this.readonly,\n                        'mdc-switch--unselected': !this.value,\n                        'mdc-switch--selected': this.value,\n                    }}\n                    type=\"button\"\n                    role=\"switch\"\n                    aria-checked={this.value}\n                    disabled={this.disabled || this.readonly}\n                    onClick={this.handleClick}\n                    aria-controls={this.helperTextId}\n                >\n                    <div class=\"mdc-switch__track\" />\n                    <div class=\"mdc-switch__handle-track\">\n                        <div class=\"mdc-switch__handle\">\n                            <div class=\"mdc-switch__shadow\">\n                                <div class=\"mdc-elevation-overlay\"></div>\n                            </div>\n                            <div class=\"mdc-switch__ripple\"></div>\n                            <div class=\"mdc-switch__icons\">\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                                </svg>\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M20 13H4v-2h16v2z\" />\n                                </svg>\n                            </div>\n                        </div>\n                    </div>\n                </button>\n                <label\n                    class={`${\n                        this.disabled || this.readonly ? 'disabled' : ''\n                    }`}\n                    htmlFor={this.fieldId}\n                >\n                    {this.label}\n                </label>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                invalid={this.invalid}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\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 {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\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-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch 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 value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\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    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch',\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        if (this.readonly) {\n            let icon: string | Icon = 'minus';\n            if (this.value) {\n                icon = {\n                    name: 'ok',\n                    color: 'var(--mdc-theme-primary)',\n                };\n            }\n\n            return [\n                <limel-dynamic-label\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    defaultLabel={{ text: this.label, icon: icon }}\n                    labels={this.readonlyLabels}\n                />,\n                this.renderHelperLine(),\n            ];\n        }\n\n        return [\n            <button\n                id={this.fieldId}\n                class={{\n                    'mdc-switch': true,\n                    'mdc-switch--unselected': !this.value,\n                    'mdc-switch--selected': this.value,\n                }}\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={this.value}\n                disabled={this.disabled}\n                onClick={this.handleClick}\n                aria-controls={this.helperTextId}\n            >\n                <div class=\"mdc-switch__track\" />\n                <div class=\"mdc-switch__handle-track\">\n                    <div class=\"mdc-switch__handle\">\n                        <div class=\"mdc-switch__shadow\">\n                            <div class=\"mdc-elevation-overlay\"></div>\n                        </div>\n                        <div class=\"mdc-switch__ripple\"></div>\n                        <div class=\"mdc-switch__icons\">\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                            </svg>\n                            <svg\n                                class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                viewBox=\"0 0 24 24\"\n                            >\n                                <path d=\"M20 13H4v-2h16v2z\" />\n                            </svg>\n                        </div>\n                    </div>\n                </div>\n            </button>,\n            <label\n                class={`${this.disabled ? 'disabled' : ''}`}\n                htmlFor={this.fieldId}\n            >\n                {this.label}\n            </label>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                invalid={this.invalid}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"]}

package/dist/collection/interface.js

@@ -16,6 +16,7 @@ export * from './components/help/help.types';
 export * from './components/icon/icon.types';
 export * from './components/info-tile/info-tile.types';
 export * from './components/input-field/input-field.types';
+export * from './components/dynamic-label/label.types';
 export * from './components/list/list.types';
 export * from './components/menu/menu.types';
 export * from './components/menu-list/menu-list.types';
@@ -27,4 +28,5 @@ export * from './components/spinner/spinner.types';
 export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
 export * from './global/shared-types/separator.types';
+export * from './global/shared-types/icon.types';
 //# sourceMappingURL=interface.js.map

package/dist/collection/interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"interface.js","sourceRoot":"","sources":["../src/interface.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wDAAwD,CAAC;AACvE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kDAAkD,CAAC;AACjE,OAAO,EAaH,cAAc,GAIjB,MAAM,8BAA8B,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAE3D,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/action-bar/action-bar.types';\nexport * from './components/breadcrumbs/breadcrumbs.types';\nexport * from './components/button/button.types';\nexport * from './components/callout/callout.types';\nexport * from './components/chip-set/chip.types';\nexport * from './components/circular-progress/circular-progress.types';\nexport * from './components/code-editor/code-editor.types';\nexport * from './components/collapsible-section/action';\nexport * from './components/date-picker/date.types';\nexport * from './components/dialog/dialog.types';\nexport * from './components/dock/dock.types';\nexport * from './global/shared-types/file.types';\nexport * from './components/flex-container/flex-container.types';\nexport {\n    EventEmitter,\n    ValidationStatus,\n    FormError,\n    ValidationError,\n    FormComponent,\n    FormInfo,\n    LimeSchemaOptions,\n    LimeLayoutOptions,\n    FormComponentOptions,\n    FormLayoutOptions,\n    GridLayoutOptions,\n    RowLayoutOptions,\n    FormLayoutType,\n    ReplaceObjectType,\n    FormSchemaArrayItem,\n    FormSubKeySchema,\n} from './components/form/form.types';\nexport * from './components/help/help.types';\nexport * from './components/icon/icon.types';\nexport * from './components/info-tile/info-tile.types';\nexport * from './components/input-field/input-field.types';\nexport { ListComponent } from './components/list/list-item.types';\nexport * from './components/list/list.types';\nexport * from './components/menu/menu.types';\nexport * from './components/menu-list/menu-list.types';\nexport * from './components/picker/actions.types';\nexport * from './components/picker/searcher.types';\nexport * from './components/progress-flow/progress-flow.types';\nexport * from './components/select/option.types';\nexport * from './components/spinner/spinner.types';\nexport * from './components/tab-panel/tab-panel.types';\nexport * from './components/table/table.types';\nexport * from './global/shared-types/separator.types';\n"]}
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../src/interface.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wDAAwD,CAAC;AACvE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kDAAkD,CAAC;AACjE,OAAO,EAaH,cAAc,GAIjB,MAAM,8BAA8B,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAK3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/action-bar/action-bar.types';\nexport * from './components/breadcrumbs/breadcrumbs.types';\nexport * from './components/button/button.types';\nexport * from './components/callout/callout.types';\nexport * from './components/chip-set/chip.types';\nexport * from './components/circular-progress/circular-progress.types';\nexport * from './components/code-editor/code-editor.types';\nexport * from './components/collapsible-section/action';\nexport * from './components/date-picker/date.types';\nexport * from './components/dialog/dialog.types';\nexport * from './components/dock/dock.types';\nexport * from './global/shared-types/file.types';\nexport * from './components/flex-container/flex-container.types';\nexport {\n    EventEmitter,\n    ValidationStatus,\n    FormError,\n    ValidationError,\n    FormComponent,\n    FormInfo,\n    LimeSchemaOptions,\n    LimeLayoutOptions,\n    FormComponentOptions,\n    FormLayoutOptions,\n    GridLayoutOptions,\n    RowLayoutOptions,\n    FormLayoutType,\n    ReplaceObjectType,\n    FormSchemaArrayItem,\n    FormSubKeySchema,\n} from './components/form/form.types';\nexport * from './components/help/help.types';\nexport * from './components/icon/icon.types';\nexport * from './components/info-tile/info-tile.types';\nexport * from './components/input-field/input-field.types';\nexport {\n    ListComponent,\n    ListSeparator,\n} from './components/list/list-item.types';\nexport * from './components/dynamic-label/label.types';\nexport * from './components/list/list.types';\nexport * from './components/menu/menu.types';\nexport * from './components/menu-list/menu-list.types';\nexport * from './components/picker/actions.types';\nexport * from './components/picker/searcher.types';\nexport * from './components/progress-flow/progress-flow.types';\nexport * from './components/select/option.types';\nexport * from './components/spinner/spinner.types';\nexport * from './components/tab-panel/tab-panel.types';\nexport * from './components/table/table.types';\nexport * from './global/shared-types/separator.types';\nexport * from './global/shared-types/icon.types';\n"]}

package/dist/collection/test-assets/icons/angle_left.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.0">
+ <metadata>image/svg+xmlOpenclipart</metadata>
+ <g class="layer">
+  <title>Angle Left</title>
+  <path d="m42.17,55.31l-24.34,-25.31l24.34,-25.31l0,50.62z" fill="none" id="path1708" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.13"/>
+  <path d="m42.17,55.31l-24.34,-25.31l24.34,-25.31l0,50.62z" fill="#000000" fill-rule="evenodd" id="path826" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.13"/>
+ </g>
+</svg>

package/dist/collection/test-assets/icons/angle_right.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.0">
+ <metadata>image/svg+xmlOpenclipart</metadata>
+ <g class="layer">
+  <title>Angle Right</title>
+  <path d="m17.83,55.31l24.34,-25.31l-24.34,-25.31l0,50.62z" fill="none" id="path1708" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.13"/>
+  <path d="m17.83,55.31l24.34,-25.31l-24.34,-25.31l0,50.62z" fill="#000000" fill-rule="evenodd" id="path826" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.13"/>
+ </g>
+</svg>

package/dist/esm/{checkbox.template-50268c7d.js → checkbox.template-c42b7020.js}

@@ -1,7 +1,20 @@
-import { h } from './index-232e9616.js';
+import { h } from './index-6156b4fd.js';
 
 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';
   }
@@ -27,7 +40,7 @@ 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) => {
@@ -39,4 +52,4 @@ const HelperText = (props) => {
 
 export { CheckboxTemplate as C };
 
-//# sourceMappingURL=checkbox.template-50268c7d.js.map
+//# sourceMappingURL=checkbox.template-c42b7020.js.map

package/dist/esm/checkbox.template-c42b7020.js.map

@@ -0,0 +1 @@
+{"file":"checkbox.template-c42b7020.js","mappings":";;MAmBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,QAAQ,EAAE;IAChB,IAAI,IAAI,GAAkB,OAAO,CAAC;IAClC,IAAI,KAAK,CAAC,OAAO,EAAE;MACf,IAAI,GAAG;QACH,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,0BAA0B;OACpC,CAAC;KACL;IAED,OAAO;MACH,2BACI,KAAK,EAAE,KAAK,CAAC,OAAO,mBACL,KAAK,CAAC,YAAY,EACjC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC/C,MAAM,EAAE,KAAK,CAAC,cAAc,GAC9B;MACF,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;KACL,CAAC;GACL;EAED,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,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACI,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,CAAC;;;;","names":[],"sources":["./src/components/checkbox/checkbox.template.tsx"],"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"],"version":3}

package/dist/esm/{index-232e9616.js → index-6156b4fd.js}

@@ -1606,7 +1606,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                         // adding the shadow root build conditionals to minimize runtime
                         {
                             {
-                                self.attachShadow({ mode: 'open' });
+                                self.attachShadow({
+                                    mode: 'open',
+                                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),
+                                });
                             }
                         }
                     }
@@ -1814,4 +1817,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-232e9616.js.map
+//# sourceMappingURL=index-6156b4fd.js.map