smoothly 1.0.0-alpha.21 → 1.0.0-alpha.210

package/dist/collection/components/accordion-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/accordion-item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOvF,MAAM,OAAO,qBAAqB;;;;;;EAUjC,WAAW,CAAC,SAAkB;IAC7B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;IACrB,IAAI,SAAS,EAAE;MACd,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACtB,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,CAAA;KACF;EACF,CAAC;EACD,gBAAgB;IACf,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAA;IACvD,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;MACvB,MAAM,OAAO,GAAG,CAAC,CAAU,EAAE,EAAE;QAC9B,IAAI,IAAI,CAAC,IAAI;UACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;;UAE7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QACjB,CAAC,CAAC,cAAc,EAAE,CAAA;MACnB,CAAC,CAAA;MACD,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;MAC7C,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;KAC7C;IACD,IAAI,CAAC,4BAA4B,CAAC,IAAI,EAAE,CAAA;EACzC,CAAC;EACD,oBAAoB;IACnB,IAAI,CAAC,8BAA8B,CAAC,IAAI,EAAE,CAAA;EAC3C,CAAC;EACD,MAAM;IACL,OAAO,CACN,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI;MACvB;QACE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;UAC5D,YAAM,CAAC,EAAC,oKAAoK,GAAG,CAC1K,CACN,CAAC,CAAC,CAAC,CACH,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;UAC5D,YAAM,CAAC,EAAC,6NAA6N,GAAG,CACnO,CACN;QACA,IAAI,CAAC,IAAI;QACT,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAChC,YAAM,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,KAAK,CAAQ,CAC1D,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,YAAM,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,IAAG,CAAC,CAAQ,CAAC,CAC7D,CAAC,CAAC,CAAC,CACH,EAAE,CACF,CACQ;MACV,gBAAU,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QAC9C,eAAQ,CACE,CACF,CACV,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-accordion-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAccordionItem {\n\t@Prop() name: string\n\t@Prop() brand?: string | string[]\n\t@Prop({ mutable: true, reflect: true }) open?: boolean\n\t@Element() me: HTMLElement\n\t@Event() smoothlyAccordionItemDidLoad!: EventEmitter<void>\n\t@Event() smoothlyAccordionItemDidUnload!: EventEmitter<void>\n\t@Event() smoothlyOpen!: EventEmitter<{ name: string; open: boolean }>\n\t@Event() smoothlyClose!: EventEmitter<{ name: string; open: boolean }>\n\t@Watch(\"open\")\n\topenChanged(isChecked: boolean) {\n\t\tthis.open = isChecked\n\t\tif (isChecked) {\n\t\t\tthis.smoothlyOpen.emit({\n\t\t\t\topen: true,\n\t\t\t\tname: this.name,\n\t\t\t})\n\t\t}\n\t}\n\tcomponentDidLoad() {\n\t\tconst summary = this.me.getElementsByTagName(\"summary\")\n\t\tif (summary.length > 0) {\n\t\t\tconst onClick = (e: UIEvent) => {\n\t\t\t\tif (this.open)\n\t\t\t\t\tthis.smoothlyClose.emit({ open: this.open, name: this.name })\n\t\t\t\telse\n\t\t\t\t\tthis.open = true\n\t\t\t\te.preventDefault()\n\t\t\t}\n\t\t\tsummary[0].addEventListener(\"click\", onClick)\n\t\t\tsummary[0].addEventListener(\"touch\", onClick)\n\t\t}\n\t\tthis.smoothlyAccordionItemDidLoad.emit()\n\t}\n\tdisconnectedCallback() {\n\t\tthis.smoothlyAccordionItemDidUnload.emit()\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<details open={this.open}>\n\t\t\t\t<summary>\n\t\t\t\t\t{this.open ? (\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t\t\t\t\t\t<path d=\"M256 48C141.6 48 48 141.6 48 256s93.6 208 208 208 208-93.6 208-208S370.4 48 256 48zm-42.7 318.9L106.7 260.3l29.9-29.9 76.8 76.8 162.1-162.1 29.9 29.9-192.1 191.9z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t\t\t\t\t\t<path d=\"M256 48C141.601 48 48 141.601 48 256s93.601 208 208 208 208-93.601 208-208S370.399 48 256 48zm0 374.399c-91.518 0-166.399-74.882-166.399-166.399S164.482 89.6 256 89.6 422.4 164.482 422.4 256 347.518 422.399 256 422.399z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.name}\n\t\t\t\t\t{typeof this.brand == \"string\" ? (\n\t\t\t\t\t\t<span class={this.brand.toLowerCase()}>{this.brand}</span>\n\t\t\t\t\t) : Array.isArray(this.brand) ? (\n\t\t\t\t\t\tthis.brand.map(b => <span class={b.toLowerCase()}>{b}</span>)\n\t\t\t\t\t) : (\n\t\t\t\t\t\t[]\n\t\t\t\t\t)}\n\t\t\t\t</summary>\n\t\t\t\t<fieldset disabled={!this.open} name={this.name}>\n\t\t\t\t\t<slot />\n\t\t\t\t</fieldset>\n\t\t\t</details>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/accordion-item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQvF,MAAM,OAAO,qBAAqB;;;;;;EAUjC,WAAW,CAAC,SAAkB;IAC7B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;IACrB,IAAI,SAAS,EAAE;MACd,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACtB,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,CAAA;KACF;EACF,CAAC;EACD,iBAAiB;IAChB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAA;IAC5D,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;MACvB,MAAM,OAAO,GAAG,CAAC,CAAU,EAAE,EAAE;QAC9B,IAAI,IAAI,CAAC,IAAI;UACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;;UAE7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QACjB,CAAC,CAAC,cAAc,EAAE,CAAA;MACnB,CAAC,CAAA;MACD,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;MAC7C,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;KAC7C;IACD,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACrB,CAAC,CAAC,CAAA;EACH,CAAC;EACD,oBAAoB;;IACnB,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACtC,CAAC;EACD,MAAM;IACL,OAAO,CACN,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI;MACvB;QACE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;UAC5D,YAAM,CAAC,EAAC,oKAAoK,GAAG,CAC1K,CACN,CAAC,CAAC,CAAC,CACH,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;UAC5D,YAAM,CAAC,EAAC,6NAA6N,GAAG,CACnO,CACN;QACA,IAAI,CAAC,IAAI;QACT,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAChC,YAAM,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,KAAK,CAAQ,CAC1D,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,YAAM,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,IAAG,CAAC,CAAQ,CAAC,CAC7D,CAAC,CAAC,CAAC,CACH,EAAE,CACF,CACQ;MACV,gBAAU,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QAC9C,eAAQ,CACE,CACF,CACV,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch } from \"@stencil/core\"\nimport { SmoothlyAccordion } from \"../accordion\"\n\n@Component({\n\ttag: \"smoothly-accordion-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAccordionItem {\n\t@Prop() name: string\n\t@Prop() brand?: string | string[]\n\t@Prop({ mutable: true, reflect: true }) open?: boolean\n\t@Element() element: HTMLSmoothlyAccordionItemElement\n\t@Event() smoothlyAccordionItemWillLoad!: EventEmitter<(parent: SmoothlyAccordion) => void>\n\t@Event() smoothlyOpen!: EventEmitter<{ name: string; open: boolean }>\n\t@Event() smoothlyClose!: EventEmitter<{ name: string; open: boolean }>\n\tprivate parent?: SmoothlyAccordion\n\t@Watch(\"open\")\n\topenChanged(isChecked: boolean) {\n\t\tthis.open = isChecked\n\t\tif (isChecked) {\n\t\t\tthis.smoothlyOpen.emit({\n\t\t\t\topen: true,\n\t\t\t\tname: this.name,\n\t\t\t})\n\t\t}\n\t}\n\tcomponentWillLoad() {\n\t\tconst summary = this.element.getElementsByTagName(\"summary\")\n\t\tif (summary.length > 0) {\n\t\t\tconst onClick = (e: UIEvent) => {\n\t\t\t\tif (this.open)\n\t\t\t\t\tthis.smoothlyClose.emit({ open: this.open, name: this.name })\n\t\t\t\telse\n\t\t\t\t\tthis.open = true\n\t\t\t\te.preventDefault()\n\t\t\t}\n\t\t\tsummary[0].addEventListener(\"click\", onClick)\n\t\t\tsummary[0].addEventListener(\"touch\", onClick)\n\t\t}\n\t\tthis.smoothlyAccordionItemWillLoad.emit(parent => {\n\t\t\tthis.parent = parent\n\t\t})\n\t}\n\tdisconnectedCallback() {\n\t\tthis.parent?.removeItem(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<details open={this.open}>\n\t\t\t\t<summary>\n\t\t\t\t\t{this.open ? (\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t\t\t\t\t\t<path d=\"M256 48C141.6 48 48 141.6 48 256s93.6 208 208 208 208-93.6 208-208S370.4 48 256 48zm-42.7 318.9L106.7 260.3l29.9-29.9 76.8 76.8 162.1-162.1 29.9 29.9-192.1 191.9z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t\t\t\t\t\t<path d=\"M256 48C141.601 48 48 141.601 48 256s93.601 208 208 208 208-93.601 208-208S370.399 48 256 48zm0 374.399c-91.518 0-166.399-74.882-166.399-166.399S164.482 89.6 256 89.6 422.4 164.482 422.4 256 347.518 422.399 256 422.399z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.name}\n\t\t\t\t\t{typeof this.brand == \"string\" ? (\n\t\t\t\t\t\t<span class={this.brand.toLowerCase()}>{this.brand}</span>\n\t\t\t\t\t) : Array.isArray(this.brand) ? (\n\t\t\t\t\t\tthis.brand.map(b => <span class={b.toLowerCase()}>{b}</span>)\n\t\t\t\t\t) : (\n\t\t\t\t\t\t[]\n\t\t\t\t\t)}\n\t\t\t\t</summary>\n\t\t\t\t<fieldset disabled={!this.open} name={this.name}>\n\t\t\t\t\t<slot />\n\t\t\t\t</fieldset>\n\t\t\t</details>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/app/index.js

@@ -4,44 +4,68 @@ export class SmoothlyApp {
     this.rooms = {};
     this.label = "App";
     this.color = undefined;
+    this.home = undefined;
     this.menuOpen = false;
     this.selected = undefined;
   }
-  selectedChanged(value, previous) {
+  async componentDidRender() {
     var _a;
-    if (previous) {
-      previous.room.selected = false;
-    }
-    if (value) {
-      value.room.selected = true;
-      const path = value.room.path.toString();
-      this.rooms[path] = value;
-      history.pushState({ smoothlyPath: path }, (_a = value.room.label) !== null && _a !== void 0 ? _a : "", path);
-      if (this.mainElement) {
-        this.mainElement.innerHTML = "";
-        this.mainElement.appendChild(value.content);
-      }
+    if (!this.selected && !window.location.search)
+      (_a = (this.home && this.rooms[this.home]
+        ? this.rooms[this.home]
+        : Object.values(this.rooms).find(room => !(room === null || room === void 0 ? void 0 : room.element.disabled)))) === null || _a === void 0 ? void 0 : _a.element.setSelected(true);
+  }
+  async selectRoom(path) {
+    var _a;
+    (_a = this.rooms[path]) === null || _a === void 0 ? void 0 : _a.element.setSelected(true);
+  }
+  async selectedChanged() {
+    var _a;
+    Object.values(this.rooms).forEach(room => { var _a; return (room === null || room === void 0 ? void 0 : room.element.path) != ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.element.path) && (room === null || room === void 0 ? void 0 : room.element.setSelected(false)); });
+    const content = await ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.element.getContent());
+    if (this.mainElement && content) {
+      this.mainElement.innerHTML = "";
+      this.mainElement.appendChild(content);
     }
   }
+  burgerVisibilityHandler(event) {
+    this.burgerVisibility = event.detail;
+  }
   burgerStatusHandler(event) {
     event.stopPropagation();
-    this.menuOpen = event.detail ? true : false;
+    this.menuOpen = event.detail;
   }
-  locationChangeHandler(event) {
+  async locationChangeHandler(event) {
     var _a;
-    if (typeof event.state.smoothlyPath != "string" && event.state.smoothlyPath !== ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.room.path)) {
-      this.selected = this.rooms[event.state.smoothlyPath];
+    (_a = this.rooms[event.state.smoothlyPath]) === null || _a === void 0 ? void 0 : _a.element.setSelected(true, { history: true });
+  }
+  roomSelectedHandler(event) {
+    this.selected = { element: event.target };
+    if (this.burgerVisibility)
+      this.menuOpen = false;
+    if (!event.detail.history) {
+      const path = this.selected.element.path.toString();
+      const location = new URL(window.location.pathname == path ? window.location.href : window.location.origin);
+      location.pathname = path;
+      window.history.pushState({ smoothlyPath: path }, "", location.href);
     }
-    if (this.mainElement) {
-      this.mainElement.innerHTML = "";
-      this.mainElement.appendChild(this.rooms[event.state.smoothlyPath].content);
+  }
+  roomLoadedHandler(event) {
+    const room = (this.rooms[event.target.path.toString()] = { element: event.target });
+    if (room.element.selected) {
+      this.selected = room;
+      window.history.replaceState({ smoothlyPath: room.element.path }, "", window.location.href);
     }
   }
-  roomSelectedHandler(event) {
-    this.selected = { room: event.target, content: event.detail };
+  clickHandler(event) {
+    if (this.burgerVisibility)
+      if (event.composedPath().some(e => e == this.burgerElement || e == this.navElement))
+        !this.menuOpen;
+      else
+        this.menuOpen = false;
   }
   render() {
-    return (h("smoothly-notifier", null, h("header", { color: this.color }, h("h1", null, h("a", { href: "" }, this.label)), h("slot", { name: "header" }), h("nav", null, h("ul", { class: this.menuOpen.toString() }, h("slot", { name: "nav-start" }), h("slot", null, " "), h("slot", { name: "nav-end" }))), h("smoothly-burger", null)), h("main", { ref: e => (this.mainElement = e) })));
+    return (h("smoothly-notifier", null, h("header", { color: this.color }, h("h1", null, h("a", { href: "" }, this.label)), h("slot", { name: "header" }), h("nav", { ref: e => (this.navElement = e), class: { "menu-open": this.menuOpen } }, h("ul", null, h("div", { class: "nav-start-container" }, h("slot", { name: "nav-start" })), h("slot", null, " "), h("div", { class: "nav-end-container" }, h("slot", { name: "nav-end" })))), h("smoothly-burger", { ref: e => (this.burgerElement = e), open: this.menuOpen, onSmoothlyNavStatus: e => this.burgerStatusHandler(e), onSmoothlyVisibleStatus: e => this.burgerVisibilityHandler(e) })), h("main", { ref: e => (this.mainElement = e) })));
   }
   static get is() { return "smoothly-app"; }
   static get originalStyleUrls() {
@@ -96,6 +120,23 @@ export class SmoothlyApp {
         "attribute": "color",
         "reflect": false
       },
+      "home": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "home",
+        "reflect": false
+      },
       "menuOpen": {
         "type": "boolean",
         "mutable": true,
@@ -121,6 +162,29 @@ export class SmoothlyApp {
       "selected": {}
     };
   }
+  static get methods() {
+    return {
+      "selectRoom": {
+        "complexType": {
+          "signature": "(path: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get watchers() {
     return [{
         "propName": "selected",
@@ -129,12 +193,6 @@ export class SmoothlyApp {
   }
   static get listeners() {
     return [{
-        "name": "burgerStatus",
-        "method": "burgerStatusHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
         "name": "popstate",
         "method": "locationChangeHandler",
         "target": "window",
@@ -146,6 +204,18 @@ export class SmoothlyApp {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "smoothlyRoomLoaded",
+        "method": "roomLoadedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "clickHandler",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAaxE,MAAM,OAAO,WAAW;;IAMvB,UAAK,GAA6B,EAAE,CAAA;iBALpB,KAAK;;oBAE8B,KAAK;;;EAMxD,eAAe,CAAC,KAA2B,EAAE,QAA8B;;IAC1E,IAAI,QAAQ,EAAE;MACb,QAAQ,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;KAC9B;IACD,IAAI,KAAK,EAAE;MACV,KAAK,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;MAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;MACvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;MAExB,OAAO,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,KAAK,mCAAI,EAAE,EAAE,IAAI,CAAC,CAAA;MAEvE,IAAI,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,EAAE,CAAA;QAC/B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;OAC3C;KACD;EACF,CAAC;EAGD,mBAAmB,CAAC,KAAkB;IACrC,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;EAC5C,CAAC;EAGD,qBAAqB,CAAC,KAAoB;;IACzC,IAAI,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,MAAK,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,CAAA,EAAE;MACzG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;KACpD;IACD,IAAI,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,EAAE,CAAA;MAC/B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAA;KAC1E;EACF,CAAC;EAGD,mBAAmB,CAAC,KAA+B;IAClD,IAAI,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,MAAoC,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,CAAA;EAC5F,CAAC;EAED,MAAM;IACL,OAAO,CACN;MACC,cAAQ,KAAK,EAAE,IAAI,CAAC,KAAK;QACxB;UACC,SAAG,IAAI,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACzB;QACL,YAAM,IAAI,EAAC,QAAQ,GAAQ;QAC3B;UACC,UAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;YAClC,YAAM,IAAI,EAAC,WAAW,GAAQ;YAC9B,oBAAc;YACd,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACA;QACN,0BAAmC,CAC3B;MACT,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAS,CAC5B,CACpB,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { Color } from \"../../model\"\n\ninterface Selected {\n\troom: HTMLSmoothlyAppRoomElement\n\tcontent: HTMLElement\n}\n\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop() label = \"App\"\n\t@Prop() color: Color\n\t@Prop({ mutable: true, reflect: true }) menuOpen = false\n\t@State() selected?: Selected\n\tmainElement?: HTMLElement\n\trooms: Record<string, Selected> = {}\n\n\t@Watch(\"selected\")\n\tselectedChanged(value: Selected | undefined, previous: Selected | undefined) {\n\t\tif (previous) {\n\t\t\tprevious.room.selected = false\n\t\t}\n\t\tif (value) {\n\t\t\tvalue.room.selected = true\n\t\t\tconst path = value.room.path.toString()\n\t\t\tthis.rooms[path] = value\n\n\t\t\thistory.pushState({ smoothlyPath: path }, value.room.label ?? \"\", path)\n\n\t\t\tif (this.mainElement) {\n\t\t\t\tthis.mainElement.innerHTML = \"\"\n\t\t\t\tthis.mainElement.appendChild(value.content)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen(\"burgerStatus\")\n\tburgerStatusHandler(event: CustomEvent) {\n\t\tevent.stopPropagation()\n\t\tthis.menuOpen = event.detail ? true : false\n\t}\n\n\t@Listen(\"popstate\", { target: \"window\" })\n\tlocationChangeHandler(event: PopStateEvent) {\n\t\tif (typeof event.state.smoothlyPath != \"string\" && event.state.smoothlyPath !== this.selected?.room.path) {\n\t\t\tthis.selected = this.rooms[event.state.smoothlyPath]\n\t\t}\n\t\tif (this.mainElement) {\n\t\t\tthis.mainElement.innerHTML = \"\"\n\t\t\tthis.mainElement.appendChild(this.rooms[event.state.smoothlyPath].content)\n\t\t}\n\t}\n\n\t@Listen(\"smoothlyRoomSelected\")\n\troomSelectedHandler(event: CustomEvent<HTMLElement>) {\n\t\tthis.selected = { room: event.target as HTMLSmoothlyAppRoomElement, content: event.detail }\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-notifier>\n\t\t\t\t<header color={this.color}>\n\t\t\t\t\t<h1>\n\t\t\t\t\t\t<a href={\"\"}>{this.label}</a>\n\t\t\t\t\t</h1>\n\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<ul class={this.menuOpen.toString()}>\n\t\t\t\t\t\t\t<slot name=\"nav-start\"></slot>\n\t\t\t\t\t\t\t<slot> </slot>\n\t\t\t\t\t\t\t<slot name=\"nav-end\"></slot>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t\t<smoothly-burger></smoothly-burger>\n\t\t\t\t</header>\n\t\t\t\t<main ref={e => (this.mainElement = e)}></main>\n\t\t\t</smoothly-notifier>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { SmoothlyAppRoomCustomEvent } from \"../../components\"\nimport { Color } from \"../../model\"\n\ntype Room = {\n\telement: HTMLSmoothlyAppRoomElement\n}\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop() label = \"App\"\n\t@Prop() color: Color\n\t@Prop() home?: string\n\t@Prop({ mutable: true, reflect: true }) menuOpen = false\n\t@State() selected?: Room\n\tprivate burgerVisibility: boolean\n\tprivate burgerElement?: HTMLElement\n\tprivate navElement?: HTMLElement\n\tmainElement?: HTMLElement\n\trooms: Record<string, Room | undefined> = {}\n\tasync componentDidRender() {\n\t\tif (!this.selected && !window.location.search)\n\t\t\t(this.home && this.rooms[this.home]\n\t\t\t\t? this.rooms[this.home]\n\t\t\t\t: Object.values(this.rooms).find(room => !room?.element.disabled)\n\t\t\t)?.element.setSelected(true)\n\t}\n\t@Method()\n\tasync selectRoom(path: string) {\n\t\tthis.rooms[path]?.element.setSelected(true)\n\t}\n\t@Watch(\"selected\")\n\tasync selectedChanged() {\n\t\tObject.values(this.rooms).forEach(\n\t\t\troom => room?.element.path != this.selected?.element.path && room?.element.setSelected(false)\n\t\t)\n\t\tconst content = await this.selected?.element.getContent()\n\t\tif (this.mainElement && content) {\n\t\t\tthis.mainElement.innerHTML = \"\"\n\t\t\tthis.mainElement.appendChild(content)\n\t\t}\n\t}\n\tburgerVisibilityHandler(event: CustomEvent<boolean>) {\n\t\tthis.burgerVisibility = event.detail\n\t}\n\tburgerStatusHandler(event: CustomEvent<boolean>) {\n\t\tevent.stopPropagation()\n\t\tthis.menuOpen = event.detail\n\t}\n\t@Listen(\"popstate\", { target: \"window\" })\n\tasync locationChangeHandler(event: PopStateEvent) {\n\t\tthis.rooms[event.state.smoothlyPath]?.element.setSelected(true, { history: true })\n\t}\n\t@Listen(\"smoothlyRoomSelected\")\n\troomSelectedHandler(event: SmoothlyAppRoomCustomEvent<{ history: boolean }>) {\n\t\tthis.selected = { element: event.target }\n\t\tif (this.burgerVisibility)\n\t\t\tthis.menuOpen = false\n\t\tif (!event.detail.history) {\n\t\t\tconst path = this.selected.element.path.toString()\n\t\t\tconst location = new URL(window.location.pathname == path ? window.location.href : window.location.origin)\n\t\t\tlocation.pathname = path\n\t\t\twindow.history.pushState({ smoothlyPath: path }, \"\", location.href)\n\t\t}\n\t}\n\t@Listen(\"smoothlyRoomLoaded\")\n\troomLoadedHandler(event: SmoothlyAppRoomCustomEvent<{ selected: boolean }>) {\n\t\tconst room = (this.rooms[event.target.path.toString()] = { element: event.target })\n\t\tif (room.element.selected) {\n\t\t\tthis.selected = room\n\t\t\twindow.history.replaceState({ smoothlyPath: room.element.path }, \"\", window.location.href)\n\t\t}\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.burgerVisibility)\n\t\t\tif (event.composedPath().some(e => e == this.burgerElement || e == this.navElement))\n\t\t\t\t!this.menuOpen\n\t\t\telse\n\t\t\t\tthis.menuOpen = false\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-notifier>\n\t\t\t\t<header color={this.color}>\n\t\t\t\t\t<h1>\n\t\t\t\t\t\t<a href={\"\"}>{this.label}</a>\n\t\t\t\t\t</h1>\n\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t<nav ref={e => (this.navElement = e)} class={{ \"menu-open\": this.menuOpen }}>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<div class={\"nav-start-container\"}>\n\t\t\t\t\t\t\t\t<slot name=\"nav-start\"></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<slot> </slot>\n\t\t\t\t\t\t\t<div class={\"nav-end-container\"}>\n\t\t\t\t\t\t\t\t<slot name=\"nav-end\"></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t\t<smoothly-burger\n\t\t\t\t\t\tref={e => (this.burgerElement = e)}\n\t\t\t\t\t\topen={this.menuOpen}\n\t\t\t\t\t\tonSmoothlyNavStatus={e => this.burgerStatusHandler(e)}\n\t\t\t\t\t\tonSmoothlyVisibleStatus={e => this.burgerVisibilityHandler(e)}\n\t\t\t\t\t/>\n\t\t\t\t</header>\n\t\t\t\t<main ref={e => (this.mainElement = e)}></main>\n\t\t\t</smoothly-notifier>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/app/room/index.js

@@ -1,28 +1,35 @@
-import { h } from "@stencil/core";
-if (!globalThis.URLPattern)
-  (async () => await import("urlpattern-polyfill"))();
+import { h, Host } from "@stencil/core";
+import "urlpattern-polyfill";
 export class SmoothlyAppRoom {
   constructor() {
     this.label = undefined;
     this.icon = undefined;
+    this.disabled = undefined;
     this.path = "";
     this.to = undefined;
     this.selected = undefined;
+    this.content = undefined;
   }
-  componentDidLoad() {
-    if ((typeof this.path == "string" ? new URLPattern({ pathname: this.path }) : this.path).test(window.location))
-      this.smoothlyRoomSelected.emit(this.contentElement);
+  componentWillLoad() {
+    this.selected = (typeof this.path == "string" ? new URLPattern({ pathname: this.path }) : this.path).test(window.location);
+    this.smoothlyRoomLoaded.emit({ selected: this.selected });
+  }
+  async getContent() {
+    return this.contentElement;
+  }
+  async setSelected(selected, options) {
+    this.selected = selected;
+    if (selected)
+      this.smoothlyRoomSelected.emit({ history: !!(options === null || options === void 0 ? void 0 : options.history) });
+  }
+  clickHandler(event) {
+    if (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {
+      event.preventDefault();
+      this.setSelected(true);
+    }
   }
   render() {
-    return [
-      h("li", null, h("a", { href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: (event) => {
-          if (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {
-            event.preventDefault();
-            this.smoothlyRoomSelected.emit(this.contentElement);
-          }
-        } }, this.icon ? h("smoothly-icon", { name: this.icon, toolTip: this.label }) : this.label)),
-      h("main", { ref: (e) => (this.contentElement = e) }, h("slot", null)),
-    ];
+    return (h(Host, null, h("li", null, h("a", { href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon ? h("smoothly-icon", { name: this.icon, toolTip: this.label }) : this.label)), h("main", { ref: e => (this.contentElement = e) }, this.content && h("smoothly-lazy", { content: this.content }), h("slot", null))));
   }
   static get is() { return "smoothly-app-room"; }
   static get encapsulation() { return "scoped"; }
@@ -53,15 +60,20 @@ export class SmoothlyAppRoom {
           "text": ""
         },
         "attribute": "label",
-        "reflect": false
+        "reflect": true
       },
       "icon": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "Icon",
+          "resolved": "Icon | undefined",
+          "references": {
+            "Icon": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -70,7 +82,24 @@ export class SmoothlyAppRoom {
           "text": ""
         },
         "attribute": "icon",
-        "reflect": false
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
       },
       "path": {
         "type": "string",
@@ -113,7 +142,7 @@ export class SmoothlyAppRoom {
       },
       "selected": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean | undefined",
@@ -127,6 +156,30 @@ export class SmoothlyAppRoom {
         },
         "attribute": "selected",
         "reflect": true
+      },
+      "content": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "JSX.Element | FunctionalComponent",
+          "resolved": "Element | FunctionalComponent<{}> | undefined",
+          "references": {
+            "JSX": {
+              "location": "import",
+              "path": "@stencil/core"
+            },
+            "FunctionalComponent": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }
@@ -142,15 +195,71 @@ export class SmoothlyAppRoom {
           "text": ""
         },
         "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement",
+          "original": "{ history: boolean }",
+          "resolved": "{ history: boolean; }",
+          "references": {}
+        }
+      }, {
+        "method": "smoothlyRoomLoaded",
+        "name": "smoothlyRoomLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ selected: boolean }",
+          "resolved": "{ selected: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getContent": {
+        "complexType": {
+          "signature": "() => Promise<HTMLElement | undefined>",
+          "parameters": [],
           "references": {
+            "Promise": {
+              "location": "global"
+            },
             "HTMLElement": {
               "location": "global"
             }
-          }
+          },
+          "return": "Promise<HTMLElement | undefined>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
         }
-      }];
+      },
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean, options?: { history?: boolean; }) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
   }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/app/room/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/app/room/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzF,IAAI,CAAE,UAAkB,CAAC,UAAU;EAClC,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAA;AAOpD,MAAM,OAAO,eAAe;;;;gBAGS,EAAE;;;;EAMtC,gBAAgB;IACf,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;MAC7G,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;EACrD,CAAC;EACD,MAAM;IACL,OAAO;MACN;QACC,SACC,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EACnE,OAAO,EAAE,CAAC,KAAmB,EAAE,EAAE;YAChC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;cAC9E,KAAK,CAAC,cAAc,EAAE,CAAA;cACtB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;aACnD;UACF,CAAC,IACA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,GAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAC5F,CACA;MACL,YAAM,GAAG,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QACvD,eAAa,CACP;KACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentDidLoad, Event, EventEmitter, h, Prop } from \"@stencil/core\"\nif (!(globalThis as any).URLPattern)\n\t(async () => await import(\"urlpattern-polyfill\"))()\n\n@Component({\n\ttag: \"smoothly-app-room\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAppRoom implements ComponentDidLoad {\n\t@Prop() label?: string\n\t@Prop() icon?: string\n\t@Prop() path: string | URLPattern = \"\"\n\t@Prop() to?: string\n\t@Prop({ reflect: true }) selected?: boolean\n\t@Event() smoothlyRoomSelected: EventEmitter<HTMLElement>\n\tcontentElement: HTMLElement\n\n\tcomponentDidLoad(): void | Promise<void> {\n\t\tif ((typeof this.path == \"string\" ? new URLPattern({ pathname: this.path }) : this.path).test(window.location))\n\t\t\tthis.smoothlyRoomSelected.emit(this.contentElement)\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\thref={typeof this.path == \"string\" ? this.path : this.path.pathname}\n\t\t\t\t\tonClick={(event: PointerEvent) => {\n\t\t\t\t\t\tif (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {\n\t\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\t\tthis.smoothlyRoomSelected.emit(this.contentElement)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}>\n\t\t\t\t\t{this.icon ? <smoothly-icon name={this.icon} toolTip={this.label}></smoothly-icon> : this.label}\n\t\t\t\t</a>\n\t\t\t</li>,\n\t\t\t<main ref={(e: HTMLElement) => (this.contentElement = e)}>\n\t\t\t\t<slot></slot>\n\t\t\t</main>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/app/room/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqC,CAAC,EAAE,IAAI,EAAO,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,qBAAqB,CAAA;AAQ5B,MAAM,OAAO,eAAe;;;;;gBAIS,EAAE;;;;;EAQtC,iBAAiB;IAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CACxG,MAAM,CAAC,QAAQ,CACf,CAAA;IACD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;EAC1D,CAAC;EAGD,KAAK,CAAC,UAAU;IACf,OAAO,IAAI,CAAC,cAAc,CAAA;EAC3B,CAAC;EAED,KAAK,CAAC,WAAW,CAAC,QAAiB,EAAE,OAA+B;IACnE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACxB,IAAI,QAAQ;MACX,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,EAAE,CAAC,CAAA;EACjE,CAAC;EAED,YAAY,CAAC,KAAiB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;MAC9E,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;KACtB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC,SAAG,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACxG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,GAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAC5F,CACA;MACL,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,IAAI,qBAAe,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;QACzD,eAAa,CACP,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, FunctionalComponent, h, Host, JSX, Method, Prop } from \"@stencil/core\"\nimport \"urlpattern-polyfill\"\nimport { Icon } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-app-room\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAppRoom {\n\t@Prop({ reflect: true }) label?: string\n\t@Prop({ reflect: true }) icon?: Icon\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Prop() path: string | URLPattern = \"\"\n\t@Prop() to?: string\n\t@Prop({ reflect: true, mutable: true }) selected?: boolean\n\t@Prop() content?: JSX.Element | FunctionalComponent\n\t@Event() smoothlyRoomSelected: EventEmitter<{ history: boolean }>\n\t@Event() smoothlyRoomLoaded: EventEmitter<{ selected: boolean }>\n\tprivate contentElement?: HTMLElement\n\n\tcomponentWillLoad() {\n\t\tthis.selected = (typeof this.path == \"string\" ? new URLPattern({ pathname: this.path }) : this.path).test(\n\t\t\twindow.location\n\t\t)\n\t\tthis.smoothlyRoomLoaded.emit({ selected: this.selected })\n\t}\n\n\t@Method()\n\tasync getContent(): Promise<HTMLElement | undefined> {\n\t\treturn this.contentElement\n\t}\n\t@Method()\n\tasync setSelected(selected: boolean, options?: { history?: boolean }): Promise<void> {\n\t\tthis.selected = selected\n\t\tif (selected)\n\t\t\tthis.smoothlyRoomSelected.emit({ history: !!options?.history })\n\t}\n\n\tclickHandler(event: MouseEvent) {\n\t\tif (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {\n\t\t\tevent.preventDefault()\n\t\t\tthis.setSelected(true)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<li>\n\t\t\t\t\t<a href={typeof this.path == \"string\" ? this.path : this.path.pathname} onClick={e => this.clickHandler(e)}>\n\t\t\t\t\t\t{this.icon ? <smoothly-icon name={this.icon} toolTip={this.label}></smoothly-icon> : this.label}\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<main ref={e => (this.contentElement = e)}>\n\t\t\t\t\t{this.content && <smoothly-lazy content={this.content} />}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</main>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/app/room/style.css

@@ -4,27 +4,56 @@
 	text-align: center;
 	cursor: pointer;
 }
-:host > main {
+
+main {
+	overflow-y: auto;
+}
+
+:not(:host[label], :host[icon]),
+:host[disabled] {
+	display: none;
+}
+
+:host>main {
 	display: none;
 }
-:host > li {
+
+:host>li {
 	height: 100%;
 	list-style: none;
 }
-:host > li > a {
-	margin: 0em 1.5em;
+
+:host>li>a {
+	padding: 0 1.5em;
 	height: 100%;
 }
-:host[selected] > li {
+
+:host[selected]>li>a {
+	display: flex;
 	color: rgb(var(--smoothly-color-contrast));
 	background: rgb(var(--smoothly-color-shade));
 }
-:host:hover > li {
-	color:rgb(var(--smoothly-color-contrast)); 
+
+:host:hover>li>a {
+	color: rgb(var(--smoothly-color-contrast));
 	background-color: rgb(var(--smoothly-color-tint));
-	transition: 0.2s;	
+	transition: 0.2s;
 }
-:host > li > a > smoothly-icon{
-	align-self:inherit;
+
+:host>li>a>smoothly-icon {
+	align-self: inherit;
 	margin-bottom: 1em;
 }
+
+@media screen and (max-width: 900px) {
+	:host>li>a {
+		padding: 0;
+	}
+
+	:host>li>a {
+		margin-left: -1.5rem;
+		margin-right: -1.5rem;
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+}