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

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

@@ -12,21 +12,21 @@ export class TableExpandableCell {
         this.beginOpen = true;
       else
         this.element.append(this.expansionElement);
-    this.expandableChange.emit(this.open);
+    this.smoothlyExpandableChange.emit(this.open);
   }
   handleSpotlight() {
     this.spotlight = this.open && this.allowSpotlight;
   }
   componentWillLoad() {
-    this.expansionLoad.emit();
-    this.expandableLoad.emit({
+    this.smoothlyExpansionLoad.emit();
+    this.smoothlyExpandableLoad.emit({
       allowSpotlight: (allowed) => (this.allowSpotlight = allowed),
     });
   }
   componentDidRender() {
     if (this.beginOpen) {
       this.beginOpen = false;
-      this.expansionOpen.emit(this.expansionElement);
+      this.smoothlyExpansionOpen.emit(this.expansionElement);
     }
   }
   onClick() {
@@ -37,7 +37,7 @@ export class TableExpandableCell {
     event.detail(this.element);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), h("slot", null)), h("tr", { class: this.spotlight ? "spotlight" : "", ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
+    return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "caret-forward-outline" }), h("slot", null)), h("tr", { class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
   }
   static get is() { return "smoothly-table-expandable-cell"; }
   static get encapsulation() { return "scoped"; }
@@ -98,8 +98,8 @@ export class TableExpandableCell {
   }
   static get events() {
     return [{
-        "method": "expansionOpen",
-        "name": "expansionOpen",
+        "method": "smoothlyExpansionOpen",
+        "name": "smoothlyExpansionOpen",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -117,8 +117,8 @@ export class TableExpandableCell {
           }
         }
       }, {
-        "method": "expansionLoad",
-        "name": "expansionLoad",
+        "method": "smoothlyExpansionLoad",
+        "name": "smoothlyExpansionLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -132,8 +132,8 @@ export class TableExpandableCell {
           "references": {}
         }
       }, {
-        "method": "expandableChange",
-        "name": "expandableChange",
+        "method": "smoothlyExpandableChange",
+        "name": "smoothlyExpandableChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -147,8 +147,8 @@ export class TableExpandableCell {
           "references": {}
         }
       }, {
-        "method": "expandableLoad",
-        "name": "expandableLoad",
+        "method": "smoothlyExpandableLoad",
+        "name": "smoothlyExpandableLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -184,7 +184,7 @@ export class TableExpandableCell {
         "capture": false,
         "passive": false
       }, {
-        "name": "tableLoad",
+        "name": "smoothlyTableLoad",
         "method": "handleTableLoaded",
         "target": undefined,
         "capture": false,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/expandable/cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,mBAAmB;;0BAIL,IAAI;qBACT,IAAI;iBACoB,MAAM;;;EAOnD,WAAW,CAAC,KAAc;IACzB,IAAI,IAAI,CAAC,gBAAgB;MACxB,IAAI,KAAK;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;;QAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC5C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EACtC,CAAC;EAGD,eAAe;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;EAClD,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;IACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;MACxB,cAAc,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACrE,CAAC,CAAA;EACH,CAAC;EACD,kBAAkB;IACjB,IAAI,IAAI,CAAC,SAAS,EAAE;MACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;MACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAC9C;EACF,CAAC;EAED,OAAO;IACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACvB,CAAC;EAED,iBAAiB,CAAC,KAAgD;IACjE,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC3B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;MACrC;QACC,qBAAe,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAiB;QAClE,eAAa,CACN;MACR,UAAI,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAClF,UAAI,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;UAChD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableCell implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\tprivate beginOpen: boolean\n\t@Element() element: HTMLSmoothlyTableExpandableCellElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop() align: \"left\" | \"center\" | \"right\" = \"left\"\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() expansionOpen: EventEmitter<HTMLElement>\n\t@Event() expansionLoad: EventEmitter<void>\n\t@Event() expandableChange: EventEmitter<boolean>\n\t@Event() expandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged(value: boolean) {\n\t\tif (this.expansionElement)\n\t\t\tif (value)\n\t\t\t\tthis.beginOpen = true\n\t\t\telse\n\t\t\t\tthis.element.append(this.expansionElement)\n\t\tthis.expandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad(): void {\n\t\tthis.expansionLoad.emit()\n\t\tthis.expandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tif (this.beginOpen) {\n\t\t\tthis.beginOpen = false\n\t\t\tthis.expansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"tableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ textAlign: this.align }}>\n\t\t\t\t<aside>\n\t\t\t\t\t<smoothly-icon name=\"chevron-forward\" size=\"tiny\"></smoothly-icon>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</aside>\n\t\t\t\t<tr class={this.spotlight ? \"spotlight\" : \"\"} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999} class={!this.open ? \"hide\" : \"\"}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/expandable/cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,mBAAmB;;0BAIL,IAAI;qBACT,IAAI;iBACoB,MAAM;;;EAOnD,WAAW,CAAC,KAAc;IACzB,IAAI,IAAI,CAAC,gBAAgB;MACxB,IAAI,KAAK;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;;QAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC5C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC9C,CAAC;EAGD,eAAe;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;EAClD,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAA;IACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;MAChC,cAAc,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACrE,CAAC,CAAA;EACH,CAAC;EACD,kBAAkB;IACjB,IAAI,IAAI,CAAC,SAAS,EAAE;MACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;MACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KACtD;EACF,CAAC;EAED,OAAO;IACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACvB,CAAC;EAED,iBAAiB,CAAC,KAAgD;IACjE,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC3B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;MACrC;QACC,qBAAe,IAAI,EAAC,uBAAuB,GAAiB;QAC5D,eAAa,CACN;MACR,UAAI,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC9E,UAAI,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;UAChD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableCell implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\tprivate beginOpen: boolean\n\t@Element() element: HTMLSmoothlyTableExpandableCellElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop() align: \"left\" | \"center\" | \"right\" = \"left\"\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyExpansionOpen: EventEmitter<HTMLElement>\n\t@Event() smoothlyExpansionLoad: EventEmitter<void>\n\t@Event() smoothlyExpandableChange: EventEmitter<boolean>\n\t@Event() smoothlyExpandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged(value: boolean) {\n\t\tif (this.expansionElement)\n\t\t\tif (value)\n\t\t\t\tthis.beginOpen = true\n\t\t\telse\n\t\t\t\tthis.element.append(this.expansionElement)\n\t\tthis.smoothlyExpandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyExpansionLoad.emit()\n\t\tthis.smoothlyExpandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tif (this.beginOpen) {\n\t\t\tthis.beginOpen = false\n\t\t\tthis.smoothlyExpansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"smoothlyTableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ textAlign: this.align }}>\n\t\t\t\t<aside>\n\t\t\t\t\t<smoothly-icon name=\"caret-forward-outline\"></smoothly-icon>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</aside>\n\t\t\t\t<tr class={{ spotlight: this.spotlight }} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999} class={!this.open ? \"hide\" : \"\"}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -3,30 +3,38 @@
 	padding: 0.3rem 0 0.3rem 0;
 	cursor: pointer;
 	line-height: 1.5rem;
