npm - smoothly - Versions diffs - 1.96.0 → 1.98.0 - Mend

smoothly 1.96.0 → 1.98.0

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 (385) hide show

package/dist/collection/components/input/date/range/style.css CHANGED Viewed

@@ -105,6 +105,9 @@
 :host:not([show-label]):not(.show-label) .label {
 	display: none;
 }
+:host smoothly-icon.smoothly-invalid {
+	fill: rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)));
+}
 :host {
   position: relative;
@@ -196,8 +199,17 @@
   cursor: pointer;
 }
-:host > span.icons {
+:host > span.smoothly-icons {
   display: flex;
   flex-direction: row;
   align-items: center;
+}
+:host > .smoothly-icons > .smoothly-invalid {
+  display: none;
+  padding: 0.5rem;
+}
+:host[invalid] > .smoothly-icons > .smoothly-invalid {
+  display: flex;
 }

package/dist/collection/components/input/date/style.css CHANGED Viewed

@@ -105,6 +105,9 @@
 :host:not([show-label]):not(.show-label) .label {
 	display: none;
 }
+:host smoothly-icon.smoothly-invalid {
+	fill: rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)));
+}
 :host {
@@ -171,9 +174,16 @@
 	border-left: 1px solid rgb(var(--smoothly-input-border));
 }
