smoothly 1.0.0-alpha.13 → 1.0.0-alpha.130

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/select/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Color } from \"../../../model\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n@Component({\n\ttag: \"smoothly-input-select\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSelect implements Input {\n\t@Element() element: HTMLSmoothlyInputSelectElement\n\t@Prop() name: string\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true, mutable: true }) type?: \"icon\"\n\t@Prop({ reflect: true, mutable: true }) showSelected?: boolean = true\n\t@Prop() initialPrompt?: string\n\t@Prop() initialValue?: any\n\t@State() opened = false\n\titems: HTMLSmoothlyItemElement[] = []\n\t@State() selectedElement?: HTMLSmoothlyItemElement\n\t@State() missing = false\n\tmainElement?: HTMLElement\n\t@State() filter = \"\"\n\t@Event() selected: EventEmitter<any>\n\t@Event() smoothlyInput: EventEmitter<Record<number, any>>\n\taside?: HTMLElement\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync reset() {\n\t\tthis.selectedElement = undefined\n\t\tif (this.mainElement) {\n\t\t\t//reset to the same value as it started with\n\t\t\tthis.mainElement.innerHTML = this.initialPrompt ?? \"(none)\"\n\t\t}\n\t}\n\n\t@Watch(\"selectedElement\")\n\tonSelectedChange(value: HTMLSmoothlyItemElement | undefined, old: HTMLSmoothlyItemElement | undefined) {\n\t\tif (old)\n\t\t\told.selected = false\n\t\tthis.selected.emit(value?.value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value?.value })\n\t}\n\t@Watch(\"filter\")\n\tasync onFilterChange(value: string) {\n\t\tvalue = value.toLowerCase()\n\t\tif (!(await Promise.all(this.items.map(item => item.filter(value)))).some(r => r)) {\n\t\t\tthis.missing = true\n\t\t\tthis.items.forEach(el => el.filter(\"\"))\n\t\t} else\n\t\t\tthis.missing = false\n\t}\n\t@Listen(\"click\")\n\tonClick(event: UIEvent) {\n\t\tevent.stopPropagation()\n\t\tthis.opened = !this.opened\n\t}\n\t@Listen(\"itemSelected\")\n\tonItemSelected(event: Event) {\n\t\tthis.selectedElement && (this.selectedElement.hidden = false)\n\t\tthis.selectedElement = event.target as HTMLSmoothlyItemElement\n\t\t!this.showSelected && (this.selectedElement.hidden = true)\n\t\tif (this.mainElement)\n\t\t\tthis.mainElement.innerHTML = this.selectedElement.innerHTML\n\t}\n\t@Watch(\"opened\")\n\tonClosed() {\n\t\tif (!this.opened) {\n\t\t\tconst marked = this.items.find(item => item.marked)\n\t\t\tif (marked)\n\t\t\t\tmarked.marked = false\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\tonKeyDown(event: KeyboardEvent) {\n\t\tevent.stopPropagation()\n\t\tevent.preventDefault()\n\t\tif (this.opened) {\n\t\t\tlet direction: -1 | 0 | 1 = 0\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tdirection = -1\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tdirection = 1\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Escape\":\n\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Backspace\":\n\t\t\t\t\tthis.filter = this.filter.slice(0, -1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Enter\":\n\t\t\t\t\tconst result = this.items.find(item => item.marked)\n\t\t\t\t\tif (result?.value) {\n\t\t\t\t\t\tresult.selected = true\n\t\t\t\t\t}\n\t\t\t\t\tthis.opened = false\n\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\tif (event.key.length == 1)\n\t\t\t\t\t\tthis.filter += event.key\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t\tthis.move(direction)\n\t\t} else if (event.key == \"Enter\")\n\t\t\tthis.opened = true\n\t}\n\tprivate move(direction: -1 | 0 | 1): void {\n\t\tif (direction) {\n\t\t\tlet markedIndex = this.items.findIndex(item => item.marked)\n\t\t\tif (markedIndex == -1)\n\t\t\t\tmarkedIndex = this.items.findIndex(item => item.selected)\n\t\t\tif (this.items[markedIndex])\n\t\t\t\tthis.items[markedIndex].marked = false\n\t\t\tdo {\n\t\t\t\tmarkedIndex = (markedIndex + direction + this.items.length) % this.items.length\n\t\t\t} while (this.items[markedIndex].hidden)\n\t\t\tthis.items[markedIndex].marked = true\n\t\t\tthis.items[markedIndex].focus()\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={2} class={(this.missing ? \"missing\" : this.type) ?? \"\"}>\n\t\t\t\t<main ref={element => (this.mainElement = element)}>{this.initialPrompt ?? \"(none)\"}</main>\n\t\t\t\t{this.filter.length != 0 ? (\n\t\t\t\t\t<aside ref={element => (this.aside = element)}>\n\t\t\t\t\t\t{this.filter}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" size=\"small\"></smoothly-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</aside>\n\t\t\t\t) : undefined}\n\t\t\t\t{this.opened ? <section onClick={() => (this.opened = true)}></section> : []}\n\t\t\t\t<div class={this.opened ? \"\" : \"hidden\"}>\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\tcomponentDidRender() {\n\t\tconst items: HTMLSmoothlyItemElement[] = []\n\t\tconst children = this.element.querySelectorAll(\"div > nav > smoothly-item\")\n\t\tfor (let i = 0; i < children.length; i++) {\n\t\t\tconst node = children.item(i)\n\t\t\tif (isItem(node)) {\n\t\t\t\titems.push(node)\n\t\t\t\tnode.value == this.initialValue && this.mainElement && !this.selectedElement && (node.selected = true)\n\t\t\t}\n\t\t}\n\t\tthis.items = items\n\t}\n}\nfunction isItem(value: HTMLSmoothlyItemElement | any): value is HTMLSmoothlyItemElement {\n\treturn (\n\t\ttypeof value == \"object\" &&\n\t\t(typeof value.selected == \"boolean\" || value.selected == undefined) &&\n\t\ttypeof value.filter == \"function\"\n\t)\n}\n"]}

