smoothly 1.0.1-alpha.8 → 1.1.0

package/dist/cjs/smoothly.cjs.js

@@ -18,7 +18,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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);
+  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\",{\"changed\":[1028],\"readonly\":[1540],\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"binary\":[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);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { http } from "cloudly-http";
 import { Data, Notice } from "../../model";
 import { Clearable } from "../input/Clearable";
@@ -6,6 +6,7 @@ import { Editable } from "../input/Editable";
 import { Input } from "../input/Input";
 export class SmoothlyForm {
   constructor() {
+    this.contentType = "json";
     this.inputs = new Map();
     this.readonlyAtLoad = this.readonly;
     this.listeners = {};
@@ -20,6 +21,9 @@ export class SmoothlyForm {
     this.changed = false;
     this.processing = undefined;
   }
+  componentWillLoad() {
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+  }
   async listen(property, listener) {
     var _a;
     var _b;
@@ -50,9 +54,12 @@ export class SmoothlyForm {
     this.action && event.stopPropagation();
   }
   async smoothlyInputLoadHandler(event) {
+    var _a, _b;
     event.stopPropagation();
     event.detail(this);
     if (Input.Element.is(event.target)) {
+      if (await ((_b = (_a = event.target).binary) === null || _b === void 0 ? void 0 : _b.call(_a)))
+        this.contentType = "form-data";
       this.value = Data.merge(this.value, { [event.target.name]: event.target.value });
       this.inputs.set(event.target.name, event.target);
     }
@@ -79,7 +86,10 @@ export class SmoothlyForm {
           const response = await http
             .fetch(http.Request.create(method == "GET"
             ? { method, url: `${action}?${http.Search.stringify(this.value)}` }
-            : Object.assign({ method, url: action }, (this.value && { header: { contentType: "application/json" }, body: this.value }))))
+            : Object.assign({ method, url: action }, (this.value && {
+              header: { contentType: this.contentType ? "multipart/form-data" : "application/json" },
+              body: this.value,
+            }))))
             .catch(() => undefined);
           const result = !response || (response === null || response === void 0 ? void 0 : response.status) < 200 || response.status >= 300
             ? [false, "Failed to submit form."]
@@ -321,6 +331,21 @@ export class SmoothlyForm {
   }
   static get events() {
     return [{
+        "method": "smoothlyFormDisable",
+        "name": "smoothlyFormDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(disabled: boolean) => void",
+          "resolved": "(disabled: boolean) => void",
+          "references": {}
+        }
+      }, {
         "method": "smoothlyFormInput",
         "name": "smoothlyFormInput",
         "bubbles": true,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { SmoothlyFormCustomEvent } from \"../../components\"\nimport { Color, Data, Notice, Submit } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Editable } from \"../input/Editable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm implements Clearable, Submittable, Editable {\n\t@Element() element: HTMLSmoothlyFormElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop() action?: string\n\t@Prop() type?: \"update\" | \"change\" | \"fetch\" | \"create\" = this.action ? \"create\" : undefined\n\t@Prop({ mutable: true }) readonly = false\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: Looks = \"plain\"\n\t@Prop() name?: string\n\t@Prop() prevent = true\n\t@Prop({ mutable: true }) changed = false\n\t@State() processing?: Promise<boolean>\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Submit>\n\t@Event() smoothlyFormReset: EventEmitter<void>\n\t@Event() smoothlyFormEdit: EventEmitter<boolean>\n\t@Event() smoothlyFormClear: EventEmitter<void>\n\t@Event() notice: EventEmitter<Notice>\n\tprivate inputs = new Map<string, Input.Element>()\n\tprivate readonlyAtLoad = this.readonly\n\tprivate listeners: {\n\t\tchanged?: ((parent: Editable) => Promise<void>)[]\n\t} = {}\n\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\t;(this.listeners[property] ??= []).push(listener)\n\t\tlistener(this)\n\t}\n\t@Watch(\"value\")\n\twatchValue() {\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Watch(\"readonly\")\n\twatchReadonly() {\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks, color: Color | undefined) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.looks, this.color)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.smoothlyFormInput.emit((this.value = Data.merge(this.value, event.detail)))\n\t}\n\t@Listen(\"smoothlyFormSubmit\", { target: \"window\" })\n\twindowSubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tevent.target == this.element && event.detail.result(false)\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tthis.action && event.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this)\n\t\tif (Input.Element.is(event.target)) {\n\t\t\tthis.value = Data.merge(this.value, { [event.target.name]: event.target.value })\n\t\t\tthis.inputs.set(event.target.name, event.target)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormDisable\")\n\tasync smoothlyFormDisableHandler(event: CustomEvent): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.readonly)\n\t}\n\t@Method()\n\tasync submit(remove?: boolean): Promise<void> {\n\t\tthis.processing = new Promise(resolve => {\n\t\t\tthis.smoothlyFormSubmit.emit({ value: this.value, result: resolve, type: remove == true ? \"remove\" : this.type })\n\t\t\tif (this.action) {\n\t\t\t\tconst action = this.action\n\t\t\t\tthis.notice.emit(\n\t\t\t\t\tNotice.execute(\"Submitting form\", async () => {\n\t\t\t\t\t\tconst method = remove\n\t\t\t\t\t\t\t? \"DELETE\"\n\t\t\t\t\t\t\t: !this.type || this.type == \"create\"\n\t\t\t\t\t\t\t? \"POST\"\n\t\t\t\t\t\t\t: this.type == \"change\"\n\t\t\t\t\t\t\t? \"PUT\"\n\t\t\t\t\t\t\t: this.type == \"update\"\n\t\t\t\t\t\t\t? \"PATCH\"\n\t\t\t\t\t\t\t: \"GET\"\n\t\t\t\t\t\tconst response = await http\n\t\t\t\t\t\t\t.fetch(\n\t\t\t\t\t\t\t\thttp.Request.create(\n\t\t\t\t\t\t\t\t\tmethod == \"GET\"\n\t\t\t\t\t\t\t\t\t\t? { method, url: `${action}?${http.Search.stringify(this.value)}` }\n\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\tmethod,\n\t\t\t\t\t\t\t\t\t\t\t\turl: action,\n\t\t\t\t\t\t\t\t\t\t\t\t...(this.value && { header: { contentType: \"application/json\" }, body: this.value }),\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.catch(() => undefined)\n\t\t\t\t\t\tconst result =\n\t\t\t\t\t\t\t!response || response?.status < 200 || response.status >= 300\n\t\t\t\t\t\t\t\t? ([false, \"Failed to submit form.\"] as const)\n\t\t\t\t\t\t\t\t: ([true, \"Form successfully submitted.\"] as const)\n\t\t\t\t\t\tresolve(result[0])\n\t\t\t\t\t\treturn [...result]\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t}\n\t\t})\n\t\tif (await this.processing) {\n\t\t\tthis.type == \"create\" && (await this.clear())\n\t\t\tthis.setInitialValue()\n\t\t\tthis.readonlyAtLoad && this.edit(!this.readonlyAtLoad)\n\t\t}\n\t\tthis.processing = undefined\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tClearable.is(input) && input.clear()\n\t\t})\n\t\tthis.smoothlyFormClear.emit()\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.edit(editable)\n\t\t})\n\t\tthis.readonly = !editable\n\t\tthis.smoothlyFormEdit.emit(editable)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.reset()\n\t\t})\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.smoothlyFormReset.emit()\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.setInitialValue()\n\t\t})\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-spinner active={!!this.processing}></smoothly-spinner>\n\t\t\t\t<form onSubmit={!this.prevent ? undefined : e => e.preventDefault()} name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<slot name=\"edit\" />\n\t\t\t\t\t\t<slot name=\"reset\" />\n\t\t\t\t\t\t<slot name=\"clear\" />\n\t\t\t\t\t\t<slot name=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { SmoothlyFormCustomEvent } from \"../../components\"\nimport { Color, Data, Notice, Submit } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Editable } from \"../input/Editable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm implements ComponentWillLoad, Clearable, Submittable, Editable {\n\t@Element() element: HTMLSmoothlyFormElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop() action?: string\n\t@Prop() type?: \"update\" | \"change\" | \"fetch\" | \"create\" = this.action ? \"create\" : undefined\n\t@Prop({ mutable: true }) readonly = false\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: Looks = \"plain\"\n\t@Prop() name?: string\n\t@Prop() prevent = true\n\t@Prop({ mutable: true }) changed = false\n\t@State() processing?: Promise<boolean>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Submit>\n\t@Event() smoothlyFormReset: EventEmitter<void>\n\t@Event() smoothlyFormEdit: EventEmitter<boolean>\n\t@Event() smoothlyFormClear: EventEmitter<void>\n\t@Event() notice: EventEmitter<Notice>\n\tprivate contentType: \"json\" | \"form-data\" = \"json\"\n\tprivate inputs = new Map<string, Input.Element>()\n\tprivate readonlyAtLoad = this.readonly\n\tprivate listeners: {\n\t\tchanged?: ((parent: Editable) => Promise<void>)[]\n\t} = {}\n\n\tcomponentWillLoad(): void {\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\t;(this.listeners[property] ??= []).push(listener)\n\t\tlistener(this)\n\t}\n\t@Watch(\"value\")\n\twatchValue() {\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Watch(\"readonly\")\n\twatchReadonly() {\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks, color: Color | undefined) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.looks, this.color)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.smoothlyFormInput.emit((this.value = Data.merge(this.value, event.detail)))\n\t}\n\t@Listen(\"smoothlyFormSubmit\", { target: \"window\" })\n\twindowSubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tevent.target == this.element && event.detail.result(false)\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: SmoothlyFormCustomEvent<Submit>): void {\n\t\tthis.action && event.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this)\n\t\tif (Input.Element.is(event.target)) {\n\t\t\tif (await event.target.binary?.())\n\t\t\t\tthis.contentType = \"form-data\"\n\t\t\tthis.value = Data.merge(this.value, { [event.target.name]: event.target.value })\n\t\t\tthis.inputs.set(event.target.name, event.target)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormDisable\")\n\tasync smoothlyFormDisableHandler(event: CustomEvent): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.readonly)\n\t}\n\t@Method()\n\tasync submit(remove?: boolean): Promise<void> {\n\t\tthis.processing = new Promise(resolve => {\n\t\t\tthis.smoothlyFormSubmit.emit({ value: this.value, result: resolve, type: remove == true ? \"remove\" : this.type })\n\t\t\tif (this.action) {\n\t\t\t\tconst action = this.action\n\t\t\t\tthis.notice.emit(\n\t\t\t\t\tNotice.execute(\"Submitting form\", async () => {\n\t\t\t\t\t\tconst method = remove\n\t\t\t\t\t\t\t? \"DELETE\"\n\t\t\t\t\t\t\t: !this.type || this.type == \"create\"\n\t\t\t\t\t\t\t? \"POST\"\n\t\t\t\t\t\t\t: this.type == \"change\"\n\t\t\t\t\t\t\t? \"PUT\"\n\t\t\t\t\t\t\t: this.type == \"update\"\n\t\t\t\t\t\t\t? \"PATCH\"\n\t\t\t\t\t\t\t: \"GET\"\n\t\t\t\t\t\tconst response = await http\n\t\t\t\t\t\t\t.fetch(\n\t\t\t\t\t\t\t\thttp.Request.create(\n\t\t\t\t\t\t\t\t\tmethod == \"GET\"\n\t\t\t\t\t\t\t\t\t\t? { method, url: `${action}?${http.Search.stringify(this.value)}` }\n\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\tmethod,\n\t\t\t\t\t\t\t\t\t\t\t\turl: action,\n\t\t\t\t\t\t\t\t\t\t\t\t...(this.value && {\n\t\t\t\t\t\t\t\t\t\t\t\t\theader: { contentType: this.contentType ? \"multipart/form-data\" : \"application/json\" },\n\t\t\t\t\t\t\t\t\t\t\t\t\tbody: this.value,\n\t\t\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.catch(() => undefined)\n\t\t\t\t\t\tconst result =\n\t\t\t\t\t\t\t!response || response?.status < 200 || response.status >= 300\n\t\t\t\t\t\t\t\t? ([false, \"Failed to submit form.\"] as const)\n\t\t\t\t\t\t\t\t: ([true, \"Form successfully submitted.\"] as const)\n\t\t\t\t\t\tresolve(result[0])\n\t\t\t\t\t\treturn [...result]\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t}\n\t\t})\n\t\tif (await this.processing) {\n\t\t\tthis.type == \"create\" && (await this.clear())\n\t\t\tthis.setInitialValue()\n\t\t\tthis.readonlyAtLoad && this.edit(!this.readonlyAtLoad)\n\t\t}\n\t\tthis.processing = undefined\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tClearable.is(input) && input.clear()\n\t\t})\n\t\tthis.smoothlyFormClear.emit()\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.edit(editable)\n\t\t})\n\t\tthis.readonly = !editable\n\t\tthis.smoothlyFormEdit.emit(editable)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.reset()\n\t\t})\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.smoothlyFormReset.emit()\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.setInitialValue()\n\t\t})\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-spinner active={!!this.processing}></smoothly-spinner>\n\t\t\t\t<form onSubmit={!this.prevent ? undefined : e => e.preventDefault()} name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<slot name=\"edit\" />\n\t\t\t\t\t\t<slot name=\"reset\" />\n\t\t\t\t\t\t<slot name=\"clear\" />\n\t\t\t\t\t\t<slot name=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/Editable.js

@@ -10,10 +10,14 @@ export var Editable;
       reset: isly.function(),
       setInitialValue: isly.function(),
     });
+    Element.is = Element.type.is;
   })(Element = Editable.Element || (Editable.Element = {}));
+  const EventEmitter = isly.object({ emit: isly.function() });
   Editable.type = Element.type.extend({
     changed: isly.boolean(),
     value: isly.any().optional(),
+    smoothlyFormDisable: EventEmitter,
   });
+  Editable.is = Editable.type.is;
 })(Editable || (Editable = {}));
 //# sourceMappingURL=Editable.js.map

