npm - smoothly - Versions diffs - 1.2.1-alpha.55 → 1.2.1-alpha.56 - Mend

smoothly 1.2.1-alpha.55 → 1.2.1-alpha.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (439) hide show

package/dist/collection/components/form/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tWatch,\n} from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { isly } from \"isly\"\nimport { SmoothlyFormCustomEvent } from \"../../components\"\nimport { Key } from \"../../components/input/Key\"\nimport { Color, Data, Notice, Submit } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Editable } from \"../input/Editable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm implements ComponentWillLoad, Clearable, Submittable, Editable {\n\t@Element() element: HTMLSmoothlyFormElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop() action?: string\n\t@Prop() validator?: isly.Type<any>\n\t@Prop() type?: \"update\" \| \"change\" \| \"fetch\" \| \"create\" = this.action ? \"create\" : undefined\n\t@Prop({ mutable: true }) readonly = false\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks?: Looks\n\t@Prop({ reflect: true }) name?: string\n\t@Prop() prevent = true\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ mutable: true }) processing?: Promise<boolean>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Submit>\n\t@Event() smoothlyFormReset: EventEmitter<void>\n\t@Event() smoothlyFormEdit: EventEmitter<boolean>\n\t@Event() smoothlyFormClear: EventEmitter<void>\n\t@Event() notice: EventEmitter<Notice>\n\tprivate contentType: \"json\" \| \"form-data\" = \"json\"\n\tprivate inputs = new Map<string, Input.Element>()\n\tprivate readonlyAtLoad = this.readonly\n\tprivate listeners: {\n\t\tchanged?: ((parent: Editable) => Promise<void>)[]\n\t} = {}\n\n\tcomponentWillLoad(): void {\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\t@Method()\n\tasync removeInput(name: string) {\n\t\tif (this.element.isConnected) {\n\t\t\tthis.value = Data.remove(this.value, name)\n\t\t\tthis.inputs.delete(name)\n\t\t\tthis.smoothlyFormInput.emit(Data.convertArrays(this.value))\n\t\t}\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\t;(this.listeners[property] ??= []).push(listener)\n\t\tlistener(this)\n\t}\n\t@Watch(\"value\")\n\tasync watchValue() {\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tif (this.validator) {\n\t\t\tconst flaws = this.validator\n\t\t\t\t?.flaw(this.value)\n\t\t\t\t.flaws?.reduce((r: Record<string, isly.Flaw>, f) => (f.property ? { ...r, [f.property]: f } : r), {})\n\t\t\tfor (const [property, input] of this.inputs.entries()) {\n\t\t\t\tthis.validate(flaws, property, input)\n\t\t\t}\n\t\t}\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\tvalidate(flaws: Record<string, isly.Flaw> \| undefined, property: string, input: Input.Element) {\n\t\tif (property.includes(\".\")) {\n\t\t\tconst [key, ...rest] = property.split(\".\")\n\t\t\tconst nestedFlaws = flaws?.[key]?.flaws ?? []\n\t\t\tthis.validate(\n\t\t\t\tnestedFlaws.reduce((r: Record<string, isly.Flaw>, f) => (f.property ? { ...r, [f.property]: f } : r), {}),\n\t\t\t\trest.join(\".\"),\n\t\t\t\tinput\n\t\t\t)\n\t\t} else {\n\t\t\tconst flaw = flaws?.[property]\n\t\t\tinput && (input.invalid = !!flaw)\n\t\t}\n\t}\n\t@Watch(\"readonly\")\n\twatchReadonly() {\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks?: Looks, color?: Color) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.looks, this.color)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.value = Data.merge(this.value, event.detail)\n\t\tthis.smoothlyFormInput.emit(Data.convertArrays(this.value))\n\t}\n\t@Listen(\"smoothlyKeydown\")\n\tasync smoothlyKeydownHandler(event: CustomEvent<Key>): Promise<void> {\n\t\tif (event.detail.key == \"Enter\" && this.inputs.has(event.detail.name)) {\n\t\t\tevent.stopPropagation()\n\t\t\tawait this.submit()\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\", { target: \"window\" })\n\twindowSubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tevent.target == this.element && event.detail.result(false)\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tthis.action && event.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this)\n\t\tconst inputComponent = event.target\n\t\tif (Input.Element.is(inputComponent)) {\n\t\t\tif (await inputComponent.binary?.())\n\t\t\t\tthis.contentType = \"form-data\"\n\t\t\tconst inputValue = await inputComponent.getValue() // Needs to await value separately to avoid race condition\n\t\t\tthis.value = Data.merge(this.value, { [inputComponent.name]: inputValue })\n\t\t\tthis.smoothlyFormInput.emit(Data.convertArrays(this.value))\n\t\t\tthis.inputs.set(inputComponent.name, inputComponent)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormDisable\")\n\tasync smoothlyFormDisableHandler(event: CustomEvent): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.readonly)\n\t}\n\t@Method()\n\tasync submit(remove?: boolean): Promise<void> {\n\t\tthis.processing = new Promise(resolve => {\n\t\t\tthis.smoothlyFormSubmit.emit({\n\t\t\t\tvalue: Data.convertArrays(this.value),\n\t\t\t\tresult: resolve,\n\t\t\t\ttype: remove == true ? \"remove\" : this.type,\n\t\t\t})\n\t\t\tif (this.action) {\n\t\t\t\tconst action = this.action\n\t\t\t\tthis.notice.emit(\n\t\t\t\t\tNotice.execute(\"Submitting form\", async () => {\n\t\t\t\t\t\tconst method = remove\n\t\t\t\t\t\t\t? \"DELETE\"\n\t\t\t\t\t\t\t: !this.type \|\| this.type == \"create\"\n\t\t\t\t\t\t\t? \"POST\"\n\t\t\t\t\t\t\t: this.type == \"change\"\n\t\t\t\t\t\t\t? \"PUT\"\n\t\t\t\t\t\t\t: this.type == \"update\"\n\t\t\t\t\t\t\t? \"PATCH\"\n\t\t\t\t\t\t\t: \"GET\"\n\t\t\t\t\t\tconst response = await http\n\t\t\t\t\t\t\t.fetch(\n\t\t\t\t\t\t\t\thttp.Request.create(\n\t\t\t\t\t\t\t\t\tmethod == \"GET\"\n\t\t\t\t\t\t\t\t\t\t? { method, url: `${action}?${http.Search.stringify(this.value)}` }\n\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\tmethod,\n\t\t\t\t\t\t\t\t\t\t\t\turl: action,\n\t\t\t\t\t\t\t\t\t\t\t\t...(this.value && {\n\t\t\t\t\t\t\t\t\t\t\t\t\theader: { contentType: this.contentType ? \"multipart/form-data\" : \"application/json\" },\n\t\t\t\t\t\t\t\t\t\t\t\t\tbody: this.value,\n\t\t\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.catch(() => undefined)\n\t\t\t\t\t\tconst result =\n\t\t\t\t\t\t\t!response \|\| response?.status < 200 \|\| response.status >= 300\n\t\t\t\t\t\t\t\t? ([false, \"Failed to submit form.\"] as const)\n\t\t\t\t\t\t\t\t: ([true, \"Form successfully submitted.\"] as const)\n\t\t\t\t\t\tresolve(result[0])\n\t\t\t\t\t\treturn [...result]\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t}\n\t\t})\n\t\tif (await this.processing) {\n\t\t\tthis.type == \"create\" && (await this.clear())\n\t\t\tawait this.setInitialValue()\n\t\t\tthis.readonlyAtLoad && (await this.edit(!this.readonlyAtLoad))\n\t\t}\n\t\tthis.processing = undefined\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tawait Promise.all([...this.inputs.values()].map(async input => Clearable.is(input) && input.clear()))\n\t\tthis.smoothlyFormClear.emit()\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tawait Promise.all(\n\t\t\t[...this.inputs.values()].map(async input => Editable.Element.type.is(input) && input.edit(editable))\n\t\t)\n\t\tthis.readonly = !editable\n\t\tthis.smoothlyFormEdit.emit(editable)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tawait Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.reset()))\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.smoothlyFormReset.emit()\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tawait Promise.all(\n\t\t\t[...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue())\n\t\t)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-spinner overlay hidden={!this.processing} />\n\t\t\t\t<form onSubmit={!this.prevent ? undefined : e => e.preventDefault()} name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<slot name=\"clear\" />\n\t\t\t\t\t\t<slot name=\"edit\" />\n\t\t\t\t\t\t<slot name=\"reset\" />\n\t\t\t\t\t\t<slot name=\"delete\" />\n\t\t\t\t\t\t<slot name=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tWatch,\n} from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { isly } from \"isly\"\nimport { SmoothlyFormCustomEvent } from \"../../components\"\nimport { Key } from \"../../components/input/Key\"\nimport { Color, Data, Notice, Submit } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Editable } from \"../input/Editable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm implements ComponentWillLoad, Clearable, Submittable, Editable {\n\t@Element() element: HTMLSmoothlyFormElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop() action?: string\n\t@Prop() validator?: isly.Type<any>\n\t@Prop() type?: \"update\" \| \"change\" \| \"fetch\" \| \"create\" = this.action ? \"create\" : undefined\n\t@Prop({ mutable: true }) readonly = false\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks?: Looks\n\t@Prop({ reflect: true }) name?: string\n\t@Prop() prevent = true\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ mutable: true }) processing?: Promise<boolean>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Submit>\n\t@Event() smoothlyFormReset: EventEmitter<void>\n\t@Event() smoothlyFormEdit: EventEmitter<boolean>\n\t@Event() smoothlyFormClear: EventEmitter<void>\n\t@Event() notice: EventEmitter<Notice>\n\tprivate contentType: \"json\" \| \"form-data\" = \"json\"\n\tprivate inputs = new Map<string, Input.Element>()\n\tprivate readonlyAtLoad = this.readonly\n\tprivate listeners: {\n\t\tchanged?: ((parent: Editable) => Promise<void>)[]\n\t} = {}\n\n\tcomponentWillLoad(): void {\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\t@Method()\n\tasync removeInput(name: string) {\n\t\tif (this.element.isConnected) {\n\t\t\tthis.value = Data.remove(this.value, name)\n\t\t\tthis.inputs.delete(name)\n\t\t\tthis.smoothlyFormInput.emit(Data.convertArrays(this.value))\n\t\t}\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\t;(this.listeners[property] ??= []).push(listener)\n\t\tlistener(this)\n\t}\n\t@Watch(\"value\")\n\tasync watchValue() {\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tif (this.validator) {\n\t\t\tconst flaws = this.validator\n\t\t\t\t?.flaw(Data.convertArrays(this.value))\n\t\t\t\t.flaws?.reduce((r: Record<string, isly.Flaw>, f) => (f.property ? { ...r, [f.property]: f } : r), {})\n\t\t\tfor (const [property, input] of this.inputs.entries()) {\n\t\t\t\tthis.validate(flaws, property, input)\n\t\t\t}\n\t\t}\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\tvalidate(flaws: Record<string, isly.Flaw> \| undefined, property: string, input: Input.Element) {\n\t\tif (property.includes(\".\")) {\n\t\t\tconst [key, ...rest] = property.split(\".\")\n\t\t\tconst nestedFlaws = flaws?.[key]?.flaws ?? []\n\t\t\tthis.validate(\n\t\t\t\tnestedFlaws.reduce((r: Record<string, isly.Flaw>, f) => (f.property ? { ...r, [f.property]: f } : r), {}),\n\t\t\t\trest.join(\".\"),\n\t\t\t\tinput\n\t\t\t)\n\t\t} else {\n\t\t\tconst flaw = flaws?.[property]\n\t\t\tinput && (input.invalid = !!flaw)\n\t\t}\n\t}\n\t@Watch(\"readonly\")\n\twatchReadonly() {\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks?: Looks, color?: Color) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.looks, this.color)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.value = Data.merge(this.value, event.detail)\n\t\tthis.smoothlyFormInput.emit(Data.convertArrays(this.value))\n\t}\n\t@Listen(\"smoothlyKeydown\")\n\tasync smoothlyKeydownHandler(event: CustomEvent<Key>): Promise<void> {\n\t\tif (event.detail.key == \"Enter\" && this.inputs.has(event.detail.name)) {\n\t\t\tevent.stopPropagation()\n\t\t\tawait this.submit()\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\", { target: \"window\" })\n\twindowSubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tevent.target == this.element && event.detail.result(false)\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tthis.action && event.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this)\n\t\tconst inputComponent = event.target\n\t\tif (Input.Element.is(inputComponent)) {\n\t\t\tif (await inputComponent.binary?.())\n\t\t\t\tthis.contentType = \"form-data\"\n\t\t\tconst inputValue = await inputComponent.getValue() // Needs to await value separately to avoid race condition\n\t\t\tthis.value = Data.merge(this.value, { [inputComponent.name]: inputValue })\n\t\t\tthis.smoothlyFormInput.emit(Data.convertArrays(this.value))\n\t\t\tthis.inputs.set(inputComponent.name, inputComponent)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormDisable\")\n\tasync smoothlyFormDisableHandler(event: CustomEvent): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.readonly)\n\t}\n\t@Method()\n\tasync submit(remove?: boolean): Promise<void> {\n\t\tthis.processing = new Promise(resolve => {\n\t\t\tthis.smoothlyFormSubmit.emit({\n\t\t\t\tvalue: Data.convertArrays(this.value),\n\t\t\t\tresult: resolve,\n\t\t\t\ttype: remove == true ? \"remove\" : this.type,\n\t\t\t})\n\t\t\tif (this.action) {\n\t\t\t\tconst action = this.action\n\t\t\t\tthis.notice.emit(\n\t\t\t\t\tNotice.execute(\"Submitting form\", async () => {\n\t\t\t\t\t\tconst method = remove\n\t\t\t\t\t\t\t? \"DELETE\"\n\t\t\t\t\t\t\t: !this.type \|\| this.type == \"create\"\n\t\t\t\t\t\t\t? \"POST\"\n\t\t\t\t\t\t\t: this.type == \"change\"\n\t\t\t\t\t\t\t? \"PUT\"\n\t\t\t\t\t\t\t: this.type == \"update\"\n\t\t\t\t\t\t\t? \"PATCH\"\n\t\t\t\t\t\t\t: \"GET\"\n\t\t\t\t\t\tconst response = await http\n\t\t\t\t\t\t\t.fetch(\n\t\t\t\t\t\t\t\thttp.Request.create(\n\t\t\t\t\t\t\t\t\tmethod == \"GET\"\n\t\t\t\t\t\t\t\t\t\t? { method, url: `${action}?${http.Search.stringify(this.value)}` }\n\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\tmethod,\n\t\t\t\t\t\t\t\t\t\t\t\turl: action,\n\t\t\t\t\t\t\t\t\t\t\t\t...(this.value && {\n\t\t\t\t\t\t\t\t\t\t\t\t\theader: { contentType: this.contentType ? \"multipart/form-data\" : \"application/json\" },\n\t\t\t\t\t\t\t\t\t\t\t\t\tbody: this.value,\n\t\t\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.catch(() => undefined)\n\t\t\t\t\t\tconst result =\n\t\t\t\t\t\t\t!response \|\| response?.status < 200 \|\| response.status >= 300\n\t\t\t\t\t\t\t\t? ([false, \"Failed to submit form.\"] as const)\n\t\t\t\t\t\t\t\t: ([true, \"Form successfully submitted.\"] as const)\n\t\t\t\t\t\tresolve(result[0])\n\t\t\t\t\t\treturn [...result]\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t}\n\t\t})\n\t\tif (await this.processing) {\n\t\t\tthis.type == \"create\" && (await this.clear())\n\t\t\tawait this.setInitialValue()\n\t\t\tthis.readonlyAtLoad && (await this.edit(!this.readonlyAtLoad))\n\t\t}\n\t\tthis.processing = undefined\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tawait Promise.all([...this.inputs.values()].map(async input => Clearable.is(input) && input.clear()))\n\t\tthis.smoothlyFormClear.emit()\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tawait Promise.all(\n\t\t\t[...this.inputs.values()].map(async input => Editable.Element.type.is(input) && input.edit(editable))\n\t\t)\n\t\tthis.readonly = !editable\n\t\tthis.smoothlyFormEdit.emit(editable)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tawait Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.reset()))\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.smoothlyFormReset.emit()\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tawait Promise.all(\n\t\t\t[...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue())\n\t\t)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-spinner overlay hidden={!this.processing} />\n\t\t\t\t<form onSubmit={!this.prevent ? undefined : e => e.preventDefault()} name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<slot name=\"clear\" />\n\t\t\t\t\t\t<slot name=\"edit\" />\n\t\t\t\t\t\t<slot name=\"reset\" />\n\t\t\t\t\t\t<slot name=\"delete\" />\n\t\t\t\t\t\t<slot name=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/icon/demo/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: '523622a3392091c05ee2f1eb11df2211adc38a9d' }, h("h2", { key: '3001c29af15f29d1d21913187a18a6fc9b6fb478' }, "Filter and Variants"), h("smoothly-form", { key: '614c2c1561768339b1b188d3b8dc2a3f07043924', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '029ef4523d3a50f61d235b770d546993544c2ed2', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'da6b39d581f60af7ce9c566b1a6867dcf3f0bd75', name: "variant" }, h("span", { key: '227dd90eb85efe5d0cc1620162463702c7fb210b', slot: "label" }, "Variant"), h("smoothly-item", { key: 'd0389fd0a171e57cb80ba7d4096cfb1214f5c968', value: "outline" }, "outline"), h("smoothly-item", { key: '97853ed1e47f66f29e3f6e7ce2ed5bc19bb13789', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: 'fd0fe606d071aab417d5a62d64bf995018044ee4', slot: "end" }))), h("h2", { key: '1056e77e8daa2561375c291c0f3f30bf597a5e4c' }, "Props"), h("smoothly-form", { key: 'c55bff5c71b16850f11385da8325db555f04b3cd', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: 'fe44b586d99b1f2c07bdc382750a8762cbf8c0f2', name: "color" }, h("span", { key: '125594447b95c8a3370b6b4c8568250e7c4cd710', slot: "label" }, "Color"), Color.types.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: '9adcbdda6387357c9789e7e73e813ce5fda4f08f', slot: "end" })), h("smoothly-input-select", { key: '0dad470412db27b32a82a61d55c5cbc8a4c11e99', name: "flip" }, h("span", { key: '49b7e1b93477d2d9f42b8e5780c776d029a86ad6', slot: "label" }, "Flip"), h("smoothly-item", { key: 'bdc4f509ca363f80086d588fe41d6a0236e1b71c', value: "x" }, "x"), h("smoothly-item", { key: '98253120ba45e57aa0779b0dce7cd4f8d2a1b8ca', value: "y" }, "y"), h("smoothly-input-clear", { key: '2d517d99bf9900dea5db9523a552130f8fe4e7d5', slot: "end" })), h("smoothly-input-select", { key: '17f7e6c55a9b69a7b43044c3b679ea82ab4fe549', name: "size" }, h("span", { key: '3cfb39003d77c9cf84cc3969120dd12401acc9cf', slot: "label" }, "Size"), h("smoothly-item", { key: 'bbd6c2fec392991d26ce5904a031190be2982b97', value: "tiny" }, "tiny"), h("smoothly-item", { key: '34830196d95b43678d73ab425ba117b1bc3f037d', value: "small" }, "small"), h("smoothly-item", { key: '4138766f369e12dfeb86a1940b3fe702551e3675', value: "medium" }, "medium"), h("smoothly-item", { key: '432bb148682d033c022677b4bccac19bbfb288a2', value: "large" }, "large"), h("smoothly-input-clear", { key: '9c825b5a75922acd92a63bc569598cf3380c7a56', slot: "end" })), h("smoothly-input-range", { key: '432402f195632a0c28ed106f2101ac4fb0609ce6', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '71c3425a12c40a0b0757bb84e5e9d0b6978b4590', slot: "end" }))), h("h1", { key: '2023d6c2b516099aa4a6da21cc3423175387861a' }, "Icons"), h("div", { key: '3c7b0e162a5107c6ab97b5da2403b083cb171cba', class: "icons" }, [
+        return (h(Host, { key: '1c6981b2ead8d852bd3095ea2b8e167ccfa3999e' }, h("h2", { key: 'a674e2334702d721bbe80c38e340dd4df83b1d8c' }, "Filter and Variants"), h("smoothly-form", { key: '7ce406f374d1d73f0ef76988f94366a0737dca0c', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '2880e33baad9499180d57e928a613a839edf5504', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '238a669e80f19114a5530d5fbc46e12d4607818c', name: "variant" }, h("span", { key: 'd03a1b35b864531d62e2d09f99a1e3f500170ffa', slot: "label" }, "Variant"), h("smoothly-item", { key: '0e826e3272ed4c017ad98a7a7d6b137b71ef9333', value: "outline" }, "outline"), h("smoothly-item", { key: '0e330f7e224f1bb4e9a99f5e1e162a786888b14c', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: 'c5aabc95974e08dfc599ff7d639918647c04100f', slot: "end" }))), h("h2", { key: '83a640f95d8fce430ece0c95c7a8cb360747e5eb' }, "Props"), h("smoothly-form", { key: 'd04aa102e7fa19243158a4927e0fd1073076dc3a', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: 'fb220fa5e5ddd2483d0af445008e8f53132dbfc9', name: "color" }, h("span", { key: '469f2b7809c85dab743be2a787deea0f928cf887', slot: "label" }, "Color"), Color.types.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: '93d833e82d0329fe42fd699550e7090d2aee8b10', slot: "end" })), h("smoothly-input-select", { key: 'ca8185ac3e6dec1b773dcc84eb3e0b67c84fd897', name: "flip" }, h("span", { key: '430a8a3e7333ab6f854bfeb26f27375a6f085b39', slot: "label" }, "Flip"), h("smoothly-item", { key: 'bdaa614c66e08e12a03b63ecb92e6f8fd4b22477', value: "x" }, "x"), h("smoothly-item", { key: '091a2f82865030b1c35d4d974683a35bd2b15f87', value: "y" }, "y"), h("smoothly-input-clear", { key: 'a845f8a9224de65fbbec6fca8a25da9126beb661', slot: "end" })), h("smoothly-input-select", { key: 'f7c069d6af5a183902268d411bcc6ad2ea7dd11b', name: "size" }, h("span", { key: 'e8a85b03fac104008ab9c3351ee1fc604f906762', slot: "label" }, "Size"), h("smoothly-item", { key: '9d986f27066f821c253f7604f3c2fe3c2c5daece', value: "tiny" }, "tiny"), h("smoothly-item", { key: '706de8a8dee95736dfd610c87f0c6ddee4053d8e', value: "small" }, "small"), h("smoothly-item", { key: 'fb34e0afcf503ea5a373c110bca59bc500189495', value: "medium" }, "medium"), h("smoothly-item", { key: 'aa72f96fcd840ef012d9bb3ea5f4785a2d47247f', value: "large" }, "large"), h("smoothly-input-clear", { key: '650667d92f842cc29b2b821a813f6afe68a855a7', slot: "end" })), h("smoothly-input-range", { key: '14095e1c264aa84327020bde44c9ed1a16f6682b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '9b70eebe0d7a713d38fd99f02023fb6a1a9b889a', slot: "end" }))), h("h1", { key: '9e7af6108684d5a189e7ccaecec8bf4ae9b63d52' }, "Icons"), h("div", { key: '1de01a285b956ffe3a540022f2905b6257cea5bc', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),

package/dist/collection/components/icon/index.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class SmoothlyIcon {
     }
     render() {
         var _a;
-        return h(Host, { key: '44862417c70dcae3062b98709c60f61c000ac08e', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: 'b98eb1398e4508e58a131c6d5ff723486c0a32f7', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get is() { return "smoothly-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/demo/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputCheckboxDemo {
     render() {
-        return (h(Host, { key: 'a7363fb37747fa771200774b6eb291900cf18ba7' }, h("h2", { key: '9f94363e4d1d3f79c31ce7e24c493f7c19ed4a0e' }, "All inputs"), h("smoothly-form", { key: '2c9595b887a54795a93899dcef6d543e693fbcd3', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: 'bd5c0f59c89e2b1384ca8eeb83be6576c5ac04a5', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '93fa95196b221f5ba42c49105436dde16ebe6a56', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '47ed0d2a0f45c22f9506295140478d41d9a52316', size: "icon", slot: "end" })), h("smoothly-input", { key: '26b05cf4d705cc457d0cf068f21bb24d67f58a4a', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '1ee178613933c5d8327c2a1d33762d77f3fb5746', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '92dc3112a329c01f82801084d728a406147eed11', clearable: true, name: "radioFirstInput" }, h("p", { key: '9e8bd9f4f47b61973745f731f9328f46d7667dd0', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '15a7534b28f88c996daaadd61552b14178b6c81c', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'e28d99c87efc661dd1e7c386d9a2ae617c7baf9e', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '8f9012008d279f42d39863bb20f0c3e4e16a51e1', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '01b10184e846da2e9ba1b2f889ebd37b72c96f64', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'a13f81647f00fb6784e21195ea2ced3900552e54', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'c2de2c5c7411c5c342ab1ff9a2f415c6b49efb34', slot: "label" }, "Month"), h("smoothly-item", { key: '6b7d7acbd40b20d60d3847b0b040de2fc756dc44', value: "1" }, "January"), h("smoothly-item", { key: '99f631d7cccfb77923129b748ffc787d292ff3ed', value: "2" }, "February"), h("smoothly-item", { key: 'c329797250f8849f7026204fd4c2812386bb3c3d', value: "3" }, "March"), h("smoothly-item", { key: 'c9415752338eb4d9ea2803921ec7df77d4a20e6f', value: "4" }, "April"), h("smoothly-item", { key: '7a77c212f11a8bb6f7d39183fb8911cc460c3cb9', value: "5" }, "May"), h("smoothly-item", { key: '97f29f0080581a913303d2e16cb095c58f365b0b', value: "6" }, "June"), h("smoothly-item", { key: 'b289f94115d424f7868d110f078ba38631b3b031', value: "7" }, "July"), h("smoothly-item", { key: 'abd27addf10a357dd8e94933eaab563079927bc1', value: "8" }, "August"), h("smoothly-item", { key: '81f5e1d3f2f32316ecfa5c49f110f573f4dfd444', value: "9" }, "September"), h("smoothly-item", { key: '3bbd4df109d0b2db36ea2a486ac7f1e1bd61793f', value: "10" }, "October"), h("smoothly-item", { key: 'de72a03c9d508b852a880b01124a9ba8045b8c25', value: "11" }, "November"), h("smoothly-item", { key: 'f1871cf3bb02241969be77a21305f138cacba98b', value: "12" }, "December"), h("smoothly-input-clear", { key: '0fcec9fb51eaf1507a608f57ccace7da5b70833d', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'ae40715db85a87514874fa0088ffa6cbec2acef8', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '00c7f8e739cfd069225b405ba08a8543e4b089aa', value: "folder", selected: true }, h("smoothly-icon", { key: '36e2092272d468603970198a2f71716699c772c4', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ae6294dc791a9e9e8da364c1f4a4b87d671e39f0', value: "camera" }, h("smoothly-icon", { key: 'e4f96905b253779aa553cab21e193e32217ceaa2', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '677d2d54b3fc66419b67427e92571219466eef83', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'ce6ef60439a2bcc4306037786665206489136c85', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: 'c88dd5dc37d0c1b3f602d9698891aade3e69a8f7', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '531324bc8ac48c07bd44918b392bb8305e088d46', name: "date" }, "Date", h("smoothly-input-clear", { key: '6dfd998669eeac5cff1fd6bc7d1c9bd7974b7d11', slot: "end" })), h("smoothly-input-range", { key: 'ae998ffffdd7486b4a96c35138b9ea6e4036a616', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: 'fa69821396705f7aec7f4d57beafa3cfccee222a', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'ac5e3389cfc3c83146b6fec374d0a8181c91c0ed', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '899fdf7b6f9deb1a8962e2ed5455cd323f1b4a3d', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: 'eb86cb64cf67953fe7abc8b377c1ee6283f70e37', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '3d07239a38fe2864136e154d9513752b5e6c438e', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '29f520da55d348db875bd9f76f594dad8313bd88', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: '60cf922af34e42fd3e0583d4a052a73f13f164c2', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '0be220c827b638a65f5b14fb66d96506f9ec135d', slot: "label" }, "Profile"), h("smoothly-icon", { key: '6b8d47dbcde36276aa899bfdba4fc415acd30557', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '629a6561f14ff411c8827c49309b931943fe1be5', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'e2bee73ff3a9bda617bdd5c06e59e082f3041010', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '703223e667642b74d657b08b0ba2b9c85a475f78', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'b69cd40c4bdcef38e8a3a0706cf810fc5cffd681', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'fbac32bd5f5ce7df4d1057197c1e432765533278', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: '9b793d5404051d0585ad584e37c70bcd85028eb2' }, h("h2", { key: '62ef4fe5e3693ee32bf41f29771b249bde4e6db0' }, "All inputs"), h("smoothly-form", { key: '2ef4a24e2e1e0955b53c87b05131becf15d74b1d', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '2f56941d0e6ca029d41a0a2048996a799dd2bfcd', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: 'd6d6a387dd8f043008d310f28618be3f4a3032d4', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'b93d8b4ac50cbdac7e19bc606158b12352036fba', size: "icon", slot: "end" })), h("smoothly-input", { key: '164977cfa9c072d0a7a05425a2af8e13ebe41658', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'd8b972e341c6da5615caa371fb49157849c76233', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '8c927719c90523c5065c79de7919e79385cfe310', clearable: true, name: "radioFirstInput" }, h("p", { key: 'b2bdddb04cae4835f14cbcf64a93c8aab13dae96', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'aa4240d724d3263c5c9a8a18a1a72597fcc5d19d', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '119cca16dfa779b73d77fde83ca6e55f7a33c8d1', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '611232133aafa920c01895a45052e3f99769bf46', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '0a71257807e3279a21196f8cf8a7e5b589b698ca', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'e0c966736ab589e3c9ddc2f89478fa1b2224595e', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: '1ed6fb8f98d6197bc79993d198023bd0dcbf9f97', slot: "label" }, "Month"), h("smoothly-item", { key: '515b57c9f4167b969ddf0d80cd30035b54d7a4c3', value: "1" }, "January"), h("smoothly-item", { key: '108ca7601922bfd0f2236d7764c59c96ef5e1de4', value: "2" }, "February"), h("smoothly-item", { key: '93986bea1d6a2948c1d3f2d7157b24a3aeebc4eb', value: "3" }, "March"), h("smoothly-item", { key: '52d189348b10cbef4a65e8c20c15a14ffaaff95f', value: "4" }, "April"), h("smoothly-item", { key: 'de38060ff62acca4c93b91c32fefbcb3e78d94ae', value: "5" }, "May"), h("smoothly-item", { key: 'ca62d703e183593c0b630463a9c431c1ce63df9c', value: "6" }, "June"), h("smoothly-item", { key: '06bf14506686681d8e5268d74ce8f534d80cd8c5', value: "7" }, "July"), h("smoothly-item", { key: '6cf2e5da2f5744e6dc7eeaf331ec4142528bb5bd', value: "8" }, "August"), h("smoothly-item", { key: 'e9d5381a366ba57cb4e941b9296263aa5fa77bd3', value: "9" }, "September"), h("smoothly-item", { key: 'd1d99e49f0d746c051aff7ac6ff5ef544f11968b', value: "10" }, "October"), h("smoothly-item", { key: '6bd8a40ab82571a9e0eaea9a0b92664ead54a049', value: "11" }, "November"), h("smoothly-item", { key: 'ad0d6755fe3ab1872f466ce161863e865d47cedd', value: "12" }, "December"), h("smoothly-input-clear", { key: '55dcce20cfdd21495d550b2b57ad64e367396db1', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '1e05bae161d12bb7bc4c9f67b57fda60d07e1bfe', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'f7c5705345116abdad6636a6f06c7b8a1ac99a1c', value: "folder", selected: true }, h("smoothly-icon", { key: '136634165bf8aa4d4e9c128530c2d05266a7424e', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'e0ced40cbc32f1cb92a4d81dcf1ce2b754c7d35f', value: "camera" }, h("smoothly-icon", { key: '7d46df64fdebc3a84776c3544c4f24465ac3212d', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: 'd46fe12a9b805b590e2126f3613cc4cc25c92e9a', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'df426b612fedb0b45f18467b2dab1fe9a4f2b830', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '53adafe7011ad6a1758a246907402f01e1d34448', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '6f0dfb9e4833b0d836edb1af036760f575945d6b', name: "date" }, "Date", h("smoothly-input-clear", { key: '7539891737165995f8da2e867ba603cd2d70263a', slot: "end" })), h("smoothly-input-range", { key: '882ff8ce0a9cc2903dc440a1620ecd61d1896ece', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '05219ed453d87c90ce996345081cff7ae48b5abc', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'bf8a224ae9636ec70f0a5feed1d4dfd10e07a489', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '6623e24a2fd252fa798b69a6f9a8d9adb34c0e33', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '9fae772c9ac38ff9fa407fc57b54af21c7f70ed2', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '7efd42bd43fcff9d47195b274684d44d5b60cb63', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '44f99370a00daa37fc4bf2533219da22c8b4b670', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'f3cf4c573b715dadd5d8694daa05ef9a549ded45', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '01b406122b72f2ed98a00b67459bedb1ff82a0f7', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'bc9752eb22e1d76c52c4911e1a2627773eae6ef8', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '1bc1ea245433a07bb7ac10aafec11f18ca7aad6f', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'c03a966ced598b44b37d7a275b1dc35a6a763f31', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: 'a9207b7b8fd58c5f71abc825927791b43d94b3b9', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '1f4b5bf3a197244d4839ec0671fc1f123bf3481d', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '66a573abad72451931997399df41776fb91b0110', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
     static get is() { return "smoothly-input-checkbox-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/index.js CHANGED Viewed

@@ -60,7 +60,7 @@ export class SmoothlyInputCheckbox {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (h(Host, { key: 'd50cfacb3fd0761201a7c75d219513276565e355', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, h("input", { key: 'f8c3d4bec3f0db915a23b6307d28a7c95e79deab', type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { key: '1cc32b333aeb332d5d61f3abe8e39bf8d89dee62', name: "checkmark-outline", size: "tiny" }), h("label", { key: 'bdcffaab26d87f09d6806403f332812549185dbf' }, h("slot", { key: '05fe996160e47795fa0998510833cb29eb8df60b' }))));
+        return (h(Host, { key: '95a1522022f5a25c402a1563187cc1f483d88ec1', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, h("input", { key: 'a8b3077019550c1ff4e44eb9a81f817d5390ee84', type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { key: '161bcd14b479d105d143137493a956ab82f46146', name: "checkmark-outline", size: "tiny" }), h("label", { key: 'd7f7dfc554a0706ff045a83a95931d50ac124832' }, h("slot", { key: 'c6ac7cca4bdb1aa315d4e0ef1811b3c4ae3a655a' }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/clear/index.js CHANGED Viewed

@@ -39,7 +39,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9484f284e75befd19d39c3af18e935d345aac3fc', title: this.tooltip }, h("smoothly-button", { key: 'fd7d67d5c52092142241cf09ebf9e1d6844f1707', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '7f198efb670dc5dd3ace5e46374bc06802106abf' }), h("smoothly-icon", { key: '71e47a4704225ad81ee46c5070d0c26bf8469089', name: "close", size: "tiny" }))));
+        return (h(Host, { key: '443c2519cefdff110d087244d4a153a9b1a2b408', title: this.tooltip }, h("smoothly-button", { key: 'c88f9fa84c854b37db34f498addddd95f71b628e', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '4dffca4a3499f5fbf79bf2d7a91a1e0e6a7f0052' }), h("smoothly-icon", { key: '331c0dcd767585f0711c1072580dff6d91f39e06', name: "close", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-clear"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/color/demo/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputColorDemo {
     render() {
-        return (h(Host, { key: 'd9da59270cd8b8b30bb8bbddd09253bd3e87a6d1' }, h("h2", { key: '39bfb6f5cda61721368ee1dad508d4e988e305eb' }, "Color"), h("smoothly-input-color", { key: 'f879114fbe6e72d52308c0b69ae76b2b2c916c79', name: "color" }, "Choose color")));
+        return (h(Host, { key: 'c2fe23975b38b280a677c518054c4e60e6af2e2c' }, h("h2", { key: 'd9c3935d08df05cdf004cad00512a228c39c642e' }, "Color"), h("smoothly-input-color", { key: 'ffafa281cf391ee7d741055b4baae0dac8fe6a7c', name: "color" }, "Choose color")));
     }
     static get is() { return "smoothly-input-color-demo"; }
     static get styles() { return "style.css"; }

package/dist/collection/components/input/color/index.js CHANGED Viewed

@@ -138,7 +138,7 @@ export class SmoothlyInputColor {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: '9da4ea2a1e58eb1a75014205416580539a384f19', style: {
+        return (h(Host, { key: '7f1cdee26ce9429dcfce8d03d876c66c4bc6b4ad', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -147,7 +147,7 @@ export class SmoothlyInputColor {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, h("smoothly-input", { key: '6a6d3f628aefdf5523b5a734a4fbca83e2719c70', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: '69b0d883ff53fbcebc69e8ee136ab5e4b0c2e6e3' })), h("div", { key: 'e047b5bff06a7d4b2d454b9f1e64c4e88ff6702c', class: "color-sample" }), h("smoothly-icon", { key: 'd1736a34a2b945aecda80a8ead022decfb15109b', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), h("div", { key: '10de1092a9d22351ca0806097fb5f68b2c68e9c1' }, h("slot", { key: '46827502f847a0750bf5b7b13f2f3d869612131b', name: "end" })), this.open && !this.readonly && (h("div", { key: '95f213489fe9f74eebf863b93a2222a3c89625a9', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '8a214e7ddfaf7bc5fd64f8fd06152170c0164e2f', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '56287469e8bf02977505c701fe5ed71354928d76', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'a9ab7e21bfc75d25ab1000deb2270fab7dbdf864' })), h("div", { key: 'd0512a2df8b8a1de5e64729c616bccc9c89bb296', class: "color-sample" }), h("smoothly-icon", { key: '06289ee0bec2159be080b61ace4959d9c51b34bc', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), h("div", { key: '8133f8753df1b4df9f64783aead0f08c5755932e' }, h("slot", { key: '1477cf5aa7ff10134e84eb8807d139ff256d6e60', name: "end" })), this.open && !this.readonly && (h("div", { key: '8b190e294cc1b315ad8d3fd769afd544546d914b', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '39c25111b8a835258d2573a9901df7fc632242e4', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     static get is() { return "smoothly-input-color"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/index.js CHANGED Viewed

@@ -78,13 +78,13 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'dd5cb22ac438173fa42b0cc33d30d5f2d2cfc6ab' }, h("smoothly-input", { key: 'a5b78b48e4fe1f56394c194f1a204d9aaac9ecc3', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: '6955944dd414b37f64792071b7cf07f18ed38ed3' }, h("smoothly-input", { key: '334571bf04611a652c3feffe1e5faa5c7b1f26c0', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, h("slot", { key: '9f926b39e9c5750d8099e77195788cdb0bf757aa' })), h("span", { key: '527ecd6825dd1b46d8faf4d97e2522ecc8a1b4db', class: "icons" }, h("slot", { key: '8edd6c554ffc9df30d2dde2cea952cd069648d39', name: "end" })), this.open && !this.readonly && (h("nav", { key: 'e5adc9ac0dea0c93e87774f81afde215b7bd071a' }, h("smoothly-calendar", { key: 'd93d146dbd74f8925dffe92cb181d386e1a9e7ff', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, h("slot", { key: '7540f9c4b099fd8a659cc1e39b2a1195b0a7f59a' })), h("span", { key: 'ebdb6a365e74a5c635f63811ce309c160d5af35d', class: "icons" }, h("slot", { key: 'e5ebb2ef8dbd85a62c6a71e93fd41886ee9ac308', name: "end" })), this.open && !this.readonly && (h("nav", { key: '6924bc97b9f03e84bc449039f33232b05fc15729' }, h("smoothly-calendar", { key: '68964bdc3c4fc4a7e8a84bec206ecb39ae65947c', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, h("div", { key: 'cdf37ec29e2150b44fee7c7153fe9eb301aa7548', slot: "year-label" }, h("slot", { key: '961d1de6ef85344b433a8405963a817b57f94a5f', name: "year-label" })), h("div", { key: '5edd148108c9ad3cce7ccbdcf23985c067c3d324', slot: "month-label" }, h("slot", { key: 'cad29d4e9e8932d3547bbe17ce006e99b861f35d', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, h("div", { key: '27fac3ecaaebb4ce91f4c6e7503fb9308f3bb6f3', slot: "year-label" }, h("slot", { key: '2d3a5016114b92a0036321efc3fa8b86006ed7c5', name: "year-label" })), h("div", { key: '47124124ab93b08722058f150101093abbbbb950', slot: "month-label" }, h("slot", { key: '06fe48332f022c57e380381b02f30889cad73a39', name: "month-label" })))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/range/index.js CHANGED Viewed

@@ -91,12 +91,12 @@ export class SmoothlyInputDateRange {
     }
     render() {
         const locale = navigator.language;
-        return (h(Host, { key: '0a39feda764bfd21373182adf3b7f5b0b3472eb2', tabindex: 0 }, h("section", { key: '6bc56a02490b2e855d9d9c0b6f2b4e79d2f097b9', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: 'bb64b743e16f0f80232a101121475c9b18bf22fe', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (h(Host, { key: '888acc7f9b13d584516df9b02b00a6d1d355bc67', tabindex: 0 }, h("section", { key: '4d48b609e57b5efb08d6a959e5e6493590a4d958', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: '9b08f7f4b55ee7c47caae23c60557fee2474d7e9', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${tidily.format(this.start, "date", locale)} — ${tidily.format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, h("slot", { key: '5c0304ae71532534e4df6673a2ca538e131ce7cc' }))), h("span", { key: '51c98ef57299158e77be485a5355d4a98eda18a2', class: "icons" }, h("slot", { key: 'a8e2f3cf5dee52eb181865b6fb6b992a87216a54', name: "end" })), this.open && (h("nav", { key: 'e41d58a167a882bff1878fec710c5295dc3f7ea3' }, h("smoothly-calendar", { key: 'de6578bbf253dbf6b5179629e1a414d311c40785', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, h("slot", { key: '05a2ad08ac0a1ffafc57b296c6b307a3e94d93b1' }))), h("span", { key: 'a30ab3b21738225028eeb8ec224c1e57e6867d5b', class: "icons" }, h("slot", { key: 'dc9950b0053872d98e537dc2b52959ec804dc88e', name: "end" })), this.open && (h("nav", { key: '957af34215a9aed9c77a287bb0c9dd0b38130a2e' }, h("smoothly-calendar", { key: '4ef33a937d1e3bd08769284d12678ae264d32710', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {

package/dist/collection/components/input/demo/index.js CHANGED Viewed

@@ -6,17 +6,17 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '2c21d84c0c387c41621323eac28a6fb0c7aa9eff' }, h("smoothly-input-demo-standard", { key: '119dd61fec7d5679e7d71ed8b1cbd7cd7676df8e' }), h("div", { key: 'f27fe4ccbce6bcb2bb247a7ca2bdf1a3c0f48eeb', class: "inputs" }, h("h2", { key: '14d1b974cd3d39d9bfce6db4db90390829af27fc' }, "Calendar"), h("smoothly-input-date", { key: '2554c0764e1c3240fed2a60b1f0fed1debc4b288', name: "some-date" }, "Calendar"), h("h2", { key: '566d6aa65ed9d693953c8f16fcfdd84877f948f6' }, "Date Range"), h("smoothly-input-date-range", { key: '888e3043ba1f13b4ee9bd00b214cb422745271e5', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '40cc239a477203bcec3950ca8f9d58760662b6f4', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '5914ae9340c307ebb9f2d237be1c464489af5e11', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '27f7376080ee0194d9b10c1b67fca176171582ca', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: 'f5fb9f6b4974bc45606cf2d8c8e36d1df5615968' }, h("smoothly-input-demo-standard", { key: '76b7f4807acddd7a1abaafc15dd2a831023b1e2d' }), h("div", { key: 'cf8fa718aef87f25b5e808ab2e6208b1aaee69ea', class: "inputs" }, h("h2", { key: '19b8c7a5a6bc49fb40aee9e84ac9773c5def7366' }, "Calendar"), h("smoothly-input-date", { key: '927e3a5305f7ed3b7f0b968580604a8d647d6cab', name: "some-date" }, "Calendar"), h("h2", { key: '1764deed7d46371f2e4f788916bab240d4f239d8' }, "Date Range"), h("smoothly-input-date-range", { key: '9f5201fc2ee08446de0f9d76651db829866f848c', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '7376ad2973f5925d66e859bedefde669fa1150a8', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '4b596600cc7f285bc256da0e745797d8d7901c1d', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '4a5a7f575ded4a0279e9281712dc7e89a2d80bda', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: '68f4e45c98c8ae86540d47dda347f7da2a6311c0', slot: "end", size: "icon" })), h("h2", { key: '22fa286405039f0ffad5f3e0699d319e19afab81' }, "Date"), h("smoothly-input-date", { key: '234714e87a3d7758ddb461c2e41d8338b08d1dac' }, "Date"), h("smoothly-input-date", { key: 'ffa9825d1607cfff36c0f905c54f599eb27641df', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '0996c7930dda251e062c3ddeb3913235945c8770', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'f93840584abbe3bcf42b2ef631b9af0ad3777cb9', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '922eba0deb0d83ef492fc6179729784b65d56007', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '1e1922feaf0d74cbd28838910e76aa4996b79379', slot: "end", size: "icon" })), h("h2", { key: '285f1e7ac38d73d1cefd2d09cad980e3bfdb4eef' }, "Select"), h("div", { key: '530acc8bb23dcded52f542fd5776b9915d8747a5', class: "select-div" }, h("smoothly-input-select", { key: '055b09252fe6854519b55355309123649a1d8548', name: "select-dessert", looks: "border" }, h("label", { key: 'eb009b697a58e228e218b03be5c5443f9112813e', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '797c3dacc4cfdfc5dbc844c84792e33bb7717315', value: "1" }, "Ice cream"), h("smoothly-item", { key: '39663fc179e11bb1dde2d11070a071ae2b6c983e', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'b549e9eee27dbdfdfd299b78b99be95524fe44aa', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '009a56f0408101944a17137fa8f7178b2584f0e0', value: "4" }, "Cookie"), h("smoothly-item", { key: '7693819dc11bc1cdb742fc674d4cc845e1ac6586', value: "5" }, "Croissant"), h("smoothly-item", { key: '4a1d710d03688de60007fc1e30721227deeaee33', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'c1c74da741dc5b448f41a5327d2c524a949d3ca9', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'eb718d0b95e209d2127c7f3dfb1941036bd6f964', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '5fc9a3a6f8a668e703ef916367919eafe4e78911', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '426da9fe09849d3a8c7b1f143c2fe2a467be13a3', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'c019c5a72262db50d9de576501dfbb26a987d1e0', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'e0a00f4c9dc9997c3058fff88ccc5a8fa7d2e039', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '283384daafb0e48ee07fe8a29fe722b5dd30f6ed', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '0e150c523e786fd3dbc868a01f6c24e740111b66', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '4675be762d6b1b16d5142221dcccdf10df4eb4d9', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '96f1246d1d63eac1824f80b2c75701e9a1271c65', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '27858e1758ed565c6c4006ab47da45192677e289', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'd09b3c52f365fabf86363e53c92fae0021e9eb8e', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '67ee6c60d35c5d4e27e852ffb1883dc30cdcce7a', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '334bedfc6c4ccb7ea641db54e227c9ba300a293d', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '7b0116b63af2a20f8dc3e7cc63f35149187f8abe', value: "folder", selected: true }, h("smoothly-icon", { key: '8ff38f940fcaeebfacf2fa209c60f3f6b9c27043', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'e8d35a3ecac87ceff59cfb6d6b3d66ffca4a837e', value: "camera" }, h("smoothly-icon", { key: '081a55729f3a7c59e3b9346626fae299775e7ef3', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'a77b802760c0d81ddf74a1ff7daec037d3db319e', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'dc34381c92461f5c13e51dc60037d45e81240ee7', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '0a6fcc2bf611100b030151f697a92c265cab70ce', slot: "end", size: "icon" })), h("h2", { key: '6dff02322fe2e6d046ab87783ee10e2bf8811846' }, "Date"), h("smoothly-input-date", { key: '12d8d46d4b3b6c15edaf3dc57b42f8b8ae2e7673' }, "Date"), h("smoothly-input-date", { key: 'e29de3a00b02eddf2d1b12bacd3cac2fcd4ba21d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: 'da1503dc2c330128d6c45cf8ddae57ddfa07777a', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '1928e5521e5f057770e55cb01779f4db5ea2b969', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'd2a7c44b60f34eae763e9d2ab0a1638116cb4ab6', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'c8f3b4d83b9c7b7e9bc7a77e69f5a5f62574f383', slot: "end", size: "icon" })), h("h2", { key: '3fd8792c958f964c72268ea7864e559b23ed0437' }, "Select"), h("div", { key: '3a9eb0b50df2f894a6bdd21b929ae6359c861cd1', class: "select-div" }, h("smoothly-input-select", { key: '0cfb6c169c267de816dfa241d60fe276e240ab8f', name: "select-dessert", looks: "border" }, h("label", { key: 'dc2e67f25a9e838324b0af86086fb383f62ed885', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'ffb1b308014b5860cd6211fd474b5fd0b324004b', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'ff46f80bed769056e4724b1aa349ab8df6316277', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '7234bcf8495a875b320b44b3cf685960c16994b6', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '368eb6a25a0cab467d6c15ae162d80f9fd2b694d', value: "4" }, "Cookie"), h("smoothly-item", { key: 'ba54e39b1ef822b404c7b41d8ede588efffb9379', value: "5" }, "Croissant"), h("smoothly-item", { key: '3508452be1107a52a6eae701cfefddb7430a0f83', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '8fbb58174a3ff374d1b6f9ecb41f4eafc42ac3df', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '442fd11b7bed0671dbad3d3c6513f610f068263b', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'c25ff454d762fbf5c3753c940c5f19270f77c930', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3eab5157ea0aced4df728508eceddd9de2108c41', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'e091e11fac9863053119399195eb7b151d40d5b1', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'f951cf1b3c8921fb7e5a56ce717cbc5ce9ee2105', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'd218c0a625bf06749ce47c6771e3d551080c9792', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '7dcf5a03476f818a5843034813da35c185631322', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '27b8c6510f419ed030987fc6279121336549e541', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a4fee9f21deca306d278d4f9e79107ae6604921b', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '72dffbe468f90f77d86aced927ce371995d5f485', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '1cdfcffbfb7d105ba775827736dea14298c449cf', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '4918e8c669062246ebbc6646b40e3f1b63c03744', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '863ce71edfa5a6812ec68f4d91a5b93bd03cb02a', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '71b4cbd7e1d2f4ad2dd1e1e81f983eb5af57320d', value: "folder", selected: true }, h("smoothly-icon", { key: '85a9c63762b5a906e74bd14472caf542308b12fc', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'e376aff6f1f203274cc4c7e5185f429f2ab2413a', value: "camera" }, h("smoothly-icon", { key: 'acf038728fb05e63e8ca9a23d86ddfa775e75c88', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'e5e3c9cdbee2bd5d25405bb00bc8a1b0a28bbcbe', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'e8fb5709c0e79b9e38580a16f81fb1d7bbc4a37a', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'a8ec5a6d155bed3a983866ec9345f353688e68a0', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '33368db371d97cf753fe437af3dadf0d3c3aabf1', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '8b4ba97bb9f3cb15fcda8b50b9030f2428b15561', value: "1" }, "January"), h("smoothly-item", { key: 'ba14532dffdb07e4eb5b77f7d37abc5903acbd8b', value: "2" }, "February"), h("smoothly-item", { key: '232033ab81a5d5b14a01e1ae6a839285e255781e', value: "3" }, "March"), h("smoothly-item", { key: '60a76b41a79dffbc4d8e9953fd6e56700e9c87ad', value: "4" }, "April"), h("smoothly-item", { key: 'c3112667ba0449590b2fd9921e17f3329921c53d', value: "5" }, "May"), h("smoothly-item", { key: 'cec4499331fe728ce5be34aadcc3fd1ed92d1e67', value: "6" }, "June"), h("smoothly-item", { key: 'c16df211a33494928925e1d922a7faf0c2618fc6', value: "7" }, "July"), h("smoothly-item", { key: 'b0bc36a4b50333a5c3fba07c3f0f3475a882817a', value: "8" }, "August"), h("smoothly-item", { key: 'd2d611025f6cffc0e5694b1ce69bf400f31e0a4a', value: "9" }, "September"), h("smoothly-item", { key: 'bb6375ecd0d1b233e40871481b54651645ce87c9', value: "10" }, "October"), h("smoothly-item", { key: 'fc4f578f7af531d6b36c8812629aa026860525e7', value: "11" }, "November"), h("smoothly-item", { key: '75739a388093c006291743dd3faf7c515d8d631b', value: "12" }, "December"))), h("h2", { key: '2c6ff5fbf6fb9761cbb136bdfd3ca05612081780' }, "Duration"), h("smoothly-input", { key: 'b921f2c6cb53ec97722c5cd7a48671329bba89a1', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '9e3f99927f6e54ee05c91f8aa5cf7f6ebcf69998', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '07d0a34094bc6ab9fbef7e4dbcdce146042b2b88', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '152ef005ce3793e97354445a860ad68cbee8ab33', value: "1" }, "January"), h("smoothly-item", { key: 'f7e641e238be611474914f9019d8f0c04e1748c4', value: "2" }, "February"), h("smoothly-item", { key: 'cc5d5bd3eca19b02bcd890569bba07742dcedc04', value: "3" }, "March"), h("smoothly-item", { key: '5c3c1adbb28372473d78d5358025f00c2f179eca', value: "4" }, "April"), h("smoothly-item", { key: 'e67ff66dc999b688481fdfdd3f9c401ff0ae308f', value: "5" }, "May"), h("smoothly-item", { key: '24fef6b4773f4a541443ed337e9efd6aadd40ad3', value: "6" }, "June"), h("smoothly-item", { key: 'd870d078612432334a40908b71d4c80969f6c307', value: "7" }, "July"), h("smoothly-item", { key: '0476e0648671e4d40a942a9f0b3d4ceac4c00e70', value: "8" }, "August"), h("smoothly-item", { key: '1036c20d89e5e8d2239a3e159d709c6146e5bffa', value: "9" }, "September"), h("smoothly-item", { key: '284995044dbfcc51e19d5f0df1573c56b2e4c6eb', value: "10" }, "October"), h("smoothly-item", { key: '2db4b959ef88bb76743c5244da2b658e56a92b63', value: "11" }, "November"), h("smoothly-item", { key: '32da23e740fa20b0bbe4e659a9676057d0e9aa73', value: "12" }, "December"))), h("h2", { key: '156972cad40cac5ffb02ace653cf02befacd6b6a' }, "Duration"), h("smoothly-input", { key: 'c94595a4b896161c04d02d6215ba538e29edcdc3', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("smoothly-input", { key: '80ba4b5951af766b67f376660c79f852ca482866', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), h("smoothly-input", { key: '6866dd633ddcf17b103ec8cbc5710e52862a2d4f', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: 'a0382758730f8a8697be85d97756fc8c0c1fc0d2' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: 'e6cec072ea54ec484e2424975a3c86a69fb84768', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '77f55666bfb179b50fe1e86cc1422a1b44d64a8e' }, "Identifiers"), h("smoothly-input", { key: '5c724be6ed86804033aff4ffee794a314791f7c0', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '954a7c50877ac699f49595563021e974278d56b7', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '5e1cad87e647263d518114210d093f998ed177f3', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: 'cddf214dc2cd440837eb7a933af0470859a4be94', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'a61bb8db3045aa56e2ca00ac7721fcbacac3a3d6', type: "identifier-camel" }, "Camel"), h("h2", { key: 'ee70c72c012c8be8c4e668aae4164168d7b1b42d' }, "Input Alternatives"), h("smoothly-input", { key: '204de7c5189607c6b27ca5b7a83b2ba8c698d79d', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '5fbc4e3d8955d6a798bbc10fc276f6fa265b93ad', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'd1fc5b1ad786ef2b41ee92ee56321f089b6e9747', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'ef87a78fad8a92488218849b8d0a85de6602e4e2', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'e1c3f4432ec1796dd87b7500afcd262356ef4d10', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'e50e8ec421539cb75e231503d1663de361e20e5b', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '8e0dc0e5749136726671d7579abd8918999754de', placeholder: "test" }), h("smoothly-input-submit", { key: 'e062c76561891654d4314785bf09ab33960c9f41', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '2c21b3560fc2ac10780453e40fceb250e8d2403b' }, "Smoothly checkboxes"), h("div", { key: 'e31c12b2a888221d0afc7ca6ab7944ff577b6ff2', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '7f3ec126b1b37648139d0f0bbd0372f3ea176416', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '237ba374d970b6a68e78e3450196eaeff1537ddf', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '434a83852c9557715b61af2c44e072b19351e03b', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '503cc88e9bc011974e13a6d71d8620d757f09eb6', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '484294e6448892de287d4b32f9f946b3cfb37c10', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '376db9a07e28f24c4433ffa89ba300665de253c2', name: "third-checkbox" }, "3rd")), h("h4", { key: 'f54250f0e88eb61833b0db4f9106428533c14b31' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '871a0a0bf6c47e366d8a3730cc1c36ece4ff0e7b', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '8fbaa02d69dd97049a3bdc05c8734c166b5b224f', name: "checkmark-circle", slot: "start" }), h("label", { key: 'fca863475732e68c6dfc108a77f3c993dd3d937a', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'c5324e8a2a54ea6f27b34bfd2ea0a9b3cb19ad88', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'f61448a7cc159f9d96d6d6e9b25702176583bdac', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e081262529ff3d99a04dd57740379273d82a498f', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '18993a083021effe80cd3b876f36047eca70ab5f', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '7c6df271eb3872dbdda0ac06797a553706beefa6', name: "radioSecondInput" }, h("label", { key: 'a4b5e4fd1daa151c024cce5d4b0914573ffe7873', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'ed079a2521d95d29b7bde357c22ee16b444e4313', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '38ba2cdd89f654c2ec6bdaf3eecb7cfdfe13910a', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'f34c74b17938da5b5b8b2656de5f9cbbe35e36a6', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '91eddcf895efc3709f2aec01d410c7b2d08c1e8e', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'bda68e4045caf72a5efa37749931937107ab6495', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'c1fe867880cfb78d714b7f8e6f838896266b1f0c', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '521088f8a68aad14a287b59f72f4ff3d3bc9bf12' }), h("smoothly-input-color-demo", { key: 'b649c8db81ef661169184d777f35b02700f61569' }), h("smoothly-input-price-demo", { key: 'f86bad7c5ec9519da3a93cb61d8c7475eb17dd2b' }), h("smoothly-back-to-top", { key: '55a63504aec7df294eec9c0593f3a8097a36d082' }))));
+            } }, "Duration"), h("h2", { key: 'd0b5633f6333132c4260b3d1cbce7af063e56f6d' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '7b981f8d3094db4beceb49819e39cd64d3a58cdc', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '4a6cb992d7a790ac8f90a9457624b39dde605f1f' }, "Identifiers"), h("smoothly-input", { key: 'ea8c8c5733677215ebe8bb58dbdb003e0fe2ffcc', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '59d0e1b81408577c66471703272024ea00e65b23', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '0c37d4cc4c095af41847d0481dbaa758344a1f44', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '1f007396c2ce2eeb4b808f6cf685101ecaaa2b39', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'e98f7782122213569d5849aeb51bebef7dc76e1a', type: "identifier-camel" }, "Camel"), h("h2", { key: '10370fde30ddc40fb1756fda0a13473ef6b54c5c' }, "Input Alternatives"), h("smoothly-input", { key: 'b6477cffb527fe7aadefc72fcea14edec8d9be52', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '8e74243a055105befb639cd9349a8851762d5634', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '3233f8e9ffa51aabef8677a3c6b9e340099fc76c', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '8b44ab9254c128952ce3403930cd0d2b33869f67', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '874ea98d4329a8de0179ab35738439c988c5795d', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '320e158a5b8e453b260a4641dcdd7e7eebb735ed', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '3842e1d2cdb6114319aa7997123e9643b9749efc', placeholder: "test" }), h("smoothly-input-submit", { key: '06ce532c4703c3c798c91c9416b21ecddd6db84b', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '2dbce1c8a6d42eba1c40ced7750d4728b999210e' }, "Smoothly checkboxes"), h("div", { key: 'a1804c8d0644e13a196a37ae1eec78d27f2aedb3', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: 'a420ffd579f723297c69ad49ea6cb0ee0c9596de', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '249c0ba3c8745e8333f8b535d4b409f7b37473df', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'd784dcad4cf36a3ac7c1de6b01fc2563cee5844d', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '2d547862dc1f1e401ce0e28161ec22518bf50daf', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '660cbd34a71a2f3db60f4bcb71f84d65b0a2e26d', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: 'c611d17fe695f639bece084d60334ec600c29dd9', name: "third-checkbox" }, "3rd")), h("h4", { key: '472ff0bc98b21b279f81b6023208b4dbed53da87' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '8d5be0841845fb0077a09d130231ab53c4bd4fb9', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '1405d82a5326946e9b75aaa044c493101cd10cf6', name: "checkmark-circle", slot: "start" }), h("label", { key: '0de40dc5cd9ed9c8fc179603c99b506969de235b', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '7a580563ae23ff537bbd3d24949b4c5293301919', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '802ac68270881b22463edb41b1993da3523caf24', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '3fc3d97e8a222e4bb4ed345cc3fd2dc722b15915', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '12edb81d592e715090fb863ba1f813b829eb6c25', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '6eefa5acda608df32bf346f4d39112d416d303d0', name: "radioSecondInput" }, h("label", { key: 'adfdd8cccf5066275893d97312bc25f4a534fb4c', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '212a3e5b79ae95879528b06e2c5c171d30346574', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1b7e69595c0ff030d70c81983f6ba2935bff0a59', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'f021ef6ba5491e532c956770dec1cdb743b2ecd8', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '5e9aeb6fab5d2e163f3dd0af8e6c907d7c216159', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'b89bffddc3d2ecc88f2f77065babd1ed961d9a30', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '2ac6c8f18deefff5e47a4956c482ded44a4bce56', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'd745e05ff520d1437f67e7e52a81494f4aad1fba' }), h("smoothly-input-color-demo", { key: 'f75787af771c042203883f797b3f018e48f6770d' }), h("smoothly-input-price-demo", { key: 'bfd9b06dbbb6626e32687b48bb9cbdce12cc59e3' }), h("smoothly-back-to-top", { key: '7c1b9cb3aaf8e709a2c0cd746eb98f9426d51a10' }))));
     }
     static get is() { return "smoothly-input-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/price/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: 'd72e3b611f67d64b015c72481626b3fce6714534' }, h("h2", { key: '7ed1febb46f3f7d7e8abbb3c238aed31969cfa26' }, "State demo on smoothly-input"), h("p", { key: 'b1e1b143c6ea9bd954ddc2920f9769aa5b851d0a' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'c177f5121a66966e2dd85533c5e53af3003f5442' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '7c4c34d4af3e582b9bf7bbee1b26a42c3ee36bd9', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '18cc575d7a0350a56e28f5ac47222f91f7bf18d3', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: 'bad11b3c20ae711a30e32dbe00b0fd9a4fe2e233' }, h("h2", { key: '1f0b35ab38d25f7cf85e5d88a94a1155bd9958c0' }, "State demo on smoothly-input"), h("p", { key: 'b2f1472ebca834019523652fba825675cbd79c08' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '0b91d3d13dd721e2cb1f0e597eceef6df7b10664' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'cfcbe6cb9e757806316b0452e49c621483136391', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '697ee9173e9673c9208193a2becdc7d688fa9e4e', type: "price", currency: this.currency }, "price")));
     }
     static get is() { return "smoothly-input-price-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/standard/index.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class SmoothlyInputDemoStandard {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (h(Host, { key: '38c075c6e39abee39371442814d7b4facbc46740', class: { vertical: !!this.options.vertical } }, h("div", { key: '3e24def96fd3153a1ce08c41393738b10b72a308', class: "description" }, h("h2", { key: '5cfbe23842f9e7bd4098a47b6f2aea7214f613fe' }, "Input Standard"), h("p", { key: 'cd59047edf31c03b0300a46bcf9394ebe50fd8be' }, "Height of input should be ", h("code", { key: 'd8490a3089215f465f5017a0b94fb4368810e4cf' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: 'f756ac9c17f5cd264ad1adb2700b528cf03886c6', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '2cbf2e8841332d3ccc7985eccf8773eabe5afb4a', name: "looks" }, h("span", { key: 'b8186cd7d95f8ddd692c056361bb4839fd9e51ed', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '0efca079e1639c2ab468eecffbb36928b9445f74', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '8e01eb18f70f2e40770c70f31302e300d1aef3f5', name: "color" }, h("span", { key: '9ef95f17b8e56f8d5164706f9b174347d9c96262', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '29c264697ca079375881cdf46072e961d711505b', slot: "end" })), h("smoothly-input-checkbox", { key: '75039475fad28ff0a2ba3e34dbed6cfcd62a5ef9', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'e97e68e056c3e9fc4dac706415006eaeccd500ad', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '20e721fbafbdc4b7aaac3bcbe1161a33eddbc336', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: 'f2b1d11816c0397e48c4b144c6eed7d989d07ebc', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: 'd3e0909e821ea5e48d4e509adf4cd05655d6a85c', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'db28d4db07e7db4db5a8cd574b0f69861eb81060', class: "width" }, "100%"), h("div", { key: '76460e511717e01c4dd76eb210dc7afe4f1d06ac', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'c04068737d7d39e1f05e6bf2fc80d933ae1a9d71', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'e06e24a9f2edcc682ea6a5b03e954022f056a522' }, "Text"), h("smoothly-input-clear", { key: 'f981cbcc17a0b400ec9e3d8d8a1033970df4b10d', slot: "end" })), h("div", { key: 'f9bfb1daf5a0416e0eeb5aa219430a49d43015dc', class: "height" }), h("smoothly-input-select", { key: 'f61338f581e7a55a3584a0fb3f44586938911aa3', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: 'd7cc3b68fff754b3e9f05fb2a957d4a31ffcdbcd', slot: "label" }, "Select"), h("smoothly-item", { key: '78bfb2ecf67ed0539d6288d2cfe8ac593bb6ad05', value: "1" }, "January"), h("smoothly-item", { key: '7aefc3b82026ad42e95a97d42226d2d7d57035b8', value: "2" }, "February"), h("smoothly-item", { key: '93370866b06519bd75225dbaa467e797c3783b2d', value: "3" }, "March"), h("smoothly-item", { key: '85d990aa4de961691f2437cda8b4789f2fd51a58', value: "4" }, "April"), h("smoothly-item", { key: '85311aa790482101e99bdab152ac77907a90395d', value: "5" }, "May"), h("smoothly-item", { key: '6606c372bd1e38e69620edc3066f640f09626872', value: "6" }, "June"), h("smoothly-item", { key: 'bcc4479a725b29994d6df835f9ef243cd9bb5b84', value: "7" }, "July"), h("smoothly-item", { key: '22322d0a9b1ed89b391d7391c12cbdae850ef525', value: "8" }, "August"), h("smoothly-item", { key: '6a901e926071cd7efeb07ea8e729c454db8d7d1d', value: "9" }, "September"), h("smoothly-item", { key: '9bfc30908294219eb1bb12bba9c5579fb36b2f1a', value: "10" }, "October"), h("smoothly-item", { key: 'e674906819f1af24ca0722d4b7997f6a8bdc1823', value: "11" }, "November"), h("smoothly-item", { key: '81eb1d572dde2f9f296955b55513c7dcdfe08e28', value: "12" }, "December"), h("smoothly-input-clear", { key: '4b8189eb8784dc6e89531908607052fd2c73f2a2', slot: "end" })), h("div", { key: '64f3d7061086004be01bbc488dc64bb5d17085c4', class: "height" }), h("smoothly-input-checkbox", { key: '19de7aa11812525fb0949c9e5d6368aba5957390', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'a50e5ae17b1c12393d95fafdf445f9c03daba519', class: "height" }), h("smoothly-input-radio", { key: 'fb05abb658864d96f58f2ffcf23492995b9a644f', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'e8854e052ff5e7bdc422fb0615aafcf055f46c7b', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'cecca4e730f677b1c1a253d8e85fb57db3a15bf5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1c09fdea140a175cfa1459aa82e123e74d48a30e', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6c5116b55858f49b8ca0fc02e925f37ba0f6bdbf', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'bf7ac4750d0da1d924f7e10b455dd8b5da71f312', slot: "end" })), h("div", { key: '54e65ad335ecd68b4bdaabfb296667d5cfb1fa12', class: "height" }), h("smoothly-input-file", { key: 'd807821927813782a885f37010653718b3c20a51', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '65e04e2aa71b5af42e955e9a3768edb5dc5a9912', slot: "label" }, "File"), h("smoothly-input-clear", { key: '6e550848b0aea53217abbdbb68929b7b1fdfb755', slot: "end" })), h("div", { key: '342efa07b0d189fe9d230f1b8cdd28e510e61b0f', class: "height" }), h("smoothly-input-range", { key: 'dbf387afc5eeb91d8a6d5b230935c38eb50d95c8', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '8b6a4dd4d5f7f03cdc3e2a6e4a1fd4ceb93645c3', slot: "end" })), h("div", { key: 'efc39dee9e79508dcf5a4289881cef82d948e0c5', class: "height" }), h("smoothly-input-color", { key: 'd1d48d8f5e10f1a4cd61c451af8918a2caceef61', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '536cb07ce6ff0879d90762da710f27bf3a34aa49' }, "Color"), h("smoothly-input-clear", { key: '0493734afd8a5daf6f3157077a881585251132bc', slot: "end" })), h("div", { key: '58a5c412f2f71d4282616f43f6ff1ae38a329f57', class: "height" }), h("smoothly-input-date", { key: '58a59050348d97513a9a00e5a5dd766aa531e03d', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '8ad9e7b23669fae7e6a98bdae3b3518d80d78178' }, "Date"), h("smoothly-input-clear", { key: '0397233d1794b0248edf257496ff087c5e169498', slot: "end" })), h("div", { key: 'a53af14fa2899adfc4c5aca11d5a91a4b78e8611', class: "height" }), h("smoothly-input-date-range", { key: '3d7d60738d3b4d03e5f151e4e37f45b41d987cb5', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '8c03e4b63ac59aaf342fee6b4c6b86216d7f419d' }, "Date Range"), h("smoothly-input-clear", { key: 'a568b0d82420aa79f27b21950e2a8421272d9729', slot: "end" })), h("div", { key: '302eda87d0c09683e22fdefb8b872c033fc8fa20', class: "height" }), h("div", { key: '78a8185e044b6b6a41caeba6c3ef6ced39d86789', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (h(Host, { key: '47b726ba113bc1a9f6fc1939a6337ee5a0741e1b', class: { vertical: !!this.options.vertical } }, h("div", { key: 'c429d933fc8433d42ab46875decd514855cd1e83', class: "description" }, h("h2", { key: '3211b544b609eb41c0ff234e60fe1d69c7f5d046' }, "Input Standard"), h("p", { key: '4821da07bb22b485566be6edbdfed274dbb5e484' }, "Height of input should be ", h("code", { key: '7b9eece83abad5736b3e20008dcd6180be00a0cc' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '8b7a0f3eb0597bf481193e136878bb9b06e57c4a', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '2f375af36f6b222583aef2c127118684200382f9', name: "looks" }, h("span", { key: 'f17cd19cd1c65db729df20cebfe3e29aebdb7f85', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '7102fb6e60c26f369fc333edd177dab299693644', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: 'ea5bd1dac640c8c98d5f2f6673593dfba7ed7d97', name: "color" }, h("span", { key: '7980f0882dc8dc731cabab158c7e8e71323bcb09', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'de3487a00564e32a27aa17e098dda3efb9847fd8', slot: "end" })), h("smoothly-input-checkbox", { key: '01bcc9cc34538608689edbd72a39ca628b8c0b90', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'd0a37ae43bf75b530c245c68e20bb358a651405c', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '78c63416b6bb19948677fb79b0505c56150e7289', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: 'd2cb1e9c0507d7adcd680c310bc0fa55092d8789', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: 'd3b4fd9eee3d70175d1225534e87d1f98d5ecf23', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '214c05ffa1d43a097fd5598249e71115cc90c7d1', class: "width" }, "100%"), h("div", { key: '7445c862f785d4ca8e0df3c18fc48f1ab03c79cc', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'c1d5a3adf710d94a7386d429e4089cb0b0e35b47', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '3ae870f1a680a08ebcba67b1e566b7754606914c' }, "Text"), h("smoothly-input-clear", { key: '05da5780e131498e29b56b68f5fda946cc572873', slot: "end" })), h("div", { key: 'c9507311ebbd91b05617354ece57e32c09412243', class: "height" }), h("smoothly-input-select", { key: '8ac37d8cb08d5147ee60cca2e98980a14de2c517', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: 'dd2870e1536d0671798fe2cf268d698c5feff5d1', slot: "label" }, "Select"), h("smoothly-item", { key: '54d23e9b1e368c7a740481baa4247ec77c029f30', value: "1" }, "January"), h("smoothly-item", { key: '927f087be317bf0f2b166712653b92b4b451dddc', value: "2" }, "February"), h("smoothly-item", { key: '9fd277a3f60e6e6cc52566797e4056be56b0e04d', value: "3" }, "March"), h("smoothly-item", { key: 'f10d69e96a9449036ef957a01baf09f32d08cc4d', value: "4" }, "April"), h("smoothly-item", { key: '151b21bd845de134bbf5396d1c29bd4a9b240310', value: "5" }, "May"), h("smoothly-item", { key: '2caa06bdd8d6ce4626e97530463a2ceeef078410', value: "6" }, "June"), h("smoothly-item", { key: 'b3bb56d7acfe778609d91e9baf72ea395e9ab89d', value: "7" }, "July"), h("smoothly-item", { key: '57778be76f481702639d4fa57d46ce4e5adee6ca', value: "8" }, "August"), h("smoothly-item", { key: '16e4109e3c570a2c32b09a3847e64da5d884c561', value: "9" }, "September"), h("smoothly-item", { key: 'bebc7d0128740166e9b949c4f6802747403ed540', value: "10" }, "October"), h("smoothly-item", { key: '6eff62b76c73599ab9aa9122cb22091e0736320e', value: "11" }, "November"), h("smoothly-item", { key: 'bb6159a94027e46dcb5d6b7996c2a3b86a59cda0', value: "12" }, "December"), h("smoothly-input-clear", { key: '39c2a60887d89d16ee67acda33a7278be288f6ec', slot: "end" })), h("div", { key: '18b0a4eede115170b32c0a120418c33c7c0a4a01', class: "height" }), h("smoothly-input-checkbox", { key: '7b6eb4a3ddcf38cd8164515b9487dabecb2cb888', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: '7f5fcf95e74535cd4c8622e3dbfb567a9cf9539a', class: "height" }), h("smoothly-input-radio", { key: '31be89feab2c450d187bf7101938b237393e4b12', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'd5bdee2736aa83a4a60fffe4dc4f8389d263dbab', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '8a18eb04c6da4a282f772a84c3ff9562bb0a28f7', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'e9e8704f31d673dd6e4ea48386b772b6cca07302', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'cb1994125c6a7c375c95d399585a46ac3dcd6be5', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '39738fd1d1d4e93081fe679ddb5c374e029c0f01', slot: "end" })), h("div", { key: '252ccaa1ea0e51f8226e63ae2d7f21e7156176b5', class: "height" }), h("smoothly-input-file", { key: 'faa0b5950dd568dfa3c5b2ebab89c21b30247cd4', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '0b9968f955b82f53ea92ae3621173ca0f0a164ea', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'ea108267cf7ca3209731a39426d0fc944220384e', slot: "end" })), h("div", { key: 'd543999aadc649fc4bd83bb1157d96693766d974', class: "height" }), h("smoothly-input-range", { key: '8717c01cf5a8dbb452781cab15845c6d4eeb8e90', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: 'def04faa521043b8c35ae9727d419e87eb8ca425', slot: "end" })), h("div", { key: '71f44309b1f61848bd786a17fe160c90a9e6a442', class: "height" }), h("smoothly-input-color", { key: 'b176f693f1c259ca42f9251a6409f0aefd315121', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '37bfab45f78dc75b94890fab9adfaaed0ad80dbe' }, "Color"), h("smoothly-input-clear", { key: '47ea6ea8da52dcaf79bde93d8b7918d5261284e9', slot: "end" })), h("div", { key: '27026781cce6638bb300be29b7ad685f86cfd4b6', class: "height" }), h("smoothly-input-date", { key: '4091de15bcb914fbde33b04af065b865b29759f6', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'e504eb72a2cd64972ed3ed2b8ce6b61e3747ece8' }, "Date"), h("smoothly-input-clear", { key: 'dd4d203425dba7c6f4915c2ea9c94a802c19f3d9', slot: "end" })), h("div", { key: 'dafd7d8ba6c3110c8a05e972bd13d016b5c9f13a', class: "height" }), h("smoothly-input-date-range", { key: 'd0d82374c75edc18dfe14c689a4fec49eb73e456', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '050227f950e23cb4bb8c0b2cdca392c94a418dac' }, "Date Range"), h("smoothly-input-clear", { key: '6d4992842629755749d81375f54f2bd6d41f0348', slot: "end" })), h("div", { key: '483d512b770279fa68b71e30c028e0304b31bad5', class: "height" }), h("div", { key: 'e47cf778f5146224ba2308bb0e945ba3b66daead', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/edit/index.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fee52dbd225570ae931ca32223cb12965b0846bf', title: this.toolTip }, h("smoothly-button", { key: '88bce4f9c7742f238aa8c8903314a3c6dc87e4d5', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'c24c38aae63457205b17398b729679ffd3b93181' }), h("smoothly-icon", { key: 'acca80e7e779c7264eaa7322ff7b72d070c7c501', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '4a7251d30dc56d103cce6f4c646e87c1f9dedb2f', title: this.toolTip }, h("smoothly-button", { key: '10187eef09463ed960cd9fab4a224c603a3f2ac7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '31a06bf95969d56a3d5d4a2214580ffa1a5a054f' }), h("smoothly-icon", { key: 'ae6116c6f7ac25efb5a511d14816b489bee3dc1c', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/file/index.js CHANGED Viewed

@@ -101,7 +101,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '288b2077ffa65397ba341daa1533e44014319189', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'c8133835f337bef5ca3e7f9f6ffc70e8cf70b174' }, h("slot", { key: 'd8f33183560b5daddca72f488a1c7c81ef726ee0', name: "label" })), h("div", { key: '8a69b9ffa47986a7e45e0cb6e60e90ed135822bb', class: "input" }, h("smoothly-button", { key: 'fadacb2595c55c3b9d141feb7d98314ded5d9b73', type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: 'a9f2fb2c00ea27942f1ab28abc5eadc3c4c64b1c', name: "button" })), h("span", { key: 'd0ff058cedb56cc852da34f99a5f584a6c84138d' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'd38bbd185c57edcd7404f0d60a0e2d7345472984', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '89b21f16d915d44107ff627fe50665f302a75ed2', name: "document-attach-outline" })), h("input", { key: 'f5d3200a3bf9ea2ca475c3c7a2e9f83037869b82', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("div", { key: 'accf1ed5b43e5b5b388a139241491583eaa1c213', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '3727144da66f326890a3605fea24fcfb1300c6bc', name: "end" }))));
+        return (h(Host, { key: '1c91c11701f45734b2d5685bd0c6a543bdbb6fb7', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'f8ab23e372eabeac02168549ceb03f7a9eb5cbc4' }, h("slot", { key: '6eba1aa1e14556c55d647c0afdfc8382f4322994', name: "label" })), h("div", { key: '13e73b1c5b9d7e5cd4655237619a94929a2182fd', class: "input" }, h("smoothly-button", { key: '6a9f5ae011900e5b80a8106d5ccba3931515f382', type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '582510137aca819dc05ccd6b75fa1168a1eefa47', name: "button" })), h("span", { key: 'f91cacc327e3643948633cde61974a7fa433c7bb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '03b0f3af81ff691b034231a7b9bb159e97d60a43', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '8bf1766c10bad401e01a4fa1c7dfbc2aa12af1c4', name: "document-attach-outline" })), h("input", { key: '8884488c624c70a0ff57f030b43f2acdd11d2ea4', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("div", { key: '63c67251fd574e731d7b4eb926cd0f92e5bfeafb', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '6c880201bcac2587a0e4432015ee9202cf2767a1', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/index.js CHANGED Viewed

@@ -126,7 +126,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '0b8654395fe79aa68eef51d08ddceb61a898d4f8', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '3afc06d1f25d19cacece836a37b4feafd68eb41e', name: "start" }), h("div", { key: 'd228589bf532887ab1df14b0c6f84101e64547c6' }, h("div", { key: 'bc39e8f5bfe5d408ba5b806b64be5d8137532bab', class: "ghost" }, h("div", { key: 'c9e4176802404a3788e832655bc490ec0aebdeb8', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '752250ab58d9d97d60e4b063e918d5ff3391aae7', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '17ad63e7bc3b2b70547abf4d7b5a5bbe6fc4c490', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (h(Host, { key: '3fbe62c49a8bb7d7cfb7e15800ae409551955d82', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: 'ed341e08868536ddcef3d753c9a538eaab339a80', name: "start" }), h("div", { key: '61c5e6d8d17e034e4a5a30e2aa7451e190322791' }, h("div", { key: '80de8d4b66076c356208fd5aca76a871ea78adb5', class: "ghost" }, h("div", { key: '9e03dc99e94796848c823280aa2008e8923057a8', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: 'f18338e4bb535a353ccd19c011959df294103555', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '011ecaafbcc906ae0d0f4d8e39820a3a63cd168a', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -139,7 +139,7 @@ export class SmoothlyInput {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), h("label", { key: '462bda3be9a8404e95d36d53ff98ccb86722d4f4', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'ecfc30af821c214ab58b7abfdc08da2a8fad830a' })), h("smoothly-icon", { key: 'e41e86f0402779d16d962f9a1fefa05241fe684d', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: 'ed933dda84ae06accec1d535aa739b4d94b8d8e2', name: "end" })));
+            } }), h("label", { key: 'ea3151b8d79f3475d02c8b0b8761c286ffb4d9a1', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'f7175e37987972a88d5bd7756b61253240835ed4' })), h("smoothly-icon", { key: '89f2bf409e15b617656a7cadb96c8b6b4146e4a5', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: '3d1a9674c76bdbac5ebd98137df4eca4a8690322', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/month/index.js CHANGED Viewed

@@ -106,9 +106,9 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '87aeaf082d1ab71b40d219ab3b7cc982e687f03c' }, h("smoothly-icon", { key: '436d542d8b742e88658daba92eabe8d50e7f939d', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '31a5375f473313057fdee7b8d7b87594ac238550' }, h("smoothly-icon", { key: '78271c79baeaa0892cff0ef62be3eddc88574d3c', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'bcf7cb766c52e194e7cad69bacfa508d7f1f141f', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '6d95cf41e4e4716debe223a1f4bfb4e1fd94a113', slot: "label" }, h("slot", { key: 'd6e22ec1e5c93e91f91fc98ec4c9cf85616e0370', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'b984eec0ad9e4f888a55a6c24ace25d09ce64c3f', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: 'afc3a95ef72f0ba55c1e3c8ec3502abcbc8156e4', slot: "label" }, h("slot", { key: 'a5c25c60c73f2d97fb1b4942025bbc9275b37522', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '1f85660bf59645f6b1549b5495bad915c8a91bb4', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'ae36fb2b6d31d627f29ff20d5a1cf71ab5648626', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '14b76d20799c3ffdeee0bd8abc2c17de24a50205', slot: "label" }, h("slot", { key: '7a02aaaa7c03963d2a4266fc5f20d595453ff938', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: 'd7203269b2e6be8b45120bc9315fcba8a207fe32', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: 'b73693770456df31f3eedce66b344775ecc9cb68', slot: "label" }, h("slot", { key: '649381e8437b40b805bcd089b06264d83c078629', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '2d5f6e00759a55b9ab596c45e97421081e83dc55', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }

package/dist/collection/components/input/radio/index.js CHANGED Viewed

@@ -96,7 +96,7 @@ export class SmoothlyInputRadio {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (h(Host, { key: '689c9e90b8b92ee8d4991dfbc564d9b7fbfbf85d', class: "floating-label" }, h("slot", { key: '56156f90edbf2d0a8ae45b1a8f263ae6c365e2f4', name: "start" }), h("div", { key: '4eec0a7a8fa2a7e658945e1e9932e6a15ecacec6' }, h("slot", { key: 'e9c5188cca82f0273c682cea0236e4dea59ecb21', name: "label" }), h("div", { key: '0cee52bfa754c92c48fda0661c1d245ce1f084cc', class: "options" }, h("slot", { key: '54e2d1322a02c0353e56fe1983112bea45d5e9c2' }))), h("slot", { key: '2db4ccf3a8ae062e9b3db7623948fd253d70a234', name: "end" })));
+        return (h(Host, { key: '84feefdf8a3f79ac031f8f4e12af4eaea6d3b464', class: "floating-label" }, h("slot", { key: '5394a95744be929c8a0d5bbce9e09abc53edd8d9', name: "start" }), h("div", { key: '34f00d17365ec06c256338f759e24e6d13592997' }, h("slot", { key: '528b489815eb69473529b683965fc79ce80aaad4', name: "label" }), h("div", { key: '42dc1e97f591cef1ba66d1c16e0843c9f6b21c75', class: "options" }, h("slot", { key: '9db82fe518bd4790cf7cb95e2dfd083ef8e67795' }))), h("slot", { key: '67ede49d41d2e031da5387f819058031e886e1d1', name: "end" })));
     }
     static get is() { return "smoothly-input-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/radio/item/index.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class SmoothlyInputRadioItem {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (h(Host, { key: '3e47c89d1807a0cf1f6a08134bbd19459f2bb639', onClick: () => this.inputHandler() }, h("input", { key: '521ba624308bd4915efe04cf068c4e963cf9465b', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: 'f5c4dfee84a1526ff7d8bd89af9def333cddfc15', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: 'bcae74b96adea1d89e4a05ed81071685e3baa17c' }, h("slot", { key: '2b1a11e777cd4cb4e12791fca139483372a0eb11' }))));
+        return (h(Host, { key: 'e7cf32e18aaa3c68ed5f10ddd837d00c57ce314c', onClick: () => this.inputHandler() }, h("input", { key: '48daeb5ece6f22f24d7ba0d21d6ab1d5ffe050ef', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: '981a3f17ce966be3bd90a3030d5eed18ed1ae087', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: '3c3e288cbd8496bd4c2a62b83865eae8e39019a6' }, h("slot", { key: 'c660628b0873ef7041a06d90884f1bd88046dfed' }))));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }