smoothly 0.1.119 → 0.2.2

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

@@ -18,13 +18,13 @@
 }
 a,
 button {
+	display: block;
 	border-color: transparent;
 	background-color: transparent;
 	padding: 0.2em 0.3em;
 	font-size: 110%;
 	font-weight: 400;
 }
-
 :host:not([disabled]):hover,
 :host:not([disabled]):focus,
 :host:not([disabled]):active {
@@ -35,7 +35,6 @@ button {
 	text-align: center;
 	text-decoration: inherit;
 }
-
 :host[type=button] > a {
 	width: calc(100% - 0.6em);
 }

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

@@ -35,7 +35,7 @@ td:nth-child(6):not(.currentMonth),
 td:nth-child(7):not(.currentMonth) {
 	color: rgba(var(--smoothly-danger-tint), var(--other-month-opacity));
 }
-td:not(.selected,.disable):hover {
+td:not(.selected, .disable):hover {
 	color: rgb(var(--smoothly-primary-contrast));
 	background: rgb(var(--smoothly-primary-tint));
 }
@@ -43,7 +43,7 @@ td.selected {
 	color: rgb(var(--smoothly-primary-contrast));
 	background: rgb(var(--smoothly-primary-color));
 }
-td:not(.selected,.dateRange):not(:hover).today {
+td:not(.selected, .dateRange):not(:hover).today {
 	background: rgb(var(--smoothly-dark-tint));
 	color: rgb(var(--smoothly-dark-contrast));
 }
@@ -56,4 +56,3 @@ td.disable {
 	background-color: rgb(var(--smoothly-default-tint), 0.5);
 	color: rgb(var(--smoothly-default-contrast), 0.5);
 }
-

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { Component, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { Language, Locale } from "isoly";
 import { Action, get, StateEditor } from "tidily";
 export class SmoothlyInput {
@@ -11,6 +11,7 @@ export class SmoothlyInput {
     this.maxLength = Number.POSITIVE_INFINITY;
     this.autocomplete = true;
     this.disabled = false;
+    this.readonly = false;
   }
   get formatter() {
     let result;
@@ -33,8 +34,11 @@ export class SmoothlyInput {
       this.lastValue = value;
       this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(value), selection: this.state.selection }).value });
     }
-    if (value != before)
-      this.smoothlyChanged.emit({ name: this.name, value });
+    if (value != before) {
+      if (typeof value == "string")
+        value = value.trim();
+      this.smoothlyInput.emit({ name: this.name, value });
+    }
   }
   onCurrency() {
     this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
@@ -83,8 +87,14 @@ export class SmoothlyInput {
     const after = this.formatter.format(StateEditor.copy(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state)))));
     this.updateBackend(after, this.inputElement);
   }
-  onBlur(event) { }
+  onBlur(event) {
+    this.smoothlyBlur.emit();
+    if (this.initialValue != this.value)
+      this.smoothlyChange.emit({ name: this.name, value: this.value });
+    this.initialValue = undefined;
+  }
   onFocus(event) {
+    this.initialValue = this.value;
     const after = this.formatter.format(StateEditor.copy(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state)))));
     if (event.target)
       this.updateBackend(after, event.target);