package/dist/collection/components/input/Editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.js","sourceRoot":"","sources":["../../../src/components/input/Editable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAM3B,MAAM,KAAW,QAAQ,CAwBxB;AAxBD,WAAiB,QAAQ;EAQxB,IAAiB,OAAO,CAQvB;EARD,WAAiB,OAAO;IACV,YAAI,GAAG,IAAI,CAAC,MAAM,CAAU;MACxC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;MACrB,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE;MACxB,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAU;MAC/B,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAS;MAC7B,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE;KAChC,CAAC,CAAA;EACH,CAAC,EARgB,OAAO,GAAP,gBAAO,KAAP,gBAAO,QAQvB;EAIY,aAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAW;IACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;IACvB,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;GAC5B,CAAC,CAAA;AACH,CAAC,EAxBgB,QAAQ,KAAR,QAAQ,QAwBxB","sourcesContent":["import { isly } from \"isly\"\n\nexport interface Editable extends Editable.Element {\n\tchanged: boolean\n\tvalue?: any\n}\nexport namespace Editable {\n\texport interface Element {\n\t\tedit: Editable.Edit\n\t\treset: Editable.Reset\n\t\treadonly: boolean\n\t\tlisten: Editable.Listen\n\t\tsetInitialValue: () => void\n\t}\n\texport namespace Element {\n\t\texport const type = isly.object<Element>({\n\t\t\tedit: isly.function(),\n\t\t\treadonly: isly.boolean(),\n\t\t\tlisten: isly.function<Listen>(),\n\t\t\treset: isly.function<Reset>(),\n\t\t\tsetInitialValue: isly.function(),\n\t\t})\n\t}\n\texport type Listen = (property: \"changed\", listener: (parent: Editable) => Promise<void>) => void\n\texport type Edit = (editable: boolean) => Promise<void>\n\texport type Reset = () => Promise<void>\n\texport const type = Element.type.extend<Editable>({\n\t\tchanged: isly.boolean(),\n\t\tvalue: isly.any().optional(),\n\t})\n}\n"]}
+{"version":3,"file":"Editable.js","sourceRoot":"","sources":["../../../src/components/input/Editable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAO3B,MAAM,KAAW,QAAQ,CA4BxB;AA5BD,WAAiB,QAAQ;EAQxB,IAAiB,OAAO,CASvB;EATD,WAAiB,OAAO;IACV,YAAI,GAAG,IAAI,CAAC,MAAM,CAAU;MACxC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;MACrB,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE;MACxB,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAU;MAC/B,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAS;MAC7B,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE;KAChC,CAAC,CAAA;IACW,UAAE,GAAG,QAAA,IAAI,CAAC,EAAE,CAAA;EAC1B,CAAC,EATgB,OAAO,GAAP,gBAAO,KAAP,gBAAO,QASvB;EAID,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAe,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAwB,EAAE,CAAC,CAAA;EAClF,aAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAW;IACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;IACvB,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;IAC5B,mBAAmB,EAAE,YAAY;GACjC,CAAC,CAAA;EACW,WAAE,GAAG,SAAA,IAAI,CAAC,EAAE,CAAA;AAC1B,CAAC,EA5BgB,QAAQ,KAAR,QAAQ,QA4BxB","sourcesContent":["import { EventEmitter } from \"@stencil/core\"\nimport { isly } from \"isly\"\n\nexport interface Editable extends Editable.Element {\n\tchanged: boolean\n\tvalue?: any\n\tsmoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n}\nexport namespace Editable {\n\texport interface Element {\n\t\tedit: Editable.Edit\n\t\treset: Editable.Reset\n\t\treadonly: boolean\n\t\tlisten: Editable.Listen\n\t\tsetInitialValue: () => void\n\t}\n\texport namespace Element {\n\t\texport const type = isly.object<Element>({\n\t\t\tedit: isly.function(),\n\t\t\treadonly: isly.boolean(),\n\t\t\tlisten: isly.function<Listen>(),\n\t\t\treset: isly.function<Reset>(),\n\t\t\tsetInitialValue: isly.function(),\n\t\t})\n\t\texport const is = type.is\n\t}\n\texport type Listen = (property: \"changed\", listener: (parent: Editable) => Promise<void>) => void\n\texport type Edit = (editable: boolean) => Promise<void>\n\texport type Reset = () => Promise<void>\n\tconst EventEmitter = isly.object<EventEmitter>({ emit: isly.function<EventEmitter[\"emit\"]>() })\n\texport const type = Element.type.extend<Editable>({\n\t\tchanged: isly.boolean(),\n\t\tvalue: isly.any().optional(),\n\t\tsmoothlyFormDisable: EventEmitter,\n\t})\n\texport const is = type.is\n}\n"]}

package/dist/collection/components/input/Input.js

@@ -10,11 +10,13 @@ export var Input;
       color: Color.type.optional(),
       name: isly.string(),
       looks: Looks.type,
+      binary: isly.function().optional(),
     });
     Element.is = Element.type.is;
   })(Element = Input.Element || (Input.Element = {}));
   const EventEmitter = isly.object({ emit: isly.function() });
   Input.type = Element.type.extend({
+    smoothlyInputLoad: EventEmitter,
     smoothlyInput: EventEmitter,
     smoothlyInputForm: EventEmitter.optional(),
   });

