smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

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

@@ -0,0 +1,298 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { h, Host } from "@stencil/core";
+export class SmoothlyPickerOption {
+  constructor() {
+    this.selected = false;
+    this.visible = true;
+    this.value = undefined;
+    this.search = [];
+    this.position = -1;
+    this.required = false;
+    this.readonly = false;
+    this.slotted = [];
+  }
+  get option() {
+    var _a;
+    return {
+      element: this.element,
+      selected: this.selected,
+      readonly: this.readonly,
+      required: this.required,
+      visible: this.visible,
+      search: this.search,
+      value: this.value,
+      slotted: this.slotted,
+      position: this.position >= 0 || !((_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement)
+        ? this.position
+        : Array.from(this.element.parentElement.parentElement.children).indexOf(this.element.parentElement),
+      set: {
+        selected: selected => (this.selected = selected),
+        readonly: readonly => (this.readonly = readonly),
+        visible: visible => (this.visible = visible),
+        search: search => (this.search = search),
+        value: value => (this.value = value),
+      },
+    };
+  }
+  emitChange() {
+    if (this.element.parentElement)
+      this.smoothlyPickerOptionChange.emit(this.option);
+  }
+  componentWillLoad() {
+    if (this.required)
+      this.selected = true;
+    this.smoothlyPickerOptionLoad.emit(((_a) => {
+      var { slotted } = _a, option = __rest(_a, ["slotted"]);
+      return option;
+    })(this.option));
+  }
+  componentDidLoad() {
+    this.smoothlyPickerOptionLoaded.emit(this.option);
+  }
+  slottedChangeHandler(event) {
+    event.stopPropagation();
+    this.slotted = event.detail;
+  }
+  async clickHandler() {
+    if (!this.readonly && !this.required)
+      this.selected = !this.selected;
+  }
+  render() {
+    return (h(Host, { class: { visible: this.visible }, onClick: () => this.clickHandler() }, h("div", { part: "display", class: "display" }, h("slot", { name: "display" })), h("div", { part: "content", class: "content" }, h("smoothly-slotted-elements", { onSmoothlySlottedChange: e => this.slottedChangeHandler(e), clone: true }, h("slot", null)), h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { name: this.selected ? "checkbox-outline" : "square-outline" }))));
+  }
+  static get is() { return "smoothly-picker-option"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "visible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "visible",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "search": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "position": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "-1"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "readonly": {},
+      "slotted": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyPickerOptionLoad",
+        "name": "smoothlyPickerOptionLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Option.Load",
+          "resolved": "{ value: any; selected: boolean; required: boolean; readonly: boolean; element: HTMLSmoothlyPickerOptionElement; search: string[]; visible: boolean; position: number; set: { selected: (selected: boolean) => void; visible: (visible: boolean) => void; readonly: (readonly: boolean) => void; search: (search: string[]) => void; value: (value: any) => void; }; }",
+          "references": {
+            "Option": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyPickerOptionLoaded",
+        "name": "smoothlyPickerOptionLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Option",
+          "resolved": "Option",
+          "references": {
+            "Option": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyPickerOptionChange",
+        "name": "smoothlyPickerOptionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Option",
+          "resolved": "Option",
+          "references": {
+            "Option": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clickHandler": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "position",
+        "methodName": "emitChange"
+      }, {
+        "propName": "selected",
+        "methodName": "emitChange"
+      }, {
+        "propName": "slotted",
+        "methodName": "emitChange"
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/option/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Option } from \"../../../model\"\n@Component({\n\ttag: \"smoothly-picker-option\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyPickerOption {\n\t@Element() element: HTMLSmoothlyPickerOptionElement\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) visible = true\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true }) search: string[] = []\n\t@Prop({ reflect: true }) position = -1\n\t@Prop({ reflect: true }) required = false\n\t@State() readonly = false\n\t@State() slotted: Node[] = []\n\t@Event() smoothlyPickerOptionLoad: EventEmitter<Option.Load>\n\t@Event() smoothlyPickerOptionLoaded: EventEmitter<Option>\n\t@Event() smoothlyPickerOptionChange: EventEmitter<Option>\n\n\tget option(): Option {\n\t\treturn {\n\t\t\telement: this.element,\n\t\t\tselected: this.selected,\n\t\t\treadonly: this.readonly,\n\t\t\trequired: this.required,\n\t\t\tvisible: this.visible,\n\t\t\tsearch: this.search,\n\t\t\tvalue: this.value,\n\t\t\tslotted: this.slotted,\n\t\t\tposition:\n\t\t\t\tthis.position >= 0 || !this.element.parentElement?.parentElement\n\t\t\t\t\t? this.position\n\t\t\t\t\t: Array.from(this.element.parentElement.parentElement.children).indexOf(this.element.parentElement),\n\t\t\tset: {\n\t\t\t\tselected: selected => (this.selected = selected),\n\t\t\t\treadonly: readonly => (this.readonly = readonly),\n\t\t\t\tvisible: visible => (this.visible = visible),\n\t\t\t\tsearch: search => (this.search = search),\n\t\t\t\tvalue: value => (this.value = value),\n\t\t\t},\n\t\t}\n\t}\n\t@Watch(\"position\")\n\t@Watch(\"selected\")\n\t@Watch(\"slotted\")\n\temitChange() {\n\t\tif (this.element.parentElement)\n\t\t\tthis.smoothlyPickerOptionChange.emit(this.option)\n\t}\n\n\tcomponentWillLoad() {\n\t\tif (this.required)\n\t\t\tthis.selected = true\n\t\tthis.smoothlyPickerOptionLoad.emit((({ slotted, ...option }) => option)(this.option))\n\t}\n\tcomponentDidLoad() {\n\t\tthis.smoothlyPickerOptionLoaded.emit(this.option)\n\t}\n\tslottedChangeHandler(event: CustomEvent<Node[]>) {\n\t\tevent.stopPropagation()\n\t\tthis.slotted = event.detail\n\t}\n\t@Method()\n\tasync clickHandler() {\n\t\tif (!this.readonly && !this.required)\n\t\t\tthis.selected = !this.selected\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ visible: this.visible }} onClick={() => this.clickHandler()}>\n\t\t\t\t<div part=\"display\" class={\"display\"}>\n\t\t\t\t\t<slot name=\"display\" />\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class={\"content\"}>\n\t\t\t\t\t<smoothly-slotted-elements onSmoothlySlottedChange={e => this.slottedChangeHandler(e)} clone>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</smoothly-slotted-elements>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</div>\n\t\t\t\t<button type={\"button\"}>\n\t\t\t\t\t<smoothly-icon name={this.selected ? \"checkbox-outline\" : \"square-outline\"} />\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,30 @@
+:host {
+	display: contents;
+}
+:host(:not([visible])) {
+	display: none;
+}
+:host > * {
+	cursor: pointer;
+	padding: 0.25ch 0.5rem
+}
+:host .display {
+	padding-left: 0;
+}
+:host button {
+	color: unset;
+	background-color: inherit;
+	border: none;
+	padding-right: 0;
+}
+:host .content {
+	display: flex;
+	column-gap: 1rem;
+	justify-content: space-between;
+}
+:host([required]) > * {
+	cursor: default;
+}
+:host([required]) button {
+	opacity: 0.65;
+}

package/dist/collection/components/picker/slot-elements/index.js

@@ -0,0 +1,109 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlySlotElements {
+  constructor() {
+    this.clone = true;
+    this.nodes = undefined;
+  }
+  componentWillLoad() {
+    if (!this.nodes)
+      this.smoothlySlotEmpty.emit({
+        set: {
+          nodes: nodes => (this.nodes = nodes),
+        },
+      });
+  }
+  componentDidLoad() {
+    this.element.innerHTML = "";
+    if (this.nodes)
+      if (Array.isArray(this.nodes))
+        this.nodes.forEach(node => this.element.appendChild(this.clone ? node.cloneNode(true) : node));
+      else
+        this.element.appendChild(this.clone ? this.nodes.cloneNode(true) : this.nodes);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "smoothly-slot-elements"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "clone": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clone",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "nodes": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Node | Node[]",
+          "resolved": "Node | Node[] | undefined",
+          "references": {
+            "Node": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlySlotEmpty",
+        "name": "smoothlySlotEmpty",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Slot",
+          "resolved": "Slot",
+          "references": {
+            "Slot": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "nodes",
+        "methodName": "componentDidLoad"
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/picker/slot-elements/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/slot-elements/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAa7F,MAAM,OAAO,oBAAoB;;iBAEhB,IAAI;;;EAIpB,iBAAiB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK;MACd,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC3B,GAAG,EAAE;UACJ,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpC;OACD,CAAC,CAAA;EACJ,CAAC;EAGD,gBAAgB;IACf,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAA;IAC3B,IAAI,IAAI,CAAC,KAAK;MACb,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;;QAE9F,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;EACjF,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from \"@stencil/core\"\n\nexport interface Slot {\n\tset: {\n\t\tnodes: (nodes: Node | Node[]) => void\n\t}\n}\n\n@Component({\n\ttag: \"smoothly-slot-elements\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySlotElements {\n\t@Element() element: HTMLElement\n\t@Prop() clone = true\n\t@Prop({ mutable: true }) nodes?: Node | Node[]\n\t@Event() smoothlySlotEmpty: EventEmitter<Slot>\n\n\tcomponentWillLoad() {\n\t\tif (!this.nodes)\n\t\t\tthis.smoothlySlotEmpty.emit({\n\t\t\t\tset: {\n\t\t\t\t\tnodes: nodes => (this.nodes = nodes),\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\t@Watch(\"nodes\")\n\tcomponentDidLoad() {\n\t\tthis.element.innerHTML = \"\"\n\t\tif (this.nodes)\n\t\t\tif (Array.isArray(this.nodes))\n\t\t\t\tthis.nodes.forEach(node => this.element.appendChild(this.clone ? node.cloneNode(true) : node))\n\t\t\telse\n\t\t\t\tthis.element.appendChild(this.clone ? this.nodes.cloneNode(true) : this.nodes)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/slot-elements/style.css

@@ -0,0 +1,3 @@
+:host {
+	display: contents;
+}

package/dist/collection/components/picker/slotted-elements/index.js

@@ -0,0 +1,84 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlySottedElement {
+  constructor() {
+    this.clone = true;
+  }
+  componentDidRender() {
+    const slotted = Array.from(this.element.childNodes, child => {
+      let result;
+      if (child instanceof HTMLSlotElement) {
+        const assigned = child.assignedNodes();
+        result = assigned.length
+          ? assigned.map(child => (this.clone ? child.cloneNode(true) : child))
+          : this.clone
+            ? child.cloneNode(true)
+            : child;
+      }
+      else
+        result = child;
+      return result;
+    }).flat();
+    this.smoothlySlottedChange.emit(Array.from(slotted, child => (this.clone ? child.cloneNode(true) : child)));
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "smoothly-slotted-elements"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "clone": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clone",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlySlottedChange",
+        "name": "smoothlySlottedChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Node[]",
+          "resolved": "Node[]",
+          "references": {
+            "Node": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/picker/slotted-elements/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/picker/slotted-elements/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOtF,MAAM,OAAO,qBAAqB;;iBAEjB,IAAI;;EAGpB,kBAAkB;IACjB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE;MAC3D,IAAI,MAAqB,CAAA;MACzB,IAAI,KAAK,YAAY,eAAe,EAAE;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAA;QACtC,MAAM,GAAG,QAAQ,CAAC,MAAM;UACvB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;UACrE,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;YACvB,CAAC,CAAC,KAAK,CAAA;OACR;;QACA,MAAM,GAAG,KAAK,CAAA;MACf,OAAO,MAAM,CAAA;IACd,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;IACT,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;EAC5G,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-slotted-elements\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySottedElement {\n\t@Element() element: HTMLElement\n\t@Prop() clone = true\n\t@Event() smoothlySlottedChange: EventEmitter<Node[]>\n\n\tcomponentDidRender() {\n\t\tconst slotted = Array.from(this.element.childNodes, child => {\n\t\t\tlet result: Node | Node[]\n\t\t\tif (child instanceof HTMLSlotElement) {\n\t\t\t\tconst assigned = child.assignedNodes()\n\t\t\t\tresult = assigned.length\n\t\t\t\t\t? assigned.map(child => (this.clone ? child.cloneNode(true) : child))\n\t\t\t\t\t: this.clone\n\t\t\t\t\t? child.cloneNode(true)\n\t\t\t\t\t: child\n\t\t\t} else\n\t\t\t\tresult = child\n\t\t\treturn result\n\t\t}).flat()\n\t\tthis.smoothlySlottedChange.emit(Array.from(slotted, child => (this.clone ? child.cloneNode(true) : child)))\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/picker/slotted-elements/style.css

@@ -0,0 +1,3 @@
+:host {
+	display: contents;
+}