smoothly 1.0.0-alpha.146 → 1.0.0-alpha.148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/smoothly-accordion_73.cjs.entry.js +32 -20
  3. package/dist/cjs/smoothly-accordion_73.cjs.entry.js.map +1 -1
  4. package/dist/cjs/smoothly.cjs.js +1 -1
  5. package/dist/collection/components/input/demo/index.js +1 -1
  6. package/dist/collection/components/input/demo/index.js.map +1 -1
  7. package/dist/collection/components/input/range/index.js +26 -3
  8. package/dist/collection/components/input/range/index.js.map +1 -1
  9. package/dist/collection/components/input/range/style.css +9 -12
  10. package/dist/collection/components/picker/demo/index.js +15 -15
  11. package/dist/collection/components/picker/demo/index.js.map +1 -1
  12. package/dist/collection/components/picker/demo/style.css +4 -0
  13. package/dist/collection/components/picker/menu/index.js +7 -0
  14. package/dist/collection/components/picker/menu/index.js.map +1 -1
  15. package/dist/custom-elements/index.js +33 -21
  16. package/dist/custom-elements/index.js.map +1 -1
  17. package/dist/esm/loader.js +1 -1
  18. package/dist/esm/smoothly-accordion_73.entry.js +32 -20
  19. package/dist/esm/smoothly-accordion_73.entry.js.map +1 -1
  20. package/dist/esm/smoothly.js +1 -1
  21. package/dist/smoothly/{p-d452509e.entry.js → p-21928968.entry.js} +2 -2
  22. package/dist/smoothly/p-21928968.entry.js.map +1 -0
  23. package/dist/smoothly/smoothly.esm.js +1 -1
  24. package/dist/smoothly/smoothly.esm.js.map +1 -1
  25. package/dist/types/components/input/range/index.d.ts +2 -0
  26. package/dist/types/components/picker/demo/index.d.ts +6 -2
  27. package/dist/types/components/picker/menu/index.d.ts +1 -0
  28. package/dist/types/components.d.ts +2 -0
  29. package/package.json +1 -1
  30. package/dist/smoothly/p-d452509e.entry.js.map +0 -1
@@ -15,7 +15,7 @@ const patchEsm = () => {
15
15
  const defineCustomElements = (win, options) => {
16
16
  if (typeof window === 'undefined') return Promise.resolve();
17
17
  return patchEsm().then(() => {
18
- return index.bootstrapLazy(JSON.parse("[[\"smoothly-accordion_73.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",{\"duration\":[32]},[[0,\"selectionChanged\",\"handleSelectionChanged\"]]],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32],\"selectRoom\":[64]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-button-demo\"],[0,\"smoothly-dialog-demo\"],[2,\"smoothly-select-demo\"],[2,\"smoothly-theme-colors\"],[6,\"smoothly-theme-picker\",{\"element\":[1]}],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"disabled\":[516],\"path\":[1],\"to\":[1],\"selected\":[1540],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"counter\":[32],\"data\":[32],\"change\":[32]},[[0,\"smoothlyFormSubmit\",\"submitHandler\"]]],[2,\"smoothly-table-demo-filtered\",{\"criteria\":[32],\"data\":[32],\"selector\":[32]},[[0,\"filters\",\"onFilterUpdate\"],[2,\"smoothlyInput\",\"smoothlyInputHandler\"]]],[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,\"dateSet\",\"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,\"startChanged\",\"onStartChanged\"],[0,\"endChanged\",\"onEndChanged\"],[0,\"dateRangeSet\",\"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-burger\",{\"visible\":[1540],\"open\":[1540],\"mediaQuery\":[513,\"media-query\"],\"history\":[32]},[[0,\"click\",\"clickHandler\"],[9,\"resize\",\"resizeHandler\"]]],[6,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"unavailable\":[516],\"disabled\":[516],\"name\":[1],\"value\":[8],\"t\":[32],\"toggle\":[64],\"clear\":[64]}],[6,\"smoothly-input-file\",{\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64]}],[6,\"smoothly-radio-button-item\",{\"value\":[8],\"selected\":[1540],\"color\":[513]}],[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]}],[6,\"smoothly-accordion\",{\"value\":[1025],\"removeItem\":[64]},[[0,\"smoothlyOpen\",\"handleOpenClose\"],[0,\"smoothlyClose\",\"handleOpenClose\"],[0,\"smoothlyAccordionItemWillLoad\",\"onAccordionItemDidLoad\"]]],[6,\"smoothly-accordion-item\",{\"name\":[1],\"brand\":[1],\"open\":[1540]}],[2,\"smoothly-display-amount\",{\"amount\":[8],\"currency\":[1],\"toInteger\":[4,\"to-integer\"]}],[2,\"smoothly-frame\",{\"url\":[1],\"name\":[1],\"origin\":[1],\"send\":[64]}],[1,\"smoothly-input-range\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"name\":[1],\"labelText\":[1,\"label-text\"]}],[6,\"smoothly-label\",{\"hue\":[2],\"description\":[1],\"shape\":[513]}],[6,\"smoothly-popup\",{\"visible\":[1540],\"direction\":[1537],\"cssVariables\":[32]}],[6,\"smoothly-quiet\",{\"color\":[1]}],[6,\"smoothly-radio\",{\"name\":[1],\"value\":[1],\"checked\":[1540],\"tab\":[2]}],[6,\"smoothly-radio-button\",{\"name\":[1],\"value\":[1032],\"deselectable\":[516],\"decoration\":[513]},[[2,\"radioItemSelectInternal\",\"radioSelectHandler\"]]],[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\"]]],[1,\"smoothly-filter\",{\"placeholder\":[1025],\"criteria\":[1040],\"inputValue\":[1032,\"input-value\"],\"expanded\":[32],\"freeSearchValue\":[32],\"clear\":[64]},[[0,\"filter\",\"filterHandler\"]]],[6,\"smoothly-picker\",{\"looks\":[1537],\"name\":[513],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[516],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[1,\"smoothly-filter-input\",{\"name\":[513],\"value\":[1025],\"type\":[513],\"required\":[1540],\"minLength\":[2,\"min-length\"],\"showLabel\":[516,\"show-label\"],\"maxLength\":[2,\"max-length\"],\"autocomplete\":[4],\"pattern\":[16],\"placeholder\":[1],\"disabled\":[4],\"readonly\":[516],\"currency\":[513],\"comparison\":[1],\"criteria\":[32],\"clear\":[64]}],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[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\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[6,\"smoothly-table-footer\"],[2,\"smoothly-theme-color-variant\",{\"color\":[513],\"variant\":[513]}],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[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\"]]],[2,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"firstSelected\":[32]}],[6,\"smoothly-table-cell\"],[6,\"smoothly-table-expandable-cell\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"click\",\"onClick\"],[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-display\",{\"type\":[1],\"value\":[8],\"currency\":[1],\"country\":[1],\"format\":[16]}],[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-header\",{\"name\":[1]}],[6,\"smoothly-table-row\",{\"open\":[1540]},[[0,\"smoothlyExpansionLoad\",\"onExpansionLoad\"],[0,\"smoothlyExpandableChange\",\"onExpansionChange\"],[0,\"smoothlyExpansionOpen\",\"onExpansionOpen\"]]],[2,\"smoothly-input-month\",{\"value\":[1025]}],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"required\":[516],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[6,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"looks\":[513],\"name\":[1],\"method\":[1],\"action\":[1],\"processing\":[1540],\"prevent\":[4],\"changed\":[1540],\"notice\":[32],\"submit\":[64],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlySubmit\",\"smoothlySubmitHandler\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[6,\"smoothly-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[16],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"itemSelected\",\"onItemSelected\"],[0,\"keydown\",\"onKeyDown\"]]],[6,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]]],[6,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-input\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1032],\"type\":[513],\"required\":[1540],\"minLength\":[1026,\"min-length\"],\"showLabel\":[516,\"show-label\"],\"maxLength\":[1026,\"max-length\"],\"autocomplete\":[1028],\"pattern\":[1040],\"placeholder\":[1537],\"disabled\":[1028],\"readonly\":[1540],\"currency\":[513],\"changed\":[1540],\"formatter\":[32],\"initialValue\":[32],\"clear\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"],\"document\":[32]}]]],[\"smoothly-addresses.cjs\",[[2,\"smoothly-addresses\",{\"value\":[16],\"editable\":[16]}]]],[\"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-radio-group.cjs\",[[4,\"smoothly-radio-group\",{\"orientation\":[513]}]]],[\"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-address-display.cjs\",[[2,\"smoothly-address-display\",{\"value\":[16],\"editable\":[4]}]]],[\"smoothly-address.cjs\",[[2,\"smoothly-address\",{\"value\":[16],\"editable\":[4]}]]]]"), options);
18
+ return index.bootstrapLazy(JSON.parse("[[\"smoothly-accordion_73.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",{\"duration\":[32]},[[0,\"selectionChanged\",\"handleSelectionChanged\"]]],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32],\"selectRoom\":[64]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-button-demo\"],[0,\"smoothly-dialog-demo\"],[2,\"smoothly-select-demo\"],[2,\"smoothly-theme-colors\"],[6,\"smoothly-theme-picker\",{\"element\":[1]}],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"disabled\":[516],\"path\":[1],\"to\":[1],\"selected\":[1540],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"counter\":[32],\"data\":[32],\"change\":[32]},[[0,\"smoothlyFormSubmit\",\"submitHandler\"]]],[2,\"smoothly-table-demo-filtered\",{\"criteria\":[32],\"data\":[32],\"selector\":[32]},[[0,\"filters\",\"onFilterUpdate\"],[2,\"smoothlyInput\",\"smoothlyInputHandler\"]]],[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,\"dateSet\",\"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,\"startChanged\",\"onStartChanged\"],[0,\"endChanged\",\"onEndChanged\"],[0,\"dateRangeSet\",\"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-burger\",{\"visible\":[1540],\"open\":[1540],\"mediaQuery\":[513,\"media-query\"],\"history\":[32]},[[0,\"click\",\"clickHandler\"],[9,\"resize\",\"resizeHandler\"]]],[6,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"unavailable\":[516],\"disabled\":[516],\"name\":[1],\"value\":[8],\"t\":[32],\"toggle\":[64],\"clear\":[64]}],[6,\"smoothly-input-file\",{\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"clear\":[64]}],[6,\"smoothly-radio-button-item\",{\"value\":[8],\"selected\":[1540],\"color\":[513]}],[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]}],[6,\"smoothly-accordion\",{\"value\":[1025],\"removeItem\":[64]},[[0,\"smoothlyOpen\",\"handleOpenClose\"],[0,\"smoothlyClose\",\"handleOpenClose\"],[0,\"smoothlyAccordionItemWillLoad\",\"onAccordionItemDidLoad\"]]],[6,\"smoothly-accordion-item\",{\"name\":[1],\"brand\":[1],\"open\":[1540]}],[2,\"smoothly-display-amount\",{\"amount\":[8],\"currency\":[1],\"toInteger\":[4,\"to-integer\"]}],[2,\"smoothly-frame\",{\"url\":[1],\"name\":[1],\"origin\":[1],\"send\":[64]}],[1,\"smoothly-input-range\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"name\":[1],\"labelText\":[1,\"label-text\"],\"step\":[8]}],[6,\"smoothly-label\",{\"hue\":[2],\"description\":[1],\"shape\":[513]}],[6,\"smoothly-popup\",{\"visible\":[1540],\"direction\":[1537],\"cssVariables\":[32]}],[6,\"smoothly-quiet\",{\"color\":[1]}],[6,\"smoothly-radio\",{\"name\":[1],\"value\":[1],\"checked\":[1540],\"tab\":[2]}],[6,\"smoothly-radio-button\",{\"name\":[1],\"value\":[1032],\"deselectable\":[516],\"decoration\":[513]},[[2,\"radioItemSelectInternal\",\"radioSelectHandler\"]]],[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\"]]],[1,\"smoothly-filter\",{\"placeholder\":[1025],\"criteria\":[1040],\"inputValue\":[1032,\"input-value\"],\"expanded\":[32],\"freeSearchValue\":[32],\"clear\":[64]},[[0,\"filter\",\"filterHandler\"]]],[6,\"smoothly-picker\",{\"looks\":[1537],\"name\":[513],\"open\":[1540],\"mutable\":[516],\"multiple\":[516],\"readonly\":[516],\"validator\":[16],\"selected\":[32],\"display\":[32],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyPickerMenuLoaded\",\"menuLoadedHandler\"],[0,\"smoothlyPickerOptionLoaded\",\"optionLoadedHandler\"],[0,\"smoothlyPickerOptionChange\",\"optionChangeHandler\"],[8,\"click\",\"clickHandler\"],[8,\"focusin\",\"focusHandler\"]]],[1,\"smoothly-filter-input\",{\"name\":[513],\"value\":[1025],\"type\":[513],\"required\":[1540],\"minLength\":[2,\"min-length\"],\"showLabel\":[516,\"show-label\"],\"maxLength\":[2,\"max-length\"],\"autocomplete\":[4],\"pattern\":[16],\"placeholder\":[1],\"disabled\":[4],\"readonly\":[516],\"currency\":[513],\"comparison\":[1],\"criteria\":[32],\"clear\":[64]}],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[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\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[6,\"smoothly-table-footer\"],[2,\"smoothly-theme-color-variant\",{\"color\":[513],\"variant\":[513]}],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[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\"]]],[2,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1025],\"end\":[1025],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"firstSelected\":[32]}],[6,\"smoothly-table-cell\"],[6,\"smoothly-table-expandable-cell\",{\"align\":[1],\"open\":[1540],\"allowSpotlight\":[32],\"spotlight\":[32]},[[0,\"click\",\"onClick\"],[0,\"smoothlyTableLoad\",\"handleTableLoaded\"]]],[2,\"smoothly-display\",{\"type\":[1],\"value\":[8],\"currency\":[1],\"country\":[1],\"format\":[16]}],[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-header\",{\"name\":[1]}],[6,\"smoothly-table-row\",{\"open\":[1540]},[[0,\"smoothlyExpansionLoad\",\"onExpansionLoad\"],[0,\"smoothlyExpandableChange\",\"onExpansionChange\"],[0,\"smoothlyExpansionOpen\",\"onExpansionOpen\"]]],[2,\"smoothly-input-month\",{\"value\":[1025]}],[1,\"smoothly-picker-option\",{\"selected\":[1540],\"visible\":[1540],\"value\":[1032],\"search\":[1040],\"position\":[514],\"required\":[516],\"readonly\":[32],\"slotted\":[32],\"clickHandler\":[64]}],[6,\"smoothly-slot-elements\",{\"clone\":[4],\"nodes\":[1040]}],[6,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]],[6,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"filter\":[64]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-slotted-elements\",{\"clone\":[4]}],[4,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"looks\":[513],\"name\":[1],\"method\":[1],\"action\":[1],\"processing\":[1540],\"prevent\":[4],\"changed\":[1540],\"notice\":[32],\"submit\":[64],\"clear\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlySubmit\",\"smoothlySubmitHandler\"],[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[6,\"smoothly-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[16],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"itemSelected\",\"onItemSelected\"],[0,\"keydown\",\"onKeyDown\"]]],[6,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[2,\"smoothly-spinner\",{\"active\":[516],\"size\":[513]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]]],[6,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[6,\"smoothly-input\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1032],\"type\":[513],\"required\":[1540],\"minLength\":[1026,\"min-length\"],\"showLabel\":[516,\"show-label\"],\"maxLength\":[1026,\"max-length\"],\"autocomplete\":[1028],\"pattern\":[1040],\"placeholder\":[1537],\"disabled\":[1028],\"readonly\":[1540],\"currency\":[513],\"changed\":[1540],\"formatter\":[32],\"initialValue\":[32],\"clear\":[64],\"getFormData\":[64],\"setKeepFocusOnReRender\":[64],\"setSelectionRange\":[64]},[[0,\"smoothlyInputLoad\",\"SmoothlyInputLoadHandler\"]]],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"toolTip\":[1,\"tool-tip\"],\"document\":[32]}]]],[\"smoothly-addresses.cjs\",[[2,\"smoothly-addresses\",{\"value\":[16],\"editable\":[16]}]]],[\"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-radio-group.cjs\",[[4,\"smoothly-radio-group\",{\"orientation\":[513]}]]],[\"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-address-display.cjs\",[[2,\"smoothly-address-display\",{\"value\":[16],\"editable\":[4]}]]],[\"smoothly-address.cjs\",[[2,\"smoothly-address\",{\"value\":[16],\"editable\":[4]}]]]]"), options);
19
19
  });
20
20
  };
21
21
 
@@ -9365,7 +9365,7 @@ const SmoothlyInputDemo = class {
9365
9365
  console.log("selectionChanged", event.detail);
9366
9366
  }
9367
9367
  render() {
9368
- return (index.h(index.Host, null, index.h("h2", null, "Range"), index.h("smoothly-form", null, index.h("smoothly-input-range", { labelText: "Hej" }, index.h("div", { slot: "label" }, "Select number in range"))), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
9368
+ return (index.h(index.Host, null, index.h("h2", null, "Range"), index.h("smoothly-form", null, index.h("smoothly-input-range", { step: 1 }, index.h("div", { slot: "label" }, "Select number in range"))), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
9369
9369
  const duration = e.detail.duration;
9370
9370
  console.log("event duration", duration);
9371
9371
  this.duration = duration;
@@ -9471,7 +9471,7 @@ const MonthSelector = class {
9471
9471
  };
9472
9472
  MonthSelector.style = styleCss$G;
9473
9473
 
9474
- const styleCss$F = ":host{display:flex;position:relative;flex-wrap:wrap;width:100%;justify-content:space-between}:host .output-container{width:98%;margin:auto;position:relative;height:2em}:host output{position:absolute;transform:translateX(-50%);font-weight:600;font-size:1.2em;left:var(--left-adjustment, 0)}:host ::slotted(div),:host label{margin-bottom:1.5em;font-size:1.5em}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;height:3em}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:2em;width:2em;border-radius:50%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--smoothly-primary-contrast)) solid;cursor:pointer;margin-top:.5em;}input[type=range]::-moz-range-thumb{height:2em;width:2em;border-radius:50%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--smoothly-primary-contrast)) solid;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{padding:0 7px;height:100%;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}input[type=range]::-moz-range-track{width:101%;height:3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}.min,.max{display:inline-block;margin:0.5em}.max{text-align:right}";
9474
+ const styleCss$F = ":host{display:flex;position:relative;flex-wrap:wrap;width:100%;justify-content:space-between}:host .output-container{width:100%;margin:0 1.2em;position:relative;height:2em}:host output{position:absolute;transform:translateX(-50%);font-weight:600;font-size:1.2em;left:var(--left-adjustment, 0)}:host ::slotted(div),:host label{margin-bottom:.5em;font-size:1.5em}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;height:3em}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:2em;width:2em;border-radius:50%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--smoothly-primary-contrast)) solid;cursor:pointer;margin-top:.5em;}input[type=range]::-moz-range-thumb{height:2em;width:2em;border-radius:50%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--smoothly-primary-contrast)) solid;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{padding:0 .6em;height:100%;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}input[type=range]::-moz-range-track{width:calc(100% + 1em);height:3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}.min,.max{display:inline-block;margin:0.5em .8em}.max{text-align:right}";
9475
9475
 
9476
9476
  const SmoothlyInputRange = class {
9477
9477
  constructor(hostRef) {
@@ -9479,15 +9479,20 @@ const SmoothlyInputRange = class {
9479
9479
  this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
9480
9480
  this.value = 0;
9481
9481
  this.min = 0;
9482
- this.max = 1;
9482
+ this.max = 100;
9483
9483
  this.name = undefined;
9484
9484
  this.labelText = undefined;
9485
+ this.step = "any";
9485
9486
  }
9486
9487
  valueChanged() {
9487
9488
  this.smoothlyInput.emit({ [this.name]: this.value });
9488
9489
  }
9490
+ inputHandler(e) {
9491
+ e.target instanceof HTMLInputElement &&
9492
+ (this.value = this.step !== "any" ? e.target.valueAsNumber : Math.round(e.target.valueAsNumber * 100) / 100);
9493
+ }
9489
9494
  render() {
9490
- return (index.h(index.Host, { style: { "--left-adjustment": `${(this.value / this.max) * 100}%` } }, index.h("slot", { name: "label" }, typeof this.labelText === "string" && index.h("label", { htmlFor: this.name }, this.labelText)), index.h("div", { class: "output-container" }, index.h("output", { htmlFor: this.name }, this.value)), index.h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: "any", onInput: e => e.target instanceof HTMLInputElement && (this.value = Number.parseFloat(e.target.value)), value: this.value }), index.h("p", { class: "min" }, this.min), index.h("p", { class: "max" }, this.max)));
9495
+ return (index.h(index.Host, { style: { "--left-adjustment": `${(this.value / this.max) * 100}%` } }, index.h("slot", { name: "label" }, typeof this.labelText === "string" && index.h("label", { htmlFor: this.name }, this.labelText)), index.h("div", { class: "output-container" }, index.h("output", { htmlFor: this.name }, this.value)), index.h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: this.step, onInput: e => this.inputHandler(e), value: this.value }), index.h("p", { class: "min" }, this.min), index.h("p", { class: "max" }, this.max)));
9491
9496
  }
9492
9497
  static get watchers() { return {
9493
9498
  "value": ["valueChanged"]
@@ -9880,7 +9885,7 @@ const SmoothlyPicker = class {
9880
9885
  };
9881
9886
  SmoothlyPicker.style = styleCss$z;
9882
9887
 
9883
- const styleCss$y = ".sc-smoothly-picker-demo-h{display:flex;flex-direction:column}.sc-smoothly-picker-demo-h smoothly-form.sc-smoothly-picker-demo{max-width:50rem}.sc-smoothly-picker-demo-h .counter.sc-smoothly-picker-demo{position:relative;width:3rem;height:3rem}.sc-smoothly-picker-demo-h .counter-button.sc-smoothly-picker-demo{position:absolute;top:0;left:0;padding:0;margin:0;height:3rem;width:3rem;background-color:inherit;border:none;display:flex;justify-content:center;align-items:center}";
9888
+ const styleCss$y = ".sc-smoothly-picker-demo-h{display:flex;flex-direction:column}.sc-smoothly-picker-demo-h smoothly-form.sc-smoothly-picker-demo{max-width:50rem}.sc-smoothly-picker-demo-h .counter.sc-smoothly-picker-demo{position:relative;width:3rem;height:3rem}.sc-smoothly-picker-demo-h .counter-button.sc-smoothly-picker-demo{position:absolute;top:0;left:0;padding:0;margin:0;height:3rem;width:3rem;background-color:inherit;border:none;display:flex;justify-content:center;align-items:center}.sc-smoothly-picker-demo-h .controlled.sc-smoothly-picker-demo smoothly-input.sc-smoothly-picker-demo:not([readonly]),.sc-smoothly-picker-demo-h .controlled.sc-smoothly-picker-demo smoothly-picker.sc-smoothly-picker-demo:not([readonly]){outline:1px solid rgb(var(--smoothly-success-color))}";
9884
9889
 
9885
9890
  function validateEmail(email) {
9886
9891
  return email.match(/^.+@.+/) ? true : { result: false, notice: redirect.Notice.failed("That is not an email") };
@@ -9896,18 +9901,18 @@ const SmoothlyPickerDemo = class {
9896
9901
  this.counter = 3;
9897
9902
  this.data = {
9898
9903
  message: "hello world",
9899
- emails: ["jessie@rocket.com", "james@rocket.com"],
9904
+ emails: [{ value: "jessie@rocket.com" }, { value: "james@rocket.com" }],
9900
9905
  options: [
9901
- "giovani@rocket.com",
9902
- "john@example.com",
9903
- "jane@example.com",
9904
- "jack@example.com",
9905
- "jessica@example.com",
9906
- "julia@example.com",
9907
- "jayden@example.com",
9908
- "jake@example.com",
9909
- "jamie@example.com",
9910
- "jasmine@example.com",
9906
+ { value: "giovani@rocket.com" },
9907
+ { value: "john@example.com" },
9908
+ { value: "jane@example.com" },
9909
+ { value: "jack@example.com" },
9910
+ { value: "jessica@example.com" },
9911
+ { value: "julia@example.com" },
9912
+ { value: "jayden@example.com" },
9913
+ { value: "jake@example.com" },
9914
+ { value: "jamie@example.com" },
9915
+ { value: "jasmine@example.com" },
9911
9916
  ],
9912
9917
  };
9913
9918
  this.change = undefined;
@@ -9934,13 +9939,13 @@ const SmoothlyPickerDemo = class {
9934
9939
  }
9935
9940
  render() {
9936
9941
  var _a, _b;
9937
- return (index.h(index.Host, null, index.h("div", null, index.h("smoothly-button", { onClick: () => (this.counter += 1) }, "Add one"), index.h("smoothly-button", { onClick: () => (this.counter -= 1) }, "Remove one"), index.h("smoothly-picker", { class: "counter", key: Array.from({ length: this.counter }).toString(), name: "counter", multiple: true, mutable: true, onSmoothlyInput: e => console.log("demo counter input", e.detail) }, Array.from({ length: this.counter }).map((_, index$1) => (index.h("smoothly-picker-option", { value: index$1, selected: index$1 < this.counter - 1 }, index$1))), index.h("span", { slot: "search" }, "Search"), index.h("button", { slot: "child", class: "counter-button" }, index.h("smoothly-icon", { name: "add-outline" })))), index.h("smoothly-button", { onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), index.h("h5", null, "Controlled input"), index.h("smoothly-form", { looks: "line", onSmoothlyFormInput: e => this.inputHandler(e) }, index.h("smoothly-input", { readonly: !this.change, name: "message", value: this.data.message }, "Message"), index.h("smoothly-picker", { name: "emails", mutable: true, multiple: true, readonly: !this.change, validator: validateEmail, onSmoothlyPickerLoaded: e => this.loadedHandler(e) }, index.h("span", { slot: "label" }, "Emails"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-add-outline" }), ((_b = (_a = this.change) === null || _a === void 0 ? void 0 : _a.emails) !== null && _b !== void 0 ? _b : this.data.emails).map(email => {
9942
+ return (index.h(index.Host, null, index.h("div", null, index.h("smoothly-button", { onClick: () => (this.counter += 1) }, "Add one"), index.h("smoothly-button", { onClick: () => (this.counter -= 1) }, "Remove one"), index.h("smoothly-picker", { class: "counter", key: Array.from({ length: this.counter }).toString(), name: "counter", multiple: true, mutable: true, onSmoothlyInput: e => console.log("demo counter input", e.detail) }, Array.from({ length: this.counter }).map((_, index$1) => (index.h("smoothly-picker-option", { value: index$1, selected: index$1 < this.counter - 1 }, index$1))), index.h("span", { slot: "search" }, "Search"), index.h("button", { slot: "child", class: "counter-button" }, index.h("smoothly-icon", { name: "add-outline" })))), index.h("h5", null, "Controlled input"), index.h("smoothly-button", { color: "secondary", onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), index.h("smoothly-form", { class: "controlled", looks: "line", onSmoothlyFormInput: e => this.inputHandler(e) }, index.h("smoothly-input", { readonly: !this.change, name: "message", value: this.data.message }, "Message"), index.h("smoothly-picker", { name: "emails", mutable: true, multiple: true, readonly: !this.change, validator: validateEmail, onSmoothlyPickerLoaded: e => this.loadedHandler(e) }, index.h("span", { slot: "label" }, "Emails"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-add-outline" }), ((_b = (_a = this.change) === null || _a === void 0 ? void 0 : _a.emails) !== null && _b !== void 0 ? _b : this.data.emails).map(email => {
9938
9943
  var _a;
9939
- return (index.h("smoothly-picker-option", { key: email, value: email, selected: true, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email]), index.h("span", { slot: "label" }, email), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
9944
+ return (index.h("smoothly-picker-option", { key: email.value, value: email, selected: true, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email.value]), index.h("span", { slot: "label" }, email.value), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
9940
9945
  }), this.data.options.map(email => {
9941
9946
  var _a;
9942
- return (index.h("smoothly-picker-option", { key: email, value: email, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email]), index.h("span", { slot: "label" }, email), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
9943
- })), index.h("smoothly-submit", { size: "icon", slot: "submit" }, index.h("smoothly-icon", { name: "checkmark-circle" })), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear")), index.h("h5", null, "uncontrolled inputs"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, index.h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), index.h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, index.h("span", { slot: "label" }, "Emails"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), index.h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), index.h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), index.h("smoothly-submit", { slot: "submit" }, "Submit"), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-picker", { name: "shape" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish"))), index.h("smoothly-picker", { looks: "border", name: "icon", multiple: true }, index.h("span", { slot: "label" }, "Icon"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle", required: true }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" })), index.h("smoothly-picker-option", { value: "airplane" }, index.h("span", { slot: "label" }, "Airplane"), index.h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), index.h("smoothly-picker-option", { value: "alarm" }, index.h("span", { slot: "label" }, "Alarm"), index.h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), index.h("smoothly-picker-option", { value: "archive" }, index.h("span", { slot: "label" }, "Archive"), index.h("smoothly-icon", { size: "tiny", name: "archive-outline" })), index.h("smoothly-picker-option", { value: "bag" }, index.h("span", { slot: "label" }, "Bag"), index.h("smoothly-icon", { size: "tiny", name: "bag-outline" })), index.h("smoothly-picker-option", { value: "cafe" }, index.h("span", { slot: "label" }, "Cafe"), index.h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), index.h("smoothly-picker-option", { value: "disc" }, index.h("span", { slot: "label" }, "Disc"), index.h("smoothly-icon", { size: "tiny", name: "disc-outline" })), index.h("smoothly-picker-option", { value: "earth" }, index.h("span", { slot: "label" }, "Earth"), index.h("smoothly-icon", { size: "tiny", name: "earth-outline" })), index.h("smoothly-picker-option", { value: "fast-food" }, index.h("span", { slot: "label" }, "Fast food"), index.h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
9947
+ return (index.h("smoothly-picker-option", { key: email.value, value: email, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email.value]), index.h("span", { slot: "label" }, email.value), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
9948
+ })), index.h("smoothly-input-clear", { slot: "submit", type: "form", color: "danger", fill: "solid" }, "Clear"), index.h("smoothly-button", { slot: "submit", color: "secondary", onClick: () => { var _a; return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.clear(); } }, "Removed added by mutation"), index.h("smoothly-submit", { size: "icon", slot: "submit" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h5", null, "uncontrolled inputs"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, index.h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), index.h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, index.h("span", { slot: "label" }, "Emails"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), index.h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), index.h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), index.h("smoothly-submit", { slot: "submit" }, "Submit"), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-picker", { name: "shape" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish"))), index.h("smoothly-picker", { looks: "border", name: "icon", multiple: true }, index.h("span", { slot: "label" }, "Icon"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle", required: true }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" })), index.h("smoothly-picker-option", { value: "airplane" }, index.h("span", { slot: "label" }, "Airplane"), index.h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), index.h("smoothly-picker-option", { value: "alarm" }, index.h("span", { slot: "label" }, "Alarm"), index.h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), index.h("smoothly-picker-option", { value: "archive" }, index.h("span", { slot: "label" }, "Archive"), index.h("smoothly-icon", { size: "tiny", name: "archive-outline" })), index.h("smoothly-picker-option", { value: "bag" }, index.h("span", { slot: "label" }, "Bag"), index.h("smoothly-icon", { size: "tiny", name: "bag-outline" })), index.h("smoothly-picker-option", { value: "cafe" }, index.h("span", { slot: "label" }, "Cafe"), index.h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), index.h("smoothly-picker-option", { value: "disc" }, index.h("span", { slot: "label" }, "Disc"), index.h("smoothly-icon", { size: "tiny", name: "disc-outline" })), index.h("smoothly-picker-option", { value: "earth" }, index.h("span", { slot: "label" }, "Earth"), index.h("smoothly-icon", { size: "tiny", name: "earth-outline" })), index.h("smoothly-picker-option", { value: "fast-food" }, index.h("span", { slot: "label" }, "Fast food"), index.h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
9944
9949
  }
9945
9950
  };
9946
9951
  SmoothlyPickerDemo.style = styleCss$y;
@@ -10027,6 +10032,13 @@ const SmoothlyPickerMenu = class {
10027
10032
  }
10028
10033
  }
10029
10034
  },
10035
+ clear: () => {
10036
+ const backend = Array.from(this.backend.entries());
10037
+ backend.filter(([key]) => this.created.has(key)).forEach(([, option]) => option.set.selected(false));
10038
+ this.backend = new Map(backend.filter(([key]) => !this.created.has(key)));
10039
+ this.options = new Map(Array.from(this.options.entries()).filter(([key]) => !this.created.has(key)));
10040
+ this.created = new Map();
10041
+ },
10030
10042
  synced: () => this.synced,
10031
10043
  });
10032
10044
  }