@limetech/lime-elements 36.1.0-next.2 → 36.1.0-next.21

package/dist/collection/components/linear-progress/linear-progress.js

@@ -1,5 +1,5 @@
 import { MDCLinearProgress } from '@material/linear-progress';
-import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @exampleComponent limel-example-linear-progress
  * @exampleComponent limel-example-linear-progress-color
@@ -7,13 +7,7 @@ import { Component, Element, h, Prop, Watch } from '@stencil/core';
  */
 export class LinearProgress {
   constructor() {
-    /**
-     * The value of the progress bar. Should be between `0` and `1`.
-     */
     this.value = 0;
-    /**
-     * Puts the progress bar in an indeterminate state
-     */
     this.indeterminate = false;
   }
   connectedCallback() {
@@ -40,13 +34,7 @@ export class LinearProgress {
       'mdc-linear-progress': true,
       'mdc-linear-progress--indeterminate': this.indeterminate,
     };
-    return (h("div", { role: "progressbar", class: classList, "aria-label": "Progress Bar", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": this.value },
-      h("div", { class: "mdc-linear-progress__buffer" },
-        h("div", { class: "mdc-linear-progress__buffer-bar" })),
-      h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__primary-bar" },
-        h("span", { class: "mdc-linear-progress__bar-inner" })),
-      h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" },
-        h("span", { class: "mdc-linear-progress__bar-inner" }))));
+    return (h("div", { role: "progressbar", class: classList, "aria-label": "Progress Bar", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": this.value }, h("div", { class: "mdc-linear-progress__buffer" }, h("div", { class: "mdc-linear-progress__buffer-bar" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__primary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" }))));
   }
   watchValue(newValue) {
     if (!this.mdcLinearProgress) {
@@ -56,53 +44,61 @@ export class LinearProgress {
   }
   static get is() { return "limel-linear-progress"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["linear-progress.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["linear-progress.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the progress bar. Should be between `0` and `1`."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Puts the progress bar in an indeterminate state"
+  static get originalStyleUrls() {
+    return {
+      "$": ["linear-progress.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["linear-progress.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the progress bar. Should be between `0` and `1`."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "indeterminate",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Puts the progress bar in an indeterminate state"
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "watchValue"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
 }

package/dist/collection/components/list/list-renderer.js

@@ -61,12 +61,7 @@ export class ListRenderer {
       if (index === this.applyTabIndexToItemAtIndex) {
         attributes.tabindex = '0';
       }
-      return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
-        item.icon ? this.renderIcon(this.config, item) : null,
-        this.getPrimaryComponent(item),
-        this.renderText(item),
-        this.twoLines && this.avatarList ? this.renderDivider() : null,
-        this.renderActionMenu(item.actions)));
+      return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes), item.icon ? this.renderIcon(this.config, item) : null, this.getPrimaryComponent(item), this.renderText(item), this.twoLines && this.avatarList ? this.renderDivider() : null, this.renderActionMenu(item.actions)));
     };
     this.hasPrimaryComponent = (item) => {
       var _a;
@@ -82,10 +77,7 @@ export class ListRenderer {
       if (this.isSimpleItem(item)) {
         return (h("span", { class: "mdc-deprecated-list-item__text" }, item.text));
       }
-      return (h("div", { class: "mdc-deprecated-list-item__text" },
-        h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
-          h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text)),
-        h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
+      return (h("div", { class: "mdc-deprecated-list-item__text" }, h("div", { class: "mdc-deprecated-list-item__primary-command-text" }, h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text)), h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
     };
     this.isSimpleItem = (item) => {
       return !('secondaryText' in item);
@@ -123,8 +115,7 @@ export class ListRenderer {
       if (!actions || actions.length === 0) {
         return;
       }
-      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left-start" },
-        h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2" })));
+      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left-start" }, h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2" })));
     };
     this.renderVariantListItem = (config, item, index) => {
       let itemTemplate;

package/dist/collection/components/list/list.js

@@ -1,7 +1,7 @@
 import { MDCList } from '@material/list';
 import { MDCRipple } from '@material/ripple';
 import { strings as listStrings } from '@material/list/constants';
-import { Component, Element, Event, h, Host, Prop, Watch, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { ListRenderer } from './list-renderer';
 const { ACTION_EVENT } = listStrings;
 /**
@@ -22,18 +22,6 @@ const { ACTION_EVENT } = listStrings;
  */
 export class List {
   constructor() {
-    /**
-     * Size of the icons in the list
-     */
-    this.iconSize = 'small';
-    /**
-     * By default, lists will display 3 lines of text, and then truncate the rest.
-     * Consumers can increase or decrease this number by specifying
-     * `maxLinesSecondaryText`. If consumer enters zero or negative
-     * numbers we default to 1; and if they type decimals we round up.
-     */
-    // eslint-disable-next-line no-magic-numbers
-    this.maxLinesSecondaryText = 3;
     this.listRenderer = new ListRenderer();
     this.setup = () => {
       this.setupList();
@@ -111,6 +99,11 @@ export class List {
     this.isListItem = (item) => {
       return !('separator' in item);
     };
+    this.items = undefined;
+    this.badgeIcons = undefined;
+    this.iconSize = 'small';
+    this.type = undefined;
+    this.maxLinesSecondaryText = 3;
   }
   connectedCallback() {
     this.setup();
@@ -162,168 +155,178 @@ export class List {
   }
   static get is() { return "limel-list"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["list.css"]
-  }; }
-  static get properties() { return {
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<ListItem | ListSeparator>",
-        "resolved": "(ListItem<any> | ListSeparator)[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          },
-          "ListSeparator": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+  static get originalStyleUrls() {
+    return {
+      "$": ["list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<ListItem | ListSeparator>",
+          "resolved": "(ListSeparator | ListItem<any>)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            },
+            "ListSeparator": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of items to display"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of items to display"
-      }
-    },
-    "badgeIcons": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` if the list should display larger icons with a background"
+      "badgeIcons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` if the list should display larger icons with a background"
+        },
+        "attribute": "badge-icons",
+        "reflect": false
       },
-      "attribute": "badge-icons",
-      "reflect": false
-    },
-    "iconSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "IconSize",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
-        "references": {
-          "IconSize": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "iconSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconSize",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
+          "references": {
+            "IconSize": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Size of the icons in the list"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the icons in the list"
+        },
+        "attribute": "icon-size",
+        "reflect": false,
+        "defaultValue": "'small'"
       },
-      "attribute": "icon-size",
-      "reflect": false,
-      "defaultValue": "'small'"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ListType",
-        "resolved": "\"checkbox\" | \"radio\" | \"selectable\"",
-        "references": {
-          "ListType": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ListType",
+          "resolved": "\"checkbox\" | \"radio\" | \"selectable\"",
+          "references": {
+            "ListType": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the list, omit to get a regular list. Available types are:\n`selectable`: regular list with single selection.\n`radio`: radio button list with single selection.\n`checkbox`: checkbox list with multiple selection."
+        },
+        "attribute": "type",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The type of the list, omit to get a regular list. Available types are:\n`selectable`: regular list with single selection.\n`radio`: radio button list with single selection.\n`checkbox`: checkbox list with multiple selection."
-      },
-      "attribute": "type",
-      "reflect": false
-    },
-    "maxLinesSecondaryText": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "By default, lists will display 3 lines of text, and then truncate the rest.\nConsumers can increase or decrease this number by specifying\n`maxLinesSecondaryText`. If consumer enters zero or negative\nnumbers we default to 1; and if they type decimals we round up."
-      },
-      "attribute": "max-lines-secondary-text",
-      "reflect": false,
-      "defaultValue": "3"
-    }
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a new value has been selected from the list. Only fired if selectable is set to true"
-      },
-      "complexType": {
-        "original": "ListItem | ListItem[]",
-        "resolved": "ListItem<any> | ListItem<any>[]",
-        "references": {
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "maxLinesSecondaryText": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "By default, lists will display 3 lines of text, and then truncate the rest.\nConsumers can increase or decrease this number by specifying\n`maxLinesSecondaryText`. If consumer enters zero or negative\nnumbers we default to 1; and if they type decimals we round up."
+        },
+        "attribute": "max-lines-secondary-text",
+        "reflect": false,
+        "defaultValue": "3"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a new value has been selected from the list. Only fired if selectable is set to true"
+        },
+        "complexType": {
+          "original": "ListItem | ListItem[]",
+          "resolved": "ListItem<any> | ListItem<any>[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }, {
-      "method": "select",
-      "name": "select",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when an action has been selected from the action menu of a list item"
-      },
-      "complexType": {
-        "original": "ListItem | ListItem[]",
-        "resolved": "ListItem<any> | ListItem<any>[]",
-        "references": {
-          "ListItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      }, {
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when an action has been selected from the action menu of a list item"
+        },
+        "complexType": {
+          "original": "ListItem | ListItem[]",
+          "resolved": "ListItem<any> | ListItem<any>[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "type",
-      "methodName": "handleType"
-    }, {
-      "propName": "items",
-      "methodName": "itemsChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "type",
+        "methodName": "handleType"
+      }, {
+        "propName": "items",
+        "methodName": "itemsChanged"
+      }];
+  }
 }

