smoothly 1.0.0-alpha.213 → 1.0.0-alpha.215

package/dist/cjs/loader.cjs.js

@@ -15,7 +15,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"smoothly-addresses.cjs\",[[2,\"smoothly-addresses\",{\"value\":[16],\"editable\":[16]}]]],[\"smoothly-checkbox.cjs\",[[6,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"unavailable\":[516],\"disabled\":[516],\"name\":[1],\"value\":[8],\"t\":[32],\"toggle\":[64],\"clear\":[64]}]]],[\"smoothly-accordion.cjs\",[[6,\"smoothly-accordion\",{\"value\":[1025],\"removeItem\":[64]},[[0,\"smoothlyOpen\",\"handleOpenClose\"],[0,\"smoothlyClose\",\"handleOpenClose\"],[0,\"smoothlyAccordionItemWillLoad\",\"onAccordionItemDidLoad\"]]]]],[\"smoothly-accordion-item.cjs\",[[6,\"smoothly-accordion-item\",{\"name\":[1],\"brand\":[1],\"open\":[1540]}]]],[\"smoothly-color.cjs\",[[6,\"smoothly-color\",{\"color\":[513]}]]],[\"smoothly-country.cjs\",[[2,\"smoothly-country\",{\"value\":[1],\"text\":[1],\"language\":[32]}]]],[\"smoothly-display-date-time.cjs\",[[2,\"smoothly-display-date-time\",{\"datetime\":[1]}]]],[\"smoothly-google-font.cjs\",[[2,\"smoothly-google-font\",{\"value\":[1]}]]],[\"smoothly-reorder.cjs\",[[0,\"smoothly-reorder\"]]],[\"smoothly-trigger-sink.cjs\",[[6,\"smoothly-trigger-sink\",{\"context\":[16],\"destination\":[1],\"filter\":[1]},[[0,\"trigger\",\"TriggerListener\"]]]]],[\"smoothly-trigger-source.cjs\",[[6,\"smoothly-trigger-source\",{\"listen\":[1]}]]],[\"smoothly-app_80.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",{\"duration\":[32]}],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[0,\"smoothly-button-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"home\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32],\"selectRoom\":[64]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-dialog-demo\"],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"disabled\":[516],\"path\":[1],\"to\":[1],\"selected\":[1540],\"content\":[16],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-select-demo\"],[2,\"smoothly-theme-colors\"],[6,\"smoothly-theme-picker\",{\"element\":[1]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-demo-filtered\",{\"criteria\":[32],\"cats\":[32],\"selector\":[32]},[[0,\"smoothlyFilter\",\"onFilterUpdate\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"]]],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"counter\":[32],\"data\":[32],\"change\":[32]},[[0,\"smoothlyFormSubmit\",\"submitHandler\"]]],[6,\"smoothly-input-date\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"open\":[1028],\"max\":[1025],\"min\":[1025],\"showLabel\":[516,\"show-label\"],\"disabled\":[1028],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyDateSet\",\"dateSetHandler\"]]],[2,\"smoothly-input-date-range\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"open\":[1028],\"showLabel\":[516,\"show-label\"],\"labelStart\":[1,\"label-start\"],\"labelEnd\":[1,\"label-end\"],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyStartChange\",\"onStartChanged\"],[0,\"smoothlyEndChange\",\"onEndChanged\"],[0,\"smoothlyDateRangeSet\",\"onDateRangeSet\"]]],[6,\"smoothly-notifier\",{\"notices\":[32]},[[0,\"notice\",\"onNotice\"],[0,\"remove\",\"onRemove\"]]],[6,\"smoothly-button-confirm\",{\"color\":[1],\"name\":[513],\"doubleClickTime\":[2,\"double-click-time\"],\"expand\":[513],\"fill\":[1],\"disabled\":[516],\"shape\":[1],\"type\":[1],\"size\":[1],\"clickTimeStamp\":[32]}],[6,\"smoothly-dialog\",{\"color\":[513],\"open\":[1540],\"closable\":[516],\"header\":[513]},[[0,\"trigger\",\"TriggerListener\"]]],[2,\"smoothly-input-color\",{\"value\":[1025],\"looks\":[1537],\"name\":[1],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]]],[2,\"smoothly-burger\",{\"visible\":[1540],\"open\":[1540],\"mediaQuery\":[513,\"media-query\"],\"history\":[32]},[[0,\"click\",\"clickHandler\"],[9,\"resize\",\"resizeHandler\"]]],[6,\"smoothly-input-checkbox\",{\"name\":[1],\"value\":[8],\"checked\":[1028],\"looks\":[1537],\"disabled\":[516],\"clear\":[64]}],[6,\"smoothly-input-file\",{\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64]}],[6,\"smoothly-input-radio-item\",{\"value\":[1032],\"selected\":[1028],\"looks\":[1537],\"name\":[1025]}],[6,\"smoothly-summary\",{\"open\":[1540],\"color\":[1],\"fill\":[1],\"size\":[1]}],[2,\"smoothly-theme-color\",{\"color\":[1]}],[1,\"smoothly-toggle-switch\",{\"checkmark\":[516],\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"color\":[513],\"fill\":[513]}],[0,\"smoothly-urlencoded\",{\"data\":[1]}],[2,\"smoothly-display-amount\",{\"amount\":[8],\"currency\":[1],\"toInteger\":[4,\"to-integer\"]}],[2,\"smoothly-frame\",{\"url\":[1],\"name\":[1],\"origin\":[1],\"send\":[64]}],[6,\"smoothly-input-edit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-radio\",{\"changed\":[1028],\"value\":[1032],\"looks\":[1537],\"clearable\":[4],\"readonly\":[1540],\"name\":[1],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64]},[[0,\"smoothlyRadioButtonRegister\",\"handleRegister\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"],[0,\"smoothlySelect\",\"smoothlyRadioInputHandler\"]]],[6,\"smoothly-input-range\",{\"value\":[1026],\"looks\":[1537],\"min\":[2],\"max\":[2],\"name\":[1],\"labelText\":[1,\"label-text\"],\"step\":[8],\"outputSide\":[1,\"output-side\"],\"clear\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[6,\"smoothly-input-reset\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-label\",{\"hue\":[2],\"description\":[1],\"shape\":[513]}],[6,\"smoothly-popup\",{\"visible\":[1540],\"direction\":[1537],\"cssVariables\":[32]}],[6,\"smoothly-quiet\",{\"color\":[1]}],[2,\"smoothly-skeleton\",{\"widths\":[16],\"width\":[1025],\"color\":[1],\"period\":[2],\"distance\":[1],\"align\":[513]}],[2,\"smoothly-svg\",{\"url\":[513],\"size\":[513],\"color\":[1]}],[6,\"smoothly-toggle\",{\"selected\":[1540],\"shape\":[513],\"disabled\":[516],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-filter-picker\",{\"label\":[1],\"property\":[1],\"multiple\":[4]},[[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"]]],[6,\"smoothly-filter\",{\"detailChildren\":[32],\"criteria\":[32],\"expanded\":[32]},[[0,\"smoothlyFilterUpdate\",\"updateHandler\"],[0,\"smoothlyFilterManipulate\",\"manipulateHandler\"],[0,\"smoothlyFilterField\",\"filterFieldHandler\"]]],[6,\"smoothly-filter-input\",{\"property\":[1],\"placeholder\":[1],\"needle\":[32]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]]],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[2,\"smoothly-filter-toggle\",{\"icon\":[1],\"properties\":[16],\"toolTip\":[1,\"tool-tip\"],\"not\":[4],\"flip\":[516],\"active\":[1028]}],[6,\"smoothly-lazy\",{\"show\":[1028],\"content\":[16]}],[6,\"smoothly-input-clear\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-tab\",{\"label\":[1],\"open\":[1540]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-tab-switch\",{\"selectedElement\":[32]},[[0,\"expansionOpen\",\"openChanged\"]]],[6,\"smoothly-table-expandable-row\",{\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-theme-color-variant\",{\"color\":[513],\"variant\":[513]}],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[2,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"firstSelected\":[32]}],[2,\"smoothly-filter-field\",{\"criteria\":[8],\"clear\":[64]}],[6,\"smoothly-table-cell\"],[6,\"smoothly-table-expandable-cell\",{\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"click\",\"onClick\"],[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-load-more\",{\"offset\":[1],\"name\":[1],\"multiple\":[4]}],[6,\"smoothly-table\",{\"root\":[1540],\"color\":[1537],\"align\":[513],\"open\":[1540]},[[0,\"smoothlyExpandableLoad\",\"handleExpandableLoaded\"],[0,\"smoothlyExpandableChange\",\"handleExpandableState\"],[0,\"smoothlySpotlightChange\",\"handleSpotlightState\"],[0,\"smoothlyNestedTable\",\"handleNestedTable\"],[0,\"smoothlyExpansionLoad\",\"handleEvents\"],[0,\"smoothlyExpansionOpen\",\"handleEvents\"]]],[6,\"smoothly-table-footer\"],[6,\"smoothly-table-header\",{\"name\":[1]}],[6,\"smoothly-table-row\",{\"open\":[1540]},[[0,\"smoothlyExpansionLoad\",\"onExpansionLoad\"],[0,\"smoothlyExpandableChange\",\"onExpansionChange\"],[0,\"smoothlyExpansionOpen\",\"onExpansionOpen\"]]],[2,\"smoothly-input-month\",{\"value\":[1025]}],[2,\"smoothly-display\",{\"type\":[1],\"value\":[8],\"currency\":[1],\"country\":[1],\"format\":[16]}],[6,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-picker\",{\"looks\":[1537],\"name\":[513],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[516],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"readonly\":[1540],\"looks\":[513],\"name\":[1],\"method\":[1],\"action\":[1],\"processing\":[1540],\"prevent\":[4],\"changed\":[1028],\"listen\":[64],\"submit\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlySubmit\",\"smoothlySubmitHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyFormDisable\",\"smoothlyFormDisableHandler\"]]],[6,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[6,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-picker-menu\",{\"looks\":[1],\"open\":[516],\"multiple\":[516],\"mutable\":[516],\"readonly\":[516],\"validator\":[16],\"backend\":[32],\"options\":[32],\"created\":[32],\"search\":[32],\"valid\":[32],\"display\":[32],\"flip\":[32],\"flipChecked\":[32]},[[9,\"scroll\",\"scrollHandler\"],[0,\"smoothlyPickerOptionLoad\",\"optionLoadHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[0,\"smoothlySlotEmpty\",\"emptyDisplayHandler\"]]],[6,\"smoothly-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[16],\"menuHeight\":[1,\"menu-height\"],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"smoothlyItemSelect\",\"onItemSelect\"],[0,\"keydown\",\"onKeyDown\"]]],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"required\":[516],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[6,\"smoothly-input\",{\"color\":[1537],\"delay\":[2],\"looks\":[1537],\"name\":[513],\"value\":[1032],\"type\":[513],\"required\":[516],\"showLabel\":[516,\"show-label\"],\"autocomplete\":[4],\"placeholder\":[513],\"disabled\":[4],\"readonly\":[1540],\"currency\":[513],\"changed\":[1028],\"formatter\":[32],\"initialValue\":[32],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"],\"document\":[32]}]]],[\"smoothly-address-display.cjs\",[[2,\"smoothly-address-display\",{\"value\":[16],\"editable\":[4]}]]],[\"smoothly-address.cjs\",[[2,\"smoothly-address\",{\"value\":[16],\"editable\":[4]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"smoothly-addresses.cjs\",[[2,\"smoothly-addresses\",{\"value\":[16],\"editable\":[16]}]]],[\"smoothly-checkbox.cjs\",[[6,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"unavailable\":[516],\"disabled\":[516],\"name\":[1],\"value\":[8],\"t\":[32],\"toggle\":[64],\"clear\":[64]}]]],[\"smoothly-accordion.cjs\",[[6,\"smoothly-accordion\",{\"value\":[1025],\"removeItem\":[64]},[[0,\"smoothlyOpen\",\"handleOpenClose\"],[0,\"smoothlyClose\",\"handleOpenClose\"],[0,\"smoothlyAccordionItemWillLoad\",\"onAccordionItemDidLoad\"]]]]],[\"smoothly-accordion-item.cjs\",[[6,\"smoothly-accordion-item\",{\"name\":[1],\"brand\":[1],\"open\":[1540]}]]],[\"smoothly-color.cjs\",[[6,\"smoothly-color\",{\"color\":[513]}]]],[\"smoothly-country.cjs\",[[2,\"smoothly-country\",{\"value\":[1],\"text\":[1],\"language\":[32]}]]],[\"smoothly-display-date-time.cjs\",[[2,\"smoothly-display-date-time\",{\"datetime\":[1]}]]],[\"smoothly-google-font.cjs\",[[2,\"smoothly-google-font\",{\"value\":[1]}]]],[\"smoothly-reorder.cjs\",[[0,\"smoothly-reorder\"]]],[\"smoothly-trigger-sink.cjs\",[[6,\"smoothly-trigger-sink\",{\"context\":[16],\"destination\":[1],\"filter\":[1]},[[0,\"trigger\",\"TriggerListener\"]]]]],[\"smoothly-trigger-source.cjs\",[[6,\"smoothly-trigger-source\",{\"listen\":[1]}]]],[\"smoothly-app_80.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",{\"duration\":[32]}],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[0,\"smoothly-button-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"home\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32],\"selectRoom\":[64]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-dialog-demo\"],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"disabled\":[516],\"path\":[1],\"to\":[1],\"selected\":[1540],\"content\":[16],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-select-demo\"],[2,\"smoothly-theme-colors\"],[6,\"smoothly-theme-picker\",{\"element\":[1]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-demo-filtered\",{\"criteria\":[32],\"cats\":[32],\"selector\":[32]},[[0,\"smoothlyFilter\",\"onFilterUpdate\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"]]],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"counter\":[32],\"data\":[32],\"change\":[32]},[[0,\"smoothlyFormSubmit\",\"submitHandler\"]]],[6,\"smoothly-input-date\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"open\":[1028],\"max\":[1025],\"min\":[1025],\"showLabel\":[516,\"show-label\"],\"disabled\":[1028],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyDateSet\",\"dateSetHandler\"]]],[2,\"smoothly-input-date-range\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"open\":[1028],\"showLabel\":[516,\"show-label\"],\"labelStart\":[1,\"label-start\"],\"labelEnd\":[1,\"label-end\"],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyStartChange\",\"onStartChanged\"],[0,\"smoothlyEndChange\",\"onEndChanged\"],[0,\"smoothlyDateRangeSet\",\"onDateRangeSet\"]]],[6,\"smoothly-notifier\",{\"notices\":[32]},[[0,\"notice\",\"onNotice\"],[0,\"remove\",\"onRemove\"]]],[6,\"smoothly-button-confirm\",{\"color\":[1],\"name\":[513],\"doubleClickTime\":[2,\"double-click-time\"],\"expand\":[513],\"fill\":[1],\"disabled\":[516],\"shape\":[1],\"type\":[1],\"size\":[1],\"clickTimeStamp\":[32]}],[6,\"smoothly-dialog\",{\"color\":[513],\"open\":[1540],\"closable\":[516],\"header\":[513]},[[0,\"trigger\",\"TriggerListener\"]]],[2,\"smoothly-input-color\",{\"value\":[1025],\"looks\":[1537],\"name\":[1],\"clear\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]]],[2,\"smoothly-burger\",{\"visible\":[1540],\"open\":[1540],\"mediaQuery\":[513,\"media-query\"],\"history\":[32]},[[0,\"click\",\"clickHandler\"],[9,\"resize\",\"resizeHandler\"]]],[6,\"smoothly-input-checkbox\",{\"name\":[1],\"changed\":[1028],\"readonly\":[1540],\"checked\":[1028],\"value\":[4],\"looks\":[1537],\"disabled\":[516],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64]}],[6,\"smoothly-input-file\",{\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64]}],[6,\"smoothly-input-radio-item\",{\"value\":[1032],\"selected\":[1028],\"looks\":[1537],\"name\":[1025]}],[6,\"smoothly-summary\",{\"open\":[1540],\"color\":[1],\"fill\":[1],\"size\":[1]}],[2,\"smoothly-theme-color\",{\"color\":[1]}],[1,\"smoothly-toggle-switch\",{\"checkmark\":[516],\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"color\":[513],\"fill\":[513]}],[0,\"smoothly-urlencoded\",{\"data\":[1]}],[2,\"smoothly-display-amount\",{\"amount\":[8],\"currency\":[1],\"toInteger\":[4,\"to-integer\"]}],[2,\"smoothly-frame\",{\"url\":[1],\"name\":[1],\"origin\":[1],\"send\":[64]}],[6,\"smoothly-input-edit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-radio\",{\"changed\":[1028],\"value\":[1032],\"looks\":[1537],\"clearable\":[4],\"readonly\":[1540],\"name\":[1],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64]},[[0,\"smoothlyRadioButtonRegister\",\"handleRegister\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"],[0,\"smoothlySelect\",\"smoothlyRadioInputHandler\"]]],[6,\"smoothly-input-range\",{\"value\":[1026],\"looks\":[1537],\"min\":[2],\"max\":[2],\"name\":[1],\"labelText\":[1,\"label-text\"],\"step\":[8],\"outputSide\":[1,\"output-side\"],\"clear\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[6,\"smoothly-input-reset\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-label\",{\"hue\":[2],\"description\":[1],\"shape\":[513]}],[6,\"smoothly-popup\",{\"visible\":[1540],\"direction\":[1537],\"cssVariables\":[32]}],[6,\"smoothly-quiet\",{\"color\":[1]}],[2,\"smoothly-skeleton\",{\"widths\":[16],\"width\":[1025],\"color\":[1],\"period\":[2],\"distance\":[1],\"align\":[513]}],[2,\"smoothly-svg\",{\"url\":[513],\"size\":[513],\"color\":[1]}],[6,\"smoothly-toggle\",{\"selected\":[1540],\"shape\":[513],\"disabled\":[516],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-filter-picker\",{\"label\":[1],\"property\":[1],\"multiple\":[4]},[[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"]]],[6,\"smoothly-filter\",{\"detailChildren\":[32],\"criteria\":[32],\"expanded\":[32]},[[0,\"smoothlyFilterUpdate\",\"updateHandler\"],[0,\"smoothlyFilterManipulate\",\"manipulateHandler\"],[0,\"smoothlyFilterField\",\"filterFieldHandler\"]]],[6,\"smoothly-filter-input\",{\"property\":[1],\"placeholder\":[1],\"needle\":[32]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]]],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[2,\"smoothly-filter-toggle\",{\"icon\":[1],\"properties\":[16],\"toolTip\":[1,\"tool-tip\"],\"not\":[4],\"flip\":[516],\"active\":[1028]}],[6,\"smoothly-lazy\",{\"show\":[1028],\"content\":[16]}],[6,\"smoothly-input-clear\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-tab\",{\"label\":[1],\"open\":[1540]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-tab-switch\",{\"selectedElement\":[32]},[[0,\"expansionOpen\",\"openChanged\"]]],[6,\"smoothly-table-expandable-row\",{\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-theme-color-variant\",{\"color\":[513],\"variant\":[513]}],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[2,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"firstSelected\":[32]}],[2,\"smoothly-filter-field\",{\"criteria\":[8],\"clear\":[64]}],[6,\"smoothly-table-cell\"],[6,\"smoothly-table-expandable-cell\",{\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"click\",\"onClick\"],[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-load-more\",{\"offset\":[1],\"name\":[1],\"multiple\":[4]}],[6,\"smoothly-table\",{\"root\":[1540],\"color\":[1537],\"align\":[513],\"open\":[1540]},[[0,\"smoothlyExpandableLoad\",\"handleExpandableLoaded\"],[0,\"smoothlyExpandableChange\",\"handleExpandableState\"],[0,\"smoothlySpotlightChange\",\"handleSpotlightState\"],[0,\"smoothlyNestedTable\",\"handleNestedTable\"],[0,\"smoothlyExpansionLoad\",\"handleEvents\"],[0,\"smoothlyExpansionOpen\",\"handleEvents\"]]],[6,\"smoothly-table-footer\"],[6,\"smoothly-table-header\",{\"name\":[1]}],[6,\"smoothly-table-row\",{\"open\":[1540]},[[0,\"smoothlyExpansionLoad\",\"onExpansionLoad\"],[0,\"smoothlyExpandableChange\",\"onExpansionChange\"],[0,\"smoothlyExpansionOpen\",\"onExpansionOpen\"]]],[2,\"smoothly-input-month\",{\"value\":[1025]}],[2,\"smoothly-display\",{\"type\":[1],\"value\":[8],\"currency\":[1],\"country\":[1],\"format\":[16]}],[6,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-picker\",{\"looks\":[1537],\"name\":[513],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[516],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"readonly\":[1540],\"looks\":[513],\"name\":[1],\"method\":[1],\"action\":[1],\"processing\":[1540],\"prevent\":[4],\"changed\":[1028],\"listen\":[64],\"submit\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlySubmit\",\"smoothlySubmitHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyFormDisable\",\"smoothlyFormDisableHandler\"]]],[6,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[6,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-picker-menu\",{\"looks\":[1],\"open\":[516],\"multiple\":[516],\"mutable\":[516],\"readonly\":[516],\"validator\":[16],\"backend\":[32],\"options\":[32],\"created\":[32],\"search\":[32],\"valid\":[32],\"display\":[32],\"flip\":[32],\"flipChecked\":[32]},[[9,\"scroll\",\"scrollHandler\"],[0,\"smoothlyPickerOptionLoad\",\"optionLoadHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[0,\"smoothlySlotEmpty\",\"emptyDisplayHandler\"]]],[6,\"smoothly-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"showSelected\":[1540,\"show-selected\"],\"readonly\":[1540],\"clearable\":[4],\"changed\":[1028],\"placeholder\":[8],\"menuHeight\":[1,\"menu-height\"],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"listen\":[64],\"reset\":[64],\"clear\":[64],\"edit\":[64]},[[0,\"click\",\"onClick\"],[0,\"smoothlyItemSelect\",\"onItemSelect\"],[0,\"keydown\",\"onKeyDown\"]]],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"required\":[516],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[6,\"smoothly-input\",{\"color\":[1537],\"delay\":[2],\"looks\":[1537],\"name\":[513],\"value\":[1032],\"type\":[513],\"required\":[516],\"showLabel\":[516,\"show-label\"],\"autocomplete\":[4],\"placeholder\":[513],\"disabled\":[4],\"readonly\":[1540],\"currency\":[513],\"changed\":[1028],\"formatter\":[32],\"initialValue\":[32],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"],\"document\":[32]}]]],[\"smoothly-address-display.cjs\",[[2,\"smoothly-address-display\",{\"value\":[16],\"editable\":[4]}]]],[\"smoothly-address.cjs\",[[2,\"smoothly-address\",{\"value\":[16],\"editable\":[4]}]]]]"), options);
   });
 };
 

