smoothly 0.1.68 → 0.1.72

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

@@ -1,8 +1,27 @@
-import { Component, h, Host } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 export class TableRow {
+  constructor() {
+    this.align = "left";
+  }
+  openChanged(value) {
+    if (this.expansionElement)
+      this.element.after(this.expansionElement);
+  }
+  onClick(e) {
+    this.open = !this.open;
+    e.stopPropagation();
+  }
+  componentDidRender() {
+    this.expansionOpen.emit(this.expansionElement);
+    if (this.expansionElement && this.open)
+      this.element.after(this.expansionElement);
+  }
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h(Host, { style: { textAlign: this.align } },
+      h("slot", null),
+      h("tr", { ref: e => (this.expansionElement = e) },
+        h("td", { colSpan: 500, class: !this.open ? "hide" : "" },
+          h("slot", { name: "detail" })))));
   }
   static get is() { return "smoothly-table-row"; }
   static get encapsulation() { return "scoped"; }
@@ -12,4 +31,76 @@ export class TableRow {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "align",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "beginOpen": {}
+  }; }
+  static get events() { return [{
+      "method": "expansionOpen",
+      "name": "expansionOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

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

@@ -9,3 +9,6 @@
 :host:hover {
 	background-color: rgb(var(--smoothly-default-color));
 }
+.hide{
+	display: none;
+}