smoothly 1.0.1-alpha.6 → 1.0.1-alpha.8

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_81.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]}],[6,\"smoothly-theme-picker\",{\"element\":[1]}],[2,\"smoothly-select-demo\"],[2,\"smoothly-theme-colors\"],[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\"]]],[2,\"smoothly-input-demo-controlled-form\",{\"name\":[32]}],[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-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],\"setInitialValue\":[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-radio\",{\"changed\":[1028],\"value\":[1032],\"looks\":[1537],\"clearable\":[4],\"readonly\":[1540],\"name\":[1],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyRadioButtonRegister\",\"handleRegister\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"],[0,\"smoothlySelect\",\"smoothlyRadioInputHandler\"]]],[6,\"smoothly-input-range\",{\"value\":[1026],\"looks\":[1537],\"changed\":[1028],\"readonly\":[1540],\"min\":[2],\"max\":[2],\"name\":[1],\"labelText\":[1,\"label-text\"],\"step\":[8],\"outputSide\":[1,\"output-side\"],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]}],[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],\"type\":[1]},[[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"]]],[6,\"smoothly-filter\",{\"detailChildren\":[32],\"criteria\":[32],\"expanded\":[32]},[[0,\"smoothlyFilterUpdate\",\"updateHandler\"],[0,\"smoothlyFilterManipulate\",\"manipulateHandler\"],[0,\"smoothlyFilterField\",\"filterFieldHandler\"]]],[6,\"smoothly-input-submit\",{\"delete\":[516],\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"]}],[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-input-edit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-reset\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[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]}],[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]}],[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],\"changed\":[1028],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[1540],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[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],\"multiple\":[4],\"clearable\":[4],\"changed\":[1028],\"placeholder\":[520],\"menuHeight\":[1,\"menu-height\"],\"open\":[32],\"selected\":[32],\"filter\":[32],\"listen\":[64],\"reset\":[64],\"clear\":[64],\"edit\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"],[0,\"smoothlyItemSelect\",\"onItemSelect\"],[0,\"keydown\",\"onKeyDown\"]]],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"action\":[1],\"type\":[1],\"readonly\":[1028],\"looks\":[513],\"name\":[1],\"prevent\":[4],\"changed\":[1028],\"processing\":[32],\"listen\":[64],\"submit\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[8,\"smoothlyFormSubmit\",\"windowSubmitHandler\"],[0,\"smoothlyFormSubmit\",\"submitHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyFormDisable\",\"smoothlyFormDisableHandler\"]]],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"required\":[516],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[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],\"selectable\":[4],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[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],\"setInitialValue\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"rotate\":[514],\"flip\":[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_81.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]}],[6,\"smoothly-theme-picker\",{\"element\":[1]}],[2,\"smoothly-select-demo\"],[2,\"smoothly-theme-colors\"],[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\"]]],[2,\"smoothly-input-demo-controlled-form\",{\"name\":[32]}],[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-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],\"setInitialValue\":[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-radio\",{\"changed\":[1028],\"value\":[1032],\"looks\":[1537],\"clearable\":[4],\"readonly\":[1540],\"name\":[1],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyRadioButtonRegister\",\"handleRegister\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"],[0,\"smoothlySelect\",\"smoothlyRadioInputHandler\"]]],[6,\"smoothly-input-range\",{\"value\":[1026],\"looks\":[1537],\"changed\":[1028],\"readonly\":[1540],\"min\":[2],\"max\":[2],\"name\":[1],\"labelText\":[1,\"label-text\"],\"step\":[8],\"outputSide\":[1,\"output-side\"],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]}],[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],\"type\":[1]},[[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"]]],[6,\"smoothly-filter\",{\"detailChildren\":[32],\"criteria\":[32],\"expanded\":[32]},[[0,\"smoothlyFilterUpdate\",\"updateHandler\"],[0,\"smoothlyFilterManipulate\",\"manipulateHandler\"],[0,\"smoothlyFilterField\",\"filterFieldHandler\"]]],[6,\"smoothly-input-submit\",{\"delete\":[516],\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"]}],[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-input-edit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-input-reset\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[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]}],[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]}],[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],\"changed\":[1028],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[1540],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[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],\"multiple\":[4],\"clearable\":[4],\"changed\":[1028],\"placeholder\":[520],\"menuHeight\":[1,\"menu-height\"],\"open\":[32],\"selected\":[32],\"filter\":[32],\"listen\":[64],\"reset\":[64],\"clear\":[64],\"edit\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"],[0,\"smoothlyItemSelect\",\"onItemSelect\"],[0,\"keydown\",\"onKeyDown\"]]],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"action\":[1],\"type\":[1],\"readonly\":[1028],\"looks\":[513],\"name\":[1],\"prevent\":[4],\"changed\":[1028],\"processing\":[32],\"listen\":[64],\"submit\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[8,\"smoothlyFormSubmit\",\"windowSubmitHandler\"],[0,\"smoothlyFormSubmit\",\"submitHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyFormDisable\",\"smoothlyFormDisableHandler\"]]],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"required\":[516],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[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],\"selectable\":[4],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[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],\"setInitialValue\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"rotate\":[514],\"flip\":[513],\"toolTip\":[1,\"tool-tip\"],\"latestPromise\":[32],\"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_81.cjs.entry.js

@@ -7998,22 +7998,33 @@ const SmoothlyIcon = class {
     this.rotate = undefined;
     this.flip = undefined;
     this.toolTip = undefined;
+    this.latestPromise = undefined;
     this.document = undefined;
   }
   async componentWillLoad() {
-    let result;
+    await this.nameChanged();
+  }
+  async nameChanged() {
     if (this.name != "empty") {
-      result = await Submit.Icon.load(this.name);
-      result = result === null || result === void 0 ? void 0 : result.replace(/(?<=^<svg\s?)/, `$& role="img"`).replace(` width="512" height="512"`, "").replace(/stroke:#000;/gi, "");
-      if (!this.toolTip)
-        result = result === null || result === void 0 ? void 0 : result.replace(/<title>.*<\/title>/, "");
-      else if (result === null || result === void 0 ? void 0 : result.includes("<title>"))
-        result = result.replace(/(<title>).*(<\/title>)/, `<title>${this.toolTip}</title>`);
-      else
-        result = result === null || result === void 0 ? void 0 : result.replace(/(.*>)(<\/svg>$)/, `$1<title>${this.toolTip}</title>$2`);
+      const promise = (this.latestPromise = Submit.Icon.load(this.name));
+      let result = await promise;
+      if (promise == this.latestPromise) {
+        result = result === null || result === void 0 ? void 0 : result.replace(/(?<=^<svg\s?)/, `$& role="img"`).replace(` width="512" height="512"`, "").replace(/stroke:#000;/gi, "");
+        if (!this.toolTip)
+          result = result === null || result === void 0 ? void 0 : result.replace(/<title>.*<\/title>/, "");
+        else if (result === null || result === void 0 ? void 0 : result.includes("<title>"))
+          result = result.replace(/(<title>).*(<\/title>)/, `<title>${this.toolTip}</title>`);
+        else
+          result = result === null || result === void 0 ? void 0 : result.replace(/(.*>)(<\/svg>$)/, `$1<title>${this.toolTip}</title>$2`);
+        this.updateDocument(result);
+      }
     }
+    else
+      this.updateDocument();
+  }
+  updateDocument(document) {
     this.document =
-      result !== null && result !== void 0 ? result : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      document !== null && document !== void 0 ? document : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 		<title>Empty</title>
 		</svg>`;
   }
@@ -8022,7 +8033,7 @@ const SmoothlyIcon = class {
     return index.h(index.Host, { innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
   }
   static get watchers() { return {
-    "name": ["componentWillLoad"]
+    "name": ["nameChanged"]
   }; }
 };
 SmoothlyIcon.style = styleCss$V;
@@ -8862,7 +8873,7 @@ const SmoothlyInputCheckbox = class {
 };
 SmoothlyInputCheckbox.style = styleCss$S;
 
-const styleCss$R = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-input-clear-h{display:inline;border:none}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}a.sc-smoothly-input-clear,button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-input-clear{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}.sc-smoothly-input-clear-h:not([fill=clear]):hover,.sc-smoothly-input-clear-h:not([fill=clear]):focus,.sc-smoothly-input-clear-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-input-clear-h:not([fill=clear]):hover>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):focus>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):active>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):hover .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):focus .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):active .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-input-clear-h:hover>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:focus>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h:not([fill]),[fill=default].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=default].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-input-clear-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-input-clear-h{background:transparent;border-color:transparent}.sc-smoothly-input-clear-s>smoothly-icon[slot=start],.sc-smoothly-input-clear-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h{transition:0.6s;margin:0rem;min-width:0rem}[type=\"input\"].sc-smoothly-input-clear-h{line-height:1}[type=\"form\"].sc-smoothly-input-clear-h{margin:1em 0em}.sc-smoothly-input-clear-h[type=\"input\"] .sc-smoothly-input-clear-s>smoothly-icon{filter:opacity(60%);font-size:70%}.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}[type=\"input\"].sc-smoothly-input-clear-h button.sc-smoothly-input-clear{padding:0rem;margin:0rem;min-width:0rem}";
+const styleCss$R = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-input-clear-h{display:inline;border:none}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}a.sc-smoothly-input-clear,button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-input-clear{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}.sc-smoothly-input-clear-h:not([fill=clear]):hover,.sc-smoothly-input-clear-h:not([fill=clear]):focus,.sc-smoothly-input-clear-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-input-clear-h:not([fill=clear]):hover>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):focus>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):active>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):hover .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):focus .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):active .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-input-clear-h:hover>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:focus>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h:not([fill]),[fill=default].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=default].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-input-clear-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-input-clear-h{background:transparent;border-color:transparent}.sc-smoothly-input-clear-s>smoothly-icon[slot=start],.sc-smoothly-input-clear-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h{transition:0.6s;margin:0rem;min-width:0rem;display:flex}[type=\"input\"].sc-smoothly-input-clear-h{line-height:1}[type=\"form\"].sc-smoothly-input-clear-h{margin:1em 0em}.sc-smoothly-input-clear-h[type=\"input\"] .sc-smoothly-input-clear-s>smoothly-icon{filter:opacity(60%);font-size:70%}.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}[type=\"input\"].sc-smoothly-input-clear-h button.sc-smoothly-input-clear{padding:0rem;margin:0rem;min-width:0rem}";
 
 const SmoothlyInputClear = class {
   constructor(hostRef) {
@@ -8884,8 +8895,8 @@ const SmoothlyInputClear = class {
         if (Editable.Element.type.is(parent)) {
           parent.listen("changed", async (p) => {
             if (Input.is(p)) {
-              this.disabled = p.readonly ? true : !p.value;
-              this.display = p.readonly ? false : Boolean(p.value);
+              this.disabled = p.readonly ? true : p.value ? !p.value : !p.changed;
+              this.display = p.readonly ? false : p.value ? Boolean(p.value) : p.changed;
             }
             if (p instanceof SmoothlyForm) {
               this.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1;
@@ -9092,7 +9103,7 @@ const SmoothlyInputDemo = class {
     this.duration = { hours: 8 };
   }
   render() {
-    return (index.h(index.Host, null, index.h("h2", null, "Controlled form"), index.h("smoothly-input-demo-controlled-form", null), index.h("h2", null, "Create form defaulting type"), index.h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name" }, "Name"), index.h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), index.h("h2", null, "Select"), index.h("div", { class: "select-div" }, index.h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select with reset button"), index.h("smoothly-item", { value: "1" }, "Ice cream"), index.h("smoothly-item", { value: "2" }, "Sponge cake"), index.h("smoothly-item", { value: "3" }, "Cookie"), index.h("smoothly-item", { value: "4" }, "Croissant"), index.h("smoothly-item", { value: "5" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { value: "croissant" }, "Croissant"), index.h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, 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("h2", null, "Delayed"), index.h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), index.h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), index.h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, 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", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, index.h("label", { slot: "label" }, "Month"), 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-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), 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, "Editable form and Input with Clear and Reset - Editable"), index.h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, 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", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { slot: "label" }, "Month multiple select"), 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-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), 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, "Controlled form"), index.h("smoothly-input-demo-controlled-form", null), index.h("h2", null, "Create form defaulting type"), index.h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name" }, "Name"), index.h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), index.h("h2", null, "Select"), index.h("div", { class: "select-div" }, index.h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select with clear button"), index.h("smoothly-item", { value: "1" }, "Ice cream"), index.h("smoothly-item", { value: "2" }, "Sponge cake"), index.h("smoothly-item", { value: "3" }, "Cookie"), index.h("smoothly-item", { value: "4" }, "Croissant"), index.h("smoothly-item", { value: "5" }, "Chocolate fondue"), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { value: "croissant" }, "Croissant"), index.h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, 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("h2", null, "Delayed"), index.h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), index.h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), index.h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, 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", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, index.h("label", { slot: "label" }, "Month"), 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-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), 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-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), 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, "Editable form and Input with Clear and Reset - Editable"), index.h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, 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", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { slot: "label" }, "Month multiple select"), 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-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), 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;
@@ -9518,7 +9529,7 @@ var Item;
   Item.is = Item.type.is;
 })(Item || (Item = {}));
 
-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;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-color-shade))}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select{box-sizing:border-box;min-height:2.7em;display:flex;cursor:default;padding:.7em;overflow:hidden;width:100%;white-space:nowrap;gap:1em;text-overflow:ellipsis}.sc-smoothly-input-select-h>.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center;margin-right:.4em}.sc-smoothly-input-select-h>.icons.sc-smoothly-input-select-s>smoothly-input-reset{padding-right:.2em}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label]{position:absolute;left:0.4em;top:0.6em;opacity:0.8;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h:not(.has-value)[placeholder].sc-smoothly-input-select-s>[slot=label]{top:0.4em;transform:scale(0.6)}.has-value.sc-smoothly-input-select-h:has([slot=label]) .select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder] .select-display.sc-smoothly-input-select{padding-bottom:0;padding-left:.8em;padding-top:1.1em;overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:2.7em;z-index:10;max-height:var(--menu-height, unset);width:100%;overflow-y:auto;background-color:rgb(var(--smoothly-default-shade))}[looks=border].sc-smoothly-input-select-h .options.sc-smoothly-input-select{transform:translateX(-1px);border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--text-color, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h .options.sc-smoothly-input-select{transform:translateX(-2px);border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid 2px;border-top:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid 2px}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select-s>smoothly-item{padding:.7em}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select-s>smoothly-item.non-selectable{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:var(--smoothly-color-contrast)}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select>smoothly-item.non-selectable.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>.options.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;justify-content:space-between;flex-direction:row;position:relative;background-color:rgb(var(--smoothly-color-shade))}.icon.sc-smoothly-input-select-h{width:fit-content;flex-direction:column}.sc-smoothly-input-select-h>.select-display.sc-smoothly-input-select{box-sizing:border-box;min-height:2.7em;display:flex;cursor:default;padding:.7em;overflow:hidden;width:100%;white-space:nowrap;gap:1em;text-overflow:ellipsis}.sc-smoothly-input-select-h>.icons.sc-smoothly-input-select{display:flex;flex-direction:row;align-items:center;margin-right:.4em}.sc-smoothly-input-select-h>.icons.sc-smoothly-input-select-s>smoothly-input-reset{padding-right:.2em}.sc-smoothly-input-select-h.sc-smoothly-input-select-s>[slot=label]{position:absolute;left:0.4em;top:0.6em;opacity:0.8;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-select-h.has-value.sc-smoothly-input-select-s>[slot=label],.sc-smoothly-input-select-h:not(.has-value)[placeholder].sc-smoothly-input-select-s>[slot=label]{top:0.4em;transform:scale(0.6)}.has-value.sc-smoothly-input-select-h:has([slot=label]) .select-display.sc-smoothly-input-select,.sc-smoothly-input-select-h:not(.has-value)[placeholder] .select-display.sc-smoothly-input-select{padding-bottom:.1em;padding-left:.8em;padding-top:1.1em;overflow:hidden;width:100%}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select{display:flex;flex-direction:column;position:absolute;top:var(--element-height);z-index:10;max-height:var(--menu-height, unset);width:100%;overflow-y:auto;background-color:rgb(var(--smoothly-default-shade))}[looks=border].sc-smoothly-input-select-h .options.sc-smoothly-input-select{transform:translateX(-1px);border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;border-top:rgba(var(--text-color, var(--smoothly-color-contrast)), .4) solid 1px}[looks=\"grid\"].sc-smoothly-input-select-h .options.sc-smoothly-input-select{transform:translateX(-2px);border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid 2px;border-top:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid 2px}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select-s>smoothly-item{padding:.7em}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select-s>smoothly-item.non-selectable{display:flex;gap:1em;background-color:rgba(var(--smoothly-primary-tint), .5);color:var(--smoothly-color-contrast)}.sc-smoothly-input-select-h>.options.sc-smoothly-input-select>smoothly-item.non-selectable.sc-smoothly-input-select>smoothly-icon[name=\"backspace-outline\"].sc-smoothly-input-select{margin-left:auto;margin-right:0}.sc-smoothly-input-select-h>.options.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) {
@@ -9561,13 +9572,14 @@ const SmoothlyInputSelect = class {
     this.initialValueHandled = true;
   }
   componentDidRender() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     this.itemHeight === undefined && (this.itemHeight = (_a = this.items.find(item => item.clientHeight > 0)) === null || _a === void 0 ? void 0 : _a.clientHeight);
     if (this.menuHeight && this.itemHeight) {
       (_b = this.element) === null || _b === void 0 ? void 0 : _b.style.setProperty("--menu-height", !this.menuHeight.endsWith("items") || this.items.length == 0
         ? this.menuHeight
         : `${this.itemHeight * +((_d = (_c = this.menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "10")}px`);
     }
+    (_e = this.element) === null || _e === void 0 ? void 0 : _e.style.setProperty("--element-height", `${this.element.clientHeight}px`);
   }
   async listen(property, listener) {
     this.listener[property] = listener;
@@ -9587,7 +9599,7 @@ const SmoothlyInputSelect = class {
       this.selected.forEach(item => (item.selected = item.hidden = false));
       this.selected = [];
       if (this.displaySelectedElement) {
-        this.displaySelectedElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "(none)";
+        this.displaySelectedElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "";
       }
     }
   }
@@ -9618,7 +9630,9 @@ const SmoothlyInputSelect = class {
     (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   async smoothlyInputLoadHandler(event) {
-    if (event.target && "name" in event.target && event.target.name !== this.name) {
+    if (event.target &&
+      (("name" in event.target && event.target.name !== this.name) ||
+        (event.composedPath().some(e => e == this.iconsDiv) && !event.composedPath().some(e => e == this.toggle)))) {
       event.stopPropagation();
     }
     else if (Item.type.is(event.target)) {
@@ -9653,8 +9667,11 @@ const SmoothlyInputSelect = class {
     }
   }
   handleShowOptions(event) {
+    event && event.stopPropagation();
+    const wasButtonClicked = (event === null || event === void 0 ? void 0 : event.composedPath().some(e => e == this.iconsDiv)) && !event.composedPath().some(e => e == this.toggle);
     !this.readonly &&
-      !(event && event.target && this.items.includes(event.target) && this.multiple) &&
+      !((event === null || event === void 0 ? void 0 : event.target) && this.items.includes(event.target) && this.multiple) &&
+      !wasButtonClicked &&
       (this.open = !this.open);
     this.filter = "";
   }
@@ -9746,7 +9763,7 @@ const SmoothlyInputSelect = class {
     this.items[markedIndex].marked = true;
   }
   render() {
-    return (index.h(index.Host, { tabIndex: 0, class: { "has-value": this.selected.length !== 0 }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { class: "icons" }, index.h("slot", { name: "end" }), index.h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("slot", { name: "label" }), index.h("div", { class: `${this.open ? "" : "hidden"} options` }, this.filter.length > 0 && (index.h("smoothly-item", { selectable: false }, index.h("smoothly-icon", { name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { name: "backspace-outline", size: "small", onClick: e => {
+    return (index.h(index.Host, { tabIndex: 0, class: { "has-value": this.selected.length !== 0 }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { name: "end" }), index.h("smoothly-icon", { ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("slot", { name: "label" }), index.h("div", { class: `${this.open ? "" : "hidden"} options` }, this.filter.length > 0 && (index.h("smoothly-item", { selectable: false }, index.h("smoothly-icon", { name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { name: "backspace-outline", size: "small", onClick: e => {
         e.stopPropagation();
         this.filter = "";
         this.element.focus();