smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -1,31 +1,36 @@
-import { h, Host } from "@stencil/core";
-export class Item {
+import { h, Host, } from "@stencil/core";
+export class SmoothlyItem {
   constructor() {
     this.value = undefined;
     this.selected = undefined;
     this.marked = undefined;
-  }
-  onSelectedChanged(value, old) {
-    if (value && !old)
-      this.itemSelected.emit();
+    this.selectable = true;
   }
   onClick() {
-    this.selected = true;
-    this.itemSelected.emit();
+    if (this.selectable) {
+      this.selected = !this.selected;
+      this.smoothlyItemSelect.emit(this.element);
+    }
+  }
+  componentWillLoad() {
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
   }
   componentDidLoad() {
-    if (this.selected)
-      this.itemSelected.emit();
+    if (this.selected && this.selectable)
+      this.smoothlyItemSelect.emit(this.element);
   }
   async filter(filter) {
-    const result = !(this.element.hidden = filter
-      ? !((typeof this.value === "string" ? this.value : JSON.stringify(this.value)).toLowerCase().includes(filter) ||
-        this.element.innerText.toLowerCase().includes(filter))
-      : false);
-    return result;
+    var _a;
+    const value = typeof this.value === "string" ? this.value : JSON.stringify((_a = this.value) !== null && _a !== void 0 ? _a : "");
+    this.element.hidden =
+      filter && this.selectable
+        ? !(value.includes(filter) || this.element.innerText.toLowerCase().includes(filter))
+        : false;
   }
   render() {
-    return (h(Host, { tabIndex: -1 }, h("slot", null)));
+    return (h(Host, { tabIndex: -1, class: !this.selectable ? "non-selectable" : "" }, h("slot", null)));
   }
   static get is() { return "smoothly-item"; }
   static get encapsulation() { return "scoped"; }
@@ -91,13 +96,31 @@ export class Item {
         },
         "attribute": "marked",
         "reflect": true
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
   static get events() {
     return [{
-        "method": "itemSelected",
-        "name": "itemSelected",
+        "method": "smoothlyItemSelect",
+        "name": "smoothlyItemSelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -106,9 +129,32 @@ export class Item {
           "text": ""
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+          "original": "HTMLSmoothlyItemElement",
+          "resolved": "HTMLSmoothlyItemElement",
+          "references": {
+            "HTMLSmoothlyItemElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
         }
       }];
   }
@@ -116,7 +162,7 @@ export class Item {
     return {
       "filter": {
         "complexType": {
-          "signature": "(filter: string) => Promise<boolean>",
+          "signature": "(filter: string) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -126,7 +172,7 @@ export class Item {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "",
@@ -136,12 +182,6 @@ export class Item {
     };
   }
   static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "selected",
-        "methodName": "onSelectedChanged"
-      }];
-  }
   static get listeners() {
     return [{
         "name": "click",

package/dist/collection/components/item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO7G,MAAM,OAAO,IAAI;;;;;;EAOhB,iBAAiB,CAAC,KAAc,EAAE,GAAY;IAC7C,IAAI,KAAK,IAAI,CAAC,GAAG;MAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EAC1B,CAAC;EAED,OAAO;IACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EACzB,CAAC;EACD,gBAAgB;IACf,IAAI,IAAI,CAAC,QAAQ;MAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EAC1B,CAAC;EAED,KAAK,CAAC,MAAM,CAAC,MAAc;IAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM;MAC5C,CAAC,CAAC,CAAC,CACD,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;QACzG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CACpD;MACH,CAAC,CAAC,KAAK,CAAC,CAAA;IACT,OAAO,MAAM,CAAA;EACd,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,CAAC;MACjB,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Item {\n\t@Element() element: HTMLSmoothlyItemElement\n\t@Prop() value: any\n\t@Prop({ reflect: true, mutable: true }) selected: boolean\n\t@Prop({ reflect: true, mutable: true }) marked: boolean\n\t@Event() itemSelected: EventEmitter<void>\n\t@Watch(\"selected\")\n\tonSelectedChanged(value: boolean, old: boolean) {\n\t\tif (value && !old)\n\t\t\tthis.itemSelected.emit()\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.selected = true\n\t\tthis.itemSelected.emit()\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.selected)\n\t\t\tthis.itemSelected.emit()\n\t}\n\t@Method()\n\tasync filter(filter: string): Promise<boolean> {\n\t\tconst result = !(this.element.hidden = filter\n\t\t\t? !(\n\t\t\t\t\t(typeof this.value === \"string\" ? this.value : JSON.stringify(this.value)).toLowerCase().includes(filter) ||\n\t\t\t\t\tthis.element.innerText.toLowerCase().includes(filter)\n\t\t\t  )\n\t\t\t: false)\n\t\treturn result\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={-1}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAGT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,GACJ,MAAM,eAAe,CAAA;AAQtB,MAAM,OAAO,YAAY;;;;;sBAKH,IAAI;;EAKzB,OAAO;IACN,IAAI,IAAI,CAAC,UAAU,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAA;MAC9B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC1C;EACF,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,EAAE;MAChC,OAAM;IACP,CAAC,CAAC,CAAA;EACH,CAAC;EACD,gBAAgB;IACf,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU;MACnC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC5C,CAAC;EAED,KAAK,CAAC,MAAM,CAAC,MAAc;;IAC1B,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAA;IAC5F,IAAI,CAAC,OAAO,CAAC,MAAM;MAClB,MAAM,IAAI,IAAI,CAAC,UAAU;QACxB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACpF,CAAC,CAAC,KAAK,CAAA;EACV,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAClE,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentDidLoad,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n} from \"@stencil/core\"\nimport { Item } from \"./Item\"\n\n@Component({\n\ttag: \"smoothly-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyItem implements Item, ComponentWillLoad, ComponentDidLoad {\n\t@Element() element: HTMLSmoothlyItemElement\n\t@Prop() value: any\n\t@Prop({ reflect: true, mutable: true }) selected: boolean\n\t@Prop({ reflect: true, mutable: true }) marked: boolean\n\t@Prop() selectable = true\n\t@Event() smoothlyItemSelect: EventEmitter<HTMLSmoothlyItemElement>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\n\t@Listen(\"click\")\n\tonClick() {\n\t\tif (this.selectable) {\n\t\t\tthis.selected = !this.selected\n\t\t\tthis.smoothlyItemSelect.emit(this.element)\n\t\t}\n\t}\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(() => {\n\t\t\treturn\n\t\t})\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.selected && this.selectable)\n\t\t\tthis.smoothlyItemSelect.emit(this.element)\n\t}\n\t@Method()\n\tasync filter(filter: string): Promise<void> {\n\t\tconst value = typeof this.value === \"string\" ? this.value : JSON.stringify(this.value ?? \"\")\n\t\tthis.element.hidden =\n\t\t\tfilter && this.selectable\n\t\t\t\t? !(value.includes(filter) || this.element.innerText.toLowerCase().includes(filter))\n\t\t\t\t: false\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={-1} class={!this.selectable ? \"non-selectable\" : \"\"}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/item/style.css

@@ -5,12 +5,10 @@
 :host {
 	padding: 0.5em;
 	cursor: pointer;
-	background-color: rgb(var(--smoothly-default-shade));
 	color: rgb(var(--smoothly-default-contrast));
 	border: rgb(var(--smoothly-default-shade) solid 1px);
 }
 :host([marked]),
 :host:hover {
-	background-color: rgb(var(--smoothly-primary-color));
-	color: rgb(var(--smoothly-primary-contrast));
+	background-color: rgba(var(--smoothly-primary-tint), .3);
 }

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

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyLabel {
+  constructor() {
+    this.hue = undefined;
+    this.description = undefined;
+    this.shape = undefined;
+  }
+  render() {
+    return (h(Host, { title: this.description, style: {
+        "--hue": this.hue.toString(),
+      } }, h("slot", null)));
+  }
+  static get is() { return "smoothly-label"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "hue": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hue",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rectangle\" | \"rounded\"",
+          "resolved": "\"rectangle\" | \"rounded\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOxD,MAAM,OAAO,aAAa;;;;;;EAKzB,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,KAAK,EAAE;QACN,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;OAC5B;MACD,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-label\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyLabel {\n\t@Prop() hue: number\n\t@Prop() description: string\n\t@Prop({ reflect: true }) shape: \"rectangle\" | \"rounded\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\ttitle={this.description}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--hue\": this.hue.toString(),\n\t\t\t\t}}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/label/style.css

@@ -0,0 +1,15 @@
+:host {
+	position: relative;
+	width: max-content;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0.15em 0.6em;
+	border-radius: 2em;
+	color: rgb(var(--smoothly-default-contrast));
+	background-color: hsl(var(--hue), 85%, 70%);
+}
+
+:host([shape=rectangle]) {
+	border-radius: 0.3em;
+}

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

@@ -0,0 +1,73 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyLazy {
+  constructor() {
+    this.show = false;
+    this.content = undefined;
+  }
+  loadMoreHandler(event) {
+    event.stopPropagation();
+    this.show = true;
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "before" }), h("smoothly-load-more", { onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", null)));
+  }
+  static get is() { return "smoothly-lazy"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "show": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "content": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "JSX.Element | FunctionalComponent",
+          "resolved": "Element | FunctionalComponent<{}> | undefined",
+          "references": {
+            "JSX": {
+              "location": "import",
+              "path": "@stencil/core"
+            },
+            "FunctionalComponent": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/lazy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/lazy/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,CAAC,EAAE,IAAI,EAAO,IAAI,EAAS,MAAM,eAAe,CAAA;AAOzF,MAAM,OAAO,YAAY;;gBACQ,KAAK;;;EAGrC,eAAe,CAAC,KAA0B;IACzC,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;EACjB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,YAAM,IAAI,EAAC,QAAQ,GAAG;MACtB,0BAAoB,kBAAkB,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAI;MACvE,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,EAAC,IAAI,CAAC,OAAO,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;MACnF,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, FunctionalComponent, h, Host, JSX, Prop, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-lazy\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyLazy {\n\t@Prop({ mutable: true }) show = false\n\t@Prop() content?: JSX.Element | FunctionalComponent\n\n\tloadMoreHandler(event: CustomEvent<string>): void {\n\t\tevent.stopPropagation()\n\t\tthis.show = true\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot name=\"before\" />\n\t\t\t\t<smoothly-load-more onSmoothlyLoadMore={e => this.loadMoreHandler(e)} />\n\t\t\t\t{this.show && (typeof this.content == \"function\" ? <this.content /> : this.content)}\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/{radio → load-more}/index.js

@@ -1,23 +1,25 @@
-import { h } from "@stencil/core";
-export class SmoothlyRadio {
+import { h, Host } from "@stencil/core";
+export class LoadMore {
   constructor() {
-    this.name = undefined;
-    this.value = undefined;
-    this.checked = undefined;
-    this.tab = undefined;
+    this.offset = "0";
+    this.name = "";
+    this.multiple = false;
   }
-  async onInput(e) {
-    if (e.target && e.target.value && (this.checked = e.target.checked))
-      this.smoothlySelected.emit({ name: this.name, value: this.value });
-    return true;
+  componentWillLoad() {
+    const observer = new IntersectionObserver((entries, observer) => this.observationHandler(observer, entries));
+    observer.observe(this.element);
+  }
+  observationHandler(observer, entries) {
+    var _a, _b;
+    if ((_b = (_a = entries.find(entry => entry.target == this.element)) === null || _a === void 0 ? void 0 : _a.intersectionRatio) !== null && _b !== void 0 ? _b : 0) {
+      this.smoothlyLoadMore.emit(this.name);
+      !this.multiple && (observer.unobserve(this.element), observer.disconnect());
+    }
   }
   render() {
-    return [
-      h("input", { type: "radio", name: this.name, id: this.value, tabindex: this.tab, checked: this.checked, value: this.value, onChange: e => this.onInput(e) }),
-      h("label", { htmlFor: this.value }, h("slot", null)),
-    ];
+    return h(Host, { style: { "--offset": `${this.offset}` } });
   }
-  static get is() { return "smoothly-radio"; }
+  static get is() { return "smoothly-load-more"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -31,7 +33,7 @@ export class SmoothlyRadio {
   }
   static get properties() {
     return {
-      "name": {
+      "offset": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -45,10 +47,11 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "offset",
+        "reflect": false,
+        "defaultValue": "\"0\""
       },
-      "value": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -62,12 +65,13 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "checked": {
+      "multiple": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -79,32 +83,16 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "checked",
-        "reflect": true
-      },
-      "tab": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tab",
-        "reflect": false
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get events() {
     return [{
-        "method": "smoothlySelected",
-        "name": "smoothlySelected",
+        "method": "smoothlyLoadMore",
+        "name": "smoothlyLoadMore",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -113,11 +101,12 @@ export class SmoothlyRadio {
           "text": ""
         },
         "complexType": {
-          "original": "{ name: string; value: string }",
-          "resolved": "{ name: string; value: string; }",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         }
       }];
   }
+  static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/load-more/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/load-more/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAS,MAAM,eAAe,CAAA;AAOhH,MAAM,OAAO,QAAQ;;kBAEH,GAAG;gBACL,EAAE;oBACE,KAAK;;EAGxB,iBAAiB;IAChB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;IAC5G,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC/B,CAAC;EAED,kBAAkB,CAAC,QAA8B,EAAE,OAAoC;;IACtF,IAAI,MAAA,MAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,0CAAE,iBAAiB,mCAAI,CAAC,EAAE;MAChF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAA;KAC3E;EACF,CAAC;EAED,MAAM;IACL,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,GAAI,CAAA;EACzD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Element, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-load-more\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class LoadMore implements ComponentWillLoad {\n\t@Element() element: HTMLSmoothlyLoadMoreElement\n\t@Prop() offset = \"0\"\n\t@Prop() name = \"\"\n\t@Prop() multiple = false\n\t@Event() smoothlyLoadMore: EventEmitter<string>\n\n\tcomponentWillLoad(): void {\n\t\tconst observer = new IntersectionObserver((entries, observer) => this.observationHandler(observer, entries))\n\t\tobserver.observe(this.element)\n\t}\n\n\tobservationHandler(observer: IntersectionObserver, entries: IntersectionObserverEntry[]): void {\n\t\tif (entries.find(entry => entry.target == this.element)?.intersectionRatio ?? 0) {\n\t\t\tthis.smoothlyLoadMore.emit(this.name)\n\t\t\t!this.multiple && (observer.unobserve(this.element), observer.disconnect())\n\t\t}\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn <Host style={{ \"--offset\": `${this.offset}` }} />\n\t}\n}\n"]}

package/dist/collection/components/load-more/style.css

@@ -0,0 +1,5 @@
+:host {
+	display: block;
+	position: relative;
+	top: var(--offset,)
+}

package/dist/collection/components/notification/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/notification/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AASnG,MAAM,OAAO,YAAY;;IAMhB,aAAQ,GAAoB,MAAM,CAAC,EAAE;MAC5C,IAAI,MAAM,CAAC,KAAK,IAAI,QAAQ;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;QAExB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;IAChB,CAAC,CAAA;;oBATkB,IAAI;gBACR,KAAK;gBACJ,EAAE;;EAQlB,IAAY,UAAU;IACrB,IAAI,MAAiC,CAAA;IACrC,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;MAC1B,KAAK,SAAS,CAAC;MACf,KAAK,SAAS;QACb,MAAM,GAAG,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;QACvC,MAAK;MACN,KAAK,SAAS;QACb,MAAM,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAA;QACxC,MAAK;MACN,KAAK,WAAW;QACf,MAAM,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;QACvC,MAAK;MACN,KAAK,QAAQ;QACZ,MAAM,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;QACnC,MAAK;MACN;QACC,MAAM,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC7B,MAAK;KACN;IACD,OAAO,MAAM,CAAA;EACd,CAAC;EAGD,SAAS,CAAC,KAA2B;IACpC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,EAAE;MACjC,KAAK,CAAC,eAAe,EAAE,CAAA;MACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;KACnB;EACF,CAAC;EAGD,eAAe,CAAC,QAAgB,EAAE,QAAiB;IAClD,IAAI,QAAQ;MACX,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EAC/B,CAAC;EACD,gBAAgB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;EAClC,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO;MAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,wBAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;QAC1C,qBAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC,CACnB,CAAC,CAAC,CAAC,CACH,EAAE,CACF;MACD,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAkB,CAAC,CAAC,CAAC,EAAE;QAC3E,aAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Notice, Trigger } from \"../../model\"\nimport { Icon } from \"../icon/Icon\"\n\n@Component({\n\ttag: \"smoothly-notification\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Notification {\n\t@Prop() notice: Notice\n\t@Prop() closable = true\n\t@Prop() icon = false\n\t@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tif (notice.state == \"closed\")\n\t\t\tthis.remove.emit(notice)\n\t\telse\n\t\t\tthis.tick = {}\n\t}\n\tprivate get properties(): [Color, Icon | undefined] {\n\t\tlet result: [Color, Icon | undefined]\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = [\"warning\", \"warning-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = [\"success\", \"checkmark-circle\"]\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = [\"light\", \"hourglass-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = [\"danger\", \"alert-circle\"]\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = [\"light\", undefined]\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n\n\t@Listen(\"trigger\")\n\tonTrigger(event: CustomEvent<Trigger>) {\n\t\tif (event.detail.name == \"close\") {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.notice.close()\n\t\t}\n\t}\n\n\t@Watch(\"notice\")\n\tonUpdatedNotice(newValue: Notice, oldValue?: Notice) {\n\t\tif (oldValue)\n\t\t\toldValue.unlisten(this.listener)\n\t\tnewValue.listen(this.listener)\n\t}\n\tcomponentDidLoad() {\n\t\tthis.onUpdatedNotice(this.notice)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host color={this.properties[0]} fill=\"solid\">\n\t\t\t\t{this.closable ? (\n\t\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-trigger>\n\t\t\t\t) : (\n\t\t\t\t\t\"\"\n\t\t\t\t)}\n\t\t\t\t<span class={this.icon ? \"icon\" : \"clean\"}>\n\t\t\t\t\t{this.icon ? <smoothly-icon name={this.properties[1]}></smoothly-icon> : \"\"}\n\t\t\t\t\t<p>{this.notice.message}</p>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/notification/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AASnG,MAAM,OAAO,YAAY;;IAMhB,aAAQ,GAAoB,MAAM,CAAC,EAAE;MAC5C,IAAI,MAAM,CAAC,KAAK,IAAI,QAAQ;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;QAExB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;IAChB,CAAC,CAAA;;oBATkB,IAAI;gBACR,KAAK;gBACJ,EAAE;;EAQlB,IAAY,UAAU;IACrB,IAAI,MAAiC,CAAA;IACrC,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;MAC1B,KAAK,SAAS,CAAC;MACf,KAAK,SAAS;QACb,MAAM,GAAG,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;QACvC,MAAK;MACN,KAAK,SAAS;QACb,MAAM,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAA;QACxC,MAAK;MACN,KAAK,WAAW;QACf,MAAM,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;QACvC,MAAK;MACN,KAAK,QAAQ;QACZ,MAAM,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;QACnC,MAAK;MACN;QACC,MAAM,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC7B,MAAK;KACN;IACD,OAAO,MAAM,CAAA;EACd,CAAC;EAGD,SAAS,CAAC,KAA2B;IACpC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,EAAE;MACjC,KAAK,CAAC,eAAe,EAAE,CAAA;MACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;KACnB;EACF,CAAC;EAGD,eAAe,CAAC,QAAgB,EAAE,QAAiB;IAClD,IAAI,QAAQ;MACX,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EAC/B,CAAC;EACD,gBAAgB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;EAClC,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO;MAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,wBAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;QAC1C,qBAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC,CACnB,CAAC,CAAC,CAAC,CACH,EAAE,CACF;MACD,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAkB,CAAC,CAAC,CAAC,EAAE;QAC3E,aAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Notice, Trigger } from \"../../model\"\nimport { Icon } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-notification\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Notification {\n\t@Prop() notice: Notice\n\t@Prop() closable = true\n\t@Prop() icon = false\n\t@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tif (notice.state == \"closed\")\n\t\t\tthis.remove.emit(notice)\n\t\telse\n\t\t\tthis.tick = {}\n\t}\n\tprivate get properties(): [Color, Icon | undefined] {\n\t\tlet result: [Color, Icon | undefined]\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = [\"warning\", \"warning-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = [\"success\", \"checkmark-circle\"]\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = [\"light\", \"hourglass-outline\"]\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = [\"danger\", \"alert-circle\"]\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = [\"light\", undefined]\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n\n\t@Listen(\"trigger\")\n\tonTrigger(event: CustomEvent<Trigger>) {\n\t\tif (event.detail.name == \"close\") {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.notice.close()\n\t\t}\n\t}\n\n\t@Watch(\"notice\")\n\tonUpdatedNotice(newValue: Notice, oldValue?: Notice) {\n\t\tif (oldValue)\n\t\t\toldValue.unlisten(this.listener)\n\t\tnewValue.listen(this.listener)\n\t}\n\tcomponentDidLoad() {\n\t\tthis.onUpdatedNotice(this.notice)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host color={this.properties[0]} fill=\"solid\">\n\t\t\t\t{this.closable ? (\n\t\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-trigger>\n\t\t\t\t) : (\n\t\t\t\t\t\"\"\n\t\t\t\t)}\n\t\t\t\t<span class={this.icon ? \"icon\" : \"clean\"}>\n\t\t\t\t\t{this.icon ? <smoothly-icon name={this.properties[1]}></smoothly-icon> : \"\"}\n\t\t\t\t\t<p>{this.notice.message}</p>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/demo/index.js

@@ -10,20 +10,21 @@ export class SmoothlyPickerDemo {
       "jessie@rocket.com": "jessie doe",
       "james@rocket.com": "james doe",
     };
+    this.counter = 3;
     this.data = {
       message: "hello world",
-      emails: ["jessie@rocket.com", "james@rocket.com"],
+      emails: [{ value: "jessie@rocket.com" }, { value: "james@rocket.com" }],
       options: [
-        "giovani@rocket.com",
-        "john@example.com",
-        "jane@example.com",
-        "jack@example.com",
-        "jessica@example.com",
-        "julia@example.com",
-        "jayden@example.com",
-        "jake@example.com",
-        "jamie@example.com",
-        "jasmine@example.com",
+        { value: "giovani@rocket.com" },
+        { value: "john@example.com" },
+        { value: "jane@example.com" },
+        { value: "jack@example.com" },
+        { value: "jessica@example.com" },
+        { value: "julia@example.com" },
+        { value: "jayden@example.com" },
+        { value: "jake@example.com" },
+        { value: "jamie@example.com" },
+        { value: "jasmine@example.com" },
       ],
     };
     this.change = undefined;
@@ -50,13 +51,13 @@ export class SmoothlyPickerDemo {
   }
   render() {
     var _a, _b;
-    return (h(Host, null, h("smoothly-button", { onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), h("h5", null, "Controlled input"), h("smoothly-form", { looks: "line", onSmoothlyFormInput: e => this.inputHandler(e) }, h("smoothly-input", { readonly: !this.change, name: "message", value: this.data.message }, "Message"), h("smoothly-picker", { name: "emails", mutable: true, multiple: true, readonly: !this.change, validator: validateEmail, onSmoothlyPickerLoaded: e => this.loadedHandler(e) }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-add-outline" }), ((_b = (_a = this.change) === null || _a === void 0 ? void 0 : _a.emails) !== null && _b !== void 0 ? _b : this.data.emails).map(email => {
+    return (h(Host, null, h("div", null, h("smoothly-button", { onClick: () => (this.counter += 1) }, "Add one"), h("smoothly-button", { onClick: () => (this.counter -= 1) }, "Remove one"), h("smoothly-picker", { class: "counter", key: Array.from({ length: this.counter }).toString(), name: "counter", multiple: true, mutable: true }, Array.from({ length: this.counter }).map((_, index) => (h("smoothly-picker-option", { value: index, selected: index < this.counter - 1 }, index))), h("span", { slot: "search" }, "Search"), h("button", { slot: "child", class: "counter-button" }, h("smoothly-icon", { name: "add-outline" })))), h("h5", null, "Controlled input"), h("smoothly-button", { color: "secondary", onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), h("smoothly-form", { class: "controlled", looks: "line", onSmoothlyFormInput: e => this.inputHandler(e) }, h("smoothly-input", { readonly: !this.change, name: "message", value: this.data.message }, "Message"), h("smoothly-picker", { name: "emails", mutable: true, multiple: true, readonly: !this.change, validator: validateEmail, onSmoothlyPickerLoaded: e => this.loadedHandler(e) }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-add-outline" }), ((_b = (_a = this.change) === null || _a === void 0 ? void 0 : _a.emails) !== null && _b !== void 0 ? _b : this.data.emails).map(email => {
       var _a;
-      return (h("smoothly-picker-option", { key: email, value: email, selected: true, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email]), h("span", { slot: "label" }, email), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
+      return (h("smoothly-picker-option", { key: email.value, value: email, selected: true, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email.value]), h("span", { slot: "label" }, email.value), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
     }), this.data.options.map(email => {
       var _a;
-      return (h("smoothly-picker-option", { key: email, value: email, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email]), h("span", { slot: "label" }, email), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
-    })), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear")), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")))));
+      return (h("smoothly-picker-option", { key: email.value, value: email, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email.value]), h("span", { slot: "label" }, email.value), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
+    })), h("smoothly-input-clear", { slot: "submit", type: "form", color: "danger", fill: "solid" }, "Clear"), h("smoothly-button", { slot: "submit", color: "secondary", onClick: () => { var _a; return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.clear(); } }, "Removed added by mutation"), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" }))), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish"))), h("smoothly-picker", { looks: "border", name: "icon", multiple: true }, h("span", { slot: "label" }, "Icon"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle", required: true }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" })), h("smoothly-picker-option", { value: "airplane" }, h("span", { slot: "label" }, "Airplane"), h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), h("smoothly-picker-option", { value: "alarm" }, h("span", { slot: "label" }, "Alarm"), h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), h("smoothly-picker-option", { value: "archive" }, h("span", { slot: "label" }, "Archive"), h("smoothly-icon", { size: "tiny", name: "archive-outline" })), h("smoothly-picker-option", { value: "bag" }, h("span", { slot: "label" }, "Bag"), h("smoothly-icon", { size: "tiny", name: "bag-outline" })), h("smoothly-picker-option", { value: "cafe" }, h("span", { slot: "label" }, "Cafe"), h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), h("smoothly-picker-option", { value: "disc" }, h("span", { slot: "label" }, "Disc"), h("smoothly-icon", { size: "tiny", name: "disc-outline" })), h("smoothly-picker-option", { value: "earth" }, h("span", { slot: "label" }, "Earth"), h("smoothly-icon", { size: "tiny", name: "earth-outline" })), h("smoothly-picker-option", { value: "fast-food" }, h("span", { slot: "label" }, "Fast food"), h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
   }
   static get is() { return "smoothly-picker-demo"; }
   static get encapsulation() { return "scoped"; }
@@ -72,6 +73,7 @@ export class SmoothlyPickerDemo {
   }
   static get states() {
     return {
+      "counter": {},
       "data": {},
       "change": {}
     };