smoothly 1.0.0-alpha.112 → 1.0.0-alpha.113
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.
- package/dist/cjs/Observers-6450f075.js +25 -0
- package/dist/cjs/Observers-6450f075.js.map +1 -0
- package/dist/cjs/{index-43af753b.js → index-6ae370b4.js} +4 -1
- package/dist/cjs/index-6ae370b4.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -2
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/smoothly-accordion_67.cjs.entry.js +54 -8
- package/dist/cjs/smoothly-accordion_67.cjs.entry.js.map +1 -1
- package/dist/cjs/smoothly-address-display.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-address.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-addresses.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-color.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-country.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-display-date-time.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-google-font.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-reorder.cjs.entry.js +4 -4
- package/dist/cjs/smoothly-reorder.cjs.entry.js.map +1 -1
- package/dist/cjs/smoothly-trigger-sink.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-trigger-source.cjs.entry.js +1 -1
- package/dist/cjs/smoothly.cjs.js +3 -2
- package/dist/cjs/smoothly.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/picker/demo/index.js +1 -1
- package/dist/collection/components/picker/demo/index.js.map +1 -1
- package/dist/collection/components/picker/index.js +1 -1
- package/dist/collection/components/picker/index.js.map +1 -1
- package/dist/collection/components/picker/menu/index.js +66 -2
- package/dist/collection/components/picker/menu/index.js.map +1 -1
- package/dist/collection/components/picker/menu/style.css +16 -6
- package/dist/collection/components/picker/option/index.js +28 -2
- package/dist/collection/components/picker/option/index.js.map +1 -1
- package/dist/collection/components/picker/option/style.css +3 -4
- package/dist/collection/components/picker/style.css +1 -3
- package/dist/collection/global/Observers.js +22 -0
- package/dist/collection/global/Observers.js.map +1 -0
- package/dist/collection/global/index.js +5 -0
- package/dist/collection/global/index.js.map +1 -0
- package/dist/collection/model/Option.js.map +1 -1
- package/dist/custom-elements/index.js +76 -9
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/Observers-5f08e828.js +25 -0
- package/dist/esm/Observers-5f08e828.js.map +1 -0
- package/dist/esm/{index-258984d3.js → index-c196715a.js} +4 -2
- package/dist/esm/index-c196715a.js.map +1 -0
- package/dist/esm/loader.js +4 -3
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/smoothly-accordion_67.entry.js +54 -8
- package/dist/esm/smoothly-accordion_67.entry.js.map +1 -1
- package/dist/esm/smoothly-address-display.entry.js +1 -1
- package/dist/esm/smoothly-address.entry.js +1 -1
- package/dist/esm/smoothly-addresses.entry.js +1 -1
- package/dist/esm/smoothly-color.entry.js +1 -1
- package/dist/esm/smoothly-country.entry.js +1 -1
- package/dist/esm/smoothly-display-date-time.entry.js +1 -1
- package/dist/esm/smoothly-google-font.entry.js +1 -1
- package/dist/esm/smoothly-radio-group.entry.js +1 -1
- package/dist/esm/smoothly-reorder.entry.js +2 -2
- package/dist/esm/smoothly-reorder.entry.js.map +1 -1
- package/dist/esm/smoothly-trigger-sink.entry.js +1 -1
- package/dist/esm/smoothly-trigger-source.entry.js +1 -1
- package/dist/esm/smoothly.js +4 -3
- package/dist/esm/smoothly.js.map +1 -1
- package/dist/smoothly/{p-66e9a8b1.entry.js → p-1efa3261.entry.js} +2 -2
- package/dist/smoothly/{p-7bf147bf.entry.js → p-4d743f07.entry.js} +2 -2
- package/dist/smoothly/p-4ff439dd.entry.js +2 -0
- package/dist/smoothly/{p-b3eac6af.entry.js.map → p-4ff439dd.entry.js.map} +1 -1
- package/dist/smoothly/{p-4c1bb81e.entry.js → p-5edb65c6.entry.js} +2 -2
- package/dist/smoothly/{p-12182a73.entry.js → p-663ccbd0.entry.js} +2 -2
- package/dist/smoothly/{p-6fad95bf.entry.js → p-73442332.entry.js} +2 -2
- package/dist/smoothly/{p-7ed2d3dd.entry.js → p-7d43f36c.entry.js} +2 -2
- package/dist/smoothly/{p-47151a53.entry.js → p-9992c8c4.entry.js} +2 -2
- package/dist/smoothly/{p-eef1c80b.entry.js → p-ce4e6f44.entry.js} +2 -2
- package/dist/smoothly/{p-5e387578.js → p-d0b8061e.js} +3 -3
- package/dist/smoothly/p-d0b8061e.js.map +1 -0
- package/dist/smoothly/{p-6aebb818.entry.js → p-dbd1afa9.entry.js} +2 -2
- package/dist/smoothly/p-ede93d69.js +2 -0
- package/dist/smoothly/p-ede93d69.js.map +1 -0
- package/dist/smoothly/p-f85f09d3.entry.js +2 -0
- package/dist/smoothly/p-f85f09d3.entry.js.map +1 -0
- package/dist/smoothly/{p-cb493516.entry.js → p-f96e41aa.entry.js} +2 -2
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/smoothly/smoothly.esm.js.map +1 -1
- package/dist/types/components/picker/menu/index.d.ts +7 -0
- package/dist/types/components/picker/option/index.d.ts +1 -0
- package/dist/types/components.d.ts +4 -0
- package/dist/types/global/Observers.d.ts +8 -0
- package/dist/types/global/index.d.ts +4 -0
- package/dist/types/model/Option.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/index-43af753b.js.map +0 -1
- package/dist/esm/index-258984d3.js.map +0 -1
- package/dist/smoothly/p-5e387578.js.map +0 -1
- package/dist/smoothly/p-97367511.entry.js +0 -2
- package/dist/smoothly/p-97367511.entry.js.map +0 -1
- package/dist/smoothly/p-b3eac6af.entry.js +0 -2
- /package/dist/smoothly/{p-66e9a8b1.entry.js.map → p-1efa3261.entry.js.map} +0 -0
- /package/dist/smoothly/{p-7bf147bf.entry.js.map → p-4d743f07.entry.js.map} +0 -0
- /package/dist/smoothly/{p-4c1bb81e.entry.js.map → p-5edb65c6.entry.js.map} +0 -0
- /package/dist/smoothly/{p-12182a73.entry.js.map → p-663ccbd0.entry.js.map} +0 -0
- /package/dist/smoothly/{p-6fad95bf.entry.js.map → p-73442332.entry.js.map} +0 -0
- /package/dist/smoothly/{p-7ed2d3dd.entry.js.map → p-7d43f36c.entry.js.map} +0 -0
- /package/dist/smoothly/{p-47151a53.entry.js.map → p-9992c8c4.entry.js.map} +0 -0
- /package/dist/smoothly/{p-eef1c80b.entry.js.map → p-ce4e6f44.entry.js.map} +0 -0
- /package/dist/smoothly/{p-6aebb818.entry.js.map → p-dbd1afa9.entry.js.map} +0 -0
- /package/dist/smoothly/{p-cb493516.entry.js.map → p-f96e41aa.entry.js.map} +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-6ae370b4.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = "[color=default].sc-smoothly-color{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-color{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-color{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-color{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-color{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-color{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-color{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-color{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-color{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-color{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-6ae370b4.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-6ae370b4.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = "smoothly-radio-group{display:flex;position:relative;color:none !important;background:none !important;margin:0.5em 0}smoothly-radio-group[hidden]{display:none}smoothly-radio-group[orientation=vertical] *:not(:first-of-type)>input[type=radio]~label{border-top:none}smoothly-radio-group:not([orientation=vertical]) *:not(:first-of-type)>input[type=radio]~label{border-left:none}smoothly-radio-group[orientation=vertical]{flex-direction:column}smoothly-radio-group[orientation=vertical] :first-of-type>input[type=radio]~label{border-radius:4px 4px 0 0}smoothly-radio-group[orientation=vertical] :last-of-type>input[type=radio]~label{border-radius:0 0 4px 4px}smoothly-radio-group:not([orientation=vertical]){flex-direction:row}smoothly-radio-group:not([orientation=vertical]) :first-of-type>input[type=radio]~label{border-radius:4px 0 0 4px}smoothly-radio-group:not([orientation=vertical]) :last-of-type>input[type=radio]~label{border-radius:0 4px 4px 0}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-6ae370b4.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = "smoothly-reorder>*{cursor:move;transition:transform 0.3s}smoothly-reorder>*.dragging{transition:none;box-shadow:0 0 10px rgba(var(--smoothly-dark-color));z-index:1;user-select:none}";
|
|
8
8
|
|
|
@@ -16,9 +16,9 @@ const SmoothlyReorder = class {
|
|
|
16
16
|
if (this.childrenCache)
|
|
17
17
|
result = this.childrenCache;
|
|
18
18
|
else {
|
|
19
|
-
for (let index = 0; index < this.element.children.length; index++) {
|
|
20
|
-
const element = this.element.children[index];
|
|
21
|
-
if (element instanceof
|
|
19
|
+
for (let index$1 = 0; index$1 < this.element.children.length; index$1++) {
|
|
20
|
+
const element = this.element.children[index$1];
|
|
21
|
+
if (element instanceof index.H) {
|
|
22
22
|
const bounds = element.getBoundingClientRect();
|
|
23
23
|
result.push({
|
|
24
24
|
top: bounds.top,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"smoothly-reorder.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,uLAAuL;;MCM3L,eAAe;;;;;EAK3B,IAAY,QAAQ;IACnB,IAAI,MAAM,GAAgB,EAAE,CAAA;IAC5B,IAAI,IAAI,CAAC,aAAa;MACrB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAA;SACvB;MACJ,KAAK,
|
|
1
|
+
{"file":"smoothly-reorder.entry.cjs.js","mappings":"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","names":["index","HTMLElement"],"sources":["./src/components/reorder/style.css?tag=smoothly-reorder","./src/components/reorder/index.tsx"],"sourcesContent":["smoothly-reorder > * {\n\tcursor: move;\n\ttransition: transform 0.3s;\n}\nsmoothly-reorder > *.dragging {\n\ttransition: none;\n\tbox-shadow: 0 0 10px rgba(var(--smoothly-dark-color));\n\tz-index: 1;\n\tuser-select: none;\n}\n","import { Component, Element, Event, EventEmitter } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-reorder\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyReorder {\n\t@Event() reorder: EventEmitter<[number, number]>\n\t@Element() element: HTMLSmoothlyReorderElement\n\tprivate bounds?: DOMRect\n\tprivate childrenCache?: Draggable[]\n\tprivate get children(): Draggable[] {\n\t\tlet result: Draggable[] = []\n\t\tif (this.childrenCache)\n\t\t\tresult = this.childrenCache\n\t\telse {\n\t\t\tfor (let index = 0; index < this.element.children.length; index++) {\n\t\t\t\tconst element = this.element.children[index]\n\t\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\t\tconst bounds = element.getBoundingClientRect()\n\t\t\t\t\tresult.push({\n\t\t\t\t\t\ttop: bounds.top,\n\t\t\t\t\t\tmiddle: bounds.top + bounds.height / 2,\n\t\t\t\t\t\tbottom: bounds.bottom,\n\t\t\t\t\t\telement: element,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.childrenCache = result\n\t\t}\n\t\treturn result\n\t}\n\tprivate dragged?: Dragged\n\tprivate move?: { from: number; to: number }\n\n\tprivate onMouseDown(event: MouseEvent) {\n\t\tif (!this.move && this.element.children.length > 1) {\n\t\t\tthis.bounds = this.element.getBoundingClientRect()\n\t\t\tthis.childrenCache = undefined\n\t\t\tconst index = this.getCurrentIndex(event.clientY)\n\t\t\tthis.dragged = {\n\t\t\t\t...this.children[index],\n\t\t\t\tstartY: event.clientY,\n\t\t\t\toffsetY: event.clientY - this.children[index].middle,\n\t\t\t\tindex,\n\t\t\t\theight:\n\t\t\t\t\tindex < this.children.length - 1\n\t\t\t\t\t\t? this.children[index + 1].top - this.children[index].top\n\t\t\t\t\t\t: this.children[index].bottom - this.children[index - 1].bottom,\n\t\t\t}\n\t\t\tthis.dragged.element.className += \" dragging\"\n\t\t}\n\t}\n\n\tprivate onMouseMove(event: MouseEvent) {\n\t\tif (this.dragged && this.bounds && event.clientY >= this.bounds.top && event.clientY <= this.bounds.bottom) {\n\t\t\tconst currentIndex = this.getCurrentIndex(event.clientY - this.dragged.offsetY)\n\t\t\tthis.translate(this.dragged.index, currentIndex, event.clientY - this.dragged.startY)\n\t\t}\n\t}\n\n\tprivate onMouseUp(event: MouseEvent) {\n\t\tif (this.dragged) {\n\t\t\tthis.dragged.element.className = this.dragged.element.className.replace(\" dragging\", \"\")\n\t\t\tconst index = this.getCurrentIndex(event.clientY - this.dragged.offsetY)\n\t\t\tthis.translate(this.dragged.index, index, this.children[index].top - this.dragged.top)\n\t\t\tthis.move = { from: this.dragged.index, to: index }\n\t\t\tthis.dragged = undefined\n\n\t\t\twindow.setTimeout(() => {\n\t\t\t\tif (this.move) {\n\t\t\t\t\tconst children = [...this.children.map(c => c.element)]\n\t\t\t\t\tconst e = children.splice(this.move.from, 1)\n\t\t\t\t\tchildren.splice(this.move.to, 0, ...e)\n\t\t\t\t\tchildren.forEach(child => this.element.removeChild(child))\n\t\t\t\t\tchildren.forEach(child => {\n\t\t\t\t\t\tchild.style.transform = \"\"\n\t\t\t\t\t\tthis.element.appendChild(child)\n\t\t\t\t\t})\n\t\t\t\t\tthis.reorder.emit([this.move.from, this.move.to])\n\t\t\t\t\tthis.move = undefined\n\t\t\t\t}\n\t\t\t}, 500)\n\t\t}\n\t}\n\n\tprivate translate(fromIndex: number, toIndex: number, y: number) {\n\t\tfor (let index = 0; index < this.children.length; index++) {\n\t\t\tlet value: number\n\t\t\tif (this.dragged) {\n\t\t\t\tif (fromIndex < toIndex && index > fromIndex && index <= toIndex)\n\t\t\t\t\tvalue = -this.dragged.height\n\t\t\t\telse if (fromIndex > toIndex && index < fromIndex && index >= toIndex)\n\t\t\t\t\tvalue = this.dragged.height\n\t\t\t\telse\n\t\t\t\t\tvalue = index == fromIndex ? y : 0\n\n\t\t\t\tthis.children[index].element.style.transform = `translateY(${value}px)`\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate getCurrentIndex(y: number): number {\n\t\treturn this.children.findIndex(c => y < c.bottom)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.element.childNodes.forEach(child => {\n\t\t\tchild.addEventListener(\"mousedown\", (e: MouseEvent) => this.onMouseDown(e))\n\t\t\tchild.addEventListener(\"mousemove\", (e: MouseEvent) => this.onMouseMove(e))\n\t\t\tchild.addEventListener(\"mouseup\", (e: MouseEvent) => this.onMouseUp(e))\n\t\t})\n\t}\n}\n"],"version":3}
|
package/dist/cjs/smoothly.cjs.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-6ae370b4.js');
|
|
6
|
+
require('./Observers-6450f075.js');
|
|
6
7
|
|
|
7
8
|
/*
|
|
8
9
|
Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +18,7 @@ const patchBrowser = () => {
|
|
|
17
18
|
};
|
|
18
19
|
|
|
19
20
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy(JSON.parse("[[\"smoothly-accordion_67.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",null,[[0,\"selectionChanged\",\"handleSelectionChanged\"]]],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-button-demo\"],[0,\"smoothly-dialog-demo\"],[2,\"smoothly-select-demo\"],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"path\":[1],\"to\":[1],\"selected\":[1540],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"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],\"name\":[1],\"value\":[8],\"disabled\":[516],\"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]}],[1,\"smoothly-toggle-switch\",{\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"name\":[1],\"value\":[8]}],[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]}],[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\"],[0,\"smoothly-tuple\",{\"tuple\":[16]}],[6,\"smoothly-picker-menu\",{\"looks\":[1],\"multiple\":[516],\"mutable\":[516],\"readonly\":[516],\"validator\":[16],\"backend\":[32],\"options\":[32],\"created\":[32],\"search\":[32],\"valid\":[32],\"display\":[32]},[[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],\"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-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[8,\"initial-value\"],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"itemSelected\",\"onItemSelected\"],[0,\"keydown\",\"onKeyDown\"]]],[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-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],\"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);
|
|
21
|
+
return index.bootstrapLazy(JSON.parse("[[\"smoothly-accordion_67.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]}],[0,\"smoothly-input-demo\",null,[[0,\"selectionChanged\",\"handleSelectionChanged\"]]],[2,\"smoothly-table-demo\"],[0,\"smoothly-display-demo\"],[4,\"smoothly-app\",{\"label\":[1],\"color\":[1],\"menuOpen\":[1540,\"menu-open\"],\"selected\":[32]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelected\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoaded\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]]],[0,\"smoothly-button-demo\"],[0,\"smoothly-dialog-demo\"],[2,\"smoothly-select-demo\"],[6,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"path\":[1],\"to\":[1],\"selected\":[1540],\"getContent\":[64],\"setSelected\":[64]}],[2,\"smoothly-icon-demo\"],[2,\"smoothly-table-testing\",{\"counter\":[32]}],[2,\"smoothly-picker-demo\",{\"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],\"name\":[1],\"value\":[8],\"disabled\":[516],\"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]}],[1,\"smoothly-toggle-switch\",{\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"name\":[1],\"value\":[8]}],[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]}],[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\"],[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],\"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-input-select\",{\"name\":[1],\"color\":[1537],\"looks\":[1537],\"type\":[1537],\"showSelected\":[1540,\"show-selected\"],\"initialPrompt\":[1,\"initial-prompt\"],\"initialValue\":[8,\"initial-value\"],\"opened\":[32],\"selectedElement\":[32],\"missing\":[32],\"filter\":[32],\"reset\":[64]},[[0,\"click\",\"onClick\"],[0,\"itemSelected\",\"onItemSelected\"],[0,\"keydown\",\"onKeyDown\"]]],[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-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],\"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);
|
|
21
22
|
});
|
|
22
23
|
|
|
23
24
|
exports.setNonce = index.setNonce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"smoothly.cjs.js","mappings":"
|
|
1
|
+
{"file":"smoothly.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAgBA,MAAM,YAAY,GAAG,MAAM;AA6B3B,IAAI,MAAM,UAAU,GAAG,0MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAyD,EAAE,CAAC;AAe1E,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAWK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;AC1ED,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cssVarShim) {\n // shim css vars\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|
|
@@ -56,7 +56,7 @@ export class SmoothlyPickerDemo {
|
|
|
56
56
|
}), this.data.options.map(email => {
|
|
57
57
|
var _a;
|
|
58
58
|
return (h("smoothly-picker-option", { key: email, value: email, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, h("span", null, this.users[email]), h("span", { slot: "label" }, email), h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
|
|
59
|
-
})), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear")), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")))));
|
|
59
|
+
})), h("smoothly-submit", { size: "icon", slot: "submit" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear")), h("h5", null, "uncontrolled inputs"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, h("span", { slot: "label" }, "Emails"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), h("smoothly-submit", { slot: "submit" }, "Submit"), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-picker", { name: "shape" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish"))), h("smoothly-picker", { looks: "border", name: "icon" }, h("span", { slot: "label" }, "Icon"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" })), h("smoothly-picker-option", { value: "airplane" }, h("span", { slot: "label" }, "Airplane"), h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), h("smoothly-picker-option", { value: "alarm" }, h("span", { slot: "label" }, "Alarm"), h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), h("smoothly-picker-option", { value: "archive" }, h("span", { slot: "label" }, "Archive"), h("smoothly-icon", { size: "tiny", name: "archive-outline" })), h("smoothly-picker-option", { value: "bag" }, h("span", { slot: "label" }, "Bag"), h("smoothly-icon", { size: "tiny", name: "bag-outline" })), h("smoothly-picker-option", { value: "cafe" }, h("span", { slot: "label" }, "Cafe"), h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), h("smoothly-picker-option", { value: "disc" }, h("span", { slot: "label" }, "Disc"), h("smoothly-icon", { size: "tiny", name: "disc-outline" })), h("smoothly-picker-option", { value: "earth" }, h("span", { slot: "label" }, "Earth"), h("smoothly-icon", { size: "tiny", name: "earth-outline" })), h("smoothly-picker-option", { value: "fast-food" }, h("span", { slot: "label" }, "Fast food"), h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "smoothly-picker-demo"; }
|
|
62
62
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, State } from \"@stencil/core\"\nimport { Data, Notice } from \"../../../model\"\nimport { Controls } from \"../menu\"\n\nfunction validateEmail(email: string) {\n\treturn email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed(\"That is not an email\") }\n}\n\n@Component({\n\ttag: \"smoothly-picker-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerDemo {\n\tprivate controls?: Controls\n\tprivate users: Record<string, string | undefined> = {\n\t\t\"giovani@rocket.com\": \"giovani doe\",\n\t\t\"jessie@rocket.com\": \"jessie doe\",\n\t\t\"james@rocket.com\": \"james doe\",\n\t}\n\t@State() data = {\n\t\tmessage: \"hello world\",\n\t\temails: [\"jessie@rocket.com\", \"james@rocket.com\"],\n\t\toptions: [\n\t\t\t\"giovani@rocket.com\",\n\t\t\t\"john@example.com\",\n\t\t\t\"jane@example.com\",\n\t\t\t\"jack@example.com\",\n\t\t\t\"jessica@example.com\",\n\t\t\t\"julia@example.com\",\n\t\t\t\"jayden@example.com\",\n\t\t\t\"jake@example.com\",\n\t\t\t\"jamie@example.com\",\n\t\t\t\"jasmine@example.com\",\n\t\t],\n\t}\n\t@State() change?: SmoothlyPickerDemo[\"data\"]\n\tinputHandler(event: CustomEvent<Data>) {\n\t\tif (this.change) {\n\t\t\tthis.change = {\n\t\t\t\t...this.change,\n\t\t\t\t...event.detail,\n\t\t\t}\n\t\t\tconsole.log(\"demo input\", this.change)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: CustomEvent<Data>) {\n\t\tconsole.log(\"submitted\", event.detail)\n\t}\n\tclickHandler() {\n\t\tif (!this.change)\n\t\t\tthis.controls?.remember()\n\t\telse\n\t\t\tthis.controls?.restore()\n\t\tthis.change = this.change ? undefined : { ...this.data, emails: [...this.data.emails] }\n\t}\n\tloadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-button onClick={() => this.clickHandler()}>\n\t\t\t\t\t{!this.change ? \"start edit\" : \"end edit\"}\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e as any)}>\n\t\t\t\t\t<smoothly-input readonly={!this.change} name=\"message\" value={this.data.message}>\n\t\t\t\t\t\tMessage\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tname=\"emails\"\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\treadonly={!this.change}\n\t\t\t\t\t\tvalidator={validateEmail}\n\t\t\t\t\t\tonSmoothlyPickerLoaded={e => this.loadedHandler(e)}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-add-outline\" />\n\t\t\t\t\t\t{(this.change?.emails ?? this.data.emails).map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} selected search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{this.data.options.map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h5>uncontrolled inputs</h5>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(\"submitted\", e.detail)} looks=\"line\">\n\t\t\t\t\t<smoothly-input name=\"purpose\" type=\"text\">\n\t\t\t\t\t\tPurpose\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker multiple mutable name=\"emails\" validator={validateEmail}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"james@rocket.com\"}>james@rocket.com</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"jessie@rocket.com\"}>\n\t\t\t\t\t\t\tjessie@rocket.com\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"giovanni@rocket.com\"}>giovanni@rocket.com</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-picker name=\"shape\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-picker multiple readonly name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, State } from \"@stencil/core\"\nimport { Data, Notice } from \"../../../model\"\nimport { Controls } from \"../menu\"\n\nfunction validateEmail(email: string) {\n\treturn email.match(/^.+@.+/) ? true : { result: false, notice: Notice.failed(\"That is not an email\") }\n}\n\n@Component({\n\ttag: \"smoothly-picker-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPickerDemo {\n\tprivate controls?: Controls\n\tprivate users: Record<string, string | undefined> = {\n\t\t\"giovani@rocket.com\": \"giovani doe\",\n\t\t\"jessie@rocket.com\": \"jessie doe\",\n\t\t\"james@rocket.com\": \"james doe\",\n\t}\n\t@State() data = {\n\t\tmessage: \"hello world\",\n\t\temails: [\"jessie@rocket.com\", \"james@rocket.com\"],\n\t\toptions: [\n\t\t\t\"giovani@rocket.com\",\n\t\t\t\"john@example.com\",\n\t\t\t\"jane@example.com\",\n\t\t\t\"jack@example.com\",\n\t\t\t\"jessica@example.com\",\n\t\t\t\"julia@example.com\",\n\t\t\t\"jayden@example.com\",\n\t\t\t\"jake@example.com\",\n\t\t\t\"jamie@example.com\",\n\t\t\t\"jasmine@example.com\",\n\t\t],\n\t}\n\t@State() change?: SmoothlyPickerDemo[\"data\"]\n\tinputHandler(event: CustomEvent<Data>) {\n\t\tif (this.change) {\n\t\t\tthis.change = {\n\t\t\t\t...this.change,\n\t\t\t\t...event.detail,\n\t\t\t}\n\t\t\tconsole.log(\"demo input\", this.change)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormSubmit\")\n\tsubmitHandler(event: CustomEvent<Data>) {\n\t\tconsole.log(\"submitted\", event.detail)\n\t}\n\tclickHandler() {\n\t\tif (!this.change)\n\t\t\tthis.controls?.remember()\n\t\telse\n\t\t\tthis.controls?.restore()\n\t\tthis.change = this.change ? undefined : { ...this.data, emails: [...this.data.emails] }\n\t}\n\tloadedHandler(event: CustomEvent<Controls>) {\n\t\tthis.controls = event.detail\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-button onClick={() => this.clickHandler()}>\n\t\t\t\t\t{!this.change ? \"start edit\" : \"end edit\"}\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h5>Controlled input</h5>\n\t\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormInput={e => this.inputHandler(e as any)}>\n\t\t\t\t\t<smoothly-input readonly={!this.change} name=\"message\" value={this.data.message}>\n\t\t\t\t\t\tMessage\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tname=\"emails\"\n\t\t\t\t\t\tmutable\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\treadonly={!this.change}\n\t\t\t\t\t\tvalidator={validateEmail}\n\t\t\t\t\t\tonSmoothlyPickerLoaded={e => this.loadedHandler(e)}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-add-outline\" />\n\t\t\t\t\t\t{(this.change?.emails ?? this.data.emails).map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} selected search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{this.data.options.map(email => (\n\t\t\t\t\t\t\t<smoothly-picker-option key={email} value={email} search={[this.users[email] ?? []].flat()}>\n\t\t\t\t\t\t\t\t<span>{this.users[email]}</span>\n\t\t\t\t\t\t\t\t<span slot=\"label\">{email}</span>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" slot=\"display\" name=\"person-outline\" />\n\t\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h5>uncontrolled inputs</h5>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(\"submitted\", e.detail)} looks=\"line\">\n\t\t\t\t\t<smoothly-input name=\"purpose\" type=\"text\">\n\t\t\t\t\t\tPurpose\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker multiple mutable name=\"emails\" validator={validateEmail}>\n\t\t\t\t\t\t<span slot=\"label\">Emails</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"james@rocket.com\"}>james@rocket.com</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"jessie@rocket.com\"}>\n\t\t\t\t\t\t\tjessie@rocket.com\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"giovanni@rocket.com\"}>giovanni@rocket.com</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-picker name=\"shape\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-picker multiple readonly name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<smoothly-picker looks=\"border\" name=\"icon\">\n\t\t\t\t\t<span slot=\"label\">Icon</span>\n\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"airplane\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Airplane</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"airplane-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"alarm\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Alarm</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"alarm-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"archive\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Archive</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"archive-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"bag\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Bag</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"bag-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cafe\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cafe</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cafe-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"disc\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Disc</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"disc-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"earth\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Earth</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"earth-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"fast-food\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Fast food</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"fast-food-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t</smoothly-picker>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -63,7 +63,7 @@ export class SmoothlyPicker {
|
|
|
63
63
|
this.selected.forEach(option => option.selected && option.element.clickHandler());
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
-
return (h(Host, null, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-picker-menu", { looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
|
|
66
|
+
return (h(Host, null, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-picker-menu", { open: this.open, looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "smoothly-picker"; }
|
|
69
69
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +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, 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\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\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\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(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>) {\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<smoothly-picker-menu\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"]}
|
|
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, 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\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\tthis.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\n\t\tthis.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) })\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(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>) {\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<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"]}
|