-	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
+}
+:host:not([open]) {
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)), 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;
 }
 :host[open] {
 	position: relative;
 	z-index: 3;
-	background-color: rgb(var(--smoothly-default-color));
-	box-shadow: -1px 0 0 rgb(var(--smoothly-dark-color)) inset, 
-		1px 0 0 rgb(var(--smoothly-dark-color)) inset;
-	border-bottom: none;
+	background-color: rgb(var(--smoothly-color));
+	box-shadow: 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;
 }
 :host smoothly-icon {
-	width: 0.6rem;
+	width: 1em;
 	float: left;
 	padding: 0 0.3rem;
-	transition: transform 0.2s;
+	transition: transform 0.2s, opacity 0.1s;
 	display: flex;
-	height: 100%;
+	height: auto;
+	aspect-ratio: 1 / 1;
 	align-self: center;
+	opacity: 0.3;
+}
+:host:hover smoothly-icon {
+	opacity: 1;
 }
 :host[open] smoothly-icon {
 	transform: rotate(90deg);
 }
 aside {
-	display: flex;
+	display: grid;
+	grid-auto-flow: column;
+	justify-content: start;
+	align-items: center;
 }
 .hide {
 	display: none;
@@ -35,18 +43,19 @@ td::slotted(*) {
 	--expansion-width: 1.5rem;
 	--expansion-border-width: 3px;
 	position: relative;
-	background-color: rgb(var(--smoothly-default-color));
-	width: calc(100% + 3rem - var(--expansion-border-width));
-	left: calc(-1 * var(--expansion-width));
-	border-left: var(--expansion-border-width) solid rgb(0, 0, 0, 0);
-	box-shadow: 0px 0px 4px 2px rgb(var(--smoothly-dark-color));
+	background-color: rgb(var(--smoothly-color));
+	width: calc(100% + 3rem - 1px);
+	top: 1px;
+	left: calc(-1 * var(--expansion-width) + 1px);
 	box-sizing: border-box;
-	padding: 0.5rem calc(var(--expansion-width) - var(--expansion-border-width));
-	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
-	border-left-width: 3px;
+	padding: 0.5rem calc(var(--expansion-width) - 1px);
+	border-bottom: 1px solid rgb(var(--smoothly-color-shade));
 }
 tr.spotlight > td::slotted(*) {
-	border-left-color: rgb(var(--smoothly-tertiary-color));
+	box-shadow: calc(var(--expansion-border-width)) 0 0 0 rgb(var(--smoothly-tertiary-color)) inset;
+}
+tr:not(.spotlight) > td::slotted(*) {
+	box-shadow: -1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color));
 }
 td::slotted(*)::before {
 	content: "";
@@ -54,9 +63,9 @@ td::slotted(*)::before {
 	display: flex;
 	top: -1px;
 	bottom: 0;
-	left: -3px;
+	left: -1px;
 	width: calc(var(--expansion-width) + 1px);
-	border-top: 1px solid rgb(var(--smoothly-dark-color));
+	border-top: 1px solid rgb(var(--smoothly-color-shade));
 }
 td::slotted(*)::after {
 	content: "";
@@ -65,8 +74,9 @@ td::slotted(*)::after {
 	top: -1px;
 	bottom: 0;
 	right: 0;
-	width: calc(var(--expansion-width) -1px);
-	border-top: 1px solid rgb(var(--smoothly-dark-color));
+	width: calc(var(--expansion-width) - 1px);
+	border-top: 1px solid rgb(var(--smoothly-color-shade));
+	border-right: 1px solid rgb(var(--smoothly-color-shade));
 }
 
 smoothly-table[align=bottom] :host {

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

@@ -6,34 +6,20 @@ export class TableExpandableRow {
     this.align = "left";
     this.open = undefined;
   }
-  openChanged() {
-    if (this.expansionElement)
-      this.element.after(this.expansionElement);
-    this.expandableChange.emit(this.open);
-  }
   handleSpotlight() {
     this.spotlight = this.open && this.allowSpotlight;
   }
   componentWillLoad() {
-    this.expandableLoad.emit({
+    this.smoothlyExpandableLoad.emit({
       allowSpotlight: (allowed) => (this.allowSpotlight = allowed),
     });
   }
-  componentDidRender() {
-    this.expansionOpen.emit(this.expansionElement);
-    if (this.expansionElement && this.open)
-      this.element.after(this.expansionElement);
-  }
-  onClick(event) {
-    event.stopPropagation();
-    this.open = !this.open;
-  }
   handleTableLoaded(event) {
     event.stopPropagation();
     event.detail(this.element);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("tr", { class: this.spotlight ? "spotlight" : "", ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
+    return (h(Host, { style: { textAlign: this.align } }, h("div", { style: { textAlign: this.align }, onClick: () => (this.open = !this.open) }, h("slot", null)), h("tr", { class: { spotlight: this.spotlight } }, h("td", { colSpan: 999, class: { hide: !this.open } }, h("slot", { name: "detail" })))));
   }
   static get is() { return "smoothly-table-expandable-row"; }
   static get encapsulation() { return "scoped"; }
@@ -94,8 +80,8 @@ export class TableExpandableRow {
   }
   static get events() {
     return [{
-        "method": "expansionOpen",
-        "name": "expansionOpen",
+        "method": "smoothlyExpansionOpen",
+        "name": "smoothlyExpansionOpen",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -113,8 +99,8 @@ export class TableExpandableRow {
           }
         }
       }, {
-        "method": "expandableChange",
-        "name": "expandableChange",
+        "method": "smoothlyExpandableChange",
+        "name": "smoothlyExpandableChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -128,8 +114,8 @@ export class TableExpandableRow {
           "references": {}
         }
       }, {
-        "method": "expandableLoad",
-        "name": "expandableLoad",
+        "method": "smoothlyExpandableLoad",
+        "name": "smoothlyExpandableLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -147,9 +133,6 @@ export class TableExpandableRow {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
-        "propName": "open",
-        "methodName": "openChanged"
-      }, {
         "propName": "open",
         "methodName": "handleSpotlight"
       }, {
@@ -159,13 +142,7 @@ export class TableExpandableRow {
   }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "onClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "tableLoad",
+        "name": "smoothlyTableLoad",
         "method": "handleTableLoaded",
         "target": undefined,
         "capture": false,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/expandable/row/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,kBAAkB;;0BAGJ,IAAI;qBACT,IAAI;iBACoB,MAAM;;;EAMnD,WAAW;IACV,IAAI,IAAI,CAAC,gBAAgB;MACxB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC1C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EACtC,CAAC;EAGD,eAAe;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;EAClD,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;MACxB,cAAc,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACrE,CAAC,CAAA;EACH,CAAC;EACD,kBAAkB;IACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC9C,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI;MACrC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;EAC3C,CAAC;EAED,OAAO,CAAC,KAAc;IACrB,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACvB,CAAC;EAED,iBAAiB,CAAC,KAAgD;IACjE,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC3B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;MACrC,eAAa;MACb,UAAI,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAClF,UAAI,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;UAChD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-row\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableRow implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\t@Element() element: HTMLSmoothlyTableRowElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop() align: \"left\" | \"center\" | \"right\" = \"left\"\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() expansionOpen: EventEmitter<HTMLElement>\n\t@Event() expandableChange: EventEmitter<boolean>\n\t@Event() expandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tif (this.expansionElement)\n\t\t\tthis.element.after(this.expansionElement)\n\t\tthis.expandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad() {\n\t\tthis.expandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tthis.expansionOpen.emit(this.expansionElement)\n\t\tif (this.expansionElement && this.open)\n\t\t\tthis.element.after(this.expansionElement)\n\t}\n\t@Listen(\"click\")\n\tonClick(event: UIEvent) {\n\t\tevent.stopPropagation()\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"tableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ textAlign: this.align }}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<tr class={this.spotlight ? \"spotlight\" : \"\"} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999} class={!this.open ? \"hide\" : \"\"}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/expandable/row/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,kBAAkB;;0BAEJ,IAAI;qBACT,IAAI;iBACoB,MAAM;;;EAQnD,eAAe;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;EAClD,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;MAChC,cAAc,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACrE,CAAC,CAAA;EACH,CAAC;EAED,iBAAiB,CAAC,KAAgD;IACjE,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC3B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;MACrC,WAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7E,eAAa,CACR;MACN,UAAI,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;QACvC,UAAI,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;UAC5C,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-row\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableRow implements ComponentWillLoad {\n\t@Element() element: HTMLSmoothlyTableRowElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop() align: \"left\" | \"center\" | \"right\" = \"left\"\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyExpansionOpen: EventEmitter<HTMLElement>\n\t@Event() smoothlyExpandableChange: EventEmitter<boolean>\n\t@Event() smoothlyExpandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad() {\n\t\tthis.smoothlyExpandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\t@Listen(\"smoothlyTableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ textAlign: this.align }}>\n\t\t\t\t<div style={{ textAlign: this.align }} onClick={() => (this.open = !this.open)}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<tr class={{ spotlight: this.spotlight }}>\n\t\t\t\t\t<td colSpan={999} class={{ hide: !this.open }}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,42 +1,52 @@
 :host {
+	display: contents;
+}
+div {
 	display: table-row;
 	cursor: pointer;
 	line-height: 1.5rem;
 }
-:host[open] {
+:host[open] > div {
 	position: relative;
 	z-index: 3;
-	background-color: rgb(var(--smoothly-default-color));
-	box-shadow: -1px 0 0 0 rgb(var(--smoothly-dark-color)) inset, 
-		1px 0 0 0 rgb(var(--smoothly-dark-color)) inset;
+	background-color: rgb(var(--smoothly-color));
+}
+:host[open] > div::slotted(*) smoothly-table-cell,
+:host[open] > div::slotted(smoothly-table-cell) {
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset;	
+}
+:host[open] > div::slotted(*) smoothly-table-cell:first-child {
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset, 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset;
+}
+:host[open] > div::slotted(*) smoothly-table-cell:last-child {
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset;
 }
-:host[open]::slotted(*) smoothly-table-cell,
-:host[open]::slotted(smoothly-table-cell) {
-	border-bottom: none;
+:host[open] > div::slotted(*) smoothly-table-cell:last-child:first-child {
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)) inset, 1px 0 0 0 rgb(var(--smoothly-color-shade)) inset, -1px 0 0 0 rgb(var(--smoothly-color-shade)) inset;
 }
 
 .hide {
 	display: none;
 }
-:host > tr > td {
+div > tr > td {
 	position: relative;
 }
 td::slotted(*) {
 	--expansion-width: 1.5rem;
 	--expansion-border-width: 3px;
 	position: relative;
-	background-color: rgb(var(--smoothly-default-color));
-	width: calc(100% + 3rem - var(--expansion-border-width));
-	left: calc(-1 * var(--expansion-width));
-	border-left: var(--expansion-border-width) solid rgb(0, 0, 0, 0);
-	box-shadow: 0px 0px 4px 2px rgb(var(--smoothly-dark-color));
+	background-color: rgb(var(--smoothly-color));
+	width: calc(100% + 3rem - 2px);
+	left: calc(-1 * var(--expansion-width) + 1px);
 	box-sizing: border-box;
-	padding: 0.5rem calc(var(--expansion-width) - var(--expansion-border-width));
-	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
-	border-left-width: 3px;
+	padding: 0.5rem calc(var(--expansion-width) - 1px);
+	border-bottom: 1px solid rgb(var(--smoothly-color-shade));
 }
 tr.spotlight > td::slotted(*) {
-	border-left-color: rgb(var(--smoothly-tertiary-color));
+	box-shadow: calc(var(--expansion-border-width)) 0px 0px 0px rgb(var(--smoothly-tertiary-color)) inset;
+}
+tr:not(.spotlight) > td::slotted(*) {
+	box-shadow: -1px 0 0 0 rgb(var(--smoothly-tertiary-color)), 1px 0 0 0 rgb(var(--smoothly-tertiary-color));
 }
 td::slotted(*)::before {
 	content: "";
@@ -44,9 +54,9 @@ td::slotted(*)::before {
 	display: flex;
 	top: 0;
 	bottom: 0;
-	left: -3px;
+	left: -1px;
 	width: calc(var(--expansion-width) + 1px);
-	border-top: 1px solid rgb(var(--smoothly-dark-color));
+	border-top: 1px solid rgb(var(--smoothly-color-shade));
 }
 td::slotted(*)::after {
 	content: "";
@@ -55,14 +65,7 @@ td::slotted(*)::after {
 	top: 0;
 	bottom: 0;
 	right: 0;
-	width: calc(var(--expansion-width) -1px);
-	border-top: 1px solid rgb(var(--smoothly-dark-color));
-}
-:host::slotted(*) smoothly-table-cell:last-of-type > div > smoothly-icon:last-of-type,
-:host::slotted(smoothly-table-cell:last-of-type) > div > smoothly-icon:last-of-type {
-	display: flex;
-}
-:host[open]::slotted(*) smoothly-table-cell:last-of-type > div > smoothly-icon:last-of-type,
-:host[open]::slotted(smoothly-table-cell:last-of-type) > div > smoothly-icon:last-of-type {
-	transform: rotate(90deg);
+	width: calc(var(--expansion-width) - 1px);
+	border-top: 1px solid rgb(var(--smoothly-color-shade));
+	border-right: 1px solid rgb(var(--smoothly-color-shade));
 }

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

@@ -0,0 +1,19 @@
+import { h } from "@stencil/core";
+export class TableFooter {
+  render() {
+    return (h("div", null, h("slot", null)));
+  }
+  static get is() { return "smoothly-table-footer"; }
+  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/table/footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO5C,MAAM,OAAO,WAAW;EACvB,MAAM;IACL,OAAO,CACN;MACC,eAAQ,CACH,CACN,CAAA;EACF,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-footer\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableFooter {\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,13 @@
+:host {
+	display: table-footer-group;
+	cursor: default;
+	position: sticky;
+	width: 100%;
+	bottom: 0;
+	background-color: rgb(var(--smoothly-color)) ;
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade)),
+	inset  0 1px 0 rgb(var(--smoothly-color-shade));
+}
+div {
+	display: contents;
+}

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

@@ -1,8 +1,8 @@
 :host {
 	display: table-cell;
 	line-height: 2.5rem;
-	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
-	border-top: 1px solid rgb(var(--smoothly-dark-color));
+	border-top: 1px solid rgb(var(--smoothly-color-shade));
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade));
 	padding-left: 1rem;
 	font-weight: bold;
 }

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

@@ -1,14 +1,16 @@
 import { h } from "@stencil/core";
 export class Table {
   constructor() {
-    this.expandable = new Map();
+    this.expandable = new WeakMap();
     this.expanded = new Set();
     this.root = true;
+    this.color = undefined;
     this.align = "middle";
+    this.open = false;
   }
   componentWillLoad() {
     this.smoothlyNestedTable.emit(() => (this.root = false));
-    this.tableLoad.emit((owner) => (this.owner = owner));
+    this.smoothlyTableLoad.emit((owner) => (this.owner = owner));
   }
   handleExpandableLoaded(event) {
     event.stopPropagation();
@@ -17,10 +19,11 @@ export class Table {
   handleExpandableState(event) {
     event.stopPropagation();
     event.target && (event.detail ? this.expanded.add(event.target) : this.expanded.delete(event.target));
-    this.spotlightChange.emit({ allowSpotlight: !this.expanded.size, owner: this.owner });
+    this.smoothlySpotlightChange.emit({ allowSpotlight: !this.expanded.size, owner: this.owner });
   }
   handleSpotlightState(event) {
     var _a;
+    this.open = !!this.expanded.size;
     event.target != this.element &&
       (event.stopPropagation(),
         event.detail.owner && ((_a = this.expandable.get(event.detail.owner)) === null || _a === void 0 ? void 0 : _a.allowSpotlight(event.detail.allowSpotlight)));
@@ -66,6 +69,28 @@ export class Table {
         "reflect": true,
         "defaultValue": "true"
       },
+      "color": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
       "align": {
         "type": "string",
         "mutable": false,
@@ -83,6 +108,24 @@ export class Table {
         "attribute": "align",
         "reflect": true,
         "defaultValue": "\"middle\""
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
@@ -103,8 +146,8 @@ export class Table {
           "references": {}
         }
       }, {
-        "method": "spotlightChange",
-        "name": "spotlightChange",
+        "method": "smoothlySpotlightChange",
+        "name": "smoothlySpotlightChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -122,8 +165,8 @@ export class Table {
           }
         }
       }, {
-        "method": "tableLoad",
-        "name": "tableLoad",
+        "method": "smoothlyTableLoad",
+        "name": "smoothlyTableLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -145,19 +188,19 @@ export class Table {
   static get elementRef() { return "element"; }
   static get listeners() {
     return [{
-        "name": "expandableLoad",
+        "name": "smoothlyExpandableLoad",
         "method": "handleExpandableLoaded",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "expandableChange",
+        "name": "smoothlyExpandableChange",
         "method": "handleExpandableState",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "spotlightChange",
+        "name": "smoothlySpotlightChange",
         "method": "handleSpotlightState",
         "target": undefined,
         "capture": false,
@@ -169,13 +212,13 @@ export class Table {
         "capture": false,
         "passive": false
       }, {
-        "name": "expansionLoad",
+        "name": "smoothlyExpansionLoad",
         "method": "handleEvents",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "expansionOpen",
+        "name": "smoothlyExpansionOpen",
         "method": "handleEvents",
         "target": undefined,
         "capture": false,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAO3G,MAAM,OAAO,KAAK;;IAET,eAAU,GAAiF,IAAI,GAAG,EAAE,CAAA;IACpG,aAAQ,GAAqB,IAAI,GAAG,EAAE,CAAA;gBAEC,IAAI;iBACW,QAAQ;;EAItE,iBAAiB;IAChB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAA;IACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAkB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;EAClE,CAAC;EAED,sBAAsB,CAAC,KAAkE;IACxF,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;EAChE,CAAC;EAED,qBAAqB,CAAC,KAA2B;IAChD,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACrG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;EACtF,CAAC;EAED,oBAAoB,CAAC,KAAoE;;IACxF,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC3B,CAAC,KAAK,CAAC,eAAe,EAAE;QACxB,KAAK,CAAC,MAAM,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA,CAAC,CAAA;EAC7G,CAAC;EAED,iBAAiB,CAAC,KAA8B;IAC/C,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAA;EAC1E,CAAC;EAGD,YAAY,CAAC,KAAY;IACxB,KAAK,CAAC,eAAe,EAAE,CAAA;EACxB,CAAC;EACD,MAAM;IACL,OAAO,CAAC,eAAa,CAAC,CAAA;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Element, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Table implements ComponentWillLoad {\n\tprivate owner?: EventTarget\n\tprivate expandable: Map<EventTarget, { allowSpotlight: (allowed: boolean) => void } | undefined> = new Map()\n\tprivate expanded: Set<EventTarget> = new Set()\n\t@Element() element: HTMLSmoothlyTableElement\n\t@Prop({ mutable: true, reflect: true }) root = true\n\t@Prop({ reflect: true }) align: \"middle\" | \"bottom\" | \"top\" = \"middle\"\n\t@Event() smoothlyNestedTable: EventEmitter<() => void>\n\t@Event() spotlightChange: EventEmitter<{ allowSpotlight: boolean; owner?: EventTarget }>\n\t@Event() tableLoad: EventEmitter<(owner: EventTarget) => void>\n\tcomponentWillLoad() {\n\t\tthis.smoothlyNestedTable.emit(() => (this.root = false))\n\t\tthis.tableLoad.emit((owner: EventTarget) => (this.owner = owner))\n\t}\n\t@Listen(\"expandableLoad\")\n\thandleExpandableLoaded(event: CustomEvent<{ allowSpotlight: (allowed: boolean) => void }>) {\n\t\tevent.stopPropagation()\n\t\tevent.target && this.expandable.set(event.target, event.detail)\n\t}\n\t@Listen(\"expandableChange\")\n\thandleExpandableState(event: CustomEvent<boolean>) {\n\t\tevent.stopPropagation()\n\t\tevent.target && (event.detail ? this.expanded.add(event.target) : this.expanded.delete(event.target))\n\t\tthis.spotlightChange.emit({ allowSpotlight: !this.expanded.size, owner: this.owner })\n\t}\n\t@Listen(\"spotlightChange\")\n\thandleSpotlightState(event: CustomEvent<{ allowSpotlight: boolean; owner?: EventTarget }>) {\n\t\tevent.target != this.element &&\n\t\t\t(event.stopPropagation(),\n\t\t\tevent.detail.owner && this.expandable.get(event.detail.owner)?.allowSpotlight(event.detail.allowSpotlight))\n\t}\n\t@Listen(\"smoothlyNestedTable\")\n\thandleNestedTable(event: CustomEvent<() => void>) {\n\t\tevent.target != this.element && (event.stopPropagation(), event.detail())\n\t}\n\t@Listen(\"expansionLoad\")\n\t@Listen(\"expansionOpen\")\n\thandleEvents(event: Event) {\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [<slot></slot>]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQ3G,MAAM,OAAO,KAAK;;IAET,eAAU,GAAqF,IAAI,OAAO,EAAE,CAAA;IAC5G,aAAQ,GAAqB,IAAI,GAAG,EAAE,CAAA;gBAEC,IAAI;;iBAEW,QAAQ;gBACvB,KAAK;;EAIpD,iBAAiB;IAChB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAA;IACxD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAkB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;EAC1E,CAAC;EAED,sBAAsB,CAAC,KAAkE;IACxF,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;EAChE,CAAC;EAED,qBAAqB,CAAC,KAA2B;IAChD,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACrG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;EAC9F,CAAC;EAED,oBAAoB,CAAC,KAAoE;;IACxF,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAA;IAChC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC3B,CAAC,KAAK,CAAC,eAAe,EAAE;QACxB,KAAK,CAAC,MAAM,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA,CAAC,CAAA;EAC7G,CAAC;EAED,iBAAiB,CAAC,KAA8B;IAC/C,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAA;EAC1E,CAAC;EAGD,YAAY,CAAC,KAAkB;IAC9B,KAAK,CAAC,eAAe,EAAE,CAAA;EACxB,CAAC;EACD,MAAM;IACL,OAAO,CAAC,eAAa,CAAC,CAAA;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Element, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\nimport { Color } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-table\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Table implements ComponentWillLoad {\n\tprivate owner?: EventTarget\n\tprivate expandable: WeakMap<EventTarget, { allowSpotlight: (allowed: boolean) => void } | undefined> = new WeakMap()\n\tprivate expanded: Set<EventTarget> = new Set()\n\t@Element() element: HTMLSmoothlyTableElement\n\t@Prop({ mutable: true, reflect: true }) root = true\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true }) align: \"middle\" | \"bottom\" | \"top\" = \"middle\"\n\t@Prop({ reflect: true, mutable: true }) open = false\n\t@Event() smoothlyNestedTable: EventEmitter<() => void>\n\t@Event() smoothlySpotlightChange: EventEmitter<{ allowSpotlight: boolean; owner?: EventTarget }>\n\t@Event() smoothlyTableLoad: EventEmitter<(owner: EventTarget) => void>\n\tcomponentWillLoad() {\n\t\tthis.smoothlyNestedTable.emit(() => (this.root = false))\n\t\tthis.smoothlyTableLoad.emit((owner: EventTarget) => (this.owner = owner))\n\t}\n\t@Listen(\"smoothlyExpandableLoad\")\n\thandleExpandableLoaded(event: CustomEvent<{ allowSpotlight: (allowed: boolean) => void }>) {\n\t\tevent.stopPropagation()\n\t\tevent.target && this.expandable.set(event.target, event.detail)\n\t}\n\t@Listen(\"smoothlyExpandableChange\")\n\thandleExpandableState(event: CustomEvent<boolean>) {\n\t\tevent.stopPropagation()\n\t\tevent.target && (event.detail ? this.expanded.add(event.target) : this.expanded.delete(event.target))\n\t\tthis.smoothlySpotlightChange.emit({ allowSpotlight: !this.expanded.size, owner: this.owner })\n\t}\n\t@Listen(\"smoothlySpotlightChange\")\n\thandleSpotlightState(event: CustomEvent<{ allowSpotlight: boolean; owner?: EventTarget }>) {\n\t\tthis.open = !!this.expanded.size\n\t\tevent.target != this.element &&\n\t\t\t(event.stopPropagation(),\n\t\t\tevent.detail.owner && this.expandable.get(event.detail.owner)?.allowSpotlight(event.detail.allowSpotlight))\n\t}\n\t@Listen(\"smoothlyNestedTable\")\n\thandleNestedTable(event: CustomEvent<() => void>) {\n\t\tevent.target != this.element && (event.stopPropagation(), event.detail())\n\t}\n\t@Listen(\"smoothlyExpansionLoad\")\n\t@Listen(\"smoothlyExpansionOpen\")\n\thandleEvents(event: CustomEvent) {\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [<slot></slot>]\n\t}\n}\n"]}