smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -1 +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() 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<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</Host>\n\t\t)\n\t}\n}\n"]}
+{"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: [{ value: \"jessie@rocket.com\" }, { value: \"james@rocket.com\" }],\n\t\toptions: [\n\t\t\t{ value: \"giovani@rocket.com\" },\n\t\t\t{ value: \"john@example.com\" },\n\t\t\t{ value: \"jane@example.com\" },\n\t\t\t{ value: \"jack@example.com\" },\n\t\t\t{ value: \"jessica@example.com\" },\n\t\t\t{ value: \"julia@example.com\" },\n\t\t\t{ value: \"jayden@example.com\" },\n\t\t\t{ value: \"jake@example.com\" },\n\t\t\t{ value: \"jamie@example.com\" },\n\t\t\t{ value: \"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\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\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-button color={\"secondary\"} 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<smoothly-form class={\"controlled\"} looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e)}>\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\n\t\t\t\t\t\t\t\tkey={email.value}\n\t\t\t\t\t\t\t\tvalue={email}\n\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\tsearch={[this.users[email.value] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email.value]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email.value}</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} value={email} search={[this.users[email.value] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email.value]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email.value}</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-input-clear slot={\"submit\"} type=\"form\" color=\"danger\" fill=\"solid\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-button slot={\"submit\"} color={\"secondary\"} onClick={() => this.controls?.clear()}>\n\t\t\t\t\t\tRemoved added by mutation\n\t\t\t\t\t</smoothly-button>\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</smoothly-form>\n\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

@@ -2,6 +2,29 @@
 	display: flex;
 	flex-direction: column;
 }
-smoothly-form {
+: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;
+}
+:host .controlled smoothly-input:not([readonly]),
+:host .controlled smoothly-picker:not([readonly]) {
+	outline: 1px solid rgb(var(--smoothly-success-color));
+}

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