-:host>span.icons {
+:host>.smoothly-icons {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	margin-left: auto;
 }
+:host>.smoothly-icons>.smoothly-invalid {
+	display: none;
+	padding: 0.5rem;
+}
+:host[invalid]>.smoothly-icons>.smoothly-invalid {
+	display: flex;
+}

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

@@ -12,7 +12,6 @@ export class SmoothlyInputDateRangeText {
         this.locale = getLocale();
         this.readonly = undefined;
         this.disabled = undefined;
-        this.invalid = undefined;
         this.showLabel = true;
         this.value = undefined;
         this.parts = {};
@@ -188,7 +187,7 @@ export class SmoothlyInputDateRangeText {
         }
     }
     render() {
-        return (h(Host, { key: '946b8e3e252c5d9f8f92d0df484df7eefde5bbb1', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat.Order.toArray(this.order).map((part, index) => {
+        return (h(Host, { key: '0e110488c4cdc730b778e048d9d0a9c190a279bd', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat.Order.toArray(this.order).map((part, index) => {
             var _a;
             return (h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index) }, h("span", { class: {
                     "smoothly-date-text-part": true,
@@ -268,23 +267,6 @@ export class SmoothlyInputDateRangeText {
                 "attribute": "disabled",
                 "reflect": true
             },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "invalid",
-                "reflect": true
-            },
             "showLabel": {
                 "type": "boolean",
                 "mutable": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/text/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { getLocale } from \"../../../../model\"\nimport { DateFormat } from \"./DateFormat\"\nimport { InputSelection } from \"./InputSelection\"\n\n@Component({\n\ttag: \"smoothly-date-text\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDateRangeText {\n\t@Element() element: HTMLElement\n\tprivate partElements: { [partIndex in number]: HTMLSpanElement \| undefined } = {\n\t\t0: undefined,\n\t\t1: undefined,\n\t\t2: undefined,\n\t}\n\t@Prop() locale?: isoly.Locale = getLocale()\n\t@Prop({ reflect: true }) readonly: boolean\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Prop({ reflect: true }) invalid: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() value?: isoly.Date // Only used for initial value\n\t@State() parts: DateFormat.Parts = {}\n\tprivate previousEmittedValue?: isoly.Date\n\t@State() order: DateFormat.Order\n\t@State() separator: DateFormat.Separator\n\t@State() focusedIndex?: number\n\t@Event() smoothlyDateTextHasText: EventEmitter<boolean>\n\t@Event() smoothlyDateTextChange: EventEmitter<isoly.Date \| undefined>\n\t@Event() smoothlyDateTextFocusChange: EventEmitter<boolean>\n\t@Event() smoothlyDateHasPartialDate: EventEmitter<DateFormat.Parts>\n\t@Event() smoothlyDateTextDone: EventEmitter<void>\n\t@Event() smoothlyDateTextPrevious: EventEmitter<void>\n\t@Event() smoothlyDateTextNext: EventEmitter<void>\n\n\tcomponentWillLoad() {\n\t\tthis.order = DateFormat.Order.fromLocale(this.locale)\n\t\tthis.separator = DateFormat.Separator.fromLocale(this.locale)\n\t\tthis.parts = DateFormat.Parts.fromDate(this.value) ?? {}\n\t}\n\tcomponentDidLoad() {\n\t\tthis.updateInputs()\n\t}\n\n\t@Watch(\"parts\")\n\tpartsHandler() {\n\t\tconst value = DateFormat.Parts.toDate(this.parts)\n\t\tif (value != this.previousEmittedValue) {\n\t\t\tthis.smoothlyDateTextChange.emit(value)\n\t\t\tthis.previousEmittedValue = value\n\t\t}\n\t\tthis.smoothlyDateTextHasText.emit(Object.values(this.parts).some(part => !!part))\n\t}\n\t@Watch(\"focusedIndex\")\n\tfocusedIndexHandler() {\n\t\tthis.smoothlyDateTextFocusChange.emit(typeof this.focusedIndex == \"number\")\n\t}\n\n\t@Method()\n\tasync setValue(value: isoly.Date \| undefined) {\n\t\tconst parts = DateFormat.Parts.fromDate(value)\n\t\tthis.setAllParts(parts)\n\t}\n\n\tsetAllParts(parts?: DateFormat.Parts) {\n\t\tthis.parts = parts ?? {}\n\t\tthis.updateInputs()\n\t}\n\tupdateInputs() {\n\t\tconst yearIndex = this.order.indexOf(\"Y\")\n\t\tconst monthIndex = this.order.indexOf(\"M\")\n\t\tconst dayIndex = this.order.indexOf(\"D\")\n\t\tthis.partElements[yearIndex] && (this.partElements[yearIndex]!.innerText = this.parts.Y ?? \"\")\n\t\tthis.partElements[monthIndex] && (this.partElements[monthIndex]!.innerText = this.parts.M ?? \"\")\n\t\tthis.partElements[dayIndex] && (this.partElements[dayIndex]!.innerText = this.parts.D ?? \"\")\n\t}\n\n\tsetPart(part: \"Y\" \| \"M\" \| \"D\", value: string \| undefined) {\n\t\tthis.parts = {\n\t\t\t...this.parts,\n\t\t\t[part]: value,\n\t\t}\n\t\tconst index = this.order.indexOf(part)\n\t\tthis.partElements[index] && (this.partElements[index]!.innerText = value ?? \"\")\n\t}\n\n\t@Method()\n\tasync select(place: \"start\" \| \"end\" = \"start\") {\n\t\tconst index = place == \"start\" ? 0 : 2\n\t\tthis.setFocus(index)\n\t}\n\t@Method()\n\tasync deselect() {\n\t\tthis.partElements[this.focusedIndex ?? 0]?.blur()\n\t}\n\n\tgetInnerText(target: EventTarget \| null) {\n\t\treturn (target as HTMLSpanElement).innerText.replace(/\\n/g, \"\").replace(/\\D/g, \"\")\n\t}\n\n\t@Listen(\"beforeinput\")\n\tbeforeInputHandler(e: InputEvent) {\n\t\tconst part = this.order[this.focusedIndex ?? 0] as \"Y\" \| \"M\" \| \"D\"\n\t\tconst value = this.getInnerText(e.target)\n\t\tconst nonDigitData = e.data && /\\D/.test(e.data)\n\t\tconst isComplete = DateFormat.Part.isComplete(part, value)\n\t\tconst noRangedSelection = InputSelection.isCollapsed(e.target as HTMLElement)\n\t\tif (\n\t\t\t(e.inputType == \"insertText\" \|\| e.inputType == \"insertFromPaste\") &&\n\t\t\t(nonDigitData \|\| (isComplete && noRangedSelection))\n\t\t) {\n\t\t\te.preventDefault()\n\t\t}\n\t\tif (e.inputType == \"insertParagraph\" \|\| e.inputType == \"insertLineBreak\") {\n\t\t\tthis.smoothlyDateTextDone.emit()\n\t\t\te.preventDefault()\n\t\t}\n\t}\n\n\t@Listen(\"input\", { capture: true })\n\tinputHandler(e: InputEvent) {\n\t\tconst part = DateFormat.Order.getPart(this.order, this.focusedIndex ?? 0)\n\t\tconst index = this.focusedIndex ?? 0\n\t\tconst value = this.getInnerText(e.target)\n\t\tthis.parts = {\n\t\t\t...this.parts,\n\t\t\t[part]: value,\n\t\t}\n\n\t\tif ([\"D\", \"M\"].includes(part)) {\n\t\t\tconst isDay = part == \"D\"\n\t\t\tconst max = isDay ? DateFormat.Parts.lastDay(this.parts) : 12\n\t\t\tconst singleDigitThreshold = isDay ? 3 : 1\n\t\t\tconst numberValue = parseInt(value)\n\t\t\tif (value.length >= 2) {\n\t\t\t\tthis.commitPart(part, numberValue, index, max)\n\t\t\t} else if (value.length == 1 && numberValue > singleDigitThreshold) {\n\t\t\t\tthis.autoAdvancePart(part, numberValue, index, max)\n\t\t\t}\n\t\t}\n\t\tif (DateFormat.Part.isComplete(part, value)) {\n\t\t\tthis.setFocus(index + 1)\n\t\t}\n\t\tconst roundedValue = DateFormat.Parts.toDate(this.parts)\n\t\tif (roundedValue) {\n\t\t\tconst roundedParts = DateFormat.Parts.fromDate(roundedValue)\n\t\t\tif (this.parts.D !== roundedParts?.D) {\n\t\t\t\tthis.setPart(\"D\", roundedParts?.D)\n\t\t\t}\n\t\t}\n\t\tif (this.parts.Y \|\| this.parts.M \|\| this.parts.D)\n\t\t\tthis.smoothlyDateHasPartialDate.emit(this.parts)\n\t}\n\tkeyDownHandler(e: KeyboardEvent) {\n\t\tconst text = this.getInnerText(e.target)\n\t\tconst index = this.focusedIndex ?? 0\n\t\tif (InputSelection.isAtStart(e) && e.key == \"ArrowLeft\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index - 1)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (InputSelection.isAtEnd(e) && e.key == \"ArrowRight\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index + 1)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (e.key == \"Home\" \|\| e.key == \"ArrowUp\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(0)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (e.key == \"End\" \|\| e.key == \"ArrowDown\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(2)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (InputSelection.isAtStart(e) && e.key == \"Backspace\" && text == \"\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index - 1)\n\t\t\te.preventDefault() // Prevent delete previous part\n\t\t} else if (InputSelection.isAtEnd(e) && e.key == \"Delete\" && text == \"\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index + 1)\n\t\t\te.preventDefault() // Prevent delete next part\n\t\t}\n\t}\n\n\tcommitPart(part: DateFormat.Part, value: number, index: number, max: number) {\n\t\tconst clamped = Math.max(1, Math.min(value, max))\n\t\tthis.setPart(part, clamped.toString().padStart(2, \"0\"))\n\t\tInputSelection.setPosition(this.partElements[index], 2)\n\t}\n\tautoAdvancePart(part: DateFormat.Part, value: number, index: number, max: number) {\n\t\tconst clamped = Math.max(1, Math.min(value, max))\n\t\tthis.setPart(part, clamped.toString().padStart(2, \"0\"))\n\t\tthis.setFocus(index + 1)\n\t}\n\n\tautoAdvanceIfPossible(index: number) {\n\t\tconst part = DateFormat.Order.getPart(this.order, index)\n\t\tconst value = this.parts[part] ?? \"\"\n\t\tif (part == \"D\" && value.length == 1) {\n\t\t\tthis.autoAdvancePart(part, parseInt(value), index, DateFormat.Parts.lastDay(this.parts))\n\t\t} else if (part == \"M\" && value.length == 1) {\n\t\t\tthis.autoAdvancePart(part, parseInt(value), index, 12)\n\t\t}\n\t}\n\n\tsetFocus(index: number) {\n\t\tif (index < 0) {\n\t\t\tthis.smoothlyDateTextPrevious.emit()\n\t\t} else if (index > 2) {\n\t\t\tthis.smoothlyDateTextNext.emit()\n\t\t} else {\n\t\t\tInputSelection.selectAll(this.partElements[index])\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"has-text\": Object.values(this.parts).some(part => !!part) }}>\n\t\t\t\t{DateFormat.Order.toArray(this.order).map((part, index) => (\n\t\t\t\t\t<span onClick={() => !this.readonly && !this.disabled && this.setFocus(index)}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\"smoothly-date-text-part\": true,\n\t\t\t\t\t\t\t\t\"is-complete\": DateFormat.Part.isComplete(part, this.parts[part]),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonFocus={() => (this.focusedIndex = index)}\n\t\t\t\t\t\t\tonBlur={() => (this.focusedIndex = undefined)}\n\t\t\t\t\t\t\tonKeyDown={(e: KeyboardEvent) => this.keyDownHandler(e)}\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tref={el => (this.partElements[index] = el)}\n\t\t\t\t\t\t\tcontenteditable={!(this.readonly \|\| this.disabled)}\n\t\t\t\t\t\t\tinputmode=\"numeric\">\n\t\t\t\t\t\t\t{/* year or month or day written here */}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span class=\"guide\">{DateFormat.Part.getGuide(part, this.parts[part]?.length)}</span>\n\t\t\t\t\t\t{index < 2 && <span class=\"smoothly-date-separator\">{this.separator}</span>}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/text/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { getLocale } from \"../../../../model\"\nimport { DateFormat } from \"./DateFormat\"\nimport { InputSelection } from \"./InputSelection\"\n\n@Component({\n\ttag: \"smoothly-date-text\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDateRangeText {\n\t@Element() element: HTMLElement\n\tprivate partElements: { [partIndex in number]: HTMLSpanElement \| undefined } = {\n\t\t0: undefined,\n\t\t1: undefined,\n\t\t2: undefined,\n\t}\n\t@Prop() locale?: isoly.Locale = getLocale()\n\t@Prop({ reflect: true }) readonly: boolean\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() value?: isoly.Date // Only used for initial value\n\t@State() parts: DateFormat.Parts = {}\n\tprivate previousEmittedValue?: isoly.Date\n\t@State() order: DateFormat.Order\n\t@State() separator: DateFormat.Separator\n\t@State() focusedIndex?: number\n\t@Event() smoothlyDateTextHasText: EventEmitter<boolean>\n\t@Event() smoothlyDateTextChange: EventEmitter<isoly.Date \| undefined>\n\t@Event() smoothlyDateTextFocusChange: EventEmitter<boolean>\n\t@Event() smoothlyDateHasPartialDate: EventEmitter<DateFormat.Parts>\n\t@Event() smoothlyDateTextDone: EventEmitter<void>\n\t@Event() smoothlyDateTextPrevious: EventEmitter<void>\n\t@Event() smoothlyDateTextNext: EventEmitter<void>\n\n\tcomponentWillLoad() {\n\t\tthis.order = DateFormat.Order.fromLocale(this.locale)\n\t\tthis.separator = DateFormat.Separator.fromLocale(this.locale)\n\t\tthis.parts = DateFormat.Parts.fromDate(this.value) ?? {}\n\t}\n\tcomponentDidLoad() {\n\t\tthis.updateInputs()\n\t}\n\n\t@Watch(\"parts\")\n\tpartsHandler() {\n\t\tconst value = DateFormat.Parts.toDate(this.parts)\n\t\tif (value != this.previousEmittedValue) {\n\t\t\tthis.smoothlyDateTextChange.emit(value)\n\t\t\tthis.previousEmittedValue = value\n\t\t}\n\t\tthis.smoothlyDateTextHasText.emit(Object.values(this.parts).some(part => !!part))\n\t}\n\t@Watch(\"focusedIndex\")\n\tfocusedIndexHandler() {\n\t\tthis.smoothlyDateTextFocusChange.emit(typeof this.focusedIndex == \"number\")\n\t}\n\n\t@Method()\n\tasync setValue(value: isoly.Date \| undefined) {\n\t\tconst parts = DateFormat.Parts.fromDate(value)\n\t\tthis.setAllParts(parts)\n\t}\n\n\tsetAllParts(parts?: DateFormat.Parts) {\n\t\tthis.parts = parts ?? {}\n\t\tthis.updateInputs()\n\t}\n\tupdateInputs() {\n\t\tconst yearIndex = this.order.indexOf(\"Y\")\n\t\tconst monthIndex = this.order.indexOf(\"M\")\n\t\tconst dayIndex = this.order.indexOf(\"D\")\n\t\tthis.partElements[yearIndex] && (this.partElements[yearIndex]!.innerText = this.parts.Y ?? \"\")\n\t\tthis.partElements[monthIndex] && (this.partElements[monthIndex]!.innerText = this.parts.M ?? \"\")\n\t\tthis.partElements[dayIndex] && (this.partElements[dayIndex]!.innerText = this.parts.D ?? \"\")\n\t}\n\n\tsetPart(part: \"Y\" \| \"M\" \| \"D\", value: string \| undefined) {\n\t\tthis.parts = {\n\t\t\t...this.parts,\n\t\t\t[part]: value,\n\t\t}\n\t\tconst index = this.order.indexOf(part)\n\t\tthis.partElements[index] && (this.partElements[index]!.innerText = value ?? \"\")\n\t}\n\n\t@Method()\n\tasync select(place: \"start\" \| \"end\" = \"start\") {\n\t\tconst index = place == \"start\" ? 0 : 2\n\t\tthis.setFocus(index)\n\t}\n\t@Method()\n\tasync deselect() {\n\t\tthis.partElements[this.focusedIndex ?? 0]?.blur()\n\t}\n\n\tgetInnerText(target: EventTarget \| null) {\n\t\treturn (target as HTMLSpanElement).innerText.replace(/\\n/g, \"\").replace(/\\D/g, \"\")\n\t}\n\n\t@Listen(\"beforeinput\")\n\tbeforeInputHandler(e: InputEvent) {\n\t\tconst part = this.order[this.focusedIndex ?? 0] as \"Y\" \| \"M\" \| \"D\"\n\t\tconst value = this.getInnerText(e.target)\n\t\tconst nonDigitData = e.data && /\\D/.test(e.data)\n\t\tconst isComplete = DateFormat.Part.isComplete(part, value)\n\t\tconst noRangedSelection = InputSelection.isCollapsed(e.target as HTMLElement)\n\t\tif (\n\t\t\t(e.inputType == \"insertText\" \|\| e.inputType == \"insertFromPaste\") &&\n\t\t\t(nonDigitData \|\| (isComplete && noRangedSelection))\n\t\t) {\n\t\t\te.preventDefault()\n\t\t}\n\t\tif (e.inputType == \"insertParagraph\" \|\| e.inputType == \"insertLineBreak\") {\n\t\t\tthis.smoothlyDateTextDone.emit()\n\t\t\te.preventDefault()\n\t\t}\n\t}\n\n\t@Listen(\"input\", { capture: true })\n\tinputHandler(e: InputEvent) {\n\t\tconst part = DateFormat.Order.getPart(this.order, this.focusedIndex ?? 0)\n\t\tconst index = this.focusedIndex ?? 0\n\t\tconst value = this.getInnerText(e.target)\n\t\tthis.parts = {\n\t\t\t...this.parts,\n\t\t\t[part]: value,\n\t\t}\n\n\t\tif ([\"D\", \"M\"].includes(part)) {\n\t\t\tconst isDay = part == \"D\"\n\t\t\tconst max = isDay ? DateFormat.Parts.lastDay(this.parts) : 12\n\t\t\tconst singleDigitThreshold = isDay ? 3 : 1\n\t\t\tconst numberValue = parseInt(value)\n\t\t\tif (value.length >= 2) {\n\t\t\t\tthis.commitPart(part, numberValue, index, max)\n\t\t\t} else if (value.length == 1 && numberValue > singleDigitThreshold) {\n\t\t\t\tthis.autoAdvancePart(part, numberValue, index, max)\n\t\t\t}\n\t\t}\n\t\tif (DateFormat.Part.isComplete(part, value)) {\n\t\t\tthis.setFocus(index + 1)\n\t\t}\n\t\tconst roundedValue = DateFormat.Parts.toDate(this.parts)\n\t\tif (roundedValue) {\n\t\t\tconst roundedParts = DateFormat.Parts.fromDate(roundedValue)\n\t\t\tif (this.parts.D !== roundedParts?.D) {\n\t\t\t\tthis.setPart(\"D\", roundedParts?.D)\n\t\t\t}\n\t\t}\n\t\tif (this.parts.Y \|\| this.parts.M \|\| this.parts.D)\n\t\t\tthis.smoothlyDateHasPartialDate.emit(this.parts)\n\t}\n\tkeyDownHandler(e: KeyboardEvent) {\n\t\tconst text = this.getInnerText(e.target)\n\t\tconst index = this.focusedIndex ?? 0\n\t\tif (InputSelection.isAtStart(e) && e.key == \"ArrowLeft\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index - 1)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (InputSelection.isAtEnd(e) && e.key == \"ArrowRight\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index + 1)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (e.key == \"Home\" \|\| e.key == \"ArrowUp\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(0)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (e.key == \"End\" \|\| e.key == \"ArrowDown\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(2)\n\t\t\te.preventDefault() // Keep selection\n\t\t} else if (InputSelection.isAtStart(e) && e.key == \"Backspace\" && text == \"\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index - 1)\n\t\t\te.preventDefault() // Prevent delete previous part\n\t\t} else if (InputSelection.isAtEnd(e) && e.key == \"Delete\" && text == \"\") {\n\t\t\tthis.autoAdvanceIfPossible(index)\n\t\t\tthis.setFocus(index + 1)\n\t\t\te.preventDefault() // Prevent delete next part\n\t\t}\n\t}\n\n\tcommitPart(part: DateFormat.Part, value: number, index: number, max: number) {\n\t\tconst clamped = Math.max(1, Math.min(value, max))\n\t\tthis.setPart(part, clamped.toString().padStart(2, \"0\"))\n\t\tInputSelection.setPosition(this.partElements[index], 2)\n\t}\n\tautoAdvancePart(part: DateFormat.Part, value: number, index: number, max: number) {\n\t\tconst clamped = Math.max(1, Math.min(value, max))\n\t\tthis.setPart(part, clamped.toString().padStart(2, \"0\"))\n\t\tthis.setFocus(index + 1)\n\t}\n\n\tautoAdvanceIfPossible(index: number) {\n\t\tconst part = DateFormat.Order.getPart(this.order, index)\n\t\tconst value = this.parts[part] ?? \"\"\n\t\tif (part == \"D\" && value.length == 1) {\n\t\t\tthis.autoAdvancePart(part, parseInt(value), index, DateFormat.Parts.lastDay(this.parts))\n\t\t} else if (part == \"M\" && value.length == 1) {\n\t\t\tthis.autoAdvancePart(part, parseInt(value), index, 12)\n\t\t}\n\t}\n\n\tsetFocus(index: number) {\n\t\tif (index < 0) {\n\t\t\tthis.smoothlyDateTextPrevious.emit()\n\t\t} else if (index > 2) {\n\t\t\tthis.smoothlyDateTextNext.emit()\n\t\t} else {\n\t\t\tInputSelection.selectAll(this.partElements[index])\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"has-text\": Object.values(this.parts).some(part => !!part) }}>\n\t\t\t\t{DateFormat.Order.toArray(this.order).map((part, index) => (\n\t\t\t\t\t<span onClick={() => !this.readonly && !this.disabled && this.setFocus(index)}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\"smoothly-date-text-part\": true,\n\t\t\t\t\t\t\t\t\"is-complete\": DateFormat.Part.isComplete(part, this.parts[part]),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonFocus={() => (this.focusedIndex = index)}\n\t\t\t\t\t\t\tonBlur={() => (this.focusedIndex = undefined)}\n\t\t\t\t\t\t\tonKeyDown={(e: KeyboardEvent) => this.keyDownHandler(e)}\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tref={el => (this.partElements[index] = el)}\n\t\t\t\t\t\t\tcontenteditable={!(this.readonly \|\| this.disabled)}\n\t\t\t\t\t\t\tinputmode=\"numeric\">\n\t\t\t\t\t\t\t{/* year or month or day written here */}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span class=\"guide\">{DateFormat.Part.getGuide(part, this.parts[part]?.length)}</span>\n\t\t\t\t\t\t{index < 2 && <span class=\"smoothly-date-separator\">{this.separator}</span>}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -107,30 +107,30 @@ export class SmoothlyInputDateTime {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (h(Host, { key: '4a9bc8cb5a9617237b63cff35930d693dbf11d1f' }, h("smoothly-input", { key: '7ab42b7d0fb7389703a42b460939ce8cee8698fb', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (h(Host, { key: 'dfe907fcfa381ced449f8599d9e4fda5c856eaae' }, h("smoothly-input", { key: 'bae26044b171b37ed68f7c2311ff84e7f7a7f87d', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, h("slot", { key: '8fc841cb3735e2b4e2e13fc974dde4d4271e0627' })), h("smoothly-input", { key: '012223abf5a9cf71b378da011cc5dcee5b75be8e', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, h("slot", { key: 'dd3e2f7346d85cb40aa9e55f9810d16f202c9ad5' })), h("smoothly-input", { key: 'd198ced2bbfb9951ba531fddd6526c581da37ce9', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '79c8a593aea2d4bead18363b41264d3ce1205bd8', class: "colon" }, ":"), h("smoothly-input", { key: '8b76dea985a9fc687279a50a6e8c3307a2465907', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), h("span", { key: '4841336ee3c712551284b0ce21c65e5e196fee63', class: "colon" }, ":"), h("smoothly-input", { key: 'f1438a6ae0b446ed2ef99ba7cfba12fc3e574507', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '4bb9c14d94c8e2e9e9dbacd01eff9d69023a732a', class: "icons" }, h("smoothly-icon", { key: '8be49066019b25edd9d8c98e453b91fe55ba862c', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'a6dce3592939a8444cd81b5f8733e24db3c1119d', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '9b5b104ea97c56efa6aceed6faacfd4e50e934e7', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), h("span", { key: '223cf45b747be3ebfa0156dd36dd66e3c448625b', class: "icons" }, h("smoothly-icon", { key: '0ec6729a28506735d0b6527c8a911fd6364b6dd2', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '933d0cafac824593cc94f70aa0ba3cd73919dd4a', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'c5bd26b468cd20ee59a688651d1c6ad9134230f6', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, h("div", { key: '326cfb1f0feb1c656b4a2c5acd61e426710c2d28', slot: "year-label" }, h("slot", { key: 'fbad1dfc2c2a74aa8281720c08ef4cc900209171', name: "year-label" })), h("div", { key: 'b8c65f212912c2306d21764ce2a32056fa0b12ed', slot: "month-label" }, h("slot", { key: 'ffb2c1b1a71a2eb0af33dd9b52862d76851f63e0', name: "month-label" }))))));
+            } }, h("div", { key: '6ea97bba904c1827255994a29720cbc9858cc934', slot: "year-label" }, h("slot", { key: '551df51c20634b4931df4bcf9985a1a546db050d', name: "year-label" })), h("div", { key: 'b189e5e98136e176dbf3e0c6f4f697ac51e2d181', slot: "month-label" }, h("slot", { key: 'e8f95beeff25ab4315dda02a06a362f79e89166b', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date-time"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/time/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\tState,\n\tWatch,\n} from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Color } from \"../../../../model\"\nimport { Clearable } from \"../../Clearable\"\nimport { Editable } from \"../../Editable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date-time\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDateTime implements ComponentWillLoad, Clearable, Input, Editable {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ reflect: true }) disabled?: boolean\n\t@Prop({ reflect: true }) invalid?: boolean = false\n\t@Prop({ reflect: true }) errorMessage?: string\n\tparent: Editable \| undefined\n\tisDifferentFromInitial = false\n\tprivate initialValue?: isoly.DateTime\n\tprivate observer = Editable.Observer.create(this)\n\t@Prop({ mutable: true }) value?: isoly.DateTime\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() min?: isoly.DateTime\n\t@Prop() max?: isoly.DateTime\n\t@State() date?: isoly.Date\n\t@State() hour?: number\n\t@State() minute?: number\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyValueChange: EventEmitter<isoly.DateTime>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyUserInput: EventEmitter<Input.UserInput>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\n\tcomponentWillLoad(): void {\n\t\tthis.setInitialValue()\n\t\tthis.smoothlyInputLooks.emit(\n\t\t\t(looks, color) => ((this.looks = this.looks ?? looks), !this.color && (this.color = color))\n\t\t)\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.observer.publish()\n\t\tthis.valueChange(this.value)\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\n\t}\n\t@Watch(\"name\")\n\tnameChange(_: string \| undefined, oldName: string \| undefined) {\n\t\tInput.formRename(this, oldName)\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync getValue(): Promise<isoly.DateTime \| undefined> {\n\t\tconst value =\n\t\t\tthis.date && typeof this.hour == \"number\" && typeof this.minute == \"number\"\n\t\t\t\t? `${this.date}T${`${this.hour}`.padStart(2, \"0\")}:${`${this.minute}`.padStart(2, \"0\")}:00.000Z`\n\t\t\t\t: undefined\n\t\treturn isoly.DateTime.is(value) ? value : undefined\n\t}\n\t@Method()\n\tasync listen(listener: Editable.Observer.Listener): Promise<void> {\n\t\tthis.observer.subscribe(listener)\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t\tthis.date = undefined\n\t\tthis.hour = undefined\n\t\tthis.minute = undefined\n\t}\n\n\t@Watch(\"date\")\n\t@Watch(\"hour\")\n\t@Watch(\"minute\")\n\tasync handleChange() {\n\t\tconst value = await this.getValue()\n\t\tthis.smoothlyValueChange.emit(value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.observer.publish()\n\t}\n\n\t@Watch(\"value\")\n\tvalueChange(value?: isoly.DateTime) {\n\t\tif (isoly.DateTime.is(value)) {\n\t\t\tthis.date = isoly.DateTime.getDate(value)\n\t\t\tthis.hour = isoly.DateTime.getHour(value)\n\t\t\tthis.minute = isoly.DateTime.getMinute(value)\n\t\t}\n\t\tthis.smoothlyValueChange.emit(value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.observer.publish()\n\t}\n\t@Watch(\"disabled\")\n\t@Watch(\"readonly\")\n\twatchingReadonly(): void {\n\t\tthis.observer.publish()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputDateTime) => void>): void {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tonWindowClick(event: Event): void {\n\t\t!event.composedPath().includes(this.element) && this.open && (this.open = !this.open)\n\t}\n\t@Method()\n\tasync edit(editable: boolean) {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset() {\n\t\tif (isoly.DateTime.is(this.initialValue)) {\n\t\t\tthis.date = isoly.DateTime.getDate(this.initialValue)\n\t\t\tthis.hour = isoly.DateTime.getHour(this.initialValue)\n\t\t\tthis.minute = isoly.DateTime.getMinute(this.initialValue)\n\t\t} else {\n\t\t\tthis.date = undefined\n\t\t\tthis.hour = undefined\n\t\t\tthis.minute = undefined\n\t\t}\n\t}\n\t@Method()\n\tasync setInitialValue() {\n\t\tthis.initialValue = await this.getValue()\n\t\tthis.isDifferentFromInitial = false\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tcolor={this.color}\n\t\t\t\t\tlooks={this.looks == \"transparent\" ? this.looks : undefined}\n\t\t\t\t\tname={\"date\"}\n\t\t\t\t\tonFocus={() => !this.readonly && !this.disabled && (this.open = !this.open)}\n\t\t\t\t\tonClick={() => !this.readonly && !this.disabled && (this.open = !this.open)}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tvalue={this.date}\n\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.date = e.detail.date\n\t\t\t\t\t}}\n\t\t\t\t\tonSmoothlyUserInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t}}>\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tname=\"hour\"\n\t\t\t\t\ttype=\"integer\"\n\t\t\t\t\tmax={23}\n\t\t\t\t\tpad={2}\n\t\t\t\t\tvalue={this.hour}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tplaceholder=\"hh\"\n\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.hour = e.detail.hour\n\t\t\t\t\t}}\n\t\t\t\t\tonSmoothlyUserInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<span class=\"colon\">:</span>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tname=\"minute\"\n\t\t\t\t\ttype=\"integer\"\n\t\t\t\t\tmax={59}\n\t\t\t\t\tpad={2}\n\t\t\t\t\tvalue={this.minute}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tplaceholder=\"mm\"\n\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.minute = e.detail.minute\n\t\t\t\t\t}}\n\t\t\t\t\tonSmoothlyUserInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<span class=\"icons\">\n\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\tclass=\"smoothly-invalid\"\n\t\t\t\t\t\tname=\"alert-circle\"\n\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\tfill=\"clear\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ttooltip={this.errorMessage}\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name={\"end\"} />\n\t\t\t\t</span>\n\t\t\t\t{this.open && !this.readonly && (\n\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\tvalue={this.value ? isoly.DateTime.getDate(this.value) : undefined}\n\t\t\t\t\t\tmin={this.min ? isoly.DateTime.getDate(this.min) : undefined}\n\t\t\t\t\t\tmax={this.max ? isoly.DateTime.getDate(this.max) : undefined}\n\t\t\t\t\t\tonSmoothlyDateSet={async e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.date = e.detail\n\t\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t\t\tthis.open = false\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<div slot={\"year-label\"}>\n\t\t\t\t\t\t\t<slot name={\"year-label\"} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div slot={\"month-label\"}>\n\t\t\t\t\t\t\t<slot name={\"month-label\"} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-calendar>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/time/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\tState,\n\tWatch,\n} from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Color } from \"../../../../model\"\nimport { Clearable } from \"../../Clearable\"\nimport { Editable } from \"../../Editable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date-time\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDateTime implements ComponentWillLoad, Clearable, Input, Editable {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ reflect: true }) disabled?: boolean\n\t@Prop({ reflect: true }) invalid?: boolean = false\n\t@Prop({ reflect: true }) errorMessage?: string\n\tparent: Editable \| undefined\n\tisDifferentFromInitial = false\n\tprivate initialValue?: isoly.DateTime\n\tprivate observer = Editable.Observer.create(this)\n\t@Prop({ mutable: true }) value?: isoly.DateTime\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() min?: isoly.DateTime\n\t@Prop() max?: isoly.DateTime\n\t@State() date?: isoly.Date\n\t@State() hour?: number\n\t@State() minute?: number\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyValueChange: EventEmitter<isoly.DateTime>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyUserInput: EventEmitter<Input.UserInput>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\n\tcomponentWillLoad(): void {\n\t\tthis.setInitialValue()\n\t\tthis.smoothlyInputLooks.emit(\n\t\t\t(looks, color) => ((this.looks = this.looks ?? looks), !this.color && (this.color = color))\n\t\t)\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.observer.publish()\n\t\tthis.valueChange(this.value)\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\n\t}\n\t@Watch(\"name\")\n\tnameChange(_: string \| undefined, oldName: string \| undefined) {\n\t\tInput.formRename(this, oldName)\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync getValue(): Promise<isoly.DateTime \| undefined> {\n\t\tconst value =\n\t\t\tthis.date && typeof this.hour == \"number\" && typeof this.minute == \"number\"\n\t\t\t\t? `${this.date}T${`${this.hour}`.padStart(2, \"0\")}:${`${this.minute}`.padStart(2, \"0\")}:00.000Z`\n\t\t\t\t: undefined\n\t\treturn isoly.DateTime.is(value) ? value : undefined\n\t}\n\t@Method()\n\tasync listen(listener: Editable.Observer.Listener): Promise<void> {\n\t\tthis.observer.subscribe(listener)\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t\tthis.date = undefined\n\t\tthis.hour = undefined\n\t\tthis.minute = undefined\n\t}\n\n\t@Watch(\"date\")\n\t@Watch(\"hour\")\n\t@Watch(\"minute\")\n\tasync handleChange() {\n\t\tconst value = await this.getValue()\n\t\tthis.smoothlyValueChange.emit(value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.observer.publish()\n\t}\n\n\t@Watch(\"value\")\n\tvalueChange(value?: isoly.DateTime) {\n\t\tif (isoly.DateTime.is(value)) {\n\t\t\tthis.date = isoly.DateTime.getDate(value)\n\t\t\tthis.hour = isoly.DateTime.getHour(value)\n\t\t\tthis.minute = isoly.DateTime.getMinute(value)\n\t\t}\n\t\tthis.smoothlyValueChange.emit(value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.observer.publish()\n\t}\n\t@Watch(\"disabled\")\n\t@Watch(\"readonly\")\n\twatchingReadonly(): void {\n\t\tthis.observer.publish()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputDateTime) => void>): void {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tonWindowClick(event: Event): void {\n\t\t!event.composedPath().includes(this.element) && this.open && (this.open = !this.open)\n\t}\n\t@Method()\n\tasync edit(editable: boolean) {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset() {\n\t\tif (isoly.DateTime.is(this.initialValue)) {\n\t\t\tthis.date = isoly.DateTime.getDate(this.initialValue)\n\t\t\tthis.hour = isoly.DateTime.getHour(this.initialValue)\n\t\t\tthis.minute = isoly.DateTime.getMinute(this.initialValue)\n\t\t} else {\n\t\t\tthis.date = undefined\n\t\t\tthis.hour = undefined\n\t\t\tthis.minute = undefined\n\t\t}\n\t}\n\t@Method()\n\tasync setInitialValue() {\n\t\tthis.initialValue = await this.getValue()\n\t\tthis.isDifferentFromInitial = false\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tcolor={this.color}\n\t\t\t\t\tlooks={this.looks == \"transparent\" ? this.looks : undefined}\n\t\t\t\t\tname={\"date\"}\n\t\t\t\t\tonFocus={() => !this.readonly && !this.disabled && (this.open = !this.open)}\n\t\t\t\t\tonClick={() => !this.readonly && !this.disabled && (this.open = !this.open)}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tvalue={this.date}\n\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.date = e.detail.date\n\t\t\t\t\t}}\n\t\t\t\t\tonSmoothlyUserInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t}}>\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tname=\"hour\"\n\t\t\t\t\ttype=\"integer\"\n\t\t\t\t\tmax={23}\n\t\t\t\t\tpad={2}\n\t\t\t\t\tvalue={this.hour}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tplaceholder=\"hh\"\n\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.hour = e.detail.hour\n\t\t\t\t\t}}\n\t\t\t\t\tonSmoothlyUserInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<span class=\"colon\">:</span>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tname=\"minute\"\n\t\t\t\t\ttype=\"integer\"\n\t\t\t\t\tmax={59}\n\t\t\t\t\tpad={2}\n\t\t\t\t\tvalue={this.minute}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tplaceholder=\"mm\"\n\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.minute = e.detail.minute\n\t\t\t\t\t}}\n\t\t\t\t\tonSmoothlyUserInput={async e => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<span class=\"icons\">\n\t\t\t\t\t<smoothly-icon class=\"smoothly-invalid\" name=\"alert-circle\" size=\"small\" tooltip={this.errorMessage} />\n\t\t\t\t\t<slot name={\"end\"} />\n\t\t\t\t</span>\n\t\t\t\t{this.open && !this.readonly && (\n\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\tvalue={this.value ? isoly.DateTime.getDate(this.value) : undefined}\n\t\t\t\t\t\tmin={this.min ? isoly.DateTime.getDate(this.min) : undefined}\n\t\t\t\t\t\tmax={this.max ? isoly.DateTime.getDate(this.max) : undefined}\n\t\t\t\t\t\tonSmoothlyDateSet={async e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.date = e.detail\n\t\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() })\n\t\t\t\t\t\t\tthis.open = false\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<div slot={\"year-label\"}>\n\t\t\t\t\t\t\t<slot name={\"year-label\"} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div slot={\"month-label\"}>\n\t\t\t\t\t\t\t<slot name={\"month-label\"} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-calendar>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/date/time/style.css CHANGED Viewed

@@ -105,6 +105,9 @@
 :host:not([show-label]):not(.show-label) .label {
 	display: none;
 }
+:host smoothly-icon.smoothly-invalid {
+	fill: rgb(var(--smoothly-input-invalid-icon, var(--smoothly-danger-color)));
+}
 :host {

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

@@ -6,7 +6,7 @@ export class SmoothlyInputDateDemo {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (h(Host, { key: '191fe0a37d160b07317f1585c0a0b6d09c22983e' }, h("div", { key: 'c289398819d08aa6e608bf1e98d9149f7b981de7' }, h("h2", { key: '8c0875cfe6af62e2aefb1faba9185a6f1813cc58' }, "Date input"), h("p", { key: '7908bdc75aabfe06fa926e53cd9c854b3437c44c' }, "Different locales formatting the same date"), h("smoothly-button", { key: 'f4d9f68bda448d5e6dc7f6f61d124c94b24a5573', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: 'fb3f1a290a0bae953e5365d5c9e96b989dde94ee', looks: "transparent", onSmoothlyUserInput: e => {
+        return (h(Host, { key: 'c068de4474fb2f05836bf6e6710f066dda7a510b' }, h("div", { key: '3ae6ca903937ca6f78dee781cf82c22702d66cbb' }, h("h2", { key: 'f1207df3dde7aa2eb45ec5165a560ea847360795' }, "Date input"), h("p", { key: '4a87c470fd341309326106cc873adeedc0d49799' }, "Different locales formatting the same date"), h("smoothly-button", { key: '7a821e84182e54f7d53830be10742c3f31928c24', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: '09d7fefcd06b39dfb7f17938afdf7a573de3e8b5', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (h(Fragment, null, h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, h("smoothly-input-clear", { slot: "end" })), h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? isoly.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", h("smoothly-input-clear", { slot: "end" })))))));

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

@@ -7,14 +7,14 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '7f574c5c82806c7ee00a06c793b883984cf6a317' }, h("smoothly-input-demo-standard", { key: '7776c856dfbc7795c37b12f4e1ccff9a58a53f02' }), h("smoothly-input-date-demo", { key: '8695fac1f681495d23a203f0c1e658369a5208e5' }), h("smoothly-input-demo-user-input", { key: 'a6b2084ab3bb40d10b12807cbfa18ec4aa8c80a5' }), h("div", { key: '50487efa2c862624ce4738c461878b38efcbb8f9', class: "inputs" }, h("h2", { key: '48456a442136dcf27f068d619a4648f21231d4df' }, "Calendar"), h("smoothly-input-date", { key: '4ea9c301b995bd9ba221deec879a46c4fca68b5b', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '0e87054e90eba9ac97cdcd48cdc2094deb765efb', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: 'c7967bf8213f8e987ee1350ac4b86bbddd4794bf' }, "Date Range"), h("smoothly-input-date-range", { key: 'c5aee42f2de2c7da2b95e724e4e545e5459f7ca6', 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: '1371f956391aa79369174d3bfc22bdb5ee5cf996', 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: 'd1b12734f006eaf59d8543c0578539f67245e0f7', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '23306a5a8f414e14691e9fa39c9282dfc6ae3d1d', 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: '5f019200ffb73914d8a0e339edbc73d81e970a9c' }, h("smoothly-input-demo-standard", { key: 'f16268d1970e556b2a95d99d31658dee355c04f7' }), h("smoothly-input-date-demo", { key: 'a44afc5f6b0d4cfa325f77a8ef608f8413c8220d' }), h("smoothly-input-demo-user-input", { key: 'ca7cc385fc11f6e6f09170a6168ec1e8b0d94f5b' }), h("div", { key: '39a7301f0206aa1dd7337ace0d8625c3eee4e628', class: "inputs" }, h("h2", { key: '883dc3d0147791ba459faaf5e5c249402f2f9723' }, "Calendar"), h("smoothly-input-date", { key: 'c1aa37b5f2e90fb7444bfef49684eea63ca455c6', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '76560fb6c917be8ac457512cc06b969bd65e1d74', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: 'ee8591a21dbab832d7ec9dfa7f7aa6bb542cecde' }, "Date Range"), h("smoothly-input-date-range", { key: 'b29e89f188e2f0e77c2b794b3dcc3b5591670dc3', 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: '4c7ea4085d281e156f76d2301f197222cff8f89d', 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: 'c44f4e4f7cc20e963d8367200a706890d56ee1f9', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '6e3198f5ae3771668a2832a2ed755c87d7642baf', 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: '1774cefd3304bfa5c283a10cc44d85f6fe1eacc2', slot: "end", size: "icon" })), h("h2", { key: '7dc7b7271a81cd121f10fa61e28e88eaa037af3e' }, "Date"), h("smoothly-input-date", { key: '17b588159bde4dfbf0146ac942fa235d8d998688' }, "Date"), h("smoothly-input-date", { key: 'b9445869f64033bac130b0b0dca501752610af95', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: 'f34cd3598997c242ddb6b76698f7f821a601674e', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'a46fc2210b837bebdc3cc7a27b07067e0a679476', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'a3811bb817fbdf3d28474494b8a7dffd71fac67a', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '0499c2a7c5434ed716ad1ef87c2786609d94e97e', slot: "end", size: "icon" })), h("h2", { key: '683a2678f46ad1989cc4dd2edef990430beb547c' }, "Select"), h("div", { key: '682acef1f140100dd2e985b6899b89e4914e771e', class: "select-div" }, h("smoothly-input-select", { key: '2e38d749bf959df4d3ced73e8e9d59b8e3d38a4e', name: "select-dessert", looks: "border" }, h("label", { key: '01432777fc4d5bbdde9c83e24015513b6c14016f', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '0f53eaac56e52386945622443068d6769f57b382', value: "1" }, "Ice cream"), h("smoothly-item", { key: '4ad0fee8dade01fd46c1c97397bebb9183385562', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '67fb0107c5cd4294725f6a8399f5c93d589ee717', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '422b942a8306f00eb5cff7ef79d81ecf57033291', value: "4" }, "Cookie"), h("smoothly-item", { key: 'c77baa484e234d42d66c0e2a436f5ecdd7510b33', value: "5" }, "Croissant"), h("smoothly-item", { key: '36f84fdd871d2b8b7b89df7da54d07883c052282', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '1b6ab234c1c7c58bb065165373947f922ba466b4', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'cc2452592ab8c6b99b9630f9e464128c4a464350', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '9172fbe566574d3a6376d69dec7a5d6b50834633', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '75f90ab0248783d98e5fabdbcca908da69b1af21', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '91adf3c9485a41aed6a5acb6edad6a76c91e13b3', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '3dc66017de31e85c8d9ea8a5127a1cb2b7760071', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '733bd688bde445381df687fd17fb0d8a0ed8bf3b', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '1425d34d36caa1cb8bc15307110b4c5dfda7c2d1', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '5ac44d62a99fa114f404edc847b645305f4ea42d', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '79fb109059a58e0f50f525f4437639c621b83b06', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '33400cbca7257a35b9c931e046c51c18e50c9b55', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '0b394b9204545e7fe0ea938127c6cb625eaa919e', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '8643b17c6b78739ce7c41737fd7ee764f4933c0d', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '1c6f7c00f1c21a3be1a8390a28306a5720982eae', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b07f756a35e549b77e50be75f3a5e2fafc2b3099', value: "folder", selected: true }, h("smoothly-icon", { key: 'c50555d5282480fd507d55311bbfe0723dd03d53', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '6fa0811cc61e90332301cefcb2688ff27e31019a', value: "camera" }, h("smoothly-icon", { key: 'ab64f6988bb978556353d6d0097617d526ac304c', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '7a844e5cf695497cc30429d3e0bfb51cf30017ce', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '3b319069eb3dd5c5c7270acf6e16b5a3b7655dbf', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '547a2241dcebb2e522a753e206b086ee7d0c030f', slot: "end", size: "icon" })), h("h2", { key: 'f30e2988756470afc85639157086912659688342' }, "Date"), h("smoothly-input-date", { key: '140b61ddfb8f04dc67468261001848cd86691f31' }, "Date"), h("smoothly-input-date", { key: '4a37677e60bd1dfec9e627d7360f3882546a41f2', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '2c9d4de1f088fc2b907117c9d6e5be201af629a1', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '8ebb730919327f7dc1216f9c83d3343f120ad640', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '4d3a802451ae4c5398cbb2efe1ded08b612e2658', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'f6ec39b73c9d25687afb4ed9d7cc40a369e12f8c', slot: "end", size: "icon" })), h("h2", { key: '5d18e14accf8dd184cb94bf00c7da7d4c42a566e' }, "Select"), h("div", { key: '26f0b5585a109606ac218a9ad07b4252d818d2fa', class: "select-div" }, h("smoothly-input-select", { key: 'c64892d456dd9937f8aa6d53dff41664be73eefc', name: "select-dessert", looks: "border" }, h("label", { key: 'a3ce5390a3d1e02f3527727bf92d132d279fa759', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '76a141336c6715e7e76bc1006a14eeb32113838c', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'f35923cfa15eaadca19db2e2cef4cc32538d2945', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'c34fc7990be5edc0e7d01ed6f2af689c828f8a4e', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: 'd95a6d99474ef1d778c0265562380d0c769fc18a', value: "4" }, "Cookie"), h("smoothly-item", { key: '6f4a463efd3d27ec72570cf33fca47413eb6748b', value: "5" }, "Croissant"), h("smoothly-item", { key: 'd8aae0f23a5c34752030e7b40471546af7c1e45e', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'fc62c8377441f5a189ea014ee8fd0b608b1f39c7', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '6ac6ee444ad5267bc09bbad24fde62df8a0a027a', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '5fc0422252ffcc6bd0b89b48a5b04ee69a7612d3', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '73996e89caeddb451b306077c1be23063f122c54', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '75b4340f15dfa06b0442365cdbe8ff7a5f919abb', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'c0177aeb9d0138c545903c68362a490ce1668cd5', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '23b600a3ffc64b43cbcddbacb251c106051969c0', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'e992ccec00f690068c6a4cd4d93b48c89465eba9', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'a3d784bc0b82dadf61d70765dc15a066e6cadcb9', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'e6e0e3a15ec1248becea46e2eb62c14ee2b60d9a', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: 'bd575ea4c3ae3be345809a88d897f58d1ebf9caa', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '7259f513e55abae682e088e08768dca5fbeabaf5', value: "manatee" }, "Manatee"), h("smoothly-item", { key: 'b6b71ff79b1e45123937107f89417d7695e7de2a', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: 'b52b8e53ea85c146d84aac164d90ec29aa9ceaa3', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '7c94fb6489049e58d290c010781f59092b7ce814', value: "folder", selected: true }, h("smoothly-icon", { key: 'b8cc0e8237199235b2988b6ed89f25032e1bb6b6', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '5c8dc1099a6feb05c982b3fa7f781658673fd81c', value: "camera" }, h("smoothly-icon", { key: 'b41c0705295c42e08a13e8799c50294112954645', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '6c8463781d3eaf86b3920606ec9fc238569b91ed', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9d16ba20e1a14f8173bdf267b1b49e4ea090762e', 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: '24aa969e8e2608189b3c443e09ef3fa98c9feedd', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9c9c9e0d707a6f96fcba1b686873a9010be75a7d', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '0b6387482d71923df9e0b9d717d3ba88d8c98bd1', value: "1" }, "January"), h("smoothly-item", { key: '0947d179f35c567b557bda9dad655a8e25f6dd25', value: "2" }, "February"), h("smoothly-item", { key: '38daf41ad88e97e0852f296df2e5489948fce0f8', value: "3" }, "March"), h("smoothly-item", { key: '9ff729a187a5df043428043439a5f09ecc7260a4', value: "4" }, "April"), h("smoothly-item", { key: '71719ee81658c4897712459e3165accde7765bb8', value: "5" }, "May"), h("smoothly-item", { key: '7e917da27127b438a7de7d3c8e0aa3dce4eb2d72', value: "6" }, "June"), h("smoothly-item", { key: 'b70be51c019bf2f8dcf3e9e06168ac024b0a1c0b', value: "7" }, "July"), h("smoothly-item", { key: '32b97c0167a10cee962e417018b829723671ad50', value: "8" }, "August"), h("smoothly-item", { key: 'd54ca3fbb8cc3e1d68f9f68b9dbd4d432473e920', value: "9" }, "September"), h("smoothly-item", { key: 'd2209e23a9b8db4ea2281421dc108b177e1c04a7', value: "10" }, "October"), h("smoothly-item", { key: '73621556ac499b85857df738fc3bf1850cd4f964', value: "11" }, "November"), h("smoothly-item", { key: 'c6793237c76e6a26e374198ba2bdcdf9e8643251', value: "12" }, "December")), h("div", { key: '099d5c7456bc5836d7f0f2a840eb70ae81237f5a', class: "select-div-row" }, h("smoothly-input-select", { key: '804cf7f085aef7513ef3b76057af284dabab699c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '830e7259b185f6f5e4df5f31545063549c2a69b2', value: "folder", selected: true }, h("smoothly-icon", { key: 'abe9cdf7e8096b1b317bb6c62a9b274271479391', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '01607bfabfaa6df288dfd242c90e41af8e4fe5b2', value: "camera" }, h("smoothly-icon", { key: '71481f1e468a8e3dde815421f18ec6ee94ed7384', size: "small", name: "camera-outline" })), h("smoothly-item", { key: 'a059b96cdc6c6d7df8ca5185b81d53680c635b22', value: "boat" }, h("smoothly-icon", { key: 'ebe1246148aa4df73a62461f885e4b846e502836', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: '3eed3dc23316f18ab61b20a17ef3a602b8ebe7f2', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'bcfcc36500f746e17649c9ad9a553b88dc0823dc', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '041402c92d6c43264d811dccc9b8ab6004a42792' }, "Duration"), h("smoothly-input", { key: '451397df5c93c9bc71b5a13aa5a3d40e6e7dd42f', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '6fb8b8e8ea5b94a5fbdcca74b3852b75ef477a7c', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'f749886bfd3754449169b344a9a4ab667307cf7c', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'e764c3fb77af1bec66d25ceff68e056b71abab1e', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'f172bc9c83f9fe7ce5b9ecfea0044b75f56ed10d', value: "1" }, "January"), h("smoothly-item", { key: '96c7595c00c25af2268bb7c43a169d5393144ad7', value: "2" }, "February"), h("smoothly-item", { key: 'e21579e7624e69694d9d0f6983745bbd60ada2c4', value: "3" }, "March"), h("smoothly-item", { key: '275520d42fdd32638a056f2f2741dfe6d6ddcba8', value: "4" }, "April"), h("smoothly-item", { key: '82dd67d7d0d924e4de33e94d71649e26a09301d2', value: "5" }, "May"), h("smoothly-item", { key: '5cffa58de361f051701c3c3186796044f2161e12', value: "6" }, "June"), h("smoothly-item", { key: '0e77770c31ca08b02e9e3a83c6fff8d63883133e', value: "7" }, "July"), h("smoothly-item", { key: '9b5f73a28821e01f38f0053afe61fa1dede0d696', value: "8" }, "August"), h("smoothly-item", { key: '72476538eb178c1bf95959b00309404743a876b0', value: "9" }, "September"), h("smoothly-item", { key: '902a7c0912d452e45c82fea0d4a6d1a3295f198e', value: "10" }, "October"), h("smoothly-item", { key: '3a2c03804a5c7e3e167c5a2bbbde56dc8bc53968', value: "11" }, "November"), h("smoothly-item", { key: '989625138eed54605bac3166ef79917a4f79d8e0', value: "12" }, "December")), h("div", { key: 'ff78ad753dd34cecc701dfed050fbc58136d3eb5', class: "select-div-row" }, h("smoothly-input-select", { key: 'e5cfa6982c81566a19d49f5fbb788588685ab8a7', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '9d44c2ca9c8125a15852b7178eb68efbe2df4f80', value: "folder", selected: true }, h("smoothly-icon", { key: 'f896c293cdfbe9338e43a6f59be3b7296b02e0cf', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '8a4b9ef5168ca626ab3cbdfe1e49247cadf57fd4', value: "camera" }, h("smoothly-icon", { key: '1abb3aa62a61bcef158615aec38b48b7eef887ea', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '1757bb28f76cd58f463d862465f06c9200fcab1d', value: "boat" }, h("smoothly-icon", { key: 'd918ab79c5b3317df75a05af3ab30a5547ab14b3', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: '6a9a8a49d2229b485811c507d293a0d6ee9a768f', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: '03c5c0848a8c0030356d4a6d64e4285fbde85335', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: 'd0b1453dddf39408485b5a176bcee83b8c522887' }, "Duration"), h("smoothly-input", { key: 'a382be10eadad72c9cfe8853207e8874086200b9', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'f1fb79191017592953dcd1665c184ec22d04723a', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: 'a47dea26355bddf40255f0a88f72381b15b6fd39' }, "Integer with Min/Max"), h("smoothly-input", { key: '5708f669787dcfbe8fc18cd20ce1f43903331b3f', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: 'ba607eca48fd5d5c54da40c56f58f88b429a11c9', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '3899120a4588724eb5486c713e6b3592f9490106', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a83a35c1ddabdfe8338e5daa270642cd9a00cd7a', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '69838545fe489b84e54394656f3fec9993214768' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '2579f64feccd3ac373562867d7fc6c3a2fdc75b4', copyable: true, 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: 'd55229c36af45dbeab240431c674fd1fee27b49c' }, "Identifiers"), h("smoothly-input", { key: 'd7abf3ed7f1d633e0ba5abe6673a6e634a896738', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '8d600bc128529a9a6091fa18f0bea9bed1a74d7a', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '85a4a2f01be2b3fd39014833fd495958866838da', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '035f5f628c25f3d0398c9e8dc10390e5dacc0024', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '673f91b6cae1ba8b04b496e20e58d1a4d1c92965', type: "identifier-camel" }, "Camel"), h("h2", { key: '85a4af61aca5745d0125fb8305a8f640c0b5cdf1' }, "Input Alternatives"), h("smoothly-input", { key: 'e4b05f18bb44d4c7b9fdcef83551d9f8c591274b', type: "text", name: "name.last" }, h("smoothly-icon", { key: '2bdcd29f5ae945c37f5a7bb6e5587759bc567351', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '7b17f499a2061624e34fe89fb81d6cfbed54ccd6', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '58041447b7edc6ee18d0f4752c7efaf6767ad2af', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '70d890653d67ad30256b754bdbe3ffd0a5699044', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: 'a1836734b16b3cccdbc0af9b0d894ed478d45e0d', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '6c2a657437514116b1ae60210b289004b2e6a956', placeholder: "test" }), h("smoothly-input-submit", { key: '8e686ba1a74b8f9d85cc6778a314c793946d248e', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'a5b71808338b0ae5f06806bcd97142581a2a11f9' }, "Smoothly checkboxes"), h("div", { key: '309b348a380979cd64fdab4a66fd302a48b12b6f', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: 'efcc143919480eb5901b12800f01ea4847a2df14', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'a8835c00691583079ff65b59f750f59d470538c1', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'fefb3a5f492b1d39993ca89fc265b9312d0a75cb', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '916895ae8d167ad667109ea5a94ce72131e03cb6', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '26f2c7dccea2f4eb93fe8c82bd9291b2bc139c19', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '5c71f635dd09d730ba6048bbc4bdf3d40de58a05', name: "third-checkbox" }, "3rd")), h("h4", { key: '24380ae0e1f791eef55523ae58f818286b1414cf' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '376572dae3e2bb0dce2a68fe3503277a0681079b', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '149759fd8c4d501ad96744e01701142face0d6c2', name: "checkmark-circle", slot: "start" }), h("label", { key: '2032d793fc1c94de9cb856c06c64d0b03e6f77cd', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '50ccd0ae9fb6dfab3a27b574f7bee10ec96089e8', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '2f52388467ff677b40de490648d2c07cc3ee3b30', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'b2dee0bfdd05ccfff9995011e5cef0663241a214', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '3d990b0e3d8e629f00970acf2c8d1e30a79e4966', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '9f56ea2525dd6bc4a6a889b170f49b79542dd590', name: "radioSecondInput" }, h("label", { key: 'dac6544a61c1f064360e5dd2b5520f63e2cc3938', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'c4b32f24642b851f6b8da9c65df85df4294c598e', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'ca04462b6e8866f76edd48dcaac734b90f0a9b75', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6fa1b64cac9e953977a12687fa14a7218789f79c', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '4e32b3131c7becffb45d63a70926b8b0c2e1627f', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'a841d0bf0bdde25c84b224e9d77fab3e7db2898c', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'f5bf467213cdc73642fcfd2278ee8b963c1c1bc7', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '7c617d877ef45d0bd9a58066d3d185ae008f2eef' }), h("smoothly-input-color-demo", { key: 'ea9a64faece9ecf51e9d0f8e798f78d92e0590c3' }), h("smoothly-input-price-demo", { key: 'cc124983e4ca6aea3b925e2b229fcaac03565501' }), h("smoothly-back-to-top", { key: 'b01d5285d4fbf07edc5e955faa214f1fd40fd5d1' }))));
+            } }, "Duration"), h("h2", { key: '2224e744be0dfb8192386f2a08a944d319600280' }, "Integer with Min/Max"), h("smoothly-input", { key: '26fcb9bf164da2f83a100386808cfd5727175bf4', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '8ee501da3fc758cc2970b0b93182d3e1c5729c02', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '80d4edeac02fd8226a04212c42e8e785481b5872', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a8498e8f85c87ba9ced9ccd6a1f5e994799a107d', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '6dd77fb677d000d2e382349327c2e5c6ee67e7c5' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '6fbeb5a977b78e1dbe66b92932668815e9f600ad', copyable: true, 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: '83b8dc8ac743fa72c6f334f809684b1f6a0bf5c7' }, "Identifiers"), h("smoothly-input", { key: 'a65c59a558437c6e18cd4740e9df94a3c257c2cf', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '631abd7edb6960a18119c16574d371c08260fbfc', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'df16676d899bfde4a1468c96bb12449dde851cb4', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '2a64b770bbec79eca0afa7fdb363760c42ce01b6', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '7487ce186a7e38c04b55aa452c6efbb868619e33', type: "identifier-camel" }, "Camel"), h("h2", { key: '6e3d06ad450ff223e25e8fde16ac44625efbcfd7' }, "Input Alternatives"), h("smoothly-input", { key: 'f66b54779f289ff921bfb305098656faf1ef5967', type: "text", name: "name.last" }, h("smoothly-icon", { key: '07b6499f636deaf6d0fe4a46814b592ec7aadf1c', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '990c5c1602ce9a96d364ff6e30185acf9c870f0f', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '5b0490071861fdcb1000a1979ca576f66f1858c0', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'bf9b628ab1fe912c360105287058e091a4647240', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '4f4bce884b2f7d47754cfdb011df5435447b2ae7', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '0b5cd956e484c88b15a3d62c35fc7fd4dd0d46bc', placeholder: "test" }), h("smoothly-input-submit", { key: 'e667a4ffaf75260cc48ee2b22cc7404c1d73bc64', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'ecc157d150a1a5ad20f4df5e3d64d80b5a795008' }, "Smoothly checkboxes"), h("div", { key: '2aea2e75fc8f35670aa648556b5e30b5d8a5bc04', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '472235084f00c44cf3118b317e6579fd43dcfa9d', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '8f45a77effb835175ffba253261912d0b53ee43e', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'd7f5679aa180f8ca024addc3d40eaf7c565fe5d0', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'b6207c3257b127a68a434d38c075864a3a2149ee', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'bb0c7222fd9d7e808f87b6d35a6bcd599b123b96', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '5afcd1594a3c265107fa3ebebe191c2f82c30e55', name: "third-checkbox" }, "3rd")), h("h4", { key: '17957a312e3828b147be247315def9605f0185a9' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: 'a147903f974a4f763d17d252ccb51b3678ad75ba', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '8367aa48afb43583bdd9b0f7c61ef2bcd5cf1b1d', name: "checkmark-circle", slot: "start" }), h("label", { key: '6bf97cf9f4887f214b86d158bf2b352a1363bd34', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '2d1760ef0822651b4d89fba9344853c260aadcaf', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'e4642d09304e4976e6054b87911ca2ca6f386e19', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '50751bc9df8acb5c8c379274fea8bb977198e100', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '57a73175ceeedf91dab52933dad0a87469f5da8f', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '51d529c18a92e7d098a15c7d525c2ff27bfc802f', name: "radioSecondInput" }, h("label", { key: '6c9c9e9c5647044b512e84575cc1106408642339', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'dcf210f557372e84c8b912c909d7662ff6d5fed8', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'a40f1cc9428b7f049d8058ce4ec55668cf26efd4', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'f528e26eabb8ab6dc983a0dcea32150e604f7df2', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '8d902bd4ba919406778d9519c111abd58d872642', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '182bc1276c000a49b8bc840e4e0f6c81546966d5', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '9995702e88af793c4138a333331c62c850ac3898', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '917303cea8eec7e6ec2fb3c675a93747fa29d04c' }), h("smoothly-input-color-demo", { key: '909f49aa4ea18a1daca1bfedf8d51af587980db5' }), h("smoothly-input-price-demo", { key: '30058c7e1f43450c62d4a492a5697d2de02ed52b' }), h("smoothly-back-to-top", { key: 'ed3a78c7deb2a77b8d9ba9f3b39c8359fe13c2e2' }))));
     }
     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: '671d9e1e09c36db8094dfe6f1ab4dd682b28fe73' }, h("h2", { key: '85a013c5fe711cc2a9dc759707a4e3880530377a' }, "State demo on smoothly-input"), h("p", { key: '57296c7eb9eacc94aee6802d6808181af5d4190a' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'b41379a50dd8e97d98a5eebc38694e04d192414c' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '3fc4076c53a6a0571f5375974d8b7e9b2bfb4414', 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: '390be92c6e43aeaa2d5072b43539041ea794d51b', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '04d9d8a8d7f4f15310595ae7284d68732677647c' }, h("h2", { key: 'ef661b4242d5d65bd2c94efd07e55e440e348a41' }, "State demo on smoothly-input"), h("p", { key: '3d40ba72a84e1996c5220efb3bef10ec733c67f8' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '4dbd1f37ce6b5c362ddf546cd749776e56efd75c' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'dd71b6b572bae169fb112748cf48398392aa8b15', 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: '2b5bbb0519d029ef786a7be63c0166fd7c8f0807', 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

@@ -20,7 +20,7 @@ export class SmoothlyInputDemoStandard {
         });
     }
     render() {
-        return (h(Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "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: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), h("smoothly-input-select", { key: 'abb4be407f4b7ed51d5f796bdfce3b2b56c468a4', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '49f71dbb091094f79927778d18a0a58e70689f42', slot: "label" }, "Select"), h("smoothly-item", { key: '4b0e9cb4ce233c50a42fe249a3aef5648dc62558', value: "1" }, "January"), h("smoothly-item", { key: '38380b0f13ddeb83e2e19e0ac645dcdbacf6c4df', value: "2" }, "February"), h("smoothly-item", { key: '4f65be9a949261542191e3b484ad646e17f04987', value: "3" }, "March"), h("smoothly-item", { key: 'b6e9be5fbe31a12865717daddcd1a4039c942205', value: "4" }, "April"), h("smoothly-item", { key: '6c867101a115315e30bcf525d3fde4a8e49a5719', value: "5" }, "May"), h("smoothly-item", { key: 'ba4792a24e862aed054b356a444f9b791add16b1', value: "6" }, "June"), h("smoothly-item", { key: '9cc3a21ed384c2e2415311770925458dc13ac8d1', value: "7" }, "July"), h("smoothly-item", { key: '53cf8809b4dbc8256448b5c08a9d07f274e365a3', value: "8" }, "August"), h("smoothly-item", { key: '47a43966214064dab4d321cf9116b5cd87409dd3', value: "9" }, "September"), h("smoothly-item", { key: 'c71ceab27a3f86a5c2a27dc251b18f119f5ac623', value: "10" }, "October"), h("smoothly-item", { key: '7e824138f3b0b28a414465d69bb71c4d6786c3b5', value: "11" }, "November"), h("smoothly-item", { key: 'e7813efea82efe4cd4a8bfa54a7a55b21f53fa48', value: "12" }, "December"), h("smoothly-input-clear", { key: '7072ef8f9ac5b9a3028cbd2962560fc315f3d58b', slot: "end" })), h("div", { key: '3a1c4b4c2834bbb4921e330a77fe477c4741f181', class: "height" }), h("smoothly-input-checkbox", { key: '50499f2f1a4258a56caeb2266da17a9e881c7993', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: '550d44f73f1ae07461d73f66febd5138867e8247', slot: "end" })), h("div", { key: 'acb1b0eaab732df76e2c586e8f56ee6c81fbdd87', class: "height" }), h("smoothly-input-radio", { key: 'ec7f8b66f806e63a09320e2ebfcda71be001cd3b', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '00de1fcac1f811970b3f1154d6286dc7bd6036d8', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '35ea9212aa0f8eec4a96dedc406b428f58b848e6', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'db11c348c12a468a854c53c5f5f692ae7dcbaeb1', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '65707145740b173f4379c6bf5706a962a91bb021', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '883be5fef36a7e6fb16c57b30fcad312f1f25a6b', slot: "end" })), h("div", { key: '2cd8b1bb4ac90fd34732d2bfc34116bcc8429045', class: "height" }), h("smoothly-input-file", { key: '87739b41a33b7be135c5b3ed02648e702ac386ca', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '0d10524c66e0625ec86431a8c19dcedf83f47eac', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'a95f256a28cf294430040b6c6028921f0c620c8d', slot: "end" })), h("div", { key: '48650848e22a86ca8aa7501e09fbd8c5f0ce83ea', class: "height" }), h("smoothly-input-range", { key: 'b1e96735886d8e3e4b451ed17fa11ecada3e2302', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: 'ab7f71a498ce9404aacc63f0273bd3b715ddf12c', slot: "end" })), h("div", { key: '0ff2870912f9ae2e2b41ba9d982c906124ef2641', class: "height" }), h("smoothly-input-color", { key: 'fa4d779da5bfaea1e9644e721d9f6c4249949407', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '63674017888873443dc7b744114dae7996e79c52' }, "Color"), h("smoothly-input-clear", { key: '6344ad242592e19365961e80cc0814023eaa7dc2', slot: "end" })), h("div", { key: '16e0b71b1b6b1ee68813e3827b96bffe5ec63ef7', class: "height" }), h("smoothly-input-date", { key: '8ed46719b1c1e9a9085bd5decb2f0b76fda17e08', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'c268eeb0f99af102c6e1dc62b3d4a2ef01fb0982' }, "Date"), h("smoothly-input-clear", { key: '828d7b0e5719ee2c8e8ef5e431f19061dd1ade2b', slot: "end" })), h("div", { key: 'fe422ed5cc16bbb664f5dc190e59d05027b9ab6c', class: "height" }), h("smoothly-input-date-time", { key: 'f45a43382ca831e1755ef2d9ee3ff2529f52e092', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '000c95f6c81a9c8f84c88e258804c190de62a085', slot: "end" })), h("div", { key: 'e203612e082b43846696f0e8f25ba1633c8a40c0', class: "height" }), h("smoothly-input-date-range", { key: '0a813285a0bb45af8a02e66bd7f336218ba2bf3f', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '8c4b143da14013a4e7869cc09ac125fd978ba652' }, "Date Range"), h("smoothly-input-clear", { key: '71942a3eb11884fd20b5dd66f93bfebfaaaa917e', slot: "end" })), h("div", { key: '6ddfef156eb2dcbb511742abe5e03f0dec1e78fa', class: "height" }))));
+        return (h(Host, { key: '042854455ad1e70f8d47329dd18ad5b2d9be5b55' }, h("div", { key: '71a0ff91b51faeea2acb7bbe6ff33103b4f78101', class: "description" }, h("h2", { key: '91247326c353bfe7a42e0f7523cabf7d42d27574' }, "Input Standard"), h("p", { key: '1d778222d0a0be0fc9fedc8fba5058033f69ccdc' }, "Height of input should be ", h("code", { key: 'c6c2dbd89c53fedca0db13ea65acddd9a504d567' }, "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: '97f476e2d1b48ca72c588f0dc2811238afa62d85', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: 'e638fd412458db2e89e75ed1e3356ebd21814efc', name: "color" }, h("span", { key: 'ab2049a30551b48bab1b1a03ee69af67d9f2fc90', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'e58405aee03c66669786693560afbf7ea6ecbe0c', slot: "end" })), h("smoothly-input-select", { key: '2016e5bcf4dd6b6eb76d8d2f9691c0075cb18ea0', name: "looks" }, h("span", { key: '8bc09574aafe3e42a577b9546c7b70c8ae7eb93a', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'f6ed7c89644db7b39adcdc1bdd3af60d64ffef49', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'bffa6d1a6f672a9338e78134dc8ba1103c09f0f8', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: '581a628a2ed495b04e29e1552012b1496ded48e6', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: 'ed3fb7bf07743e792097626b082c825fe07fdb44', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '8f6910965617dc247a089284fdf05f9f4b32e028', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '507b49b5729dbc488916542e18c5a747ac88448f', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: 'e28d0d2d9d64b11f6088d41dae93b1e3bccfbe19', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: 'ee46861ee1cfe967013b017991fec0da41ec178a', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: '148dc88331c154d77477b48b74a9d2fcb6e7372f', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '7301184b32532915b8b6c67ecccfe708888ac0c1', class: "width" }, "width: 100%"), h("div", { key: '1651b57209507da195429a8cde6e4cd1d081a426', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '0f999a06660d7e29b2967db7df972ea1d5b2f70f', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '842330c6efc43de5d2afc835577b67fc8575ad4d' }, "Text"), h("smoothly-input-clear", { key: '78cb65424a87ddd1b22e10844270494af51ef9cf', slot: "end" })), h("div", { key: '31103c02b0cdf3d5f68f8bd95010554c3571dea1', class: "height" }), h("smoothly-input-select", { key: '649fadb127e8ac6454b60dcb39ad26f8b665185d', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '229d74b36e98d2dce9fb51ae34a0fdf6ea3ad933', slot: "label" }, "Select"), h("smoothly-item", { key: '6f71feb15bb43c427f1e6667958eb64104a3319d', value: "1" }, "January"), h("smoothly-item", { key: 'c9468227d2718f2d87e373cfcf1c0021bf7c9e6a', value: "2" }, "February"), h("smoothly-item", { key: '26fa8a4c129189dada418bdc55eb420b4f6359be', value: "3" }, "March"), h("smoothly-item", { key: 'e966229667d4bd1072501c48cfad6d8456c8488c', value: "4" }, "April"), h("smoothly-item", { key: 'fa351f3fb2dba399ebffd034a7ab41821ad03c85', value: "5" }, "May"), h("smoothly-item", { key: 'f347f4a74d4a8f8f53fa656eff9ad94bb2d0e855', value: "6" }, "June"), h("smoothly-item", { key: 'b77e47c6a0d99532170498e5cd816977aaf15f0c', value: "7" }, "July"), h("smoothly-item", { key: 'f178bd35f721906e9adb7f33ad4a8dc13c093eb9', value: "8" }, "August"), h("smoothly-item", { key: '8b516209123938ae2b264164682628bff9e7182f', value: "9" }, "September"), h("smoothly-item", { key: '90c9806ae155808061562eb4903374c8d0f6437f', value: "10" }, "October"), h("smoothly-item", { key: 'c81cd76d4773d7382c0dd2091493bbb5747c26f8', value: "11" }, "November"), h("smoothly-item", { key: '4129e63197a9603181b72c2bcd5f00efe5facf4a', value: "12" }, "December"), h("smoothly-input-clear", { key: 'a8d437ce57fac20f4e8a23fb7ab945285e29ab78', slot: "end" })), h("div", { key: '0f72b65ec6e9dd55e5009f8889803745a7cebe0a', class: "height" }), h("smoothly-input-checkbox", { key: '2ecbfe7fce0fe4c5360d20e9088240cd1cb3b2d9', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: '9faea34bfbe730854196cbc62ae7930b078bad15', slot: "end" })), h("div", { key: '14eff380b23a908840341e8ac919e366f61b4db5', class: "height" }), h("smoothly-input-radio", { key: '007cbb861d302fb7fbfec986cb8ce51134a89521', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'be062990b3871568cb15cc1b447478ddb1741224', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '6b9f1c542b7d8fbf400c0d983459d8decd29ea3f', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'e76fc206b83574830f8dc10cf21a8e5963ae4994', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '706d081877e1485f636ee168fbc5c951b68698a3', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'c4a213b756017473a7a9a02d14a7c6f5124eb46c', slot: "end" })), h("div", { key: '904b170b3a023c4b3788fb2eb996b72fd9456c01', class: "height" }), h("smoothly-input-file", { key: 'db055982178bd556b1788059d69a4ef043e04b19', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '259a9a65c8cf798886fbb51e21c08c396af869ba', slot: "label" }, "File"), h("smoothly-input-clear", { key: '2b0ed1648df1c045f9b6ef0188c8f8eb77e3f547', slot: "end" })), h("div", { key: 'aa0a3961fdffa760f336cf33f6005892bf3d463f', class: "height" }), h("smoothly-input-range", { key: '687fc6de0e91cb891e27753268246cd224ce53b7', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: 'f3c5299f4d054286e6296f8cbbd06d257a0dc807', slot: "end" })), h("div", { key: 'a7e96fd240e2d06d460978504a8178a4620fa671', class: "height" }), h("smoothly-input-color", { key: '2b41b21090701c556de33d1345be29ba18613a50', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '7369555e1c40afb8e0d4575ee7e0b3a17aa07b10' }, "Color"), h("smoothly-input-clear", { key: 'd1130c6efb044af66bb1bea1c820b0e696f7655b', slot: "end" })), h("div", { key: 'ae0d6336ac30318029efe09259602d9affd5f6a5', class: "height" }), h("smoothly-input-date", { key: 'cf664740016f747362efd19abe6eb22c49438c32', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'ab1940b43df90302347705f715c7a5adb31daf0c' }, "Date"), h("smoothly-input-clear", { key: 'e0d0d6d4bba58e2681f1e5ed8e542ce12b1b6a5d', slot: "end" })), h("div", { key: 'c8c7391b70036ba134cc150ef7256a6f3ede2ca1', class: "height" }), h("smoothly-input-date-time", { key: 'de72c684d8348a38f1677d7dfbf2f902928e7945', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '861fa30781245edbf8f088a37731faabf7a9b4f8', slot: "end" })), h("div", { key: 'da8d19acadc3e79480b45a07d3864ebad6282ae0', class: "height" }), h("smoothly-input-date-range", { key: '61f62fd05e1c39a5117f771eb9d1810c5b16280a', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'b61c8327dcf01c0ec529ceed88fd4afd90702e3d' }, "Date Range"), h("smoothly-input-clear", { key: '4af2bde87290de54492949e5140aabbcf7030ce0', slot: "end" })), h("div", { key: '48e17be0054c430456fbf6557fe6cafa4fd743fa', class: "height" }))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }