smoothly 1.0.0-alpha.13 → 1.0.0-alpha.131

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Notice, Option } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-picker\",\n\tstyleUrl: \"style.scss\",\n\tshadow: true,\n})\nexport class SmoothlyPicker {\n\tprivate inputElement: HTMLInputElement\n\tprivate keepFocusOnReRender = false\n\tprivate menuElement: HTMLSmoothlyMenuOptionsElement\n\t@Element() element: HTMLElement\n\t@State() isOpen: boolean\n\t@State() empty: boolean\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() maxMenuHeight = \"inherit\"\n\t@Prop() maxHeight: string\n\t@Prop({ mutable: true }) emptyMenuLabel = \"No Options\"\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop() mutable = false\n\t@Prop() optionStyle: any\n\t@Prop({ mutable: true, reflect: true }) options: (Option & { checked?: boolean })[] = []\n\t@Prop({ reflect: true }) labelSetting: \"hide\" | \"default\"\n\t@Prop({ reflect: true }) label: string\n\t@Prop({ mutable: true }) selections: Option[] = []\n\t@Prop({ mutable: true }) selectNoneName = \"Select None\"\n\t@Prop({ mutable: true }) selectAllName = \"Select All\"\n\t@Prop({ mutable: true }) selectionName = \"items selected\"\n\t@Prop({ mutable: true }) newOptionLabel = \"Add:\"\n\t@Prop() valueValidator: (value: any) => [boolean, Notice | undefined] = _ => [true, undefined]\n\t@Event() menuClose: EventEmitter<Option[]>\n\t@Event() notice: EventEmitter<Notice>\n\t@Watch(\"isOpen\")\n\tisOpenChangeHandler() {\n\t\tif (this.isOpen == false) {\n\t\t\tthis.menuClose.emit(this.selections)\n\t\t}\n\t}\n\tcomponentDidRender() {\n\t\tthis.filterOptions()\n\t\tif (this.keepFocusOnReRender) {\n\t\t\tthis.inputElement.focus()\n\t\t\tthis.keepFocusOnReRender = false\n\t\t}\n\t}\n\t@Listen(\"optionSelect\")\n\t@Listen(\"optionUnselect\")\n\toptionSelectHandler(event: CustomEvent<Option>) {\n\t\tthis.toggle(event.detail)\n\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"optionAdd\")\n\toptionAddHandler(event: CustomEvent<{ name: string; value: string }>) {\n\t\tif (this.mutable) {\n\t\t\tconst [status, notice] = this.valueValidator(event.detail.value)\n\t\t\tif (status) {\n\t\t\t\tconst option = { ...event.detail }\n\t\t\t\tthis.options = [...this.options, option]\n\t\t\t\tthis.select(option)\n\t\t\t}\n\t\t\tnotice && this.notice.emit(notice)\n\t\t}\n\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"menuEmpty\")\n\temptyHandler(event: CustomEvent<boolean>) {\n\t\tthis.empty = event.detail\n\t\tevent.stopPropagation()\n\t}\n\ttoggle(option: Option) {\n\t\toption.value == \"select-none\"\n\t\t\t? this.toggleAll()\n\t\t\t: this.selections.map(s => s.value).includes(option.value)\n\t\t\t? this.unselect(option)\n\t\t\t: this.select(option)\n\t}\n\ttoggleAll() {\n\t\tthis.selections = this.selections.length == this.options?.length ? [] : this.options\n\t\tthis.inputElement.focus()\n\t\tthis.keepFocusOnReRender = true\n\t}\n\tunselect(selection: Option) {\n\t\tconst index = this.selections.map(selection => selection.value).indexOf(selection.value)\n\t\tif (index != -1) {\n\t\t\tthis.selections = [\n\t\t\t\t...this.selections.slice(0, index),\n\t\t\t\t...this.selections.slice(index + 1, this.selections.length),\n\t\t\t]\n\t\t\tthis.keepFocusOnReRender = true\n\t\t}\n\t}\n\tselect(selection: Option) {\n\t\tconst isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true)\n\t\tif (isNewSelection)\n\t\t\tthis.selections = this.multiple ? [...this.selections, selection] : [selection]\n\t\tthis.inputElement.value = \"\"\n\t\tthis.filterOptions()\n\t\tthis.keepFocusOnReRender = true\n\t\tthis.isOpen = this.multiple\n\t}\n\ttoggleHighlighted() {\n\t\tif (this.mutable && this.empty) {\n\t\t\tconst [status, notice] = this.valueValidator(this.inputElement.value)\n\t\t\tif (status) {\n\t\t\t\tconst option = { name: this.inputElement.value, value: this.inputElement.value }\n\t\t\t\tthis.options = [...this.options, option]\n\t\t\t\tthis.select(option)\n\t\t\t}\n\t\t\tnotice && this.notice.emit(notice)\n\t\t} else\n\t\t\tthis.menuElement?.getHighlighted().then((result: Option | undefined) => {\n\t\t\t\tresult && this.toggle(result)\n\t\t\t})\n\t}\n\thighlightDefault() {\n\t\tthis.filterOptions()\n\t\tthis.menuElement?.setHighlight(this.multiple || this.selections.length == 0 ? 0 : this.selections[0].value)\n\t}\n\tfilterOptions() {\n\t\tthis.menuElement?.filterOptions(this.inputElement.value, [])\n\t}\n\tonInput(event: UIEvent) {\n\t\tthis.isOpen = this.inputElement.value != \"\" ? true : this.isOpen\n\t\tthis.highlightDefault()\n\t}\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (event.key == \"ArrowUp\" || event.key == \"ArrowDown\") {\n\t\t\tthis.menuElement?.moveHighlight(event.key == \"ArrowUp\" ? -1 : 1)\n\t\t\tevent.preventDefault()\n\t\t} else if (event.key == \"Enter\" && this.isOpen)\n\t\t\tthis.toggleHighlighted()\n\t\telse if (event.key == \"Escape\") {\n\t\t\tthis.inputElement.value = \"\"\n\t\t\tthis.isOpen = false\n\t\t\tthis.filterOptions()\n\t\t} else if (event.key == \" \" && this.inputElement.value == \"\") {\n\t\t\tevent.preventDefault()\n\t\t\tthis.isOpen = true\n\t\t\tthis.filterOptions()\n\t\t}\n\t}\n\tonClick() {\n\t\tif (!(this.readonly || this.disabled)) {\n\t\t\tthis.isOpen = !this.isOpen\n\t\t\tthis.inputElement.focus()\n\t\t\tthis.highlightDefault()\n\t\t\tthis.filterOptions()\n\t\t}\n\t}\n\tonBlur() {\n\t\tthis.inputElement.value = \"\"\n\t\tthis.isOpen = false\n\t\tthis.filterOptions()\n\t}\n\n\trender() {\n\t\tconst cssVariables = {\n\t\t\t\"--max-height\": this.maxHeight ?? \"inherit\",\n\t\t\t\"--label-display\": this.labelSetting == \"hide\" ? \"none\" : \"absolute\",\n\t\t}\n\t\tthis.options?.forEach(o => {\n\t\t\to.checked = this.selections.map(s => s.value).includes(o.value)\n\t\t})\n\t\tconst options = [\n\t\t\t...(this.multiple\n\t\t\t\t? [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tvalue: \"select-none\",\n\t\t\t\t\t\t\tname: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,\n\t\t\t\t\t\t\tchecked: this.selections.length == this.options.length,\n\t\t\t\t\t\t\tdivider: true,\n\t\t\t\t\t\t},\n\t\t\t\t  ]\n\t\t\t\t: []),\n\t\t\t...(this.options ?? []),\n\t\t]\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={cssVariables}\n\t\t\t\thas-selection={this.selections.length > 0}\n\t\t\t\tis-open={this.isOpen ? \"\" : undefined}\n\t\t\t\tonMouseDown={(e: MouseEvent) => e.preventDefault()}\n\t\t\t\tonClick={() => this.onClick()}>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-icon part=\"search\" class=\"search\" name=\"search-outline\" size=\"tiny\"></smoothly-icon>\n\t\t\t\t\t<label part=\"label-element\">{this.label}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tref={(el: HTMLInputElement) => (this.inputElement = el ? el : this.inputElement)}\n\t\t\t\t\t\tonFocus={() => this.highlightDefault()}\n\t\t\t\t\t\tonBlur={() => this.onBlur()}\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\tthis.selections.length > 3\n\t\t\t\t\t\t\t\t? this.selections.length.toString() + \" \" + this.selectionName\n\t\t\t\t\t\t\t\t: this.selections.map(selection => selection.name).join(\", \")\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonKeyDown={e => this.onKeyDown(e)}\n\t\t\t\t\t\tonInput={(e: UIEvent) => this.onInput(e)}></input>\n\t\t\t\t\t<smoothly-icon part=\"chevron\" class=\"down\" name=\"chevron-down\" size=\"tiny\"></smoothly-icon>\n\t\t\t\t\t<smoothly-icon part=\"chevron\" class=\"up\" name=\"chevron-up\" size=\"tiny\"></smoothly-icon>\n\t\t\t\t</div>\n\t\t\t\t<smoothly-menu-options\n\t\t\t\t\tpart=\"menu-options\"\n\t\t\t\t\tstyle={{ width: \"100%\" }}\n\t\t\t\t\ttoggle={true}\n\t\t\t\t\toptionStyle={{ ...this.optionStyle }}\n\t\t\t\t\torder={false}\n\t\t\t\t\temptyMenuLabel={this.emptyMenuLabel}\n\t\t\t\t\tnewOptionLabel={this.newOptionLabel}\n\t\t\t\t\tmax-menu-height={this.maxMenuHeight}\n\t\t\t\t\tmutable={this.mutable}\n\t\t\t\t\tref={(el: HTMLSmoothlyMenuOptionsElement) => (this.menuElement = el ?? this.menuElement)}\n\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\tresetHighlightOnOptionsChange={false}\n\t\t\t\t\toptions={options}></smoothly-menu-options>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/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 { Notice, Option } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Controls } from \"./menu\"\n\n@Component({\n\ttag: \"smoothly-picker\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPicker implements Clearable, Input {\n\t@Element() element: HTMLSmoothlyPickerElement\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true, mutable: true }) open = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() selected = new Map<any, Option>()\n\t@State() display: Node[]\n\t@Event() smoothlyPickerLoaded: EventEmitter<Controls>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyChange: EventEmitter<Record<string, any | any[]>> // multiple -> any[]\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks) => void>\n\tprivate controls?: Controls & { synced: () => boolean }\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t}\n\n\t@Watch(\"selected\")\n\tselectedChanged() {\n\t\tconst selected = Array.from(this.selected.values(), option => option.value)\n\t\tif (this.controls?.synced()) {\n\t\t\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\t}\n\t\tthis.display = Array.from(this.selected.values(), option => {\n\t\t\tconst span = document.createElement(\"span\")\n\t\t\toption.slotted.forEach(node => span.appendChild(node.cloneNode(true)))\n\t\t\treturn span\n\t\t})\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (this.controls)\n\t\t\tthis.smoothlyPickerLoaded.emit((({ synced, ...controls }) => controls)(this.controls))\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(\"smoothlyPickerMenuLoaded\")\n\tmenuLoadedHandler(event: CustomEvent<Controls & { synced: () => boolean }>) {\n\t\tthis.controls = event.detail\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (event.detail.selected)\n\t\t\tthis.selected = this.multiple\n\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t: new Map().set(event.detail.value, event.detail)\n\t}\n\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.readonly)\n\t\t\tif (this.multiple)\n\t\t\t\tthis.selected = event.detail.selected\n\t\t\t\t\t? new Map(this.selected.set(event.detail.value, event.detail).entries())\n\t\t\t\t\t: !this.selected.delete(event.detail.value)\n\t\t\t\t\t? this.selected\n\t\t\t\t\t: new Map(this.selected.entries())\n\t\t\telse\n\t\t\t\tthis.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tthis.open = !event.composedPath().includes(this.element) ? false : !this.open\n\t}\n\t@Listen(\"focusin\", { target: \"window\" })\n\tfocusHandler(event: FocusEvent) {\n\t\tif (!event.composedPath().includes(this.element))\n\t\t\tthis.open = false\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.selected.forEach(option => option.selected && option.element.clickHandler())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-slot-elements class={\"selected\"} nodes={this.display} />\n\t\t\t\t<span class={\"label\"}>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</span>\n\t\t\t\t<button type=\"button\">\n\t\t\t\t\t<smoothly-icon size=\"tiny\" name={this.open ? \"caret-down-outline\" : \"caret-forward-outline\"} />\n\t\t\t\t</button>\n\t\t\t\t<slot name=\"child\" />\n\t\t\t\t<smoothly-picker-menu\n\t\t\t\t\topen={this.open}\n\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\tmutable={this.mutable}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tvalidator={this.validator}>\n\t\t\t\t\t<slot name=\"search\" slot=\"search\" />\n\t\t\t\t\t<slot name=\"display\" slot=\"display\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-picker-menu>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/menu/index.js

@@ -0,0 +1,422 @@
+import { h, Host } from "@stencil/core";
+import global from "../../../global/index";
+const Observers = global().Observers;
+function* chain(...iterables) {
+  for (const iterable of iterables)
+    yield* iterable;
+}
+function restore(target, source) {
+  target === null || target === void 0 ? void 0 : target.set.selected((target.selected = source.selected));
+  target === null || target === void 0 ? void 0 : target.set.readonly((target.readonly = source.readonly));
+  target === null || target === void 0 ? void 0 : target.set.visible((target.visible = source.visible));
+  target === null || target === void 0 ? void 0 : target.set.value((target.value = source.value));
+  target === null || target === void 0 ? void 0 : target.set.search((target.search = source.search));
+  return target;
+}
+function restoreListener(ref, option) {
+  ref === null || ref === void 0 ? void 0 : ref.addEventListener("smoothlyPickerOptionLoad", (e) => restore(e.detail, option));
+}
+export class SmoothlyPickerMenu {
+  constructor() {
+    this.synced = false;
+    this.looks = undefined;
+    this.open = false;
+    this.multiple = false;
+    this.mutable = false;
+    this.readonly = false;
+    this.validator = undefined;
+    this.backend = new Map();
+    this.options = new Map();
+    this.created = new Map();
+    this.search = "";
+    this.valid = false;
+    this.display = undefined;
+    this.flip = false;
+    this.flipChecked = false;
+  }
+  componentWillLoad() {
+    if (!Observers.has(this.element)) {
+      const threshold = 0.4;
+      Observers.set(this.element, new IntersectionObserver(entries => {
+        var _a, _b;
+        return ((_b = (_a = entries.find(entry => entry.target == this.element)) === null || _a === void 0 ? void 0 : _a.intersectionRatio) !== null && _b !== void 0 ? _b : 0) < threshold &&
+          !this.flipChecked &&
+          ((this.flip = !this.flip), (this.flipChecked = true));
+      }, { threshold }));
+    }
+  }
+  sync() {
+    if (this.backend.size != this.options.size)
+      this.synced = false;
+    else
+      this.synced = true;
+  }
+  componentDidLoad() {
+    this.smoothlyPickerMenuLoaded.emit({
+      remember: () => {
+        this.memory = {
+          backend: new Map(Array.from(this.backend.entries(), ([value, option]) => [value, Object.assign({}, option)])),
+          options: new Map(Array.from(this.options.entries(), ([value, option]) => [value, Object.assign({}, option)])),
+        };
+      },
+      restore: () => {
+        if (this.memory) {
+          for (const option of this.options.values()) {
+            const memory = this.memory.options.get(option.value);
+            if (memory != undefined)
+              restore(option, memory);
+            else if (this.created.get(option.value))
+              option.set.selected((option.selected = false));
+          }
+          for (const option of this.backend.values()) {
+            const memory = this.memory.backend.get(option.value);
+            if (memory != undefined)
+              restore(option, memory);
+            else if (this.created.get(option.value))
+              option.set.selected((option.selected = false));
+          }
+        }
+      },
+      synced: () => this.synced,
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    if (!this.element.parentElement) {
+      (_a = Observers.get(this.element)) === null || _a === void 0 ? void 0 : _a.disconnect();
+      Observers.remove(this.element);
+    }
+  }
+  openChange() {
+    const observer = Observers.get(this.element);
+    if (this.open)
+      observer === null || observer === void 0 ? void 0 : observer.observe(this.element);
+    else
+      observer === null || observer === void 0 ? void 0 : observer.unobserve(this.element);
+  }
+  readonlyChanged() {
+    for (const option of chain(this.options.values(), this.backend.values()))
+      option.element, option.set.readonly(this.readonly);
+  }
+  scrollHandler() {
+    this.flipChecked = false;
+  }
+  optionLoadHandler(event) {
+    if (!this.listElement || !event.composedPath().includes(this.listElement)) {
+      event.stopPropagation();
+      this.sync();
+      event.detail.set.readonly(this.readonly);
+      const current = this.options.get(event.detail.value);
+      if (current)
+        event.detail.set.selected(current.element.selected);
+    }
+  }
+  optionLoadedHandler(event) {
+    var _a;
+    if (!this.listElement || !event.composedPath().includes(this.listElement)) {
+      event.stopPropagation();
+      const current = restore(this.backend.get(event.detail.value), event.detail);
+      this.backend = new Map(this.backend
+        .set(event.detail.value, Object.assign(Object.assign({}, event.detail), { clone: (_a = current === null || current === void 0 ? void 0 : current.clone) !== null && _a !== void 0 ? _a : event.detail.element.cloneNode(true) }))
+        .entries());
+    }
+    else
+      this.options.set(event.detail.value, event.detail);
+    this.sync();
+  }
+  optionChangeHandler(event) {
+    var _a;
+    if (!this.listElement || !event.composedPath().includes(this.listElement)) {
+      event.stopPropagation();
+      (_a = this.options.get(event.detail.value)) === null || _a === void 0 ? void 0 : _a.set.selected(event.detail.selected);
+    }
+    else {
+      const current = this.backend.get(event.detail.value);
+      if (current === null || current === void 0 ? void 0 : current.element.parentElement)
+        current === null || current === void 0 ? void 0 : current.set.selected(event.detail.selected);
+    }
+    if (!this.readonly && !this.multiple && event.detail.selected)
+      for (const option of chain(this.options.values(), this.backend.values()))
+        if (option.value != event.detail.value)
+          option.set.selected(false);
+  }
+  inputHandler(event) {
+    event.stopPropagation();
+    this.search = event.detail.search;
+    if (!this.search) {
+      this.valid = false;
+      for (const option of chain(this.options.values(), this.backend.values()))
+        option.set.visible(true);
+    }
+    else {
+      this.valid = !Array.from(this.options.values()).find(option => option.value == this.search);
+      const search = this.search.toLocaleLowerCase();
+      for (const option of chain(this.options.values(), this.backend.values())) {
+        const value = option.value.toString().toLocaleLowerCase().includes(search);
+        const searches = option.search.some(value => value.includes(search));
+        const result = value || searches;
+        option.set.visible(result);
+      }
+    }
+  }
+  addHandler() {
+    var _a;
+    const validation = !this.validator ? true : this.validator(this.search);
+    if (this.mutable) {
+      if (typeof validation == "object" ? validation.result : validation) {
+        if (!this.multiple)
+          for (const option of chain(this.options.values(), this.backend.values()))
+            option.set.selected(false);
+        this.created = new Map(this.created.set(this.search, { value: this.search, selected: true }).entries());
+        this.search = "";
+        (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
+        this.valid = false;
+      }
+      if (typeof validation == "object")
+        this.notice.emit(validation.notice);
+    }
+  }
+  keyDownHandler(event) {
+    if (event.key == "Enter") {
+      event.preventDefault();
+      this.addHandler();
+    }
+  }
+  emptyDisplayHandler(event) {
+    event.stopPropagation();
+    event.detail.set.nodes(this.display);
+  }
+  render() {
+    return (h(Host, { class: { valid: this.valid, flip: this.flip } }, h("smoothly-slotted-elements", { class: "hide", onSmoothlySlottedChange: e => (this.display = e.detail) }, h("slot", { name: "display" })), h("div", { class: "hide" }, h("slot", null), Array.from(this.created.values(), option => (h("smoothly-picker-option", { key: option.value, value: option.value, selected: option.selected }, option.value, h("smoothly-slot-elements", { slot: "display", nodes: this.display }))))), h("div", { class: "controls" }, h("smoothly-input", { ref: e => (this.searchElement = e), name: "search", value: this.search, looks: this.looks, onKeyDown: e => this.keyDownHandler(e), onSmoothlyInput: e => this.inputHandler(e), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation() }, h("slot", { name: "search" })), this.mutable && !this.readonly ? (h("button", { onClick: () => this.addHandler(), disabled: !this.valid, type: "button" }, h("smoothly-icon", { name: "add-outline" }))) : null), h("div", { class: "list", ref: e => (this.listElement = e) }, Array.from(this.backend.values())
+      .sort((a, b) => a.position - b.position)
+      .map(option => (h("smoothly-slot-elements", { ref: e => restoreListener(e, option), clone: false, nodes: option.clone }))))));
+  }
+  static get is() { return "smoothly-picker-menu"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "looks": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../../input/Looks"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": false
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "mutable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mutable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "validator": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(value: string) => boolean | { result: boolean; notice: Notice }",
+          "resolved": "((value: string) => boolean | { result: boolean; notice: Notice; }) | undefined",
+          "references": {
+            "Notice": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "backend": {},
+      "options": {},
+      "created": {},
+      "search": {},
+      "valid": {},
+      "display": {},
+      "flip": {},
+      "flipChecked": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "notice",
+        "name": "notice",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Notice",
+          "resolved": "Notice",
+          "references": {
+            "Notice": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyPickerMenuLoaded",
+        "name": "smoothlyPickerMenuLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Controls & { synced: () => boolean }",
+          "resolved": "Controls & { synced: () => boolean; }",
+          "references": {
+            "Controls": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "readonlyChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "scrollHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "smoothlyPickerOptionLoad",
+        "method": "optionLoadHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyPickerOptionLoaded",
+        "method": "optionLoadedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyPickerOptionChange",
+        "method": "optionChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlySlotEmpty",
+        "method": "emptyDisplayHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/picker/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport global from \"../../../global/index\"\nimport { Notice, Option } from \"../../../model\"\nimport { Looks } from \"../../input/Looks\"\nimport { Slot } from \"../slot-elements\"\n\nconst Observers = global().Observers\n\nfunction* chain<T>(...iterables: Iterable<T>[]): Iterable<T> {\n\tfor (const iterable of iterables)\n\t\tyield* iterable\n}\n\nfunction restore<T extends Option>(target: T | undefined, source: Option): T | undefined {\n\ttarget?.set.selected((target.selected = source.selected))\n\ttarget?.set.readonly((target.readonly = source.readonly))\n\ttarget?.set.visible((target.visible = source.visible))\n\ttarget?.set.value((target.value = source.value))\n\ttarget?.set.search((target.search = source.search))\n\treturn target\n}\nfunction restoreListener(ref: HTMLElement | undefined, option: Option) {\n\tref?.addEventListener(\"smoothlyPickerOptionLoad\", (e: CustomEvent<Option>) => restore(e.detail, option))\n}\nexport interface Controls {\n\tremember: () => void\n\trestore: () => void\n}\n@Component({\n\ttag: \"smoothly-picker-menu\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerMenu {\n\t@Element() element: HTMLSmoothlyPickerMenuElement\n\t@Prop() looks: Looks\n\t@Prop({ reflect: true }) open = false\n\t@Prop({ reflect: true }) multiple = false\n\t@Prop({ reflect: true }) mutable = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop() validator?: (value: string) => boolean | { result: boolean; notice: Notice }\n\t@State() backend = new Map<any, Option & { clone: Node }>() // value -> Option\n\t@State() options = new Map<any, Option>() // value -> Option\n\t@State() created = new Map<any, Option.Created>()\n\t@State() search = \"\"\n\t@State() valid = false\n\t@State() display: Node[]\n\t@State() flip = false\n\t@State() flipChecked = false\n\t@Event() notice: EventEmitter<Notice>\n\t@Event() smoothlyPickerMenuLoaded: EventEmitter<Controls & { synced: () => boolean }>\n\tprivate memory?: { backend: SmoothlyPickerMenu[\"backend\"]; options: SmoothlyPickerMenu[\"options\"] }\n\tprivate listElement?: HTMLElement\n\tprivate searchElement?: HTMLElement\n\tprivate synced = false\n\n\tcomponentWillLoad() {\n\t\tif (!Observers.has(this.element)) {\n\t\t\tconst threshold = 0.4\n\t\t\tObservers.set(\n\t\t\t\tthis.element,\n\t\t\t\tnew IntersectionObserver(\n\t\t\t\t\tentries =>\n\t\t\t\t\t\t(entries.find(entry => entry.target == this.element)?.intersectionRatio ?? 0) < threshold &&\n\t\t\t\t\t\t!this.flipChecked &&\n\t\t\t\t\t\t((this.flip = !this.flip), (this.flipChecked = true)),\n\t\t\t\t\t{ threshold }\n\t\t\t\t)\n\t\t\t)\n\t\t}\n\t}\n\tsync() {\n\t\tif (this.backend.size != this.options.size)\n\t\t\tthis.synced = false\n\t\telse\n\t\t\tthis.synced = true\n\t}\n\tcomponentDidLoad() {\n\t\tthis.smoothlyPickerMenuLoaded.emit({\n\t\t\tremember: () => {\n\t\t\t\tthis.memory = {\n\t\t\t\t\tbackend: new Map(Array.from(this.backend.entries(), ([value, option]) => [value, { ...option }])),\n\t\t\t\t\toptions: new Map(Array.from(this.options.entries(), ([value, option]) => [value, { ...option }])),\n\t\t\t\t}\n\t\t\t},\n\t\t\trestore: () => {\n\t\t\t\tif (this.memory) {\n\t\t\t\t\tfor (const option of this.options.values()) {\n\t\t\t\t\t\tconst memory = this.memory.options.get(option.value)\n\t\t\t\t\t\tif (memory != undefined)\n\t\t\t\t\t\t\trestore(option, memory)\n\t\t\t\t\t\telse if (this.created.get(option.value))\n\t\t\t\t\t\t\toption.set.selected((option.selected = false))\n\t\t\t\t\t}\n\t\t\t\t\tfor (const option of this.backend.values()) {\n\t\t\t\t\t\tconst memory = this.memory.backend.get(option.value)\n\t\t\t\t\t\tif (memory != undefined)\n\t\t\t\t\t\t\trestore(option, memory)\n\t\t\t\t\t\telse if (this.created.get(option.value))\n\t\t\t\t\t\t\toption.set.selected((option.selected = false))\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tsynced: () => this.synced,\n\t\t})\n\t}\n\tdisconnectedCallback() {\n\t\tif (!this.element.parentElement) {\n\t\t\tObservers.get(this.element)?.disconnect()\n\t\t\tObservers.remove(this.element)\n\t\t}\n\t}\n\t@Watch(\"open\")\n\topenChange() {\n\t\tconst observer = Observers.get(this.element)\n\t\tif (this.open)\n\t\t\tobserver?.observe(this.element)\n\t\telse\n\t\t\tobserver?.unobserve(this.element)\n\t}\n\n\t@Watch(\"readonly\")\n\treadonlyChanged() {\n\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\toption.element, option.set.readonly(this.readonly)\n\t}\n\t@Listen(\"scroll\", { target: \"window\" })\n\tscrollHandler() {\n\t\tthis.flipChecked = false\n\t}\n\t@Listen(\"smoothlyPickerOptionLoad\")\n\toptionLoadHandler(event: CustomEvent<Option.Load>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.sync()\n\t\t\tevent.detail.set.readonly(this.readonly)\n\n\t\t\tconst current = this.options.get(event.detail.value)\n\t\t\tif (current)\n\t\t\t\tevent.detail.set.selected(current.element.selected)\n\t\t}\n\t}\n\t@Listen(\"smoothlyPickerOptionLoaded\")\n\toptionLoadedHandler(event: CustomEvent<Option>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tconst current = restore(this.backend.get(event.detail.value), event.detail)\n\t\t\tthis.backend = new Map(\n\t\t\t\tthis.backend\n\t\t\t\t\t.set(event.detail.value, {\n\t\t\t\t\t\t...event.detail,\n\t\t\t\t\t\tclone: current?.clone ?? event.detail.element.cloneNode(true),\n\t\t\t\t\t})\n\t\t\t\t\t.entries()\n\t\t\t)\n\t\t} else\n\t\t\tthis.options.set(event.detail.value, event.detail)\n\t\tthis.sync()\n\t}\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tif (!this.listElement || !event.composedPath().includes(this.listElement)) {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.options.get(event.detail.value)?.set.selected(event.detail.selected)\n\t\t} else {\n\t\t\tconst current = this.backend.get(event.detail.value)\n\t\t\tif (current?.element.parentElement)\n\t\t\t\tcurrent?.set.selected(event.detail.selected)\n\t\t}\n\n\t\tif (!this.readonly && !this.multiple && event.detail.selected)\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\tif (option.value != event.detail.value)\n\t\t\t\t\toption.set.selected(false)\n\t}\n\tinputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tevent.stopPropagation()\n\t\tthis.search = event.detail.search\n\t\tif (!this.search) {\n\t\t\tthis.valid = false\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\toption.set.visible(true)\n\t\t} else {\n\t\t\tthis.valid = !Array.from(this.options.values()).find(option => option.value == this.search)\n\t\t\tconst search = this.search.toLocaleLowerCase()\n\t\t\tfor (const option of chain(this.options.values(), this.backend.values())) {\n\t\t\t\tconst value = option.value.toString().toLocaleLowerCase().includes(search)\n\t\t\t\tconst searches = option.search.some(value => value.includes(search))\n\t\t\t\tconst result = value || searches\n\t\t\t\toption.set.visible(result)\n\t\t\t}\n\t\t}\n\t}\n\taddHandler() {\n\t\tconst validation = !this.validator ? true : this.validator(this.search)\n\t\tif (this.mutable) {\n\t\t\tif (typeof validation == \"object\" ? validation.result : validation) {\n\t\t\t\tif (!this.multiple)\n\t\t\t\t\tfor (const option of chain(this.options.values(), this.backend.values()))\n\t\t\t\t\t\toption.set.selected(false)\n\t\t\t\tthis.created = new Map(this.created.set(this.search, { value: this.search, selected: true }).entries())\n\t\t\t\tthis.search = \"\"\n\t\t\t\tthis.searchElement?.focus()\n\t\t\t\tthis.valid = false\n\t\t\t}\n\t\t\tif (typeof validation == \"object\")\n\t\t\t\tthis.notice.emit(validation.notice)\n\t\t}\n\t}\n\tkeyDownHandler(event: KeyboardEvent) {\n\t\tif (event.key == \"Enter\") {\n\t\t\tevent.preventDefault()\n\t\t\tthis.addHandler()\n\t\t}\n\t}\n\t@Listen(\"smoothlySlotEmpty\")\n\temptyDisplayHandler(event: CustomEvent<Slot>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail.set.nodes(this.display)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ valid: this.valid, flip: this.flip }}>\n\t\t\t\t<smoothly-slotted-elements class={\"hide\"} onSmoothlySlottedChange={e => (this.display = e.detail)}>\n\t\t\t\t\t<slot name=\"display\" />\n\t\t\t\t</smoothly-slotted-elements>\n\t\t\t\t<div class={\"hide\"}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t{Array.from(this.created.values(), option => (\n\t\t\t\t\t\t<smoothly-picker-option key={option.value} value={option.value} selected={option.selected}>\n\t\t\t\t\t\t\t{option.value}\n\t\t\t\t\t\t\t<smoothly-slot-elements slot=\"display\" nodes={this.display} />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t<div class={\"controls\"}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tref={e => (this.searchElement = e)}\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tvalue={this.search}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tonKeyDown={e => this.keyDownHandler(e)}\n\t\t\t\t\t\tonSmoothlyInput={e => this.inputHandler(e)}\n\t\t\t\t\t\tonSmoothlyChange={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}>\n\t\t\t\t\t\t<slot name=\"search\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t{this.mutable && !this.readonly ? (\n\t\t\t\t\t\t<button onClick={() => this.addHandler()} disabled={!this.valid} type={\"button\"}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"add-outline\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div class={\"list\"} ref={e => (this.listElement = e)}>\n\t\t\t\t\t{Array.from(this.backend.values())\n\t\t\t\t\t\t.sort((a, b) => a.position - b.position)\n\t\t\t\t\t\t.map(option => (\n\t\t\t\t\t\t\t<smoothly-slot-elements ref={e => restoreListener(e, option)} clone={false} nodes={option.clone} />\n\t\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/menu/style.css

@@ -0,0 +1,44 @@
+:host {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	position: absolute;
+	z-index: 4;
+	left: -1px;
+	right: -1px;
+	min-width: max-content;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+	padding: 0.5rem;
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host:not(.flip) {
+	top: 100%;
+}
+:host.flip {
+	bottom: 100%;
+}
+:host:not([open]) {
+	display: none;
+}
+:host .list {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	align-items: center;
+	row-gap: 0.5ch;
+	overflow-y: auto;
+	max-height: calc(1.75rem * 10 + 0.5ch * 9);
+	padding-right: 0.5rem;
+	padding-bottom: 0.25rem;
+}
+:host .hide {
+	display: none;
+}
+:host .controls {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	gap: 0.5rem;
+	transition: grid-template-columns 200ms linear;
+}
+:host .controls > button:disabled {
+	opacity: 0.3;
+}