@@ -1,8 +1,12 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 export class SmoothlyPicker {
   constructor() {
+    this.valueRecivedOnLoad = false;
+    this.initialValue = new Map();
+    this.listener = {};
     this.looks = "plain";
     this.name = undefined;
+    this.changed = false;
     this.open = false;
     this.mutable = false;
     this.multiple = false;
@@ -12,10 +16,17 @@ export class SmoothlyPicker {
     this.display = undefined;
   }
   componentWillLoad() {
+    var _a, _b;
     this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   selectedChanged() {
     const selected = Array.from(this.selected.values(), option => option.value);
+    this.changed = !this.areValuesEqual(this.selected, this.initialValue);
     this.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
     this.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
     this.display = Array.from(this.selected.values(), option => {
@@ -23,6 +34,7 @@ export class SmoothlyPicker {
       option.slotted.forEach(node => span.appendChild(node.cloneNode(true)));
       return span;
     });
+    !this.valueRecivedOnLoad && (this.initialValue = new Map(this.selected));
   }
   componentDidLoad() {
     if (this.controls)
@@ -40,9 +52,10 @@ export class SmoothlyPicker {
       this.selected = this.multiple
         ? new Map(this.selected.set(event.detail.value, event.detail).entries())
         : new Map().set(event.detail.value, event.detail);
+    !this.valueRecivedOnLoad && (this.valueRecivedOnLoad = !this.valueRecivedOnLoad);
   }
   optionChangeHandler(event) {
-    if (!this.readonly)
+    if ((this.readonly && !this.valueRecivedOnLoad) || !this.readonly)
       if (this.multiple)
         this.selected = event.detail.selected
           ? new Map(this.selected.set(event.detail.value, event.detail).entries())
@@ -53,7 +66,7 @@ export class SmoothlyPicker {
         this.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail);
   }
   clickHandler(event) {
-    this.open = !event.composedPath().includes(this.element) ? false : !this.open;
+    this.open = !event.composedPath().includes(this.element) || this.readonly ? false : !this.open;
   }
   focusHandler(event) {
     if (!event.composedPath().includes(this.element))
@@ -62,8 +75,31 @@ export class SmoothlyPicker {
   async clear() {
     this.selected.forEach(option => option.selected && option.element.clickHandler());
   }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
+  }
+  async edit(editable) {
+    await this.reset();
+    this.readonly = !editable;
+  }
+  async reset() {
+    const initialValueArray = Array.from(this.initialValue.values(), option => option.value);
+    this.selected.forEach(option => !initialValueArray.includes(option.value) && option.selected && option.set.selected(false));
+    this.initialValue.forEach(option => option.set.selected(true));
+  }
+  async setInitialValue() {
+    this.initialValue = new Map(this.selected);
+    this.selectedChanged();
+  }
+  areValuesEqual(selected, initialValue) {
+    const initialValueArray = Array.from(initialValue.values(), option => option.value);
+    const selectedArray = Array.from(selected.values(), option => option.value);
+    return (selectedArray.length === initialValueArray.length &&
+      initialValueArray.every(value => selectedArray.includes(value)));
+  }
   render() {
-    return (h(Host, null, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-picker-menu", { looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
+    return (h(Host, { tabindex: 0 }, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("slot", { name: "child" }), h("smoothly-picker-menu", { open: this.open, looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "scoped"; }
@@ -84,7 +120,7 @@ export class SmoothlyPicker {
         "mutable": true,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -119,6 +155,24 @@ export class SmoothlyPicker {
         "attribute": "name",
         "reflect": true
       },
+      "changed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "changed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -175,7 +229,7 @@ export class SmoothlyPicker {
       },
       "readonly": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -290,7 +344,7 @@ export class SmoothlyPicker {
         },
         "complexType": {
           "original": "(looks: Looks) => void",
-          "resolved": "(looks: Looks) => void",
+          "resolved": "(looks: \"line\" | \"grid\" | \"plain\" | \"border\" | \"transparent\") => void",
           "references": {
             "Looks": {
               "location": "import",
@@ -298,6 +352,40 @@ export class SmoothlyPicker {
             }
           }
         }
+      }, {
+        "method": "smoothlyFormDisable",
+        "name": "smoothlyFormDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(disabled: boolean) => void",
+          "resolved": "(disabled: boolean) => void",
+          "references": {}
+        }
+      }, {
+        "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"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -317,6 +405,83 @@ export class SmoothlyPicker {
           "text": "",
           "tags": []
         }
+      },
+      "listen": {
+        "complexType": {
+          "signature": "(property: \"changed\", listener: (parent: Editable) => Promise<void>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Editable": {
+              "location": "import",
+              "path": "../input/Editable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "edit": {
+        "complexType": {
+          "signature": "(editable: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setInitialValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/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,KAAK,EAAE,MAAM,eAAe,CAAA;AAYpH,MAAM,OAAO,cAAc;;iBAE6B,OAAO;;gBAEf,KAAK;mBACjB,KAAK;oBACJ,KAAK;oBACL,KAAK;;oBAErB,IAAI,GAAG,EAAe;;;EAQ1C,iBAAiB;IAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;EAC5D,CAAC;EAGD,eAAe;IACd,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC3E,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACnF,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACpF,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE;MAC1D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;MAC3C,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;MACtE,OAAO,IAAI,CAAA;IACZ,CAAC,CAAC,CAAA;EACH,CAAC;EAED,gBAAgB;IACf,IAAI,IAAI,CAAC,QAAQ;MAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EAC/C,CAAC;EAED,yBAAyB,CAAC,KAA0C;IACnE,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,iBAAiB,CAAC,KAA4B;IAC7C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAA;EAC7B,CAAC;EAED,mBAAmB,CAAC,KAA0B;IAC7C,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ;MACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;QAC5B,CAAC,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC;QACxE,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;EACpD,CAAC;EAGD,mBAAmB,CAAC,KAA0B;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ;MACjB,IAAI,IAAI,CAAC,QAAQ;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ;UACpC,CAAC,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC;UACxE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YAC3C,CAAC,CAAC,IAAI,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;;QAEnC,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;EACvG,CAAC;EAED,YAAY,CAAC,KAAiB;IAC7B,IAAI,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAA;EAC9E,CAAC;EAED,YAAY,CAAC,KAAiB;IAC7B,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC/C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;EACnB,CAAC;EAED,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAA;EAClF,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,8BAAwB,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,GAAI;MAClE,YAAM,KAAK,EAAE,OAAO;QACnB,YAAM,IAAI,EAAE,OAAO,GAAI,CACjB;MACP,cAAQ,IAAI,EAAC,QAAQ;QACpB,qBAAe,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,uBAAuB,GAAI,CACvF;MACT,4BACC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG;QACpC,YAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAG;QACtC,eAAQ,CACc,CACjB,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Notice, Option } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Controls } from \"./menu\"\n\n@Component({\n\ttag: \"smoothly-picker\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPicker implements Clearable, Input {\n\t@Element() element: HTMLSmoothlyPickerElement\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true, mutable: true }) open = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() selected = new Map<any, Option>()\n\t@State() display: Node[]\n\t@Event() smoothlyPickerLoaded: EventEmitter<Controls>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyChange: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks) => void>\n\tprivate controls?: Controls\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t}\n\n\t@Watch(\"selected\")\n\tselectedChanged() {\n\t\tconst selected = Array.from(this.selected.values(), option => option.value)\n\t\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.display = Array.from(this.selected.values(), option => {\n\t\t\tconst span = document.createElement(\"span\")\n\t\t\toption.slotted.forEach(node => span.appendChild(node.cloneNode(true)))\n\t\t\treturn span\n\t\t})\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (this.controls)\n\t\t\tthis.smoothlyPickerLoaded.emit(this.controls)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyPickerMenuLoaded\")\n\tmenuLoadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (event.detail.selected)\n\t\t\tthis.selected = this.multiple\n\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t: new Map().set(event.detail.value, event.detail)\n\t}\n\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.readonly)\n\t\t\tif (this.multiple)\n\t\t\t\tthis.selected = event.detail.selected\n\t\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t\t: !this.selected.delete(event.detail.value)\n\t\t\t\t\t? this.selected\n\t\t\t\t\t: new Map(this.selected.entries())\n\t\t\telse\n\t\t\t\tthis.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tthis.open = !event.composedPath().includes(this.element) ? false : !this.open\n\t}\n\t@Listen(\"focusin\", { target: \"window\" })\n\tfocusHandler(event: FocusEvent) {\n\t\tif (!event.composedPath().includes(this.element))\n\t\t\tthis.open = false\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.selected.forEach(option => option.selected && option.element.clickHandler())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-slot-elements class={\"selected\"} nodes={this.display} />\n\t\t\t\t<span class={\"label\"}>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</span>\n\t\t\t\t<button type=\"button\">\n\t\t\t\t\t<smoothly-icon size=\"tiny\" name={this.open ? \"caret-down-outline\" : \"caret-forward-outline\"} />\n\t\t\t\t</button>\n\t\t\t\t<smoothly-picker-menu\n\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\tmutable={this.mutable}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tvalidator={this.validator}>\n\t\t\t\t\t<slot name=\"search\" slot=\"search\" />\n\t\t\t\t\t<slot name=\"display\" slot=\"display\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-picker-menu>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentDidLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { Notice, Option } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Editable } from \"../input/Editable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Controls } from \"./menu\"\n\n@Component({\n\ttag: \"smoothly-picker\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPicker implements Clearable, Editable, Input, ComponentDidLoad {\n\tprivate valueRecivedOnLoad = false\n\tprivate initialValue = new Map<any, Option>()\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\t@Element() element: HTMLSmoothlyPickerElement\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true, mutable: true }) open = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() selected = new Map<any, Option>()\n\t@State() display: Node[]\n\t@Event() smoothlyPickerLoaded: EventEmitter<Controls>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyChange: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tprivate controls?: Controls\n\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.smoothlyInputLoad.emit(() => {\n\t\t\treturn\n\t\t})\n\t\tthis.listener.changed?.(this)\n\t}\n\n\t@Watch(\"selected\")\n\tselectedChanged(): void {\n\t\tconst selected = Array.from(this.selected.values(), option => option.value)\n\t\tthis.changed = !this.areValuesEqual(this.selected, this.initialValue)\n\t\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.display = Array.from(this.selected.values(), option => {\n\t\t\tconst span = document.createElement(\"span\")\n\t\t\toption.slotted.forEach(node => span.appendChild(node.cloneNode(true)))\n\t\t\treturn span\n\t\t})\n\t\t!this.valueRecivedOnLoad && (this.initialValue = new Map(this.selected))\n\t}\n\n\tcomponentDidLoad(): void | Promise<void> {\n\t\tif (this.controls)\n\t\t\tthis.smoothlyPickerLoaded.emit(this.controls)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyPickerMenuLoaded\")\n\tmenuLoadedHandler(event: CustomEvent<Controls & { synced: () => boolean }>): void {\n\t\tthis.controls = event.detail\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>): void {\n\t\tif (event.detail.selected)\n\t\t\tthis.selected = this.multiple\n\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t: new Map().set(event.detail.value, event.detail)\n\t\t!this.valueRecivedOnLoad && (this.valueRecivedOnLoad = !this.valueRecivedOnLoad)\n\t}\n\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>): void {\n\t\tif ((this.readonly && !this.valueRecivedOnLoad) || !this.readonly)\n\t\t\tif (this.multiple)\n\t\t\t\tthis.selected = event.detail.selected\n\t\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t\t: !this.selected.delete(event.detail.value)\n\t\t\t\t\t? this.selected\n\t\t\t\t\t: new Map(this.selected.entries())\n\t\t\telse\n\t\t\t\tthis.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tthis.open = !event.composedPath().includes(this.element) || this.readonly ? false : !this.open\n\t}\n\t@Listen(\"focusin\", { target: \"window\" })\n\tfocusHandler(event: FocusEvent) {\n\t\tif (!event.composedPath().includes(this.element))\n\t\t\tthis.open = false\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.selected.forEach(option => option.selected && option.element.clickHandler())\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tawait this.reset()\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tconst initialValueArray = Array.from(this.initialValue.values(), option => option.value)\n\t\tthis.selected.forEach(\n\t\t\toption => !initialValueArray.includes(option.value) && option.selected && option.set.selected(false)\n\t\t)\n\t\tthis.initialValue.forEach(option => option.set.selected(true))\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = new Map(this.selected)\n\t\tthis.selectedChanged()\n\t}\n\tareValuesEqual(selected: Map<any, Option>, initialValue: Map<any, Option>): boolean {\n\t\tconst initialValueArray = Array.from(initialValue.values(), option => option.value)\n\t\tconst selectedArray = Array.from(selected.values(), option => option.value)\n\t\treturn (\n\t\t\tselectedArray.length === initialValueArray.length &&\n\t\t\tinitialValueArray.every(value => selectedArray.includes(value))\n\t\t)\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host tabindex={0}>\n\t\t\t\t<smoothly-slot-elements class={\"selected\"} nodes={this.display} />\n\t\t\t\t<span class={\"label\"}>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</span>\n\t\t\t\t<button type=\"button\">\n\t\t\t\t\t<smoothly-icon size=\"tiny\" name={this.open ? \"caret-down-outline\" : \"caret-forward-outline\"} />\n\t\t\t\t</button>\n\t\t\t\t<slot name=\"child\" />\n\t\t\t\t<smoothly-picker-menu\n\t\t\t\t\topen={this.open}\n\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\tmutable={this.mutable}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tvalidator={this.validator}>\n\t\t\t\t\t<slot name=\"search\" slot=\"search\" />\n\t\t\t\t\t<slot name=\"display\" slot=\"display\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-picker-menu>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,4 +1,6 @@
 import { h, Host } from "@stencil/core";
+import global from "../../../global/index";
+const Observers = global().Observers;
 function* chain(...iterables) {
   for (const iterable of iterables)
     yield* iterable;
@@ -17,6 +19,7 @@ function restoreListener(ref, option) {
 export class SmoothlyPickerMenu {
   constructor() {
     this.looks = undefined;
+    this.open = false;
     this.multiple = false;
     this.mutable = false;
     this.readonly = false;
@@ -27,6 +30,19 @@ export class SmoothlyPickerMenu {
     this.search = "";
     this.valid = false;
     this.display = undefined;
+    this.flip = false;
+    this.flipChecked = false;
+  }
+  componentWillLoad() {
+    if (!Observers.has(this.element)) {
+      const threshold = 0.4;
+      Observers.set(this.element, new IntersectionObserver(entries => {
+        var _a, _b;
+        return ((_b = (_a = entries.find(entry => entry.target == this.element)) === null || _a === void 0 ? void 0 : _a.intersectionRatio) !== null && _b !== void 0 ? _b : 0) < threshold &&
+          !this.flipChecked &&
+          ((this.flip = !this.flip), (this.flipChecked = true));
+      }, { threshold }));
+    }
   }
   componentDidLoad() {
     this.smoothlyPickerMenuLoaded.emit({
@@ -54,12 +70,36 @@ export class SmoothlyPickerMenu {
           }
         }
       },
+      clear: () => {
+        const backend = Array.from(this.backend.entries());
+        backend.filter(([key]) => this.created.has(key)).forEach(([, option]) => option.set.selected(false));
+        this.backend = new Map(backend.filter(([key]) => !this.created.has(key)));
+        this.options = new Map(Array.from(this.options.entries()).filter(([key]) => !this.created.has(key)));
+        this.created = new Map();
+      },
     });
   }
+  disconnectedCallback() {
+    var _a;
+    if (!this.element.parentElement) {
+      (_a = Observers.get(this.element)) === null || _a === void 0 ? void 0 : _a.disconnect();
+      Observers.remove(this.element);
+    }
+  }
+  openChange() {
+    const observer = Observers.get(this.element);
+    if (this.open)
+      observer === null || observer === void 0 ? void 0 : observer.observe(this.element);
+    else
+      observer === null || observer === void 0 ? void 0 : observer.unobserve(this.element);
+  }
   readonlyChanged() {
     for (const option of chain(this.options.values(), this.backend.values()))
       option.element, option.set.readonly(this.readonly);
   }
+  scrollHandler() {
+    this.flipChecked = false;
+  }
   optionLoadHandler(event) {
     if (!this.listElement || !event.composedPath().includes(this.listElement)) {
       event.stopPropagation();
@@ -144,7 +184,9 @@ export class SmoothlyPickerMenu {
     event.detail.set.nodes(this.display);
   }
   render() {
-    return (h(Host, { class: { valid: this.valid } }, h("smoothly-slotted-elements", { class: "hide", onSmoothlySlottedChange: e => (this.display = e.detail) }, h("slot", { name: "display" })), h("div", { class: "hide" }, h("slot", null), Array.from(this.created.values(), option => (h("smoothly-picker-option", { key: option.value, value: option.value, selected: option.selected }, option.value, h("smoothly-slot-elements", { slot: "display", nodes: this.display }))))), h("div", { class: "controls" }, h("smoothly-input", { ref: e => (this.searchElement = e), name: "search", value: this.search, looks: this.looks, onKeyDown: e => this.keyDownHandler(e), onSmoothlyInput: e => this.inputHandler(e), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation() }, h("slot", { name: "search" })), this.mutable && !this.readonly ? (h("button", { onClick: () => this.addHandler(), disabled: !this.valid, type: "button" }, h("smoothly-icon", { name: "add-outline" }))) : null), h("div", { class: "list", ref: e => (this.listElement = e) }, Array.from(this.backend.values()).map(option => (h("smoothly-slot-elements", { ref: e => restoreListener(e, option), clone: false, nodes: option.clone }))))));
+    return (h(Host, { class: { valid: this.valid, flip: this.flip } }, h("smoothly-slotted-elements", { class: "hide", onSmoothlySlottedChange: e => (this.display = e.detail) }, h("slot", { name: "display" })), h("div", { class: "hide" }, h("slot", null), Array.from(this.created.values(), option => (h("smoothly-picker-option", { key: option.value, value: option.value, selected: option.selected }, option.value, h("smoothly-slot-elements", { slot: "display", nodes: this.display }))))), h("div", { class: "controls" }, h("smoothly-input", { ref: e => (this.searchElement = e), name: "search", value: this.search, looks: this.looks, onKeyDown: e => this.keyDownHandler(e), onSmoothlyInput: e => this.inputHandler(e), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation() }, h("slot", { name: "search" })), this.mutable && !this.readonly ? (h("button", { onClick: () => this.addHandler(), disabled: !this.valid, type: "button" }, h("smoothly-icon", { name: "add-outline" }))) : null), h("div", { class: "list", ref: e => (this.listElement = e) }, Array.from(this.backend.values())
+      .sort((a, b) => a.position - b.position)
+      .map(option => (h("smoothly-slot-elements", { ref: e => restoreListener(e, option), clone: false, nodes: option.clone }))))));
   }
   static get is() { return "smoothly-picker-menu"; }
   static get encapsulation() { return "scoped"; }
@@ -165,7 +207,7 @@ export class SmoothlyPickerMenu {
         "mutable": false,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -182,6 +224,24 @@ export class SmoothlyPickerMenu {
         "attribute": "looks",
         "reflect": false
       },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "multiple": {
         "type": "boolean",
         "mutable": false,
@@ -265,7 +325,9 @@ export class SmoothlyPickerMenu {
       "created": {},
       "search": {},
       "valid": {},
-      "display": {}
+      "display": {},
+      "flip": {},
+      "flipChecked": {}
     };
   }
   static get events() {
@@ -313,12 +375,21 @@ export class SmoothlyPickerMenu {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "open",
+        "methodName": "openChange"
+      }, {
         "propName": "readonly",
         "methodName": "readonlyChanged"
       }];
   }
   static get listeners() {
     return [{
+        "name": "scroll",
+        "method": "scrollHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
         "name": "smoothlyPickerOptionLoad",
         "method": "optionLoadHandler",
         "target": undefined,