@@ -160,8 +170,10 @@ export class SmoothlyInput {
     return value;
   }
   processKey(event, backend) {
-    const after = Action.apply(this.formatter, this.state, event);
-    this.updateBackend(after, backend);
+    if (!this.readonly) {
+      const after = Action.apply(this.formatter, this.state, event);
+      this.updateBackend(after, backend);
+    }
   }
   updateBackend(after, backend) {
     if (after.value != backend.value)
@@ -178,7 +190,7 @@ export class SmoothlyInput {
     var _a, _b, _c, _d, _e, _f, _g;
     return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } },
       h("div", null,
-        h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
+        h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
         h("label", { htmlFor: this.name },
           h("slot", null)),
         h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
@@ -388,6 +400,24 @@ export class SmoothlyInput {
       "reflect": false,
       "defaultValue": "false"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "currency": {
       "type": "string",
       "mutable": false,
@@ -411,9 +441,42 @@ export class SmoothlyInput {
       "reflect": true
     }
   }; }
+  static get states() { return {
+    "initialValue": {}
+  }; }
   static get events() { return [{
-      "method": "smoothlyChanged",
-      "name": "smoothlyChanged",
+      "method": "smoothlyBlur",
+      "name": "smoothlyBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "smoothlyChange",
+      "name": "smoothlyChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ name: string; value: any }",
+        "resolved": "{ name: string; value: any; }",
+        "references": {}
+      }
+    }, {
+      "method": "smoothlyInput",
+      "name": "smoothlyInput",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/input-date/index.js

@@ -11,7 +11,7 @@ export class InputDate {
   render() {
     var _a;
     return [
-      h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) },
+      h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyInput: e => (this.value = e.detail.value) },
         h("slot", null)),
       this.open && !this.disabled
         ? [

package/dist/collection/components/input-date/style.css

@@ -1,14 +1,13 @@
 :host {
 	position: relative;
 }
-
 nav {
 	position: absolute;
 	z-index: 10;
 	top: 3.5em;
 	background-color: rgb(var(--smoothly-default-shade));
 	max-width: 22em;
-} 
+}
 :host > div {
 	position: fixed;
 	top: 0px;
@@ -22,7 +21,7 @@ nav {
 :host > nav > .arrow {
 	position: absolute;
 	z-index: 9;
-	transform: translate(2em, -.55em) rotate(45deg);
+	transform: translate(2em, -0.55em) rotate(45deg);
 	width: 1em;
 	height: 1em;
 	background-color: rgb(var(--smoothly-default-shade));

package/dist/collection/components/input-date-range/index.js

@@ -23,9 +23,9 @@ export class InputDateRange {
     var _a;
     return [
       h("section", { onClick: () => (this.open = !this.open) },
-        h("smoothly-input", { type: "date", value: this.start, showLabel: this.showLabel, onSmoothlyChanged: e => (this.start = e.detail.value) }, "from"),
+        h("smoothly-input", { type: "date", value: this.start, showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.value) }, "from"),
         h("span", null, "\u2013"),
-        h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyChanged: e => (this.end = e.detail.value) }, "to")),
+        h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyInput: e => (this.end = e.detail.value) }, "to")),
       this.open ? h("div", { onClick: () => (this.open = false) }) : [],
       this.open ? (h("nav", null,
         h("div", { class: "arrow" }),

package/dist/collection/components/input-demo/index.js

@@ -6,7 +6,8 @@ export class SmoothlyInputDemo {
         h("header", null,
           h("h5", null, "Address")),
         h("main", null,
-          h("smoothly-input", { type: "text", name: "name" }, "Name"),
+          h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"),
+          h("smoothly-input", { type: "text", name: "name", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"),
           h("smoothly-input", { type: "date", name: "date" }, "Date"),
           h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"),
           h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"),

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

@@ -3,14 +3,13 @@
 	color: rgb(var(--smoothly-primary-contrast));
 }
 :host {
-	padding: .5em;
+	padding: 0.5em;
 	cursor: pointer;
 	background-color: rgb(var(--smoothly-default-shade));
 	color: rgb(var(--smoothly-default-contrast));
-	border: rgb(var(--smoothly-default-shade) solid 1px)
+	border: rgb(var(--smoothly-default-shade) solid 1px);
 }
 :host:hover {
 	background-color: rgb(var(--smoothly-primary-color));
 	color: rgb(var(--smoothly-primary-contrast));
 }
-

package/dist/collection/components/select-demo/style.css

@@ -8,5 +8,5 @@ button:focus {
 	outline: none;
 }
 smoothly-selector {
-	outline: none
+	outline: none;
 }

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

@@ -1,4 +1,3 @@
-
 :host {
 	position: relative;
 	height: 100%;
@@ -9,7 +8,6 @@
 	display: flex;
 	align-items: center;
 }
-
 :host > div > nav {
 	display: flex;
 	flex-direction: column;

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

@@ -6,14 +6,13 @@
 }
 label {
 	display: block;
-  padding: 1em;
+	padding: 1em;
 	background-color: rgb(var(--smoothly-default-shade));
 	border-top-left-radius: 0.3rem;
 	border-top-right-radius: 0.3rem;
 	width: 6.25rem;
-
 }
 div {
-  background-color: rgb(var(--smoothly-default-shade));
-  padding: 1em;
+	background-color: rgb(var(--smoothly-default-shade));
+	padding: 1em;
 }

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

@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Listen, State, Watch } from "@stencil/core";
 export class SmoothlyTabSwitch {
   openChanged(event) {
+    event.stopPropagation();
     this.selectedElement = event.target;
     this.selectedElement.open = true;
     this.element.after(event.detail);

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

@@ -1,5 +1,5 @@
 :host {
 	display: flex;
 	flex-direction: row;
-	margin: 1em 1em 0em 0em
+	margin: 1em 1em 0em 0em;
 }

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

@@ -1,4 +1,6 @@
 :host {
 	display: table-cell;
-	padding: 0.5em;
+	vertical-align: middle;
+	line-height: 1.5rem;
+	padding: 0.2rem 0 0.2rem 1rem;
 }

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

@@ -6,46 +6,52 @@ export class TableDemo {
         h("smoothly-table-row", null,
           h("smoothly-table-header", null, "Header A"),
           h("smoothly-table-header", null, "Header B"),
-          h("smoothly-table-header", null, "Header C")),
-        h("smoothly-table-expandable-row", null,
+          h("smoothly-table-header", null, "Header C"),
+          h("smoothly-table-header", null, "Header D"),
+          h("smoothly-table-header", null)),
+        h("smoothly-table-row", null,
           h("smoothly-table-expandable-cell", null,
-            "Value 1A",
-            h("div", { slot: "detail" }, "1A details")),
+            "normal row (exp.cell)",
+            h("div", { slot: "detail" }, "expandable cell 1 content")),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 20, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Budget details.")),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell 2 content")),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 18, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Cost details."))),
-        h("smoothly-table-expandable-row", null,
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell 3 content")),
           h("smoothly-table-expandable-cell", null,
-            "Value 1A",
-            h("div", { slot: "detail" }, "2A details")),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell 4 content"))),
+        h("smoothly-table-row", null,
+          h("smoothly-table-cell", null, "normal row (nor.cell)\""),
+          h("smoothly-table-cell", null, "normal cell"),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 30, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Budget details.")),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell details.")),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 38, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Cost details.")))),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell details."))),
+        h("smoothly-table-expandable-row", null,
+          h("smoothly-table-cell", null, "expandable row (nor.cell)"),
+          h("smoothly-table-cell", null, "Normal cell"),
+          h("smoothly-table-cell", null, "normal cell"),
+          h("smoothly-table-cell", null, "Normal cell"),
+          h("div", { slot: "detail" }, "expandable row content"))),
       h("smoothly-table", null,
         h("smoothly-table-row", null,
-          h("smoothly-table-header", null, "Header D"),
-          h("smoothly-table-header", null, "Header E"),
-          h("smoothly-table-header", null, "Header F")),
-        h("smoothly-table-row", null,
-          h("smoothly-table-cell", null, "Value 1A"),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 20, currency: "EUR" })),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 18, currency: "EUR" })),
-          h("div", { slot: "detail" }, "Cost details.")),
-        h("smoothly-table-row", null,
-          h("smoothly-table-cell", null, "Value 1A"),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 20, currency: "EUR" })),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 18, currency: "EUR" })),
-          h("div", { slot: "detail" }, "Cost details."))),
+          h("smoothly-table-header", null, "Header A"),
+          h("smoothly-table-header", null)),
+        h("smoothly-table-expandable-row", null,
+          "A Content",
+          h("div", { slot: "detail" },
+            h("smoothly-tab-switch", null,
+              h("smoothly-tab", { label: "1", open: true },
+                h("smoothly-table", null,
+                  h("smoothly-table-row", null,
+                    h("smoothly-table-header", null, "Header B"),
+                    h("smoothly-table-header", null)),
+                  h("smoothly-table-expandable-row", null,
+                    h("smoothly-table-cell", null, "B Content")))))))),
     ];
   }
   static get is() { return "smoothly-table-demo"; }