package/dist/cjs/smoothly-app_80.cjs.entry.js

@@ -8520,7 +8520,7 @@ function getLocale() {
 }
 SmoothlyInput.style = styleCss$S;
 
-const styleCss$R = ".sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5em;padding:0 .4em;box-sizing:border-box}smoothly-icon.sc-smoothly-input-checkbox{position:absolute}.sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;height:1.2em;width:1.2em;border:1px solid black;display:block;z-index:1}[disabled].sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h smoothly-icon.sc-smoothly-input-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}";
+const styleCss$R = ".sc-smoothly-input-checkbox-h{box-sizing:border-box}.sc-smoothly-input-checkbox-h[looks=\"border\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-checkbox-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"line\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-checkbox-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"grid\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{border:none}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within) input.sc-smoothly-input-checkbox{background:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5em;padding:.6em;box-sizing:border-box;background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1}.sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.2em;width:1.2em;border:1px solid black;display:block}.sc-smoothly-input-checkbox-h:not([readonly]) smoothly-icon.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]) input.sc-smoothly-input-checkbox{cursor:pointer}[disabled].sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h smoothly-icon.sc-smoothly-input-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}";
 
 const SmoothlyInputCheckbox = class {
   constructor(hostRef) {
@@ -8528,29 +8528,50 @@ const SmoothlyInputCheckbox = class {
     this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
     this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
     this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
+    this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
+    this.listener = {};
     this.name = undefined;
-    this.value = undefined;
+    this.changed = false;
+    this.readonly = false;
     this.checked = false;
+    this.value = this.checked;
     this.looks = "plain";
     this.disabled = undefined;
   }
   componentWillLoad() {
-    this.smoothlyInput.emit({ [this.name]: this.checked ? this.value : undefined });
+    var _a, _b;
+    this.initialValue = this.checked;
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
     this.smoothlyInputLoad.emit(() => {
       return;
     });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   async clear() {
-    !this.disabled && (this.checked = false);
+    !this.disabled && !this.readonly && (this.checked = false);
+  }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
+  }
+  async edit(editable) {
+    this.readonly = !editable;
+  }
+  async reset() {
+    this.checked = this.initialValue;
   }
   elementCheck() {
-    this.smoothlyInput.emit({ [this.name]: this.checked ? this.value : undefined });
+    var _a, _b;
+    this.changed = this.initialValue !== this.checked;
+    this.smoothlyInput.emit({ [this.name]: this.checked });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
-  inputHandler(event) {
-    !this.disabled && event.target instanceof HTMLInputElement && (this.checked = event.target.checked);
+  inputHandler() {
+    !this.disabled && !this.readonly && (this.checked = !this.checked);
   }
   render() {
-    return (index.h(index.Host, null, this.checked && index.h("smoothly-icon", { name: "checkmark-outline", size: "tiny" }), index.h("input", { type: "checkbox", checked: this.checked, onClick: event => this.inputHandler(event) }), index.h("label", null, index.h("slot", null))));
+    return (index.h(index.Host, { onClick: () => this.inputHandler() }, index.h("input", { type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { name: "checkmark-outline", size: "tiny" }), index.h("label", null, index.h("slot", null))));
   }
   static get watchers() { return {
     "checked": ["elementCheck"]
@@ -8780,7 +8801,7 @@ const InputDateRange = class {
 };
 InputDateRange.style = styleCss$N;
 
-const styleCss$M = "smoothly-input-demo{display:block;margin:2em;margin-bottom:20rem}smoothly-button{margin:1em}.checkbox-group{display:flex;gap:1.5em;align-items:center}";
+const styleCss$M = "smoothly-input-demo{display:block;margin:2em;margin-bottom:20rem}smoothly-button{margin:1em}.checkbox-group{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--background-color))}";
 
 const SmoothlyInputDemo = class {
   constructor(hostRef) {
@@ -8788,7 +8809,7 @@ const SmoothlyInputDemo = class {
     this.duration = { hours: 8 };
   }
   render() {
-    return (index.h(index.Host, null, index.h("h2", null, "Delayed"), index.h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), index.h("h2", null, "Editable form and Input with Clear and Reset"), index.h("smoothly-form", { looks: "grid", readonly: true }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "create-outline", fill: "solid", size: "tiny" })), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "refresh-outline", fill: "solid", size: "tiny" })), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" })), index.h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+    return (index.h(index.Host, null, index.h("h2", null, "Delayed"), index.h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), index.h("h2", null, "Editable form and Input with Clear and Reset"), index.h("smoothly-form", { looks: "grid", readonly: true, method: "POST", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-select", { placeholder: "Select...", name: "select-month", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "create-outline", fill: "solid", size: "tiny" })), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "refresh-outline", fill: "solid", size: "tiny" })), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" })), index.h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
         const duration = e.detail.duration;
         console.log("event duration", duration);
         this.duration = duration;
@@ -8796,15 +8817,15 @@ const SmoothlyInputDemo = class {
         const duration = e.detail.duration;
         console.log("event duration", duration);
         this.duration = duration;
-      } }, "Duration")), index.h("h2", null, "Transparent inputs"), index.h("smoothly-form", { looks: "transparent" }, index.h("smoothly-input-file", { name: "file" }, index.h("span", { slot: "label" }, "File"), index.h("smoothly-icon", { slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", null, index.h("span", { slot: "label" }, "Picker"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("smoothly-icon", { name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "square" }, index.h("smoothly-icon", { name: "square-outline" }))), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date-range", null, "Date Range"), index.h("smoothly-input-select", { name: "transport" }, index.h("smoothly-item", { value: "plane" }, index.h("smoothly-icon", { name: "airplane-outline" })), index.h("smoothly-item", { value: "car" }, index.h("smoothly-icon", { name: "car-outline" })), index.h("smoothly-item", { value: "bus", selected: true }, index.h("smoothly-icon", { name: "bus-outline" })))), index.h("h2", null, "Submit"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("h2", null, "Prices"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { type: "price", name: "crowns", currency: "SEK" }, "SEK"), index.h("smoothly-input", { type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("h4", null, "Clear"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone" }, "Phone", index.h("smoothly-input-clear", { slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), index.h("h2", null, "Identifier"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "identifier-code" }, "Code"), index.h("smoothly-input", { type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { type: "identifier-camel" }, "Camel")), index.h("h2", null, "Border"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), index.h("h2", null, "Grid"), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid", method: "GET", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, index.h("smoothly-input", { type: "text", name: "name.last" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first" }, "Last Name"), index.h("smoothly-input", { type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), index.h("smoothly-input", { type: "postal-code", name: "zip" }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "city" }, "City"), index.h("smoothly-input", { type: "text", name: "countryCode" }, "CountryCode"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Submit")), index.h("h4", null, "Card"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-submit", { size: "icon", slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle" })), index.h("smoothly-input", { type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.last" }, "Last Name")), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Random"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), index.h("smoothly-input", { type: "text", name: "testing" }, "TextTest"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input-date", { name: "some-date" }, "Calendar")), index.h("h2", null, "Line"), index.h("smoothly-form", { looks: "line", method: "POST", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h2", null, "Input Alternatives"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { placeholder: "test" }), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h4", null, "Smoothly checkboxes"), index.h("smoothly-form", null, index.h("div", { class: "checkbox-group" }, index.h("smoothly-input-checkbox", { disabled: true, name: "first-checkbox", value: "first" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { name: "second-checkbox", checked: true, value: "second" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-checkbox", { name: "third-checkbox", value: "third" }, "3rd"))), index.h("h4", null, "Smoothly Radio Buttons"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log(e.detail), looks: "border" }, index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" })), index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-radio", { name: "radioSecondInput" }, index.h("p", { slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { slot: "options", value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { slot: "options", value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { slot: "options", value: "sixth" }, "Label 6"))), index.h("h4", null, "Smoothly Picker"), index.h("smoothly-picker-demo", null), index.h("smoothly-back-to-top", null), index.h("h4", null, "Smoothly Date"), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date", { showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-input-date-range", { name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "submit daterange")), index.h("smoothly-input-date-range", { looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+      } }, "Duration")), index.h("h2", null, "Transparent inputs"), index.h("smoothly-form", { looks: "transparent" }, index.h("smoothly-input-file", { name: "file" }, index.h("span", { slot: "label" }, "File"), index.h("smoothly-icon", { slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", null, index.h("span", { slot: "label" }, "Picker"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("smoothly-icon", { name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "square" }, index.h("smoothly-icon", { name: "square-outline" }))), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date-range", null, "Date Range"), index.h("smoothly-input-select", { name: "transport" }, index.h("smoothly-item", { value: "plane" }, index.h("smoothly-icon", { name: "airplane-outline" })), index.h("smoothly-item", { value: "car" }, index.h("smoothly-icon", { name: "car-outline" })), index.h("smoothly-item", { value: "bus", selected: true }, index.h("smoothly-icon", { name: "bus-outline" })))), index.h("h2", null, "Submit"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("h2", null, "Prices"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { type: "price", name: "crowns", currency: "SEK" }, "SEK"), index.h("smoothly-input", { type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("h4", null, "Clear"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone" }, "Phone", index.h("smoothly-input-clear", { slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), index.h("h2", null, "Identifier"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "identifier-code" }, "Code"), index.h("smoothly-input", { type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { type: "identifier-camel" }, "Camel")), index.h("h2", null, "Border"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), index.h("h2", null, "Grid"), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid", method: "GET", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, index.h("smoothly-input", { type: "text", name: "name.last" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first" }, "Last Name"), index.h("smoothly-input", { type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), index.h("smoothly-input", { type: "postal-code", name: "zip" }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "city" }, "City"), index.h("smoothly-input", { type: "text", name: "countryCode" }, "CountryCode"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Submit")), index.h("h4", null, "Card"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-submit", { size: "icon", slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle" })), index.h("smoothly-input", { type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.last" }, "Last Name")), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Random"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), index.h("smoothly-input", { type: "text", name: "testing" }, "TextTest"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input-date", { name: "some-date" }, "Calendar")), index.h("h2", null, "Line"), index.h("smoothly-form", { looks: "line", method: "POST", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h2", null, "Input Alternatives"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { placeholder: "test" }), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h4", null, "Smoothly checkboxes"), index.h("smoothly-form", null, index.h("div", { class: "checkbox-group" }, index.h("smoothly-input-checkbox", { disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { name: "second-checkbox", checked: true }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-checkbox", { name: "third-checkbox" }, "3rd"))), index.h("h4", null, "Smoothly Radio Buttons"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log(e.detail), looks: "border" }, index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" })), index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-radio", { name: "radioSecondInput" }, index.h("p", { slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { slot: "options", value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { slot: "options", value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { slot: "options", value: "sixth" }, "Label 6"))), index.h("h4", null, "Smoothly Picker"), index.h("smoothly-picker-demo", null), index.h("smoothly-back-to-top", null), index.h("h4", null, "Smoothly Date"), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date", { showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-input-date-range", { name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "submit daterange")), index.h("smoothly-input-date-range", { looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
         "--border-radius": "4px",
         "--padding": "0 0.75em",
         "--input-width": "12ch",
-      } }), index.h("br", null), index.h("h4", null, "Smoothly Selector"), index.h("smoothly-input-select", { type: "icon", initialValue: "folder", showSelected: false }, index.h("smoothly-item", { value: "folder" }, index.h("smoothly-icon", { color: "dark", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { color: "dark", name: "camera-outline" }))), index.h("br", null), index.h("smoothly-input-select", { looks: "line", initialPrompt: "Select...", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("button", { onClick: async () => this.selectElement.reset() }, "Reset select"), index.h("br", null), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log("Submitted", e.detail) }, index.h("smoothly-input", { type: "text", name: "text" }, "Text"), index.h("div", null, index.h("smoothly-input-file", { placeholder: "Select or drag a file here", name: "file" }, index.h("span", { slot: "label" }, "Testing file input"), index.h("smoothly-icon", { slot: "button", name: "folder-outline" }))), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("br", null), index.h("smoothly-form", { looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { name: "text" }, "Input"), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { name: "picker" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { name: "select", initialPrompt: "Select...", menuHeight: "7.5items", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("smoothly-input-date-range", { name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+      } }), index.h("br", null), index.h("h4", null, "Smoothly Selector"), index.h("smoothly-input-select", { showSelected: false }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { color: "dark", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { color: "dark", name: "camera-outline" }))), index.h("br", null), index.h("smoothly-input-select", { looks: "line", placeholder: "Select...", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("button", { onClick: async () => this.selectElement.reset() }, "Reset select"), index.h("br", null), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log("Submitted", e.detail) }, index.h("smoothly-input", { type: "text", name: "text" }, "Text"), index.h("div", null, index.h("smoothly-input-file", { placeholder: "Select or drag a file here", name: "file" }, index.h("span", { slot: "label" }, "Testing file input"), index.h("smoothly-icon", { slot: "button", name: "folder-outline" }))), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("br", null), index.h("smoothly-form", { looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { name: "text" }, "Input"), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { name: "picker" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { name: "select", placeholder: "Select...", menuHeight: "7.5items", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("smoothly-input-date-range", { name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
         "--border-radius": "4px",
         "--padding": "0 0.75em",
         "--input-width": "12ch",
-      } }), index.h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), index.h("h4", null, "Form with spinner showcase"), index.h("smoothly-form", { looks: "line", processing: true, onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { name: "text" }, "Input"), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { name: "picker" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { name: "select", initialPrompt: "Select...", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("smoothly-input-date-range", { name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+      } }), index.h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), index.h("h4", null, "Form with spinner showcase"), index.h("smoothly-form", { looks: "line", processing: true, onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { name: "text" }, "Input"), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { name: "picker" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { name: "select", placeholder: "Select...", ref: (element) => (this.selectElement = element) }, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")), index.h("smoothly-input-date-range", { name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
         "--border-radius": "4px",
         "--padding": "0 0.75em",
         "--input-width": "12ch",
@@ -9009,7 +9030,7 @@ const SmoothlyInputRadio = class {
   }
   valueChanged() {
     var _a, _b, _c;
-    this.changed = ((_a = this.initialValue) === null || _a === void 0 ? void 0 : _a.value) !== this.value;
+    this.valueReceivedOnLoad && (this.changed = ((_a = this.initialValue) === null || _a === void 0 ? void 0 : _a.value) !== this.value);
     this.smoothlyInput.emit({ [this.name]: this.value });
     (_c = (_b = this.listener).changed) === null || _c === void 0 ? void 0 : _c.call(_b, this);
   }
@@ -9148,7 +9169,7 @@ const SmoothlyInputReset = class {
 };
 SmoothlyInputReset.style = styleCss$F;
 
-const styleCss$E = ".sc-smoothly-input-select-h{box-sizing:border-box}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-select-h[looks=\"grid\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within) input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h{display:flex;flex-direction:column;position:relative;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{height:100%;display:flex;align-items:center;cursor:default}.icon.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.icon.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{padding:0.5em}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>nav.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contrast))}.hidden.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h>section.sc-smoothly-input-select{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
+const styleCss$E = ".sc-smoothly-input-select-h{box-sizing:border-box}.sc-smoothly-input-select-h[looks=\"border\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-select-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-select-h[looks=\"line\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-select-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-select-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-select-h[looks=\"grid\"].sc-smoothly-input-select-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-select-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-select-h{border:none}[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:not(:focus-within) input.sc-smoothly-input-select{background:transparent}[looks=\"transparent\"].sc-smoothly-input-select-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-select-h{display:flex;flex-direction:column;position:relative;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>main.sc-smoothly-input-select,.sc-smoothly-input-select-h>main.sc-smoothly-input-select>*.sc-smoothly-input-select{height:100%;display:flex;align-items:center;cursor:default;padding:.7em .6em}.sc-smoothly-input-select-h>div.sc-smoothly-input-select>nav.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-input-select-h>div>nav.sc-smoothly-input-select-s>smoothly-item{padding:.6em}.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-input-select-h>aside.sc-smoothly-input-select{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contrast))}.hidden.sc-smoothly-input-select{display:none}.sc-smoothly-input-select-h>section.sc-smoothly-input-select{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
 
 const SmoothlyInputSelect = class {
   constructor(hostRef) {
@@ -9156,14 +9177,19 @@ const SmoothlyInputSelect = class {
     this.smoothlySelect = index.createEvent(this, "smoothlySelect", 7);
     this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
     this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
+    this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
+    this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
+    this.initialValueHandled = false;
+    this.listener = {};
     this.items = [];
     this.name = "selected";
     this.color = undefined;
     this.looks = "plain";
-    this.type = undefined;
     this.showSelected = true;
-    this.initialPrompt = undefined;
-    this.initialValue = undefined;
+    this.readonly = false;
+    this.clearable = true;
+    this.changed = false;
+    this.placeholder = undefined;
     this.menuHeight = undefined;
     this.opened = false;
     this.selectedElement = undefined;
@@ -9171,20 +9197,50 @@ const SmoothlyInputSelect = class {
     this.filter = "";
   }
   componentWillLoad() {
-    this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+    var _a, _b;
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  componentDidLoad() {
+    this.selectedElement && !this.initialValueHandled && (this.initialValue = this.selectedElement);
+    this.initialValueHandled = true;
+  }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
   }
   async reset() {
+    this.changed = false;
+    this.selectedElement && (this.selectedElement.hidden = false);
+    this.mainElement &&
+      (this.mainElement.innerHTML = this.initialValue ? this.initialValue.innerHTML : this.placeholder);
+    this.selectedElement = this.initialValue;
+    this.selectedElement && !this.showSelected && (this.selectedElement.hidden = true);
+  }
+  async clear() {
     var _a;
-    this.selectedElement = undefined;
-    if (this.mainElement) {
-      this.mainElement.innerHTML = (_a = this.initialPrompt) !== null && _a !== void 0 ? _a : "(none)";
+    if (this.clearable) {
+      this.selectedElement = undefined;
+      if (this.mainElement) {
+        this.mainElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "(none)";
+      }
     }
   }
+  async edit(editable) {
+    this.readonly = !editable;
+  }
   onSelectedChange(value, old) {
+    var _a, _b;
+    this.initialValueHandled && (this.changed = this.initialValue !== this.selectedElement);
     if (old)
       old.selected = false;
     this.smoothlySelect.emit(value === null || value === void 0 ? void 0 : value.value);
     this.smoothlyInput.emit({ [this.name]: value === null || value === void 0 ? void 0 : value.value });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   async onFilterChange(value) {
     value = value.toLowerCase();
@@ -9195,16 +9251,19 @@ const SmoothlyInputSelect = class {
     else
       this.missing = false;
   }
+  watchingReadonly() {
+    var _a, _b;
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
   onClick(event) {
     event.stopPropagation();
-    this.opened = !this.opened;
+    this.handleShowOptions();
   }
   onItemSelect(event) {
     this.selectedElement && (this.selectedElement.hidden = false);
     this.selectedElement = event.target;
     !this.showSelected && (this.selectedElement.hidden = true);
-    if (this.mainElement)
-      this.mainElement.innerHTML = this.selectedElement.innerHTML;
+    this.mainElement && this.selectedElement && (this.mainElement.innerHTML = this.selectedElement.innerHTML);
   }
   onClosed() {
     if (!this.opened) {
@@ -9213,6 +9272,9 @@ const SmoothlyInputSelect = class {
         marked.marked = false;
     }
   }
+  handleShowOptions() {
+    !this.readonly && (this.opened = !this.opened);
+  }
   onKeyDown(event) {
     event.stopPropagation();
     if (event.key != "Tab" && !event.ctrlKey && !event.metaKey)
@@ -9253,20 +9315,20 @@ const SmoothlyInputSelect = class {
       switch (event.key) {
         case "Enter":
         case " ":
-          this.opened = true;
+          this.handleShowOptions();
           break;
         case "ArrowDown":
-          this.opened = true;
+          this.handleShowOptions();
           this.move(0);
           break;
         case "ArrowUp":
-          this.opened = true;
+          this.handleShowOptions();
           this.move(-1);
           break;
         case "Tab":
           break;
         default:
-          this.opened = true;
+          this.handleShowOptions();
           if (event.key.length == 1)
             this.filter += event.key;
           break;
@@ -9288,8 +9350,8 @@ const SmoothlyInputSelect = class {
     this.items[markedIndex].focus();
   }
   render() {
-    var _a, _b;
-    return (index.h(index.Host, { tabIndex: 0, class: (_a = (this.missing ? "missing" : this.type)) !== null && _a !== void 0 ? _a : "" }, index.h("main", { ref: element => (this.mainElement = element) }, (_b = this.initialPrompt) !== null && _b !== void 0 ? _b : "(none)"), this.filter.length != 0 ? (index.h("aside", { ref: element => (this.aside = element) }, this.filter, index.h("button", { onClick: e => {
+    var _a;
+    return (index.h(index.Host, { tabIndex: 0, class: { missing: this.missing } }, index.h("main", { ref: element => (this.mainElement = element) }, (_a = this.placeholder) !== null && _a !== void 0 ? _a : "(none)"), this.filter.length != 0 ? (index.h("aside", { ref: element => (this.aside = element) }, this.filter, index.h("button", { onClick: e => {
         e.stopPropagation();
         this.filter = "";
       } }, index.h("smoothly-icon", { name: "close", size: "small" })))) : undefined, this.opened ? index.h("section", { onClick: () => (this.opened = true) }) : [], index.h("div", { class: this.opened ? "" : "hidden" }, index.h("nav", null, index.h("slot", null)))));
@@ -9315,6 +9377,7 @@ const SmoothlyInputSelect = class {
   static get watchers() { return {
     "selectedElement": ["onSelectedChange"],
     "filter": ["onFilterChange"],
+    "readonly": ["watchingReadonly"],
     "opened": ["onClosed"]
   }; }
 };