package/dist/collection/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAM/B,MAAM,KAAW,KAAK,CAsBrB;AAtBD,WAAiB,KAAK;EAOrB,IAAiB,OAAO,CAQvB;EARD,WAAiB,OAAO;IACV,YAAI,GAAG,IAAI,CAAC,MAAM,CAAU;MACxC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAiD,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE;MACvG,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC5B,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;MACnB,KAAK,EAAE,KAAK,CAAC,IAAI;KACjB,CAAC,CAAA;IACW,UAAE,GAAG,QAAA,IAAI,CAAC,EAAE,CAAA;EAC1B,CAAC,EARgB,OAAO,GAAP,aAAO,KAAP,aAAO,QAQvB;EACD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAe,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAwB,EAAE,CAAC,CAAA;EAClF,UAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAQ;IAC9C,aAAa,EAAE,YAAY;IAC3B,iBAAiB,EAAE,YAAY,CAAC,QAAQ,EAAE;GAC1C,CAAC,CAAA;EACW,QAAE,GAAG,MAAA,IAAI,CAAC,EAAE,CAAA;AAC1B,CAAC,EAtBgB,KAAK,KAAL,KAAK,QAsBrB","sourcesContent":["import { EventEmitter } from \"@stencil/core\"\nimport { isly } from \"isly\"\nimport { Color, Data } from \"../../model\"\nimport { Looks } from \"./Looks\"\n\nexport interface Input extends Input.Element {\n\tsmoothlyInput: EventEmitter<Data>\n\tsmoothlyInputForm?: EventEmitter<Record<string, Data>>\n}\nexport namespace Input {\n\texport interface Element {\n\t\tvalue?: Data[string]\n\t\tcolor?: Color\n\t\tname: string\n\t\tlooks: Looks\n\t}\n\texport namespace Element {\n\t\texport const type = isly.object<Element>({\n\t\t\tvalue: isly.union<Required<Element>[\"value\"], Data, Data[string]>(Data.type, Data.valueType).optional(),\n\t\t\tcolor: Color.type.optional(),\n\t\t\tname: isly.string(),\n\t\t\tlooks: Looks.type,\n\t\t})\n\t\texport const is = type.is\n\t}\n\tconst EventEmitter = isly.object<EventEmitter>({ emit: isly.function<EventEmitter[\"emit\"]>() })\n\texport const type = Element.type.extend<Input>({\n\t\tsmoothlyInput: EventEmitter,\n\t\tsmoothlyInputForm: EventEmitter.optional(),\n\t})\n\texport const is = type.is\n}\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAO/B,MAAM,KAAW,KAAK,CA0BrB;AA1BD,WAAiB,KAAK;EAQrB,IAAiB,OAAO,CASvB;EATD,WAAiB,OAAO;IACV,YAAI,GAAG,IAAI,CAAC,MAAM,CAAU;MACxC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAiD,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE;MACvG,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC5B,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;MACnB,KAAK,EAAE,KAAK,CAAC,IAAI;MACjB,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAU,CAAC,QAAQ,EAAE;KAC1C,CAAC,CAAA;IACW,UAAE,GAAG,QAAA,IAAI,CAAC,EAAE,CAAA;EAC1B,CAAC,EATgB,OAAO,GAAP,aAAO,KAAP,aAAO,QASvB;EAED,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAe,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAwB,EAAE,CAAC,CAAA;EAClF,UAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAQ;IAC9C,iBAAiB,EAAE,YAAY;IAC/B,aAAa,EAAE,YAAY;IAC3B,iBAAiB,EAAE,YAAY,CAAC,QAAQ,EAAE;GAC1C,CAAC,CAAA;EACW,QAAE,GAAG,MAAA,IAAI,CAAC,EAAE,CAAA;AAC1B,CAAC,EA1BgB,KAAK,KAAL,KAAK,QA0BrB","sourcesContent":["import { EventEmitter } from \"@stencil/core\"\nimport { isly } from \"isly\"\nimport { Color, Data } from \"../../model\"\nimport { Looks } from \"./Looks\"\n\nexport interface Input extends Input.Element {\n\tsmoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tsmoothlyInput: EventEmitter<Data>\n\tsmoothlyInputForm?: EventEmitter<Record<string, Data>>\n}\nexport namespace Input {\n\texport interface Element {\n\t\tvalue?: Data[string]\n\t\tcolor?: Color\n\t\tname: string\n\t\tlooks: Looks\n\t\tbinary?: Binary\n\t}\n\texport namespace Element {\n\t\texport const type = isly.object<Element>({\n\t\t\tvalue: isly.union<Required<Element>[\"value\"], Data, Data[string]>(Data.type, Data.valueType).optional(),\n\t\t\tcolor: Color.type.optional(),\n\t\t\tname: isly.string(),\n\t\t\tlooks: Looks.type,\n\t\t\tbinary: isly.function<Binary>().optional(),\n\t\t})\n\t\texport const is = type.is\n\t}\n\texport type Binary = () => Promise<boolean>\n\tconst EventEmitter = isly.object<EventEmitter>({ emit: isly.function<EventEmitter[\"emit\"]>() })\n\texport const type = Element.type.extend<Input>({\n\t\tsmoothlyInputLoad: EventEmitter,\n\t\tsmoothlyInput: EventEmitter,\n\t\tsmoothlyInputForm: EventEmitter.optional(),\n\t})\n\texport const is = type.is\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { Date } from "isoly";
 export class InputDate {
   constructor() {
@@ -13,6 +13,7 @@ export class InputDate {
     this.disabled = undefined;
   }
   componentWillLoad() {
+    this.smoothlyInputLoad.emit(() => { });
     this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
   }
   async clear() {
@@ -247,6 +248,25 @@ export class InputDate {
   }
   static get events() {
     return [{
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
         "method": "smoothlyValueChange",
         "name": "smoothlyValueChange",
         "bubbles": true,

package/dist/collection/components/input/date/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/date/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { Date } from \"isoly\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class InputDate implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) disabled: boolean\n\t@Event() smoothlyValueChange: EventEmitter<Date>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Watch(\"value\")\n\tonStart(next: Date) {\n\t\tthis.smoothlyValueChange.emit(next)\n\t\tthis.smoothlyInput.emit({ [this.name]: next })\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyDateSet\")\n\tdateSetHandler(event: CustomEvent<Date>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={this.name}\n\t\t\t\tonFocus={() => (this.open = !this.open)}\n\t\t\t\tonClick={() => (this.open = !this.open)}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttype=\"date\"\n\t\t\t\tvalue={this.value}\n\t\t\t\tlooks={this.looks}\n\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\tonSmoothlyInput={e => (this.value = e.detail[this.name])}>\n\t\t\t\t<slot></slot>\n\t\t\t</smoothly-input>,\n\t\t\tthis.open && !this.disabled\n\t\t\t\t? [\n\t\t\t\t\t\t<div onClick={() => (this.open = false)}></div>,\n\t\t\t\t\t\t<nav>\n\t\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\t\t\tvalue={this.value ?? Date.now()}\n\t\t\t\t\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t\t</nav>,\n\t\t\t\t  ]\n\t\t\t\t: [],\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/date/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tListen,\n\tMethod,\n\tProp,\n\tWatch,\n} from \"@stencil/core\"\nimport { Date } from \"isoly\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class InputDate implements ComponentWillLoad, Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) disabled: boolean\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\t@Event() smoothlyValueChange: EventEmitter<Date>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(() => {})\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Watch(\"value\")\n\tonStart(next: Date) {\n\t\tthis.smoothlyValueChange.emit(next)\n\t\tthis.smoothlyInput.emit({ [this.name]: next })\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyDateSet\")\n\tdateSetHandler(event: CustomEvent<Date>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={this.name}\n\t\t\t\tonFocus={() => (this.open = !this.open)}\n\t\t\t\tonClick={() => (this.open = !this.open)}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttype=\"date\"\n\t\t\t\tvalue={this.value}\n\t\t\t\tlooks={this.looks}\n\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\tonSmoothlyInput={e => (this.value = e.detail[this.name])}>\n\t\t\t\t<slot></slot>\n\t\t\t</smoothly-input>,\n\t\t\tthis.open && !this.disabled\n\t\t\t\t? [\n\t\t\t\t\t\t<div onClick={() => (this.open = false)}></div>,\n\t\t\t\t\t\t<nav>\n\t\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\t\t\tvalue={this.value ?? Date.now()}\n\t\t\t\t\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t\t</nav>,\n\t\t\t\t  ]\n\t\t\t\t: [],\n\t\t]\n\t}\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { isoly } from "isoly";
 export class InputDateRange {
   constructor() {
@@ -20,6 +20,7 @@ export class InputDateRange {
     this.end = undefined;
   }
   componentWillLoad() {
+    this.smoothlyInputLoad.emit(() => { });
     this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
     if (this.start && this.end)
       this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } });
@@ -314,6 +315,25 @@ export class InputDateRange {
   }
   static get events() {
     return [{
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
         "method": "smoothlyValueChange",
         "name": "smoothlyValueChange",
         "bubbles": true,

package/dist/collection/components/input/date/range/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Clearable } from \"../../Clearable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class InputDateRange implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: isoly.Date\n\t@Prop({ mutable: true }) start?: isoly.Date\n\t@Prop({ mutable: true }) end?: isoly.Date\n\t@Prop({ mutable: true }) max: isoly.Date\n\t@Prop({ mutable: true }) min: isoly.Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() labelStart = \"from\"\n\t@Prop() labelEnd = \"to\"\n\t@Event() smoothlyValueChange: EventEmitter<isoly.Date>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t\tif (this.start && this.end)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t}\n\t@Watch(\"value\")\n\tonValue(next: isoly.Date) {\n\t\tthis.smoothlyValueChange.emit(next)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyStartChange\")\n\tonStartChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.start = event.detail\n\t}\n\t@Listen(\"smoothlyEndChange\")\n\tonEndChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.end = event.detail\n\t}\n\t@Listen(\"smoothlyDateRangeSet\")\n\tonDateRangeSet(event: CustomEvent<isoly.DateRange>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t\tisoly.DateRange.is(event.detail) && this.smoothlyInput.emit({ [this.name]: event.detail })\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabindex={0}>\n\t\t\t\t<section onClick={() => (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tname=\"start\"\n\t\t\t\t\t\tvalue={this.start}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.start = e.detail.start)}>\n\t\t\t\t\t\t{`${this.labelStart}`}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<span>–</span>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tname=\"end\"\n\t\t\t\t\t\tvalue={this.end}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.end = e.detail.end)}>\n\t\t\t\t\t\t{`${this.labelEnd}`}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</section>\n\t\t\t\t{this.open ? <div onClick={() => (this.open = false)}></div> : []}\n\t\t\t\t{this.open ? (\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\t\tvalue={this.value ?? isoly.Date.now()}\n\t\t\t\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t</nav>\n\t\t\t\t) : (\n\t\t\t\t\t[]\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/range/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAW7B,MAAM,OAAO,cAAc;;;iBAG6B,OAAO;;;;;;;;qBAQzB,IAAI;sBACpB,MAAM;oBACR,IAAI;;EAOvB,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;IACtB,IAAI,CAAC,GAAG,GAAG,SAAS,CAAA;EACrB,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;IACrC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IAC3G,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG;MACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;EAChF,CAAC;EAED,OAAO,CAAC,IAAgB;IACvB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EACpC,CAAC;EAED,oBAAoB,CAAC,KAAuC;IAC3D,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,yBAAyB,CAAC,KAA0C;IACnE,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,cAAc,CAAC,KAA8B;IAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAA;EAC1B,CAAC;EAED,YAAY,CAAC,KAA8B;IAC1C,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAA;EACxB,CAAC;EAED,cAAc,CAAC,KAAmC;IACjD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;IACjB,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAA;EAC3F,CAAC;EACD,MAAM;;IACL,OAAO,CACN,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC;MAChB,eAAS,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC/C,sBACC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAClD,GAAG,IAAI,CAAC,UAAU,EAAE,CACL;QACjB,yBAAc;QACd,sBACC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAC9C,GAAG,IAAI,CAAC,QAAQ,EAAE,CACH,CACR;MACT,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAAQ,CAAC,CAAC,CAAC,EAAE;MAChE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ;QACC,WAAK,KAAK,EAAC,OAAO,GAAO;QACzB,yBACC,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,EACrC,qBAAqB,EAAE,KAAK,CAAC,EAAE;YAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAA;YACzB,KAAK,CAAC,eAAe,EAAE,CAAA;UACxB,CAAC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,GAAsB,CAC/B,CACN,CAAC,CAAC,CAAC,CACH,EAAE,CACF,CACK,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tWatch,\n} from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Clearable } from \"../../Clearable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class InputDateRange implements ComponentWillLoad, Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: isoly.Date\n\t@Prop({ mutable: true }) start?: isoly.Date\n\t@Prop({ mutable: true }) end?: isoly.Date\n\t@Prop({ mutable: true }) max: isoly.Date\n\t@Prop({ mutable: true }) min: isoly.Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() labelStart = \"from\"\n\t@Prop() labelEnd = \"to\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\t@Event() smoothlyValueChange: EventEmitter<isoly.Date>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(() => {})\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t\tif (this.start && this.end)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t}\n\t@Watch(\"value\")\n\tonValue(next: isoly.Date) {\n\t\tthis.smoothlyValueChange.emit(next)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyStartChange\")\n\tonStartChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.start = event.detail\n\t}\n\t@Listen(\"smoothlyEndChange\")\n\tonEndChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.end = event.detail\n\t}\n\t@Listen(\"smoothlyDateRangeSet\")\n\tonDateRangeSet(event: CustomEvent<isoly.DateRange>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t\tisoly.DateRange.is(event.detail) && this.smoothlyInput.emit({ [this.name]: event.detail })\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabindex={0}>\n\t\t\t\t<section onClick={() => (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tname=\"start\"\n\t\t\t\t\t\tvalue={this.start}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.start = e.detail.start)}>\n\t\t\t\t\t\t{`${this.labelStart}`}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<span>–</span>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tname=\"end\"\n\t\t\t\t\t\tvalue={this.end}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.end = e.detail.end)}>\n\t\t\t\t\t\t{`${this.labelEnd}`}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</section>\n\t\t\t\t{this.open ? <div onClick={() => (this.open = false)}></div> : []}\n\t\t\t\t{this.open ? (\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\t\tvalue={this.value ?? isoly.Date.now()}\n\t\t\t\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t</nav>\n\t\t\t\t) : (\n\t\t\t\t\t[]\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -5,7 +5,7 @@ export class SmoothlyInputDemo {
     this.duration = { hours: 8 };
   }
   render() {
-    return (h(Host, null, h("h2", null, "Controlled form"), h("smoothly-input-demo-controlled-form", null), h("h2", null, "Create form defaulting type"), h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with clear button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+    return (h(Host, null, h("h2", null, "Controlled form"), h("smoothly-input-demo-controlled-form", null), h("h2", null, "Create form defaulting type"), h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with clear button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-file", { name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { slot: "label" }, "Profile"), h("smoothly-icon", { slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, 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;