@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

package/dist/collection/components/button-group/button-group.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 /**
  * A button group control is a linear set of two or more buttons.
@@ -37,15 +37,10 @@ import { createRandomString } from '../../util/random-string';
  */
 export class ButtonGroup {
   constructor() {
-    /**
-     * List of buttons for the group
-     */
+    this.radioGroupName = createRandomString();
     this.value = [];
-    /**
-     * True if the button-group should be disabled
-     */
     this.disabled = false;
-    this.radioGroupName = createRandomString();
+    this.selectedButtonId = undefined;
     this.renderButton = this.renderButton.bind(this);
     this.onChange = this.onChange.bind(this);
     this.renderContent = this.renderContent.bind(this);
@@ -72,10 +67,7 @@ export class ButtonGroup {
       'mdc-chip': true,
       'mdc-chip--selected': this.isButtonChecked(button),
     };
-    return (h("div", { class: classes, role: "row" },
-      h("span", { role: "gridcell" },
-        h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }),
-        h("label", { htmlFor: buttonId }, this.renderContent(button)))));
+    return (h("div", { class: classes, role: "row" }, h("span", { role: "gridcell" }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button)))));
   }
   renderContent(button) {
     if (button.icon) {
@@ -110,75 +102,85 @@ export class ButtonGroup {
   }
   static get is() { return "limel-button-group"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["button-group.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["button-group.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Button[]",
-        "resolved": "Button[]",
-        "references": {
-          "Button": {
-            "location": "import",
-            "path": "../button/button.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["button-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["button-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Button[]",
+          "resolved": "Button[]",
+          "references": {
+            "Button": {
+              "location": "import",
+              "path": "../button/button.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of buttons for the group"
-      },
-      "defaultValue": "[]"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the button-group should be disabled"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of buttons for the group"
+        },
+        "defaultValue": "[]"
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "selectedButtonId": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Dispatched when a button is selected/deselected"
-      },
-      "complexType": {
-        "original": "Button",
-        "resolved": "Button",
-        "references": {
-          "Button": {
-            "location": "import",
-            "path": "../button/button.types"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the button-group should be disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedButtonId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dispatched when a button is selected/deselected"
+        },
+        "complexType": {
+          "original": "Button",
+          "resolved": "Button",
+          "references": {
+            "Button": {
+              "location": "import",
+              "path": "../button/button.types"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }

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

@@ -1,6 +1,6 @@
 import { MDCCheckbox, cssClasses } from '@material/checkbox';
 import { MDCFormField } from '@material/form-field';
-import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { CheckboxTemplate } from './checkbox.template';
 /**
@@ -9,30 +9,6 @@ import { CheckboxTemplate } from './checkbox.template';
  */
 export class Checkbox {
   constructor() {
-    /**
-     * Disables the checkbox when `true`. Works exactly the same as `readonly`.
-     * If either property is `true`, the checkbox will be disabled.
-     */
-    this.disabled = false;
-    /**
-     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.
-     * But shows no visual sign indicating that the checkbox is disabled
-     * or can ever become interactable.
-     */
-    this.readonly = false;
-    /**
-     * The value of the checkbox. Set to `true` to make the checkbox checked.
-     */
-    this.checked = false;
-    /**
-     * Enables indeterminate state. Set to `true` to signal indeterminate check.
-     */
-    this.indeterminate = false;
-    /**
-     * Set to `true` to indicate that the checkbox must be checked.
-     */
-    this.required = false;
-    this.modified = false;
     this.id = createRandomString();
     this.initialize = () => {
       const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
@@ -51,6 +27,14 @@ export class Checkbox {
       this.change.emit(this.mdcCheckbox.checked);
       this.modified = true;
     };
+    this.disabled = false;
+    this.readonly = false;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.checked = false;
+    this.indeterminate = false;
+    this.required = false;
+    this.modified = false;
   }
   handleCheckedChange(newValue) {
     this.mdcCheckbox.checked = newValue;
@@ -79,163 +63,175 @@ export class Checkbox {
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["checkbox.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the checkbox when `true`. Works exactly the same as `readonly`.\nIf either property is `true`, the checkbox will be disabled."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\nBut shows no visual sign indicating that the checkbox is disabled\nor can ever become interactable."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The checkbox label."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "helperText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Optional helper text to display below the checkbox"
-      },
-      "attribute": "helper-text",
-      "reflect": true
-    },
-    "checked": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the checkbox. Set to `true` to make the checkbox checked."
+  static get originalStyleUrls() {
+    return {
+      "$": ["checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the checkbox when `true`. Works exactly the same as `readonly`.\nIf either property is `true`, the checkbox will be disabled."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "checked",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\nBut shows no visual sign indicating that the checkbox is disabled\nor can ever become interactable."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables indeterminate state. Set to `true` to signal indeterminate check."
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The checkbox label."
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "attribute": "indeterminate",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the checkbox"
+        },
+        "attribute": "helper-text",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to indicate that the checkbox must be checked."
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the checkbox. Set to `true` to make the checkbox checked."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "modified": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input value is changed."
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables indeterminate state. Set to `true` to signal indeterminate check."
+        },
+        "attribute": "indeterminate",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the checkbox must be checked."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "modified": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input value is changed."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "limelCheckbox"; }
-  static get watchers() { return [{
-      "propName": "checked",
-      "methodName": "handleCheckedChange"
-    }, {
-      "propName": "indeterminate",
-      "methodName": "handleIndeterminateChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "handleCheckedChange"
+      }, {
+        "propName": "indeterminate",
+        "methodName": "handleIndeterminateChange"
+      }];
+  }
 }

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

@@ -5,27 +5,20 @@ export const CheckboxTemplate = (props) => {
     inputProps['data-indeterminate'] = 'true';
   }
   return [
-    h("div", { class: "mdc-form-field " },
-      h("div", { class: {
-          'mdc-checkbox': true,
-          'mdc-checkbox--invalid': props.invalid,
-          'mdc-checkbox--disabled': props.disabled,
-          'mdc-checkbox--required': props.required,
-          'mdc-checkbox--indeterminate': props.indeterminate,
-          'lime-checkbox--readonly': props.readonly,
-        } },
-        h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange }, inputProps)),
-        h("div", { class: "mdc-checkbox__background" },
-          h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
-            h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-          h("div", { class: "mdc-checkbox__mixedmark" }))),
-      h("label", { class: {
-          'mdc-checkbox--invalid': props.invalid,
-          'mdc-checkbox--disabled': props.disabled,
-          'mdc-checkbox--required': props.required,
-          'mdc-checkbox--indeterminate': props.indeterminate,
-          'lime-checkbox--readonly': props.readonly,
-        }, htmlFor: props.id }, props.label)),
+    h("div", { class: "mdc-form-field " }, h("div", { class: {
+        'mdc-checkbox': true,
+        'mdc-checkbox--invalid': props.invalid,
+        'mdc-checkbox--disabled': props.disabled,
+        'mdc-checkbox--required': props.required,
+        'mdc-checkbox--indeterminate': props.indeterminate,
+        'lime-checkbox--readonly': props.readonly,
+      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange }, inputProps)), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
+        'mdc-checkbox--invalid': props.invalid,
+        'mdc-checkbox--disabled': props.disabled,
+        'mdc-checkbox--required': props.required,
+        'mdc-checkbox--indeterminate': props.indeterminate,
+        'lime-checkbox--readonly': props.readonly,
+      }, htmlFor: props.id }, props.label)),
     h(HelperText, { text: props.helperText }),
   ];
 };
@@ -33,6 +26,5 @@ const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return (h("div", { class: "limel-checkbox-helper-line" },
-    h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
+  return (h("div", { class: "limel-checkbox-helper-line" }, h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
 };

package/dist/collection/components/chip-set/chip-set.css

@@ -2668,6 +2668,10 @@
   height: 1.5rem;
 }
 
+:host(limel-chip-set) {
+  isolation: isolate;
+}
+
 .mdc-chip {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   box-shadow: var(--button-shadow-normal);
@@ -2875,13 +2879,17 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 .clear-all-button:hover {
   background-color: #757580;
 }
-.clear-all-button:focus, .has-chips:not(.mdc-text-field--disabled):hover .clear-all-button, .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused .clear-all-button {
-  opacity: 1;
+.clear-all-button:focus {
   outline: none;
 }
 .clear-all-button:focus-visible {
+  outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
+.clear-all-button:focus, .has-chips:not(.mdc-text-field--disabled):hover .clear-all-button, .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused .clear-all-button {
+  opacity: 1;
+  outline: none;
+}
 :not(.has-chips) .clear-all-button, .has-chips.mdc-text-field--disabled .clear-all-button {
   display: none;
 }