package/dist/collection/components/table/expandable/cell/index.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 export class TableExpandableCell {
   constructor() {
     this.align = "left";
@@ -14,7 +14,7 @@ export class TableExpandableCell {
     this.open = !this.open;
   }
   componentDidLoad() {
-    this.expansionLoaded.emit();
+    this.expansionLoad.emit();
   }
   componentDidRender() {
     if (this.beginOpen) {
@@ -25,9 +25,11 @@ export class TableExpandableCell {
   render() {
     return (h(Host, { style: { textAlign: this.align } },
       h("slot", null),
+      h("smoothly-icon", { name: "chevron-forward", size: "tiny" }),
       h("tr", { ref: e => (this.expansionElement = e) },
-        h("td", { colSpan: 500, class: !this.open ? "hide" : "" },
-          h("slot", { name: "detail" })))));
+        h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
+          h("div", { class: "slot-detail" },
+            h("slot", { name: "detail" }))))));
   }
   static get is() { return "smoothly-table-expandable-cell"; }
   static get encapsulation() { return "scoped"; }
@@ -74,9 +76,6 @@ export class TableExpandableCell {
       "reflect": true
     }
   }; }
-  static get states() { return {
-    "beginOpen": {}
-  }; }
   static get events() { return [{
       "method": "expansionOpen",
       "name": "expansionOpen",
@@ -97,8 +96,8 @@ export class TableExpandableCell {
         }
       }
     }, {
-      "method": "expansionLoaded",
-      "name": "expansionLoaded",
+      "method": "expansionLoad",
+      "name": "expansionLoad",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,7 +1,44 @@
 :host {
 	display: table-cell;
-	padding: 0.5em;
+	vertical-align: middle;
+	line-height: 1.5em;
+	cursor: pointer;
+	padding: 0.2em 0 0.2em;
+	border-style: solid solid none solid;
+	border-width: 2px;
+	border-color: rgb(var(--smoothly-default-color));
 }
 .hide {
 	display: none;
 }
+:host[open] {
+	position: relative;
+	z-index: 3;
+	background-color: rgb(var(--smoothly-default-color));
+	border-style: solid solid none solid;
+	border-width: 2px;
+	border-color: rgb(var(--smoothly-dark-color));
+}
+.slot-detail {
+	position: relative;
+	background-color: rgb(var(--smoothly-default-color));
+	width: 104%;
+	left: -2%;
+	border-left-style: solid;
+	border-left-color: rgb(var(--smoothly-tertiary-color));
+	box-shadow: 0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);
+	box-sizing: border-box;
+	padding: 0.5rem 2%;
+}
+:host smoothly-icon {
+	width: 0.6rem;
+	height: 1rem;
+	float: left;
+	padding-left: 0.2rem;
+	padding-right: 0.2rem;
+	padding-bottom: 0.5rem;
+	transition: transform 0.2s;
+}
+:host[open] smoothly-icon {
+	transform: rotate(90deg);
+}

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

@@ -1,22 +1,30 @@
-import { Component, Element, h, Host, Listen } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 export class TableExpandableRow {
   constructor() {
-    this.expansions = [];
+    this.align = "left";
   }
-  onExpansionLoaded(event) {
-    this.expansions.push(event.target);
+  openChanged(value) {
+    if (this.expansionElement)
+      this.element.after(this.expansionElement);
   }
-  onDetailsLoaded(event) {
-    this.expansions.forEach(cell => {
-      if (cell != event.target)
-        cell.open = false;
-    });
-    if (event.detail)
-      this.element.after(event.detail);
+  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("smoothly-table-cell", null,
+        h("smoothly-icon", { name: "chevron-forward", size: "tiny" })),
+      h("tr", { ref: e => (this.expansionElement = e) },
+        h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
+          h("div", { class: "slot-detail" },
+            h("slot", { name: "detail" }))))));
   }
   static get is() { return "smoothly-table-expandable-row"; }
   static get encapsulation() { return "scoped"; }
@@ -26,16 +34,71 @@ export class TableExpandableRow {
   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 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": "expansionLoaded",
-      "method": "onExpansionLoaded",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "expansionOpen",
-      "method": "onDetailsLoaded",
+      "name": "click",
+      "method": "onClick",
       "target": undefined,
       "capture": false,
       "passive": false