package/dist/collection/components/list/radio-button/radio-button.template.js

@@ -1,13 +1,7 @@
 import { h } from '@stencil/core';
 export const RadioButtonTemplate = (props) => {
-  return (h("div", { class: "mdc-form-field" },
-    h("div", { class: `
+  return (h("div", { class: "mdc-form-field" }, h("div", { class: `
                         mdc-radio
                         ${props.disabled ? 'mdc-radio--disabled' : ''}
-                    ` },
-      h("input", { class: "mdc-radio__native-control", type: "radio", id: props.id, checked: props.checked, disabled: props.disabled, onChange: props.onChange }),
-      h("div", { class: "mdc-radio__background" },
-        h("div", { class: "mdc-radio__outer-circle" }),
-        h("div", { class: "mdc-radio__inner-circle" }))),
-    h("label", { class: `${props.disabled ? 'disabled' : ''}`, htmlFor: props.id }, props.label)));
+                    ` }, h("input", { class: "mdc-radio__native-control", type: "radio", id: props.id, checked: props.checked, disabled: props.disabled, onChange: props.onChange }), h("div", { class: "mdc-radio__background" }, h("div", { class: "mdc-radio__outer-circle" }), h("div", { class: "mdc-radio__inner-circle" }))), h("label", { class: `${props.disabled ? 'disabled' : ''}`, htmlFor: props.id }, props.label)));
 };