smoothly 0.3.4 → 0.3.6

package/dist/collection/components/select/index.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 export class SmoothlySelect {
   optionSelected() {
     if (this.selectElement)
@@ -11,85 +11,92 @@ export class SmoothlySelect {
   }
   render() {
     return [
-      h("select", { ref: e => (this.selectElement = e), id: this.identifier, onChange: () => this.optionSelected(), style: { background: this.background } },
-        h("slot", null)),
+      h("select", { ref: e => (this.selectElement = e), id: this.identifier, onChange: () => this.optionSelected(), style: { background: this.background } }, h("slot", null)),
     ];
   }
   static get is() { return "smoothly-select"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get properties() { return {
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "background": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "background",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "identifier",
+        "reflect": false
       },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "selectionChanged",
-      "name": "selectionChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "background": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background",
+        "reflect": true
       },
-      "complexType": {
-        "original": "{ identifier: string; value: string }",
-        "resolved": "{ identifier: string; value: string; }",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectionChanged",
+        "name": "selectionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ identifier: string; value: string }",
+          "resolved": "{ identifier: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
 }

package/dist/collection/components/select-demo/index.js

@@ -1,4 +1,4 @@
-import { Component, h, Listen } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Notice } from "../../model";
 export class SmoothlySelectDemo {
   constructor() {
@@ -16,17 +16,8 @@ export class SmoothlySelectDemo {
   render() {
     return [
       h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
-      h("smoothly-select", { identifier: "language" },
-        h("optgroup", { label: "Nordic" },
-          h("option", { value: "sv" }, "Swedish"),
-          h("option", { value: "da", selected: true }, "Danish"),
-          h("option", { value: "no" }, "Norwegian")),
-        h("optgroup", { label: "Other" },
-          h("option", { value: "en" }, "English"))),
-      h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) },
-        h("option", { value: "1" }, "1"),
-        h("option", { value: "2" }, "2"),
-        h("option", { value: "3" }, "3")),
+      h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
+      h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
       h("smoothly-input-date", null, "Date"),
       h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
       h("smoothly-input-date-range", { start: "2022-10-28", end: "2022-11-27", min: "2021-10-10", max: "2022-12-30" }),
@@ -36,19 +27,7 @@ export class SmoothlySelectDemo {
           "--padding": "0 0.75em",
           "--input-width": "6rem",
         } }),
-      h("smoothly-selector", null,
-        h("smoothly-item", { value: "1" }, "January"),
-        h("smoothly-item", { value: "2" }, "February"),
-        h("smoothly-item", { value: "3" }, "March"),
-        h("smoothly-item", { value: "4" }, "April"),
-        h("smoothly-item", { value: "5" }, "May"),
-        h("smoothly-item", { value: "6" }, "June"),
-        h("smoothly-item", { value: "7" }, "July"),
-        h("smoothly-item", { value: "8" }, "August"),
-        h("smoothly-item", { value: "9" }, "September"),
-        h("smoothly-item", { value: "10" }, "October"),
-        h("smoothly-item", { value: "11" }, "November"),
-        h("smoothly-item", { value: "12" }, "December")),
+      h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
       h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
@@ -101,25 +80,28 @@ export class SmoothlySelectDemo {
       h("br", null),
       h("smoothly-picker", { label: "readonly", readonly: true, options: [{ name: "readonly", value: "readonly" }] }),
       h("br", null),
-      h("smoothly-tab-switch", null,
-        h("smoothly-tab", { label: "test1", open: true }, "Hello world!"),
-        h("smoothly-tab", { label: "test2" }, "this is a test message!"),
-        h("smoothly-tab", { label: "test3" }, "this is a test message again!")),
+      h("smoothly-tab-switch", null, h("smoothly-tab", { label: "test1", open: true }, "Hello world!"), h("smoothly-tab", { label: "test2" }, "this is a test message!"), h("smoothly-tab", { label: "test3" }, "this is a test message again!")),
     ];
   }
   static get is() { return "smoothly-select-demo"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get listeners() { return [{
-      "name": "selectionChanged",
-      "method": "handleSelectionChanged",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "selectionChanged",
+        "method": "handleSelectionChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/selector/index.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, State, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class Selector {
   constructor() {
     this.opened = false;
@@ -79,19 +79,10 @@ export class Selector {
     }
   }
   render() {
-    return (h(Host, { tabIndex: 2, class: this.missing ? "missing" : "" },
-      h("main", { ref: element => (this.mainElement = element) }, "(none)"),
-      this.filter.length != 0 ? (h("aside", { ref: element => (this.aside = element) },
-        this.filter,
-        h("button", { onClick: e => {
-            e.stopPropagation();
-            this.filter = "";
-          } },
-          h("smoothly-icon", { name: "close", size: "small" })))) : undefined,
-      this.opened ? h("section", { onClick: () => (this.opened = true) }) : [],
-      h("div", { class: this.opened ? "" : "hidden" },
-        h("nav", null,
-          h("slot", null)))));
+    return (h(Host, { tabIndex: 2, class: this.missing ? "missing" : "" }, h("main", { ref: element => (this.mainElement = element) }, "(none)"), this.filter.length != 0 ? (h("aside", { ref: element => (this.aside = element) }, this.filter, h("button", { onClick: e => {
+        e.stopPropagation();
+        this.filter = "";
+      } }, h("smoothly-icon", { name: "close", size: "small" })))) : undefined, this.opened ? h("section", { onClick: () => (this.opened = true) }) : [], h("div", { class: this.opened ? "" : "hidden" }, h("nav", null, h("slot", null)))));
   }
   componentDidRender() {
     const items = [];
@@ -105,61 +96,73 @@ export class Selector {
   }
   static get is() { return "smoothly-selector"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get states() { return {
-    "opened": {},
-    "selectedElement": {},
-    "missing": {},
-    "filter": {}
-  }; }
-  static get events() { return [{
-      "method": "selected",
-      "name": "selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "opened": {},
+      "selectedElement": {},
+      "missing": {},
+      "filter": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selected",
+        "name": "selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "selectedElement",
-      "methodName": "onSelectedChange"
-    }, {
-      "propName": "filter",
-      "methodName": "onFilterChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "itemSelected",
-      "method": "onItemSelected",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "onKeyDown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "selectedElement",
+        "methodName": "onSelectedChange"
+      }, {
+        "propName": "filter",
+        "methodName": "onFilterChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "itemSelected",
+        "method": "onItemSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 function isItem(value) {
   return (typeof value == "object" &&

package/dist/collection/components/skeleton/index.js

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class SmoothlySkeleton {
   constructor() {
     this.widths = ["8rem", "9rem", "10rem"];
@@ -15,114 +15,120 @@ export class SmoothlySkeleton {
   }
   static get is() { return "smoothly-skeleton"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get properties() { return {
-    "widths": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[\"8rem\", \"9rem\", \"10rem\"]"
-    },
-    "width": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": false
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "color",
-      "reflect": false
-    },
-    "period": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "widths": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[\"8rem\", \"9rem\", \"10rem\"]"
       },
-      "attribute": "period",
-      "reflect": false
-    },
-    "distance": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "width": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
       },
-      "attribute": "distance",
-      "reflect": false
-    },
-    "align": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"center\" | \"right\"",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
+      "period": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "period",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "distance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "distance",
+        "reflect": false
       },
-      "attribute": "align",
-      "reflect": true,
-      "defaultValue": "\"left\""
-    }
-  }; }
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"center\" | \"right\"",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "align",
+        "reflect": true,
+        "defaultValue": "\"left\""
+      }
+    };
+  }
 }