smoothly 1.0.0-alpha.13 → 1.0.0-alpha.130

package/dist/collection/components/table/row/index.js

@@ -2,20 +2,25 @@ import { h } from "@stencil/core";
 export class TableRow {
   constructor() {
     this.expansions = [];
+    this.open = false;
   }
   onExpansionLoad(event) {
     this.expansions.push(event.target);
   }
+  onExpansionChange() {
+    this.open = this.expansions.some(expansion => expansion.open);
+  }
   onExpansionOpen(event) {
+    var _a;
     this.expansions.forEach(cell => {
       if (cell != event.target)
         cell.open = false;
     });
     if (event.detail)
-      this.element.after(event.detail);
+      (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
   }
   render() {
-    return h("slot", null);
+    return (h("div", { ref: e => (this.element = e) }, h("slot", null)));
   }
   static get is() { return "smoothly-table-row"; }
   static get encapsulation() { return "scoped"; }
@@ -29,16 +34,43 @@ export class TableRow {
       "$": ["style.css"]
     };
   }
-  static get elementRef() { return "element"; }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get listeners() {
     return [{
-        "name": "expansionLoad",
+        "name": "smoothlyExpansionLoad",
         "method": "onExpansionLoad",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "expansionOpen",
+        "name": "smoothlyExpandableChange",
+        "method": "onExpansionChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyExpansionOpen",
         "method": "onExpansionOpen",
         "target": undefined,
         "capture": false,

package/dist/collection/components/table/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/row/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAO7D,MAAM,OAAO,QAAQ;EALrB;IAOC,eAAU,GAA6C,EAAE,CAAA;GAiBzD;EAfA,eAAe,CAAC,KAAwB;IACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAgD,CAAC,CAAA;EAC7E,CAAC;EAED,eAAe,CAAC,KAA2C;IAC1D,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAC9B,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM;QACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;IACnB,CAAC,CAAC,CAAA;IACF,IAAI,KAAK,CAAC,MAAM;MACf,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EAClC,CAAC;EACD,MAAM;IACL,OAAO,eAAa,CAAA;EACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Listen } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-row\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableRow {\n\t@Element() element: HTMLSmoothlyTableRowElement\n\texpansions: HTMLSmoothlyTableExpandableCellElement[] = []\n\t@Listen(\"expansionLoad\")\n\tonExpansionLoad(event: CustomEvent<void>) {\n\t\tthis.expansions.push(event.target as HTMLSmoothlyTableExpandableCellElement)\n\t}\n\t@Listen(\"expansionOpen\")\n\tonExpansionOpen(event: CustomEvent<HTMLElement | undefined>) {\n\t\tthis.expansions.forEach(cell => {\n\t\t\tif (cell != event.target)\n\t\t\t\tcell.open = false\n\t\t})\n\t\tif (event.detail)\n\t\t\tthis.element.after(event.detail)\n\t}\n\trender() {\n\t\treturn <slot></slot>\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/row/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAO1D,MAAM,OAAO,QAAQ;;IAGpB,eAAU,GAA6C,EAAE,CAAA;gBADV,KAAK;;EAGpD,eAAe,CAAC,KAAwB;IACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAgD,CAAC,CAAA;EAC7E,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;EAC9D,CAAC;EAED,eAAe,CAAC,KAA2C;;IAC1D,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAC9B,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM;QACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;IACnB,CAAC,CAAC,CAAA;IACF,IAAI,KAAK,CAAC,MAAM;MACf,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EACnC,CAAC;EACD,MAAM;IACL,OAAO,CACN,WAAK,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;MAChC,eAAa,CACR,CACN,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Listen, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-row\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableRow {\n\tprivate element?: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) open = false\n\texpansions: HTMLSmoothlyTableExpandableCellElement[] = []\n\t@Listen(\"smoothlyExpansionLoad\")\n\tonExpansionLoad(event: CustomEvent<void>) {\n\t\tthis.expansions.push(event.target as HTMLSmoothlyTableExpandableCellElement)\n\t}\n\t@Listen(\"smoothlyExpandableChange\")\n\tonExpansionChange() {\n\t\tthis.open = this.expansions.some(expansion => expansion.open)\n\t}\n\t@Listen(\"smoothlyExpansionOpen\")\n\tonExpansionOpen(event: CustomEvent<HTMLElement | undefined>) {\n\t\tthis.expansions.forEach(cell => {\n\t\t\tif (cell != event.target)\n\t\t\t\tcell.open = false\n\t\t})\n\t\tif (event.detail)\n\t\t\tthis.element?.after(event.detail)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<div ref={e => (this.element = e)}>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/table/row/style.css

@@ -1,8 +1,11 @@
 :host {
-	display: table-row;
+	display: table-row-group;
 	cursor: default;
 	line-height: 1.5rem;
 }
 .hide {
 	display: none;
 }
+div {
+	display: contents;
+}

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

@@ -5,8 +5,6 @@
 	background-color: rgb(var(--smoothly-default-color));
 }
 :host[root] {
-	margin-left: auto;
-	margin-right: auto;
 	margin-left: 1.5rem;
 	margin-right: 1.5rem;
 }

package/dist/collection/components/table/testing/data.js

@@ -0,0 +1,28 @@
+export const data = [
+  {
+    type: "cat",
+    name: "Lazie",
+    age: 3,
+  },
+  {
+    type: "dog",
+    name: "Jessie",
+    age: 8,
+  },
+  {
+    type: "cat",
+    name: "Snooz",
+    age: 5,
+  },
+  {
+    type: "bird",
+    name: "Squeak",
+    age: 1,
+  },
+  {
+    type: "bird",
+    name: "Quirk",
+    age: 2,
+  },
+];
+//# sourceMappingURL=data.js.map

package/dist/collection/components/table/testing/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","sourceRoot":"","sources":["../../../../src/components/table/testing/data.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;EACnB;IACC,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,CAAC;GACN;CACD,CAAA","sourcesContent":["export const data = [\n\t{\n\t\ttype: \"cat\",\n\t\tname: \"Lazie\",\n\t\tage: 3,\n\t},\n\t{\n\t\ttype: \"dog\",\n\t\tname: \"Jessie\",\n\t\tage: 8,\n\t},\n\t{\n\t\ttype: \"cat\",\n\t\tname: \"Snooz\",\n\t\tage: 5,\n\t},\n\t{\n\t\ttype: \"bird\",\n\t\tname: \"Squeak\",\n\t\tage: 1,\n\t},\n\t{\n\t\ttype: \"bird\",\n\t\tname: \"Quirk\",\n\t\tage: 2,\n\t},\n]\n"]}

package/dist/collection/components/table/testing/index.js

@@ -0,0 +1,28 @@
+import { h, Host } from "@stencil/core";
+import { data } from "./data";
+export class SmoothlyTableTesting {
+  constructor() {
+    this.counter = 0;
+  }
+  render() {
+    return (h(Host, null, h("smoothly-table", { color: "dark" }, h("smoothly-table-row", null, h("smoothly-table-header", null, "Type"), h("smoothly-table-header", null, "Name"), h("smoothly-table-header", null, "Age")), data.map(animal => (h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-cell", null, animal.name), h("smoothly-table-cell", null, animal.age), h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (h("smoothly-table-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-expandable-cell", null, animal.name, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-submit", { slot: "submit" }, "Submit!"))), h("smoothly-table-expandable-cell", null, animal.age, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!")))))), h("smoothly-table-footer", null, h("div", { class: "tableCell" }, h("div", null, "Currently viewing content from:", h("smoothly-display", { type: "date", value: "2023-10-12" })))))));
+  }
+  static get is() { return "smoothly-table-testing"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "counter": {}
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/testing/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAM7B,MAAM,OAAO,oBAAoB;;mBACb,CAAC;;EACpB,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,sBAAgB,KAAK,EAAC,MAAM;QAC3B;UACC,wCAAmD;UACnD,wCAAmD;UACnD,uCAAkD,CAC9B;QAEpB,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACnB;UACC,+BAAsB,MAAM,CAAC,IAAI,CAAuB;UACxD,+BAAsB,MAAM,CAAC,IAAI,CAAuB;UACxD,+BAAsB,MAAM,CAAC,GAAG,CAAuB;UACvD,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM;YACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;YACzD,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;YACzD,0BAAiB,MAAM,CAAC,GAAG,CAAkB;YAC7C,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACe,CAChC,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACnB;UACC,+BAAsB,MAAM,CAAC,IAAI,CAAuB;UACxD;YACE,MAAM,CAAC,IAAI;YACZ,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM;cACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;cACzD,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACgB;UACjC;YACE,MAAM,CAAC,GAAG;YACX,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM;cACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;cACzD,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;cACzD,0BAAiB,MAAM,CAAC,GAAG,CAAkB;cAC7C,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACgB,CACb,CACrB,CAAC;QACF;UACC,WAAK,KAAK,EAAC,WAAW;YACrB;;cAEC,wBAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,CAC9C,CACD,CACiB,CACR,CACX,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, State } from \"@stencil/core\"\nimport { data } from \"./data\"\n@Component({\n\ttag: \"smoothly-table-testing\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTableTesting {\n\t@State() counter = 0\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-table color=\"dark\">\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Type</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Name</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Age</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t\t{data.map(animal => (\n\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.type}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.name}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.age}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t<smoothly-input value={animal.type}>Type</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-input>{animal.age}</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t))}\n\t\t\t\t\t{data.map(animal => (\n\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.type}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t{animal.name}\n\t\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t{animal.age}\n\t\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.type}>Type</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-input>{animal.age}</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t))}\n\t\t\t\t\t<smoothly-table-footer>\n\t\t\t\t\t\t<div class=\"tableCell\">\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\tCurrently viewing content from:\n\t\t\t\t\t\t\t\t<smoothly-display type=\"date\" value=\"2023-10-12\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-footer>\n\t\t\t\t</smoothly-table>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/table/testing/style.css

@@ -0,0 +1,22 @@
+:host {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+smoothly-table {
+	width: 80%;
+}
+.tableCell {
+	height: 3rem;
+	display: flex;
+	align-items: center;
+}
+.tableCell > div {
+	margin-left: 3rem;
+	margin-right: 3rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: 2rem;
+}

package/dist/collection/components/theme/color/index.js

@@ -0,0 +1,48 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyThemeColor {
+  constructor() {
+    this.color = undefined;
+  }
+  render() {
+    return (h(Host, null, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { color: this.color, variant: variant })))));
+  }
+  static get is() { return "smoothly-theme-color"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/theme/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/theme/color/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQxD,MAAM,OAAO,kBAAkB;;;;EAE9B,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACH,IAAI,CAAC,KAAK;MACT,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACrD,oCAA8B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAiC,CAClG,CAAC,CACI,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\"\nimport { Color } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-theme-color\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColor {\n\t@Prop() color: Color\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.color}\n\t\t\t\t{([\"tint\", \"color\", \"shade\"] as const).map(variant => (\n\t\t\t\t\t<smoothly-theme-color-variant color={this.color} variant={variant}></smoothly-theme-color-variant>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/theme/color/style.css

@@ -0,0 +1,8 @@
+:host {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+:host > :first-child {
+	margin-top: 0.2rem;
+}

package/dist/collection/components/theme/color/variant/index.js

@@ -0,0 +1,66 @@
+export class SmoothlyThemeColorVariant {
+  constructor() {
+    this.color = undefined;
+    this.variant = "color";
+  }
+  render() {
+    return "Aa";
+  }
+  static get is() { return "smoothly-theme-color-variant"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"shade\" | \"tint\" | \"color\"",
+          "resolved": "\"color\" | \"shade\" | \"tint\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"color\""
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/theme/color/variant/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/theme/color/variant/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQ/C,MAAM,OAAO,yBAAyB;;;mBAE0B,OAAO;;EACtE,MAAM;IACL,OAAO,IAAI,CAAA;EACZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop } from \"@stencil/core\"\nimport { Color } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-theme-color-variant\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColorVariant {\n\t@Prop({ reflect: true }) color: Color\n\t@Prop({ reflect: true }) variant: \"shade\" | \"tint\" | \"color\" = \"color\"\n\trender() {\n\t\treturn \"Aa\"\n\t}\n}\n"]}

package/dist/collection/components/theme/color/variant/style.css

@@ -0,0 +1,18 @@
+:host {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 3em;
+	height: 3em;
+	font-weight: 900;
+}
+
+:host[color][variant=color] {
+	background: rgb(var(--smoothly-color));
+}
+:host[color][variant=tint] {
+	background: rgb(var(--smoothly-color-tint));
+}
+:host[color][variant=shade] {
+	background: rgb(var(--smoothly-color-shade));
+}

package/dist/collection/components/theme/colors/index.js

@@ -0,0 +1,30 @@
+import { h } from "@stencil/core";
+export class SmoothlyThemeColors {
+  render() {
+    return [
+      "primary",
+      "secondary",
+      "tertiary",
+      "success",
+      "warning",
+      "danger",
+      "light",
+      "medium",
+      "dark",
+      "default",
+    ].map(color => h("smoothly-theme-color", { color: color }));
+  }
+  static get is() { return "smoothly-theme-colors"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/theme/colors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/theme/colors/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO5C,MAAM,OAAO,mBAAmB;EAC/B,MAAM;IACL,OACC;MACC,SAAS;MACT,WAAW;MACX,UAAU;MACV,SAAS;MACT,SAAS;MACT,QAAQ;MACR,OAAO;MACP,QAAQ;MACR,MAAM;MACN,SAAS;KAEV,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,4BAAsB,KAAK,EAAE,KAAK,GAAyB,CAAC,CAAA;EAC5E,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-theme-colors\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColors {\n\trender() {\n\t\treturn (\n\t\t\t[\n\t\t\t\t\"primary\",\n\t\t\t\t\"secondary\",\n\t\t\t\t\"tertiary\",\n\t\t\t\t\"success\",\n\t\t\t\t\"warning\",\n\t\t\t\t\"danger\",\n\t\t\t\t\"light\",\n\t\t\t\t\"medium\",\n\t\t\t\t\"dark\",\n\t\t\t\t\"default\",\n\t\t\t] as const\n\t\t).map(color => <smoothly-theme-color color={color}></smoothly-theme-color>)\n\t}\n}\n"]}

package/dist/collection/components/theme/colors/style.css

@@ -0,0 +1,7 @@
+:host {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	row-gap: 1em;
+	column-gap: 1em;
+	width: fit-content;
+}

package/dist/collection/components/toggle-switch/index.js

@@ -1,14 +1,19 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyToggleSwitch {
   constructor() {
+    this.checkmark = true;
     this.selected = false;
     this.disabled = false;
     this.size = "default";
-    this.name = undefined;
-    this.value = undefined;
+    this.color = undefined;
+    this.fill = "clear";
+  }
+  handleClick() {
+    this.selected = !this.selected;
+    this.smoothlyToggleSwitchChange.emit(this.selected);
   }
   render() {
-    return (h(Host, null, h("button", { disabled: this.disabled, id: "toggleBtn", onClick: () => (this.selected = !this.selected) }, h("smoothly-icon", { name: "checkmark-circle", fill: "clear", style: { display: this.selected ? "" : "none" } }), h("smoothly-icon", { name: "close-circle", fill: "clear", style: { display: !this.selected ? "" : "none" } }))));
+    return (h(Host, null, h("button", { disabled: this.disabled, onClick: () => this.handleClick() }, h("smoothly-icon", { color: this.color, name: !this.checkmark ? "ellipse" : this.selected ? "checkmark-circle" : "close-circle", fill: "clear", class: { selected: this.selected } }))));
   }
   static get is() { return "smoothly-toggle-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +29,24 @@ export class SmoothlyToggleSwitch {
   }
   static get properties() {
     return {
+      "checkmark": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checkmark",
+        "reflect": true,
+        "defaultValue": "true"
+      },
       "selected": {
         "type": "boolean",
         "mutable": true,
@@ -78,13 +101,18 @@ export class SmoothlyToggleSwitch {
         "reflect": true,
         "defaultValue": "\"default\""
       },
-      "name": {
+      "color": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -92,27 +120,51 @@ export class SmoothlyToggleSwitch {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "color",
+        "reflect": true
       },
-      "value": {
-        "type": "any",
+      "fill": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\"",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "fill",
+        "reflect": true,
+        "defaultValue": "\"clear\""
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "smoothlyToggleSwitchChange",
+        "name": "smoothlyToggleSwitchChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/toggle-switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOxD,MAAM,OAAO,oBAAoB;;oBACmB,KAAK;oBACpB,KAAK;gBACsB,SAAS;;;;EAGxE,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC9F,qBACC,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,GAAkB;QAClE,qBACC,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,GAAkB,CAC3D,CACH,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-toggle-switch\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyToggleSwitch {\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) size: \"small\" | \"default\" | \"large\" = \"default\"\n\t@Prop() name: string\n\t@Prop() value?: any\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button disabled={this.disabled} id=\"toggleBtn\" onClick={() => (this.selected = !this.selected)}>\n\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\tname=\"checkmark-circle\"\n\t\t\t\t\t\tfill=\"clear\"\n\t\t\t\t\t\tstyle={{ display: this.selected ? \"\" : \"none\" }}></smoothly-icon>\n\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\tname=\"close-circle\"\n\t\t\t\t\t\tfill=\"clear\"\n\t\t\t\t\t\tstyle={{ display: !this.selected ? \"\" : \"none\" }}></smoothly-icon>\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQ7E,MAAM,OAAO,oBAAoB;;qBACK,IAAI;oBACU,KAAK;oBACpB,KAAK;gBACsB,SAAS;;gBAElC,OAAO;;EAG7C,WAAW;IACV,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAA;IAC9B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACpD,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;QACjE,qBACC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,EACvF,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAkB,CAC7C,CACH,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-toggle-switch\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyToggleSwitch {\n\t@Prop({ reflect: true }) checkmark = true\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) size: \"small\" | \"default\" | \"large\" = \"default\"\n\t@Prop({ reflect: true }) color: Color\n\t@Prop({ reflect: true }) fill: Fill = \"clear\"\n\t@Event() smoothlyToggleSwitchChange: EventEmitter<boolean>\n\n\thandleClick() {\n\t\tthis.selected = !this.selected\n\t\tthis.smoothlyToggleSwitchChange.emit(this.selected)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button disabled={this.disabled} onClick={() => this.handleClick()}>\n\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tname={!this.checkmark ? \"ellipse\" : this.selected ? \"checkmark-circle\" : \"close-circle\"}\n\t\t\t\t\t\tfill=\"clear\"\n\t\t\t\t\t\tclass={{ selected: this.selected }}></smoothly-icon>\n\t\t\t\t</button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/toggle-switch/style.css

@@ -5,7 +5,7 @@
 	height: 1.8em;
 }
 
-button {
+:host button {
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -15,18 +15,33 @@ button {
 	cursor: pointer;
 	border: none;
 	border-radius: 3em;
+	background-color: rgb(var(--smoothly-light-tint));
+}
+:host button:hover {
 	background-color: rgb(var(--smoothly-light-color));
 }
-
 :host smoothly-icon {
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
 	position: absolute;
 	left: 0;
-	fill: rgb(var(--smoothly-default-color));
-	stroke: rgb(var(--smoothly-default-color));
+	fill: rgb(var(--smoothly-color));
+	stroke: rgb(var(--smoothly-color));
 	font-size: 1.2em;
+	transition: 100ms ease-in-out;
+}
+
+:host[checkmark] smoothly-icon {
+	fill: rgb(var(--smoothly-success-color));
+	stroke: rgb(var(--smoothly-success-color));
+}
+:host([selected][checkmark]) button{
+	background-color: rgb(var(--smoothly-success-color));
+}
+
+:host([selected]) smoothly-icon{
+	transform: translateX(100%);
 }
 
 :host([size=small]){
@@ -46,11 +61,3 @@ button {
 :host([size=large]) smoothly-icon{
 	font-size: 1.75em;
 }
-
-:host([selected]) > button{
-	background-color: rgb(var(--smoothly-success-color));
-}
-
-:host([selected]) smoothly-icon{
-	transform: translateX(100%);
-}

package/dist/collection/components/trigger-source/index.js

@@ -9,7 +9,7 @@ export class SmoothlyTriggerSource {
       if (Trigger.is(content))
         this.trigger.emit(content);
       else
-        this.message.emit({ destination, content });
+        this.smoothlyMessage.emit({ destination, content });
     }, window);
   }
   render() {
@@ -70,8 +70,8 @@ export class SmoothlyTriggerSource {
           }
         }
       }, {
-        "method": "message",
-        "name": "message",
+        "method": "smoothlyMessage",
+        "name": "smoothlyMessage",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/trigger-source/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/trigger-source/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,OAAO,qBAAqB;;;;EAKjC,gBAAgB;IACf,OAAO,CAAC,MAAM,CACb,IAAI,CAAC,MAAM,EACX,CAAC,WAAW,EAAE,OAAO,EAAE,EAAE;MACxB,IAAI,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;;QAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAA;IAC7C,CAAC,EACD,MAAM,CACN,CAAA;EACF,CAAC;EACD,MAAM;IACL,OAAO,eAAa,CAAA;EACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\"\nimport { Message, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-trigger-source\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTriggerSource {\n\t@Prop() listen: string\n\t@Event() trigger: EventEmitter<Trigger>\n\t@Event() message: EventEmitter<Message<any>>\n\t@Element() element?: HTMLElement\n\tcomponentDidLoad() {\n\t\tMessage.listen(\n\t\t\tthis.listen,\n\t\t\t(destination, content) => {\n\t\t\t\tif (Trigger.is(content))\n\t\t\t\t\tthis.trigger.emit(content)\n\t\t\t\telse\n\t\t\t\t\tthis.message.emit({ destination, content })\n\t\t\t},\n\t\t\twindow\n\t\t)\n\t}\n\trender() {\n\t\treturn <slot></slot>\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/trigger-source/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,OAAO,qBAAqB;;;;EAKjC,gBAAgB;IACf,OAAO,CAAC,MAAM,CACb,IAAI,CAAC,MAAM,EACX,CAAC,WAAW,EAAE,OAAO,EAAE,EAAE;MACxB,IAAI,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;;QAE1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAA;IACrD,CAAC,EACD,MAAM,CACN,CAAA;EACF,CAAC;EACD,MAAM;IACL,OAAO,eAAa,CAAA;EACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\"\nimport { Message, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-trigger-source\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTriggerSource {\n\t@Prop() listen: string\n\t@Event() trigger: EventEmitter<Trigger>\n\t@Event() smoothlyMessage: EventEmitter<Message<any>>\n\t@Element() element?: HTMLElement\n\tcomponentDidLoad() {\n\t\tMessage.listen(\n\t\t\tthis.listen,\n\t\t\t(destination, content) => {\n\t\t\t\tif (Trigger.is(content))\n\t\t\t\t\tthis.trigger.emit(content)\n\t\t\t\telse\n\t\t\t\t\tthis.smoothlyMessage.emit({ destination, content })\n\t\t\t},\n\t\t\twindow\n\t\t)\n\t}\n\trender() {\n\t\treturn <slot></slot>\n\t}\n}\n"]}