smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/select/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 { Color } from \"../../../model\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n@Component({\n\ttag: \"smoothly-input-select\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSelect implements Input {\n\t@Element() element: HTMLSmoothlyInputSelectElement\n\t@Prop() name: string\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop() initialPrompt?: string\n\t@State() opened = false\n\titems: HTMLSmoothlyItemElement[] = []\n\t@State() selectedElement?: HTMLSmoothlyItemElement\n\t@State() missing = false\n\tmainElement?: HTMLElement\n\t@State() filter = \"\"\n\t@Event() selected: EventEmitter<any>\n\t@Event() smoothlyInput: EventEmitter<Record<number, any>>\n\taside?: HTMLElement\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 reset() {\n\t\tthis.selectedElement = undefined\n\t\tif (this.mainElement) {\n\t\t\t//reset to the same value as it started with\n\t\t\tthis.mainElement.innerHTML = this.initialPrompt ?? \"(none)\"\n\t\t}\n\t}\n\n\t@Watch(\"selectedElement\")\n\tonSelectedChange(value: HTMLSmoothlyItemElement | undefined, old: HTMLSmoothlyItemElement | undefined) {\n\t\tif (old)\n\t\t\told.selected = false\n\t\tthis.selected.emit(value?.value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value?.value })\n\t}\n\t@Watch(\"filter\")\n\tasync onFilterChange(value: string) {\n\t\tvalue = value.toLowerCase()\n\t\tif (!(await Promise.all(this.items.map(item => item.filter(value)))).some(r => r)) {\n\t\t\tthis.missing = true\n\t\t\tthis.items.forEach(el => el.filter(\"\"))\n\t\t} else\n\t\t\tthis.missing = false\n\t}\n\t@Listen(\"click\")\n\tonClick(event: UIEvent) {\n\t\tevent.stopPropagation()\n\t\tthis.opened = !this.opened\n\t}\n\t@Listen(\"itemSelected\")\n\tonItemSelected(event: Event) {\n\t\tthis.selectedElement = event.target as HTMLSmoothlyItemElement\n\t\tif (this.mainElement)\n\t\t\tthis.mainElement.innerHTML = this.selectedElement.innerHTML\n\t}\n\t@Watch(\"opened\")\n\tonClosed() {\n\t\tif (!this.opened) {\n\t\t\tconst marked = this.items.find(item => item.marked)\n\t\t\tif (marked)\n\t\t\t\tmarked.marked = false\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\tonKeyDown(event: KeyboardEvent) {\n\t\tevent.stopPropagation()\n\t\tevent.preventDefault()\n\t\tif (this.opened) {\n\t\t\tlet direction: -1 | 0 | 1 = 0\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tdirection = -1\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tdirection = 1\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Escape\":\n\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Backspace\":\n\t\t\t\t\tthis.filter = this.filter.slice(0, -1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Enter\":\n\t\t\t\t\tconst result = this.items.find(item => item.marked)\n\t\t\t\t\tif (result?.value) {\n\t\t\t\t\t\tresult.selected = true\n\t\t\t\t\t}\n\t\t\t\t\tthis.opened = false\n\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\tif (event.key.length == 1)\n\t\t\t\t\t\tthis.filter += event.key\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t\tthis.move(direction)\n\t\t} else if (event.key == \"Enter\")\n\t\t\tthis.opened = true\n\t}\n\tprivate move(direction: -1 | 0 | 1): void {\n\t\tif (direction) {\n\t\t\tlet markedIndex = this.items.findIndex(item => item.marked)\n\t\t\tif (markedIndex == -1)\n\t\t\t\tmarkedIndex = this.items.findIndex(item => item.selected)\n\t\t\tif (this.items[markedIndex])\n\t\t\t\tthis.items[markedIndex].marked = false\n\t\t\tdo {\n\t\t\t\tmarkedIndex = (markedIndex + direction + this.items.length) % this.items.length\n\t\t\t} while (this.items[markedIndex].hidden)\n\t\t\tthis.items[markedIndex].marked = true\n\t\t\tthis.items[markedIndex].focus()\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={2} class={this.missing ? \"missing\" : \"\"}>\n\t\t\t\t<main ref={element => (this.mainElement = element)}>{this.initialPrompt ?? \"(none)\"}</main>\n\t\t\t\t{this.filter.length != 0 ? (\n\t\t\t\t\t<aside ref={element => (this.aside = element)}>\n\t\t\t\t\t\t{this.filter}\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" size=\"small\"></smoothly-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</aside>\n\t\t\t\t) : undefined}\n\t\t\t\t{this.opened ? <section onClick={() => (this.opened = true)}></section> : []}\n\t\t\t\t<div class={this.opened ? \"\" : \"hidden\"}>\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\tcomponentDidRender() {\n\t\tconst items: HTMLSmoothlyItemElement[] = []\n\t\tconst children = this.element.querySelectorAll(\"div > nav > smoothly-item\")\n\t\tfor (let i = 0; i < children.length; i++) {\n\t\t\tconst node = children.item(i)\n\t\t\tif (isItem(node))\n\t\t\t\titems.push(node)\n\t\t}\n\t\tthis.items = items\n\t}\n}\nfunction isItem(value: HTMLSmoothlyItemElement | any): value is HTMLSmoothlyItemElement {\n\treturn (\n\t\ttypeof value == \"object\" &&\n\t\t(typeof value.selected == \"boolean\" || value.selected == undefined) &&\n\t\ttypeof value.filter == \"function\"\n\t)\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EAEL,KAAK,GACL,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAUtC,MAAM,OAAO,mBAAmB;;IACvB,iBAAY,GAA8B,EAAE,CAAA;IAC5C,wBAAmB,GAAG,KAAK,CAAA;IAC3B,aAAQ,GAAsD,EAAE,CAAA;IACxE,UAAK,GAA8B,EAAE,CAAA;gBAItB,UAAU;;iBAE8B,OAAO;wBACG,IAAI;oBAClB,KAAK;oBACrC,KAAK;qBACJ,IAAI;mBACW,KAAK;;;gBAGxB,KAAK;oBAC0B,EAAE;kBAC/B,EAAE;;EAQpB,iBAAiB;;IAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;IAC3D,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,EAAE;MAChC,OAAM;IACP,CAAC,CAAC,CAAA;IACF,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAA;IACvF,MAAA,MAAA,IAAI,CAAC,QAAQ,EAAC,OAAO,mDAAG,IAAI,CAAC,CAAA;EAC9B,CAAC;EACD,gBAAgB;IACf,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;IACtF,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAA;EAChC,CAAC;EACD,kBAAkB;;IACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,0CAAE,YAAY,CAAC,CAAA;IACjH,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE;MACvC,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,WAAW,CAC9B,eAAe,EACf,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC;QAC3D,CAAC,CAAC,IAAI,CAAC,UAAU;QACjB,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,uBAAuB,CAAC,0CAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,IAAI,CAC1F,CAAA;KACD;EACF,CAAC;EAED,KAAK,CAAC,MAAM,CAAC,QAAmB,EAAE,QAA6C;IAC9E,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,IAAI,CAAC,CAAA;EACf,CAAC;EAED,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAA;IACpE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAA;IACzD,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAA;IACtC,IAAI,CAAC,eAAe,EAAE,CAAA;IACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;EACtC,CAAC;EAGD,KAAK,CAAC,KAAK;;IACV,IAAI,IAAI,CAAC,SAAS,EAAE;MACnB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAA;MACpE,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;MAClB,IAAI,IAAI,CAAC,sBAAsB,EAAE;QAChC,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAA;OACpE;KACD;EACF,CAAC;EAED,KAAK,CAAC,IAAI,CAAC,QAAiB;IAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAA;EAC1B,CAAC;EAED,KAAK,CAAC,eAAe;IACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;EACvC,CAAC;EAED,gBAAgB;;IACf,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAA;IACnG,MAAM,KAAK,GACV,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;MACjC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK;MACxB,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3C,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;QACvC,CAAC,CAAC,SAAS,CAAA;IACb,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC/C,MAAA,MAAA,IAAI,CAAC,QAAQ,EAAC,OAAO,mDAAG,IAAI,CAAC,CAAA;EAC9B,CAAC;EAED,KAAK,CAAC,cAAc,CAAC,KAAa;IACjC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;IAC3B,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;EAC9D,CAAC;EAED,gBAAgB;;IACf,MAAA,MAAA,IAAI,CAAC,QAAQ,EAAC,OAAO,mDAAG,IAAI,CAAC,CAAA;EAC9B,CAAC;EAED,KAAK,CAAC,wBAAwB,CAAC,KAAyD;IACvF,IAAI,KAAK,CAAC,MAAM,IAAI,MAAM,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;MAC9E,KAAK,CAAC,eAAe,EAAE,CAAA;KACvB;SAAM,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;MACtC,KAAK,CAAC,eAAe,EAAE,CAAA;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAiC,CAAC,CAAA;KACxD;IACD,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;EACnB,CAAC;EAED,aAAa,CAAC,KAAY;IACzB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;EACtF,CAAC;EAED,YAAY,CAAC,KAA2C;IACvD,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ;QACpC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC;QAClC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KAC9C;SAAM;MACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAA;MACjF,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;MAC5D,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;KAC3E;IACD,IAAI,CAAC,eAAe,EAAE,CAAA;IACtB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;EACrB,CAAC;EAED,QAAQ;IACP,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MACnD,IAAI,MAAM;QACT,MAAM,CAAC,MAAM,GAAG,KAAK,CAAA;KACtB;EACF,CAAC;EACD,iBAAiB,CAAC,KAAa;IAC9B,CAAC,IAAI,CAAC,QAAQ;MACb,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAiC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;MACzG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;EACjB,CAAC;EACD,cAAc,CAAC,QAAmC,EAAE,YAAuC;IAC1F,OAAO,QAAQ,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;EACxG,CAAC;EACD,eAAe;IACd,MAAM,aAAa,GAAW,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA;IACpH,IAAI,CAAC,sBAAsB;MAC1B,CAAC,IAAI,CAAC,sBAAsB,CAAC,SAAS;QACrC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;EACvF,CAAC;EAED,SAAS,CAAC,KAAoB;IAC7B,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAA;IAElF,IAAI,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO;MACzD,KAAK,CAAC,cAAc,EAAE,CAAA;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACd,QAAQ,KAAK,CAAC,GAAG,EAAE;QAClB,KAAK,SAAS;UACb,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;UAC7B,MAAK;QACN,KAAK,WAAW;UACf,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;UAC5B,MAAK;QACN,KAAK,QAAQ;UACZ,IAAI,IAAI,CAAC,MAAM,IAAI,EAAE;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;;YAEjB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;UACjB,MAAK;QACN,KAAK,WAAW;UACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;UACtC,MAAK;QACN,KAAK,OAAO;UACX,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;UACnD,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK;YAChB,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAA;UACnC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;UACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;YACjB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;WAChB;UACD,MAAK;QACN,KAAK,KAAK;UACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;UACjB,MAAK;QACN;UACC,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC;YACxB,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAA;UACzB,MAAK;OACN;KACD;SAAM;MACN,QAAQ,KAAK,CAAC,GAAG,EAAE;QAClB,KAAK,OAAO,CAAC;QACb,KAAK,GAAG;UACP,IAAI,CAAC,iBAAiB,EAAE,CAAA;UACxB,MAAK;QACN,KAAK,WAAW;UACf,IAAI,CAAC,iBAAiB,EAAE,CAAA;UACxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;UACZ,MAAK;QACN,KAAK,SAAS;UACb,IAAI,CAAC,iBAAiB,EAAE,CAAA;UACxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;UACb,MAAK;QACN,KAAK,KAAK;UACT,MAAK;QACN;UACC,IAAI,CAAC,iBAAiB,EAAE,CAAA;UACxB,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC;YACxB,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAA;UACzB,MAAK;OACN;KACD;EACF,CAAC;EACO,IAAI,CAAC,SAAqB;IACjC,IAAI,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAC3D,IAAI,WAAW,IAAI,CAAC,CAAC;MACpB,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC1D,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;MAC1B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,KAAK,CAAA;IACvC,IAAI,WAAW,IAAI,CAAC,CAAC;MACpB,WAAW,GAAG,CAAC,CAAA;IAChB,GAAG;MACF,WAAW,GAAG,CAAC,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;KAC/E,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,MAAM,EAAC;IACxC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,IAAI,CAAA;EACtC,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IACJ,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,EAClD,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;MACxD,WAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC,IACjF,IAAI,CAAC,WAAW,CACZ;MACN,WAAK,KAAK,EAAC,OAAO;QACjB,YAAM,IAAI,EAAC,KAAK,GAAG;QACnB,qBAAe,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,uBAAuB,GAAI,CAC1F;MACN,YAAM,IAAI,EAAC,OAAO,GAAG;MACrB,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,UAAU;QAChD,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1B,qBAAe,UAAU,EAAE,KAAK;UAC/B,qBAAe,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG;UACnD,IAAI,CAAC,MAAM;UACZ,qBACC,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE;cACZ,CAAC,CAAC,eAAe,EAAE,CAAA;cACnB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;cAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;YACrB,CAAC,GACA,CACa,CAChB;QACD,eAAQ,CACH,CACA,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\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { Color, Data } from \"../../../model\"\nimport { Item } from \"../../item/Item\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n@Component({\n\ttag: \"smoothly-input-select\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSelect implements Input, Editable, Clearable, ComponentWillLoad {\n\tprivate initialValue: HTMLSmoothlyItemElement[] = []\n\tprivate initialValueHandled = false\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\titems: HTMLSmoothlyItemElement[] = []\n\titemHeight: number | undefined\n\tdisplaySelectedElement?: HTMLElement\n\t@Element() element: HTMLSmoothlyInputSelectElement\n\t@Prop() name = \"selected\"\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true, mutable: true }) showSelected?: boolean = true\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() multiple = false\n\t@Prop() clearable = true\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true }) placeholder?: string | any\n\t@Prop() menuHeight?: `${number}${\"items\" | \"rem\" | \"px\" | \"vh\"}`\n\t@State() open = false\n\t@State() selected: HTMLSmoothlyItemElement[] = []\n\t@State() filter = \"\"\n\t@Event() smoothlySelect: EventEmitter<unknown>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyItemSelect: EventEmitter<HTMLSmoothlyItemElement>\n\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t\tthis.smoothlyInputLoad.emit(() => {\n\t\t\treturn\n\t\t})\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.listener.changed?.(this)\n\t}\n\tcomponentDidLoad(): void | Promise<void> {\n\t\tthis.selected && !this.initialValueHandled && (this.initialValue = [...this.selected])\n\t\tthis.initialValueHandled = true\n\t}\n\tcomponentDidRender(): void | Promise<void> {\n\t\tthis.itemHeight === undefined && (this.itemHeight = this.items.find(item => item.clientHeight > 0)?.clientHeight)\n\t\tif (this.menuHeight && this.itemHeight) {\n\t\t\tthis.element?.style.setProperty(\n\t\t\t\t\"--menu-height\",\n\t\t\t\t!this.menuHeight.endsWith(\"items\") || this.items.length == 0\n\t\t\t\t\t? this.menuHeight\n\t\t\t\t\t: `${this.itemHeight * +(this.menuHeight.match(/^(\\d+(\\.\\d+)?|\\.\\d+)/g)?.[0] ?? \"10\")}px`\n\t\t\t)\n\t\t}\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.selected.forEach(item => (item.selected = item.hidden = false))\n\t\tthis.initialValue.forEach(item => (item.selected = true))\n\t\tthis.selected = [...this.initialValue]\n\t\tthis.displaySelected()\n\t\tthis.changed = false\n\t\tthis.open && this.handleShowOptions()\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tif (this.clearable) {\n\t\t\tthis.selected.forEach(item => (item.selected = item.hidden = false))\n\t\t\tthis.selected = []\n\t\t\tif (this.displaySelectedElement) {\n\t\t\t\tthis.displaySelectedElement.innerHTML = this.placeholder ?? \"(none)\"\n\t\t\t}\n\t\t}\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.changed = false\n\t\tthis.initialValue = [...this.selected]\n\t}\n\t@Watch(\"selected\")\n\tonSelectedChange() {\n\t\tthis.initialValueHandled && (this.changed = !this.areValuesEqual(this.selected, this.initialValue))\n\t\tconst value =\n\t\t\t!this.multiple && this.selected[0]\n\t\t\t\t? this.selected[0].value\n\t\t\t\t: this.multiple && this.selected.length > 0\n\t\t\t\t? this.selected.map(item => item.value)\n\t\t\t\t: undefined\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.listener.changed?.(this)\n\t}\n\t@Watch(\"filter\")\n\tasync onFilterChange(value: string): Promise<void> {\n\t\tvalue = value.toLowerCase()\n\t\tawait Promise.all(this.items.map(item => item.filter(value)))\n\t}\n\t@Watch(\"readonly\")\n\twatchingReadonly(): void {\n\t\tthis.listener.changed?.(this)\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputSelect) => void>): Promise<void> {\n\t\tif (event.target && \"name\" in event.target && event.target.name !== this.name) {\n\t\t\tevent.stopPropagation()\n\t\t} else if (Item.type.is(event.target)) {\n\t\t\tevent.stopPropagation()\n\t\t\tthis.items.push(event.target as HTMLSmoothlyItemElement)\n\t\t}\n\t\tevent.detail(this)\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tonWindowClick(event: Event): void {\n\t\t!event.composedPath().includes(this.element) && this.open && this.handleShowOptions()\n\t}\n\t@Listen(\"smoothlyItemSelect\")\n\tonItemSelect(event: CustomEvent<HTMLSmoothlyItemElement>): void {\n\t\tevent.stopPropagation()\n\t\tif (this.multiple) {\n\t\t\tthis.selected = event.detail.selected\n\t\t\t\t? [...this.selected, event.detail]\n\t\t\t\t: this.selected.filter(item => item.selected)\n\t\t} else {\n\t\t\tthis.selected[0] && (this.selected[0].hidden = this.selected[0].selected = false)\n\t\t\tthis.selected = !event.detail.selected ? [] : [event.detail]\n\t\t\t!this.showSelected && event.detail.selected && (event.detail.hidden = true)\n\t\t}\n\t\tthis.displaySelected()\n\t\tthis.element.focus()\n\t}\n\t@Watch(\"open\")\n\tonClosed(): void {\n\t\tif (!this.open) {\n\t\t\tconst marked = this.items.find(item => item.marked)\n\t\t\tif (marked)\n\t\t\t\tmarked.marked = false\n\t\t}\n\t}\n\thandleShowOptions(event?: Event): void {\n\t\t!this.readonly &&\n\t\t\t!(event && event.target && this.items.includes(event.target as HTMLSmoothlyItemElement) && this.multiple) &&\n\t\t\t(this.open = !this.open)\n\t\tthis.filter = \"\"\n\t}\n\tareValuesEqual(selected: HTMLSmoothlyItemElement[], initialValue: HTMLSmoothlyItemElement[]): boolean {\n\t\treturn selected.length === initialValue.length && initialValue.every(value => selected.includes(value))\n\t}\n\tdisplaySelected(): void {\n\t\tconst displayString: string = \"<div>\" + this.selected.map(option => option.innerHTML).join(\"</div><div>\") + \"</div>\"\n\t\tthis.displaySelectedElement &&\n\t\t\t(this.displaySelectedElement.innerHTML =\n\t\t\t\tthis.selected.length > 0 ? displayString : this.placeholder ? this.placeholder : \"\")\n\t}\n\t@Listen(\"keydown\")\n\tonKeyDown(event: KeyboardEvent) {\n\t\tevent.stopPropagation()\n\t\tconst visibleItems = this.items.some(item => item.getAttribute(\"hidden\") === null)\n\n\t\tif (event.key != \"Tab\" && !event.ctrlKey && !event.metaKey)\n\t\t\tevent.preventDefault()\n\t\tif (this.open) {\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tvisibleItems && this.move(-1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tvisibleItems && this.move(1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Escape\":\n\t\t\t\t\tif (this.filter == \"\")\n\t\t\t\t\t\tthis.open = false\n\t\t\t\t\telse\n\t\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Backspace\":\n\t\t\t\t\tthis.filter = this.filter.slice(0, -1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Enter\":\n\t\t\t\t\tconst result = this.items.find(item => item.marked)\n\t\t\t\t\tif (result?.value)\n\t\t\t\t\t\tresult.selected = !result.selected\n\t\t\t\t\tthis.smoothlyItemSelect.emit(result)\n\t\t\t\t\tif (!this.multiple) {\n\t\t\t\t\t\tthis.open = false\n\t\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Tab\":\n\t\t\t\t\tthis.open = false\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\tif (event.key.length == 1)\n\t\t\t\t\t\tthis.filter += event.key\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t} else {\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"Enter\":\n\t\t\t\tcase \" \":\n\t\t\t\t\tthis.handleShowOptions()\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\tthis.handleShowOptions()\n\t\t\t\t\tthis.move(0)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\tthis.handleShowOptions()\n\t\t\t\t\tthis.move(-1)\n\t\t\t\t\tbreak\n\t\t\t\tcase \"Tab\":\n\t\t\t\t\tbreak\n\t\t\t\tdefault:\n\t\t\t\t\tthis.handleShowOptions()\n\t\t\t\t\tif (event.key.length == 1)\n\t\t\t\t\t\tthis.filter += event.key\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\tprivate move(direction: -1 | 0 | 1): void {\n\t\tlet markedIndex = this.items.findIndex(item => item.marked)\n\t\tif (markedIndex == -1)\n\t\t\tmarkedIndex = this.items.findIndex(item => item.selected)\n\t\tif (this.items[markedIndex])\n\t\t\tthis.items[markedIndex].marked = false\n\t\tif (markedIndex == -1)\n\t\t\tmarkedIndex = 0\n\t\tdo {\n\t\t\tmarkedIndex = (markedIndex + direction + this.items.length) % this.items.length\n\t\t} while (this.items[markedIndex].hidden)\n\t\tthis.items[markedIndex].marked = true\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\ttabIndex={0}\n\t\t\t\tclass={{ \"has-value\": this.selected.length !== 0 }}\n\t\t\t\tonClick={(event: Event) => this.handleShowOptions(event)}>\n\t\t\t\t<div class=\"select-display\" ref={element => (this.displaySelectedElement = element)}>\n\t\t\t\t\t{this.placeholder}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"icons\">\n\t\t\t\t\t<slot name=\"end\" />\n\t\t\t\t\t<smoothly-icon size=\"tiny\" name={this.open ? \"caret-down-outline\" : \"caret-forward-outline\"} />\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"label\" />\n\t\t\t\t<div class={`${this.open ? \"\" : \"hidden\"} options`}>\n\t\t\t\t\t{this.filter.length > 0 && (\n\t\t\t\t\t\t<smoothly-item selectable={false}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"search-outline\" size=\"small\" />\n\t\t\t\t\t\t\t{this.filter}\n\t\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\t\tname=\"backspace-outline\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\tthis.filter = \"\"\n\t\t\t\t\t\t\t\t\tthis.element.focus()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t)}\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/select/style.css

@@ -5,56 +5,143 @@
 :host[looks="border"] {
 	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
 :host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
 :host[looks="line"] {
 	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
 :host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
 :host[looks="grid"] {
 	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
 }
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
 
 
 :host {
 	display: flex;
+	justify-content: space-between;
+	flex-direction: row;
 	position: relative;
-	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+	background-color: rgb(var(--smoothly-color-shade));
+}
+
+:host.icon {
+	width: fit-content;
+	flex-direction: column;
 }
-:host > main,
-:host > main > * {
-	height: 100%;
+
+:host>.select-display {
+	box-sizing: border-box;
+	min-height: 2.7em;
 	display: flex;
+	cursor: default;
+	padding: .7em ;
+	overflow: hidden;	
+	width: 100%;
+	white-space: nowrap;
+	gap: 1em;
+	text-overflow: ellipsis;
+}
+
+:host>.icons {
+	display:flex;
+	flex-direction: row;
 	align-items: center;
+	margin-right: .4em;
 }
-:host > div > nav {
+:host>.icons::slotted(smoothly-input-reset) {
+	padding-right: .2em;
+}
+
+:host::slotted([slot=label]) {
+	position: absolute;
+	left: 0.4em;
+	top: 0.6em;
+	opacity: 0.8;
+	transform-origin: top left;
+	transition: transform 100ms ease;
+}
+
+:host.has-value::slotted([slot=label]),
+:host:not(.has-value)[placeholder]::slotted([slot=label]) {
+	top: 0.4em;
+	transform: scale(0.6);
+}
+
+:host.has-value:has([slot=label]) .select-display,
+:host:not(.has-value)[placeholder] .select-display  {
+ padding-bottom: 0;
+ padding-left: .8em;
+ padding-top: 1.1em;
+ overflow: hidden;	
+ width: 100%;
+}
+
+:host>.options {
 	display: flex;
 	flex-direction: column;
 	position: absolute;
+	top: 2.7em;
 	z-index: 10;
-	height:  var(--menu-height, unset);
-	overflow-y: scroll;
+	max-height: var(--menu-height, unset);
+	width: 100%;
+	overflow-y: auto;
+	background-color: rgb(var(--smoothly-default-shade));
 }
-:host > aside {
-	position: absolute;
-	top: 0;
-	left: 5em;
-	z-index: 10;
-	background-color: rgb(var(--smoothly-tertiary-color));
-	color: rgb(var(--smoothly-tertiary-contrast));
-	height: 1.25rem;
-	border-radius: 0.3rem;
-	padding: 0.3rem;
+
+:host[looks=border] .options {
+	transform: translateX(-1px);
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+	border-top: rgba(var(--text-color, var(--smoothly-color-contrast)), .4) solid 1px;
+}
+
+:host[looks="grid"] .options {
+	transform: translateX(-2px);
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid 2px;
+	border-top: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid 2px;
+}
+
+:host>.options::slotted(smoothly-item){
+	padding: .7em;
+}
+
+:host>.options::slotted(smoothly-item.non-selectable) {
 	display: flex;
-	align-items: center;
+	gap: 1em;
+	background-color: rgba(var(--smoothly-primary-tint), .5);
+	color: var(--smoothly-color-contrast)
 }
-:host().missing > aside {
-	background-color: rgb(var(--smoothly-warning-color));
-	color: rgb(var(--smoothly-warning-contrast));
+
+:host>.options>smoothly-item.non-selectable>smoothly-icon[name="backspace-outline"] {
+	margin-left: auto;
+	margin-right: 0;
 }
-.hidden {
+
+:host>.options.hidden {
 	display: none;
 }
-:host > section {
+
+:host>section {
 	position: fixed;
 	top: 0px;
 	left: 0px;
@@ -62,3 +149,4 @@
 	height: 100vh;
 	z-index: 10;
 }
+

package/dist/collection/components/input/style.css

@@ -5,14 +5,36 @@
 :host[looks="border"] {
 	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
 :host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
 :host[looks="line"] {
 	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
 :host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
 :host[looks="grid"] {
 	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
 }
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
 
 
 :host {
@@ -78,9 +100,9 @@ input:invalid + label + smoothly-icon {
 	z-index: 1;
 	pointer-events: none;
 }
-:host[placeholder] > div > label,
+:host:not([readonly]):not(.has-value)[placeholder] > div > label,
 :host.has-value > div > label,
-:host:focus-within > div > label {
+:host:not([readonly]):not(.has-value):focus-within > div > label {
 	top: 0.4em;
 	transform: scale(0.6);
 }

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

@@ -0,0 +1,269 @@
+import { h, Host } from "@stencil/core";
+import { Editable } from "../Editable";
+import { Submittable } from "../Submittable";
+export class SmoothlyInputSubmit {
+  constructor() {
+    this.delete = false;
+    this.color = undefined;
+    this.expand = undefined;
+    this.fill = undefined;
+    this.disabled = false;
+    this.display = false;
+    this.shape = undefined;
+    this.type = "button";
+    this.size = undefined;
+    this.toolTip = this.delete ? "Remove" : "Submit";
+  }
+  componentWillLoad() {
+    this.smoothlyInputLoad.emit(parent => {
+      if (Submittable.is(parent) && Editable.type.is(parent)) {
+        this.parent = parent;
+        parent.listen("changed", async (p) => {
+          this.display = !p.readonly;
+          this.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1 ? true : !p.changed;
+        });
+      }
+    });
+  }
+  clickHandler() {
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit(this.delete);
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { title: this.toolTip }, this.delete == true ? (h("smoothly-button-confirm", { disabled: this.disabled, size: this.size, shape: this.shape, expand: this.expand, type: this.type, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: this.type, shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill }, h("slot", null), h("smoothly-icon", { name: "checkmark-outline", fill: "solid" })))));
+  }
+  static get is() { return "smoothly-input-submit"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "delete": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "delete",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "expand": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"block\" | \"full\"",
+          "resolved": "\"block\" | \"full\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expand",
+        "reflect": true
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fill",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"link\" | \"button\"",
+          "resolved": "\"button\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"flexible\" | \"small\" | \"large\" | \"icon\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "toolTip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tool-tip",
+        "reflect": false,
+        "defaultValue": "this.delete ? \"Remove\" : \"Submit\""
+      }
+    };
+  }
+  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"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/submit/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Listen, Prop, VNode } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Editable } from \"../Editable\"\nimport { Submittable } from \"../Submittable\"\n\n@Component({\n\ttag: \"smoothly-input-submit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSubmit implements ComponentWillLoad {\n\tprivate parent?: Submittable & Editable\n\t@Prop() delete = false\n\t@Prop() color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = false\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Prop() toolTip = this.delete ? \"Remove\" : \"Submit\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent) && Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\tthis.display = !p.readonly\n\t\t\t\t\tthis.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1 ? true : !p.changed\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.submit(this.delete)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host title={this.toolTip}>\n\t\t\t\t{this.delete == true ? (\n\t\t\t\t\t<smoothly-button-confirm\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\ttype={this.type}\n\t\t\t\t\t\tcolor={this.color ?? \"danger\"}\n\t\t\t\t\t\tfill={this.fill}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<smoothly-icon name=\"trash-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-button-confirm>\n\t\t\t\t) : (\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={this.type}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"success\"}\n\t\t\t\t\t\tfill={this.fill}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-outline\" fill=\"solid\" />\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/submit/style.css

@@ -0,0 +1,11 @@
+:host {
+	display: flex;
+}
+:host(:not([display])) {
+	display: none;
+}
+:host::slotted(smoothly-button button > * > * + smoothly-icon),
+:host::slotted(smoothly-button-confirm button > * > * + smoothly-icon) {
+	display: none;
+}
+

package/dist/collection/components/item/Item.js

@@ -0,0 +1,11 @@
+import { isly } from "isly";
+export var Item;
+(function (Item) {
+  Item.type = isly.object({
+    value: isly.any(),
+    selected: isly.boolean().optional(),
+    filter: isly.function(),
+  });
+  Item.is = Item.type.is;
+})(Item || (Item = {}));
+//# sourceMappingURL=Item.js.map

package/dist/collection/components/item/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../src/components/item/Item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAQ3B,MAAM,KAAW,IAAI,CAOpB;AAPD,WAAiB,IAAI;EACP,SAAI,GAAG,IAAI,CAAC,MAAM,CAAO;IACrC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE;IACjB,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IACnC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE;GACvB,CAAC,CAAA;EACW,OAAE,GAAG,KAAA,IAAI,CAAC,EAAE,CAAA;AAC1B,CAAC,EAPgB,IAAI,KAAJ,IAAI,QAOpB","sourcesContent":["import { isly } from \"isly\"\n\nexport interface Item {\n\tvalue: any\n\tselected?: boolean\n\tfilter: (filter: string) => Promise<void>\n}\n\nexport namespace Item {\n\texport const type = isly.object<Item>({\n\t\tvalue: isly.any(),\n\t\tselected: isly.boolean().optional(),\n\t\tfilter: isly.function(),\n\t})\n\texport const is = type.is\n}\n"]}