package/dist/collection/components/input/select/style.css

@@ -0,0 +1,80 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+
+
+:host {
+	display: flex;
+	position: relative;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+
+:host.icon {
+	width: fit-content;
+	flex-direction: column;
+}
+
+:host>main,
+:host>main>* {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
+:host.icon>main,
+:host.icon>main>* {
+	padding: 0.5em;
+}
+
+:host>div>nav {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	z-index: 10;
+	height: var(--menu-height, unset);
+	overflow-y: scroll;
+}
+
+:host>aside {
+	position: absolute;
+	top: 0;
+	left: 5em;
+	z-index: 10;
+	background-color: rgb(var(--smoothly-tertiary-color));
+	color: rgb(var(--smoothly-tertiary-contrast));
+	height: 1.25rem;
+	border-radius: 0.3rem;
+	padding: 0.3rem;
+	display: flex;
+	align-items: center;
+}
+
+:host().missing>aside {
+	background-color: rgb(var(--smoothly-warning-color));
+	color: rgb(var(--smoothly-warning-contrast));
+}
+
+.hidden {
+	display: none;
+}
+
+:host>section {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100vw;
+	height: 100vh;
+	z-index: 10;
+}

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

@@ -1,3 +1,20 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+
+
 :host {
 	display: flex;
 	align-items: center;
@@ -5,8 +22,8 @@
 	font-weight: var(--smoothly-font-weight);
 	padding: 0 0.4em;
 	overflow: hidden;
-	background-color: rgb(var(--background-color));
-	color: rgb(var(--text-color, var(--smoothly-default-contrast)));
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+	color: rgb(var(--text-color, var(--smoothly-color-contrast)));
 }
 :host[hidden] {
 	display: none;
@@ -23,7 +40,6 @@ label {
 	position: absolute;
 	left: 0;
 	top: 0.6em;
-	color: rgb(var(--text-color, var(--smoothly-default-contrast)));
 	opacity: 0.8;
 	user-select: none;
 	cursor: inherit;
@@ -41,13 +57,12 @@ input {
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
-	background: none;
 	border: 0;
 	z-index: 1;
 	position: relative;
 	font-size: 1rem;
 	font-family: var(--smoothly-font-family);
-	background-color: rgb(var(--background-color));
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
 }
 smoothly-icon {
 	display: none;
@@ -76,10 +91,10 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-	box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
-	-webkit-box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
+	box-shadow: 0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;
+	-webkit-box-shadow: 0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;
 }
 input:-webkit-autofill,
 input:-webkit-autofill + label {
-	-webkit-text-fill-color: rgb(var(--text-color, var(--smoothly-default-contrast)));
+	-webkit-text-fill-color: rgb(var(--text-color, var(--smoothly-color-contrast)));
 }

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

@@ -2,33 +2,34 @@ import { h, Host } from "@stencil/core";
 export class Notification {
   constructor() {
     this.listener = notice => {
-      console.log("changed: ", notice);
       if (notice.state == "closed")
         this.remove.emit(notice);
       else
         this.tick = {};
     };
     this.notice = undefined;
+    this.closable = true;
+    this.icon = false;
     this.tick = {};
   }
-  get color() {
+  get properties() {
     let result;
     switch (this.notice.state) {
       case "delayed":
       case "warning":
-        result = "warning";
+        result = ["warning", "warning-outline"];
         break;
       case "success":
-        result = "success";
+        result = ["success", "checkmark-circle"];
         break;
       case "executing":
-        result = "light";
+        result = ["light", "hourglass-outline"];
         break;
       case "failed":
-        result = "danger";
+        result = ["danger", "alert-circle"];
         break;
       default:
-        result = "light";
+        result = ["light", undefined];
         break;
     }
     return result;
@@ -48,7 +49,7 @@ export class Notification {
     this.onUpdatedNotice(this.notice);
   }
   render() {
-    return (h(Host, { color: this.color, fill: "solid" }, h("smoothly-trigger", { fill: "clear", name: "close" }, h("smoothly-icon", { name: "close-circle-outline" })), h("p", null, this.notice.message)));
+    return (h(Host, { color: this.properties[0], fill: "solid" }, this.closable ? (h("smoothly-trigger", { fill: "clear", name: "close" }, h("smoothly-icon", { name: "close-circle-outline" }))) : (""), h("span", { class: this.icon ? "icon" : "clean" }, this.icon ? h("smoothly-icon", { name: this.properties[1] }) : "", h("p", null, this.notice.message))));
   }
   static get is() { return "smoothly-notification"; }
   static get encapsulation() { return "scoped"; }
@@ -83,6 +84,42 @@ export class Notification {
           "tags": [],
           "text": ""
         }
+      },
+      "closable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "closable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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;AAQnG,MAAM,OAAO,YAAY;;IAIhB,aAAQ,GAAoB,MAAM,CAAC,EAAE;MAC5C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;MAChC,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;;gBARe,EAAE;;EASlB,IAAY,KAAK;IAChB,IAAI,MAAa,CAAA;IACjB,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;MAC1B,KAAK,SAAS,CAAC;MACf,KAAK,SAAS;QACb,MAAM,GAAG,SAAS,CAAA;QAClB,MAAK;MACN,KAAK,SAAS;QACb,MAAM,GAAG,SAAS,CAAA;QAClB,MAAK;MACN,KAAK,WAAW;QACf,MAAM,GAAG,OAAO,CAAA;QAChB,MAAK;MACN,KAAK,QAAQ;QACZ,MAAM,GAAG,QAAQ,CAAA;QACjB,MAAK;MACN;QACC,MAAM,GAAG,OAAO,CAAA;QAChB,MAAK;KACN;IACD,OAAO,MAAM,CAAA;EACd,CAAC;EAED,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,KAAK,EAAE,IAAI,EAAC,OAAO;MACpC,wBAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;QAC1C,qBAAe,IAAI,EAAC,sBAAsB,GAAiB,CACzC;MACnB,aAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAK,CACtB,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\"\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@State() tick = {}\n\t@Event() remove: EventEmitter<Notice>\n\tprivate listener: Notice.Listener = notice => {\n\t\tconsole.log(\"changed: \", 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 color(): Color {\n\t\tlet result: Color\n\t\tswitch (this.notice.state) {\n\t\t\tcase \"delayed\":\n\t\t\tcase \"warning\":\n\t\t\t\tresult = \"warning\"\n\t\t\t\tbreak\n\t\t\tcase \"success\":\n\t\t\t\tresult = \"success\"\n\t\t\t\tbreak\n\t\t\tcase \"executing\":\n\t\t\t\tresult = \"light\"\n\t\t\t\tbreak\n\t\t\tcase \"failed\":\n\t\t\t\tresult = \"danger\"\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tresult = \"light\"\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\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.color} fill=\"solid\">\n\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t<smoothly-icon name=\"close-circle-outline\"></smoothly-icon>\n\t\t\t\t</smoothly-trigger>\n\t\t\t\t<p>{this.notice.message}</p>\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/notification/style.css

@@ -1,14 +1,38 @@
 :host {
 	display: block;
-	min-width: 32.6%;
+	width: 30em;
 	min-height: 3em;
 	border-radius: 5px;
 	margin: 0.5em;
 }
+.clean {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0.5em 1em;
+}
+.icon {
+	display: grid;
+	width: 100%;
+	grid-template-columns: 1fr 5fr;
+}
+.icon > p{
+	padding-right: 1em;
+}
+:host > span > p {
+	text-align: left;
+}
 :host[hidden] {
 	display: none;
 }
+smoothly-icon {
+	left: 0;
+	font-size: 1.2em;
+	align-self: center;
+	justify-self: center;
+}
 smoothly-trigger {
+	font-size: 0.5em;
 	float: right;
 	text-align: right;
 	margin-right: 0.2em;

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

@@ -8,11 +8,9 @@
 	display: flex;
 	flex-wrap: wrap-reverse;
 	align-content: stretch;
-	justify-content: flex-start;
 	position: fixed;
-	bottom: 3em;
+	bottom: 3rem;
 	left: 0;
 	text-align: center;
-	width: 100%;
 	z-index: 100;
 }

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

@@ -0,0 +1,91 @@
+import { h, Host } from "@stencil/core";
+import { Notice } from "../../../model";
+function validateEmail(email) {
+  return email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed("That is not an email") };
+}
+export class SmoothlyPickerDemo {
+  constructor() {
+    this.users = {
+      "giovani@rocket.com": "giovani doe",
+      "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"],
+      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",
+      ],
+    };
+    this.change = undefined;
+  }
+  inputHandler(event) {
+    if (this.change) {
+      this.change = Object.assign(Object.assign({}, this.change), event.detail);
+      console.log("demo input", this.change);
+    }
+  }
+  submitHandler(event) {
+    console.log("submitted", event.detail);
+  }
+  clickHandler() {
+    var _a, _b;
+    if (!this.change)
+      (_a = this.controls) === null || _a === void 0 ? void 0 : _a.remember();
+    else
+      (_b = this.controls) === null || _b === void 0 ? void 0 : _b.restore();
+    this.change = this.change ? undefined : Object.assign(Object.assign({}, this.data), { emails: [...this.data.emails] });
+  }
+  loadedHandler(event) {
+    this.controls = event.detail;
+  }
+  render() {
+    var _a, _b;
+    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, onSmoothlyInput: e => console.log("demo counter input", e.detail) }, 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("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 => {
+      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" })));
+    }), 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"))), 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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "counter": {},
+      "data": {},
+      "change": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "smoothlyFormSubmit",
+        "method": "submitHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, State } from \"@stencil/core\"\nimport { Data, Notice } from \"../../../model\"\nimport { Controls } from \"../menu\"\n\nfunction validateEmail(email: string) {\n\treturn email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed(\"That is not an email\") }\n}\n\n@Component({\n\ttag: \"smoothly-picker-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerDemo {\n\tprivate controls?: Controls\n\tprivate users: Record<string, string | undefined> = {\n\t\t\"giovani@rocket.com\": \"giovani doe\",\n\t\t\"jessie@rocket.com\": \"jessie doe\",\n\t\t\"james@rocket.com\": \"james doe\",\n\t}\n\t@State() counter = 3\n\t@State() data = {\n\t\tmessage: \"hello world\",\n\t\temails: [\"jessie@rocket.com\", \"james@rocket.com\"],\n\t\toptions: [\n\t\t\t\"giovani@rocket.com\",\n\t\t\t\"john@example.com\",\n\t\t\t\"jane@example.com\",\n\t\t\t\"jack@example.com\",\n\t\t\t\"jessica@example.com\",\n\t\t\t\"julia@example.com\",\n\t\t\t\"jayden@example.com\",\n\t\t\t\"jake@example.com\",\n\t\t\t\"jamie@example.com\",\n\t\t\t\"jasmine@example.com\",\n\t\t],\n\t}\n\t@State() change?: SmoothlyPickerDemo[\"data\"]\n\tinputHandler(event: CustomEvent<Data>) {\n\t\tif (this.change) {\n\t\t\tthis.change = {\n\t\t\t\t...this.change,\n\t\t\t\t...event.detail,\n\t\t\t}\n\t\t\tconsole.log(\"demo input\", this.change)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: CustomEvent<Data>) {\n\t\tconsole.log(\"submitted\", event.detail)\n\t}\n\tclickHandler() {\n\t\tif (!this.change)\n\t\t\tthis.controls?.remember()\n\t\telse\n\t\t\tthis.controls?.restore()\n\t\tthis.change = this.change ? undefined : { ...this.data, emails: [...this.data.emails] }\n\t}\n\tloadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button onClick={() => (this.counter += 1)}>Add one</smoothly-button>\n\t\t\t\t\t<smoothly-button onClick={() => (this.counter -= 1)}>Remove one</smoothly-button>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tclass={\"counter\"}\n\t\t\t\t\t\tkey={Array.from({ length: this.counter }).toString()}\n\t\t\t\t\t\tname=\"counter\"\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tonSmoothlyInput={e => console.log(\"demo counter input\", e.detail)}>\n\t\t\t\t\t\t{Array.from({ length: this.counter }).map((_, index) => (\n\t\t\t\t\t\t\t<smoothly-picker-option value={index} selected={index < this.counter - 1}>\n\t\t\t\t\t\t\t\t{index}\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<button slot=\"child\" class={\"counter-button\"}>\n\t\t\t\t\t\t\t<smoothly-icon name={\"add-outline\"} />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</div>\n\t\t\t\t<smoothly-button onClick={() => this.clickHandler()}>\n\t\t\t\t\t{!this.change ? \"start edit\" : \"end edit\"}\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e as any)}>\n\t\t\t\t\t<smoothly-input readonly={!this.change} name=\"message\" value={this.data.message}>\n\t\t\t\t\t\tMessage\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tname=\"emails\"\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\treadonly={!this.change}\n\t\t\t\t\t\tvalidator={validateEmail}\n\t\t\t\t\t\tonSmoothlyPickerLoaded={e => this.loadedHandler(e)}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-add-outline\" />\n\t\t\t\t\t\t{(this.change?.emails ?? this.data.emails).map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} selected search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{this.data.options.map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h5>uncontrolled inputs</h5>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(\"submitted\", e.detail)} looks=\"line\">\n\t\t\t\t\t<smoothly-input name=\"purpose\" type=\"text\">\n\t\t\t\t\t\tPurpose\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker multiple mutable name=\"emails\" validator={validateEmail}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"james@rocket.com\"}>james@rocket.com</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"jessie@rocket.com\"}>\n\t\t\t\t\t\t\tjessie@rocket.com\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"giovanni@rocket.com\"}>giovanni@rocket.com</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-picker name=\"shape\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-picker multiple readonly name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<smoothly-picker looks=\"border\" name=\"icon\" multiple>\n\t\t\t\t\t<span slot=\"label\">Icon</span>\n\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t<smoothly-picker-option value={\"circle\"} required>\n\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"airplane\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Airplane</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"airplane-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"alarm\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Alarm</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"alarm-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"archive\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Archive</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"archive-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"bag\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Bag</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"bag-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cafe\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cafe</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cafe-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"disc\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Disc</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"disc-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"earth\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Earth</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"earth-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"fast-food\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Fast food</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"fast-food-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t</smoothly-picker>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/demo/style.css

@@ -0,0 +1,26 @@
+:host {
+	display: flex;
+	flex-direction: column;
+}
+:host smoothly-form {
+	max-width: 50rem;
+}
+:host .counter {
+	position: relative;
+	width: 3rem;
+	height: 3rem;
+}
+:host .counter-button {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+	height: 3rem;
+	width: 3rem;
+	background-color: inherit;
+	border: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}