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

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

@@ -14,8 +14,8 @@ export class SmoothlyAccordionItem {
       });
     }
   }
-  componentDidLoad() {
-    const summary = this.me.getElementsByTagName("summary");
+  componentWillLoad() {
+    const summary = this.element.getElementsByTagName("summary");
     if (summary.length > 0) {
       const onClick = (e) => {
         if (this.open)
@@ -27,10 +27,13 @@ export class SmoothlyAccordionItem {
       summary[0].addEventListener("click", onClick);
       summary[0].addEventListener("touch", onClick);
     }
-    this.smoothlyAccordionItemDidLoad.emit();
+    this.smoothlyAccordionItemWillLoad.emit(parent => {
+      this.parent = parent;
+    });
   }
   disconnectedCallback() {
-    this.smoothlyAccordionItemDidUnload.emit();
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.removeItem(this.element);
   }
   render() {
     return (h("details", { open: this.open }, h("summary", null, this.open ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("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" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("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" }))), this.name, typeof this.brand == "string" ? (h("span", { class: this.brand.toLowerCase() }, this.brand)) : Array.isArray(this.brand) ? (this.brand.map(b => h("span", { class: b.toLowerCase() }, b))) : ([])), h("fieldset", { disabled: !this.open, name: this.name }, h("slot", null))));
@@ -104,8 +107,8 @@ export class SmoothlyAccordionItem {
   }
   static get events() {
     return [{
-        "method": "smoothlyAccordionItemDidLoad",
-        "name": "smoothlyAccordionItemDidLoad",
+        "method": "smoothlyAccordionItemWillLoad",
+        "name": "smoothlyAccordionItemWillLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -114,24 +117,14 @@ export class SmoothlyAccordionItem {
           "text": ""
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "smoothlyAccordionItemDidUnload",
-        "name": "smoothlyAccordionItemDidUnload",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+          "original": "(parent: SmoothlyAccordion) => void",
+          "resolved": "(parent: SmoothlyAccordion) => void",
+          "references": {
+            "SmoothlyAccordion": {
+              "location": "import",
+              "path": "../accordion"
+            }
+          }
         }
       }, {
         "method": "smoothlyOpen",
@@ -165,7 +158,7 @@ export class SmoothlyAccordionItem {
         }
       }];
   }
-  static get elementRef() { return "me"; }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "open",

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

@@ -1,10 +1,63 @@
 import { h } from "@stencil/core";
 export class SmoothlyApp {
   constructor() {
+    this.rooms = {};
+    this.label = "App";
     this.color = undefined;
+    this.menuOpen = false;
+    this.selected = undefined;
+  }
+  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;
+  }
+  async locationChangeHandler(event) {
+    var _a;
+    (_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);
+    }
+  }
+  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);
+    }
+  }
+  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("slot", null)));
+    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, onNavStatus: e => this.burgerStatusHandler(e), onVisibleStatus: e => this.burgerVisibilityHandler(e) })), h("main", { ref: e => (this.mainElement = e) })));
   }
   static get is() { return "smoothly-app"; }
   static get originalStyleUrls() {
@@ -19,6 +72,24 @@ export class SmoothlyApp {
   }
   static get properties() {
     return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"App\""
+      },
       "color": {
         "type": "string",
         "mutable": false,
@@ -40,8 +111,83 @@ export class SmoothlyApp {
         },
         "attribute": "color",
         "reflect": false
+      },
+      "menuOpen": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-open",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "selected": {}
+    };
+  }
+  static get methods() {
+    return {
+      "selectRoom": {
+        "complexType": {
+          "signature": "(path: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "selectedChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "popstate",
+        "method": "locationChangeHandler",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyRoomSelected",
+        "method": "roomSelectedHandler",
+        "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
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

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,IAAI,EAAE,MAAM,eAAe,CAAA;AAQlD,MAAM,OAAO,WAAW;;;;EAEvB,MAAM;IACL,OAAO,CACN;MACC,eAAa,CACM,CACpB,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop() color: Color\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-notifier>\n\t\t\t\t<slot></slot>\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({ 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\t@Method()\n\tselectRoom(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\tonNavStatus={e => this.burgerStatusHandler(e)}\n\t\t\t\t\t\tonVisibleStatus={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

@@ -0,0 +1,240 @@
+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;
+  }
+  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(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) }, h("slot", null))));
+  }
+  static get is() { return "smoothly-app-room"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Icon",
+          "resolved": "Icon | undefined",
+          "references": {
+            "Icon": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "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",
+        "mutable": false,
+        "complexType": {
+          "original": "string | URLPattern",
+          "resolved": "URLPattern | string",
+          "references": {
+            "URLPattern": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "path",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "to": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "to",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyRoomSelected",
+        "name": "smoothlyRoomSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/app/room/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACrF,OAAO,qBAAqB,CAAA;AAQ5B,MAAM,OAAO,eAAe;;;;;gBAIS,EAAE;;;;EAOtC,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;QACxC,eAAa,CACP,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, 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@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<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

@@ -0,0 +1,55 @@
+:host {
+	display: flex;
+	justify-content: center;
+	text-align: center;
+	cursor: pointer;
+}
+
+:not(:host[label], :host[icon]),
+:host[disabled] {
+	display: none;
+}
+
+:host>main {
+	display: none;
+}
+
+:host>li {
+	height: 100%;
+	list-style: none;
+}
+
+:host>li>a {
+	padding: 0 1.5em;
+	height: 100%;
+}
+
+:host[selected]>li>a {
+	display: flex;
+	color: rgb(var(--smoothly-color-contrast));
+	background: rgb(var(--smoothly-color-shade));
+}
+
+:host:hover>li>a {
+	color: rgb(var(--smoothly-color-contrast));
+	background-color: rgb(var(--smoothly-color-tint));
+	transition: 0.2s;
+}
+
+: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;
+	}
+}