@aquera/nile-elements 0.1.67-beta-1.9 → 0.1.67-beta-2.1

package/dist/src/nile-table-row/nile-table-row.css.js

@@ -25,6 +25,57 @@ export const styles = css `
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  cursor: default;
+  position: relative;       
+  display: flex;
+  align-items: center;
+}
+
+.row.expandable {
+  border-bottom: 1px solid var(--nile-table-row-border-color);
+}
+ 
+
+.expanded-content {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.row.expandable .expand-icon {
+  margin-right: 4px;
+}
+ 
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  flex: 1 1 0;           
+  box-sizing: border-box; 
+}
+
+
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.expand-icon {
+  position: absolute;
+  left: 0.40em;            
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  user-select: none;
+  z-index: 2;
+}
+ 
 `;
 export default [styles];
 //# sourceMappingURL=nile-table-row.css.js.map

package/dist/src/nile-table-row/nile-table-row.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width: 100%;\n    height: 100%;\n    height: max-content;\n    --nile-header-background: var(--nile-table-header-background-color);\n    border-bottom: 1px solid var(--nile-table-row-border-color);\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-header-background);\n  }\n\n  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {\n    color: red;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width: 100%;\n    height: 100%;\n    height: max-content;\n    --nile-header-background: var(--nile-table-header-background-color);\n    border-bottom: 1px solid var(--nile-table-row-border-color);\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-header-background);\n  }\n\n  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {\n    color: red;\n  }\n\n.row-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.row {\n  cursor: default;\n  position: relative;       \n  display: flex;\n  align-items: center;\n}\n\n.row.expandable {\n  border-bottom: 1px solid var(--nile-table-row-border-color);\n}\n \n\n.expanded-content {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n}\n\n.row.expandable .expand-icon {\n  margin-right: 4px;\n}\n \n.row ::slotted(nile-table-cell-item),\n.row ::slotted(nile-table-header-item) {\n  flex: 1 1 0;           \n  box-sizing: border-box; \n}\n\n\n.row-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.expand-icon {\n  position: absolute;\n  left: 0.40em;            \n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  font-size: 1em;\n  line-height: 1;\n  user-select: none;\n  z-index: 2;\n}\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-row/nile-table-row.d.ts

@@ -22,6 +22,10 @@ export declare class NileTableRow extends NileElement {
      * Render method
      * @slot This is a slot test
      */
+    expandable: boolean;
+    expanded: boolean;
+    private _expandedSlot;
+    private toggleExpand;
     private handleSortingAlter;
     render(): TemplateResult;
 }

package/dist/src/nile-table-row/nile-table-row.js

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html, } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
 import NileElement from '../internal/nile-element';
 /**
@@ -16,6 +16,18 @@ import NileElement from '../internal/nile-element';
  *
  */
 let NileTableRow = class NileTableRow extends NileElement {
+    constructor() {
+        super(...arguments);
+        /* #endregion */
+        /* #region Methods */
+        /**
+         * Render method
+         * @slot This is a slot test
+         */
+        this.expandable = false;
+        this.expanded = false;
+        /* #endregion */
+    }
     /**
      * The styles for TableRow
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -23,12 +35,14 @@ let NileTableRow = class NileTableRow extends NileElement {
     static get styles() {
         return [styles];
     }
-    /* #endregion */
-    /* #region Methods */
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
+    toggleExpand(e) {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(new CustomEvent('nile-change', {
+            detail: { expanded: this.expanded },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     handleSortingAlter(event) {
         const header_items = [
             ...this.querySelectorAll('nile-table-header-item'),
@@ -43,13 +57,46 @@ let NileTableRow = class NileTableRow extends NileElement {
     }
     render() {
         return html `
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <div part="row-container" class="row-container">
+        <div
+          part="nile-row"
+          class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort="${this.handleSortingAlter}"
+        >
+          ${this.expandable
+            ? html `
+            <slot name="expandableIcon">
+              <nile-icon
+                class="expand-icon"
+                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+                @click=${this.toggleExpand}
+                role="button"
+                size="10"
+                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+              </nile-icon> </slot>`
+            : null}
+          <slot></slot>
+        </div>
+
+        ${this.expandable && this.expanded
+            ? html `
+              <div class="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+            : null}
+      </div>
     `;
     }
 };
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTableRow.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTableRow.prototype, "expanded", void 0);
+__decorate([
+    query('slot[name="expanded"]')
+], NileTableRow.prototype, "_expandedSlot", void 0);
 NileTableRow = __decorate([
     customElement('nile-table-row')
 ], NileTableRow);

package/dist/src/nile-table-row/nile-table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-row.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;;;OAGG;IAEI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEK,kBAAkB,CAAC,KAAkB;QAC3C,MAAM,YAAY,GAAQ;YACxB,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;SACnD,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;YAC3E,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;4BAGa,IAAI,CAAC,kBAAkB;;KAE9C,CAAC;IACJ,CAAC;CAGF,CAAA;AA1CY,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA0CxB;;AAED,eAAe,YAAY,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-row.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n *nile-table-row component.\n *\n * @tag nile-table-row\n *\n */\n@customElement('nile-table-row')\nexport class NileTableRow extends NileElement {\n  /**\n   * The styles for TableRow\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleSortingAlter(event: CustomEvent) {\n    const header_items: any = [\n      ...this.querySelectorAll('nile-table-header-item'),\n    ];\n    for (let i = 0; i < header_items.length; i++) {\n      const header = header_items[i];\n      const haveIcon = header.textContent == event.detail.value.curr_sort_string;\n      if (!haveIcon) {\n        header.sorting_ct = 0;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot\n        part=\"nile-row\"\n        @nile-click-sort=\"${this.handleSortingAlter}\"\n      ></slot>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileTableRow;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-row': NileTableRow;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-row.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QASL,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QAKyC,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QA6D7D,gBAAgB;IAClB,CAAC;IArFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAuBO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE;YAChD,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAGO,kBAAkB,CAAC,KAAkB;QAC3C,MAAM,YAAY,GAAQ;YACxB,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;SACnD,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;YAC3E,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;8BAC/D,IAAI,CAAC,kBAAkB;;YAEzC,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;yBAIO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc;yBAC7C,IAAI,CAAC,YAAY;;;8BAGZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY;mCACxC;YACvB,CAAC,CAAC,IAAI;;;;UAIR,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ;YAChC,CAAC,CAAC,IAAI,CAAA;;;qBAGK;YACX,CAAC,CAAC,IAAI;;KAEX,CAAC;IACJ,CAAC;CAEF,CAAA;AAjE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAoB;AAGnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAGrD;IADP,KAAK,CAAC,uBAAuB,CAAC;mDACS;AA3B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAsFxB;;AACD,eAAe,YAAY,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-row.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n *nile-table-row component.\n *\n * @tag nile-table-row\n *\n */\n@customElement('nile-table-row')\nexport class NileTableRow extends NileElement {\n  /**\n   * The styles for TableRow\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n\n\n\n  @property({ type: Boolean, reflect: true }) expandable = false;\n\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @query('slot[name=\"expanded\"]')\n  private _expandedSlot!: HTMLSlotElement;\n\n\n  private toggleExpand(e: MouseEvent): void {\n    this.expanded = !this.expanded;\n    this.dispatchEvent(new CustomEvent('nile-change', {\n      detail: { expanded: this.expanded },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n\n  private handleSortingAlter(event: CustomEvent) {\n    const header_items: any = [\n      ...this.querySelectorAll('nile-table-header-item'),\n    ];\n    for (let i = 0; i < header_items.length; i++) {\n      const header = header_items[i];\n      const haveIcon = header.textContent == event.detail.value.curr_sort_string;\n      if (!haveIcon) {\n        header.sorting_ct = 0;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"row-container\" class=\"row-container\">\n        <div\n          part=\"nile-row\"\n          class=\"row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}\"\n          @nile-click-sort=\"${this.handleSortingAlter}\"\n        >\n          ${this.expandable\n            ? html`\n            <slot name=\"expandableIcon\">\n              <nile-icon\n                class=\"expand-icon\"\n                 name=\"${this.expanded ? 'chevron-up' : 'chevron-down'}\"\n                @click=${this.toggleExpand}\n                role=\"button\"\n                size=\"10\"\n                aria-label=\"${this.expanded ? 'Collapse row' : 'Expand row'}\">\n              </nile-icon> </slot>`\n            : null}\n          <slot></slot>\n        </div>\n\n        ${this.expandable && this.expanded\n          ? html`\n              <div class=\"expanded-content\">\n                <slot name=\"expanded\"></slot>\n              </div>`\n          : null}\n      </div>\n    `;\n  }\n  /* #endregion */\n}\nexport default NileTableRow;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-row': NileTableRow;\n  }\n}\n"]}

package/dist/src/nile-table-row-expandable/index.d.ts

@@ -0,0 +1 @@
+export { NileTableRowExpandable } from './nile-table-row-expandable';

package/dist/src/nile-table-row-expandable/index.js

@@ -0,0 +1,2 @@
+export { NileTableRowExpandable } from './nile-table-row-expandable';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-table-row-expandable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-table-row-expandable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { NileTableRowExpandable } from './nile-table-row-expandable';"]}

package/dist/src/nile-table-row-expandable/nile-table-row-expandable.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * TableRowExpandable CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-table-row-expandable/nile-table-row-expandable.css.js

@@ -0,0 +1,17 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * TableRowExpandable CSS
+ */
+export const styles = css `
+	:host {
+
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-table-row-expandable.css.js.map

package/dist/src/nile-table-row-expandable/nile-table-row-expandable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table-row-expandable.css.js","sourceRoot":"","sources":["../../../src/nile-table-row-expandable/nile-table-row-expandable.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TableRowExpandable CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-table-row-expandable/nile-table-row-expandable.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile table-row-expandable component.
+ *
+ * @tag nile-table-row-expandable
+ *
+ */
+export declare class NileTableRowExpandable extends NileElement {
+    /**
+     * The styles for nile-table-row-expandable
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    expandable: boolean;
+    expanded: boolean;
+    private _expandedSlot;
+    private toggleExpand;
+    private handleSortingAlter;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileTableRowExpandable;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-table-row-expandable': NileTableRowExpandable;
+    }
+}

package/dist/src/nile-table-row-expandable/nile-table-row-expandable.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles } from './nile-table-row-expandable.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile table-row-expandable component.
+ *
+ * @tag nile-table-row-expandable
+ *
+ */
+let NileTableRowExpandable = class NileTableRowExpandable extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.expandable = false;
+        this.expanded = false;
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-table-row-expandable
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    toggleExpand(e) {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(new CustomEvent('nile-change', {
+            detail: { expanded: this.expanded },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleSortingAlter(event) {
+        const header_items = [
+            ...this.querySelectorAll('nile-table-header-item'),
+        ];
+        for (let i = 0; i < header_items.length; i++) {
+            const header = header_items[i];
+            const haveIcon = header.textContent == event.detail.value.curr_sort_string;
+            if (!haveIcon) {
+                header.sorting_ct = 0;
+            }
+        }
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<div part="row-container" class="row-container">
+				<div
+					part="nile-row"
+					class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
+					@nile-click-sort="${this.handleSortingAlter}"
+				>
+					${this.expandable
+            ? html `
+						<slot name="expandableIcon">
+							<nile-icon
+								class="expand-icon"
+									name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+								@click=${this.toggleExpand}
+								role="button"
+								size="10"
+								aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+							</nile-icon> </slot>`
+            : null}
+					<slot></slot>
+				</div>
+
+				${this.expandable && this.expanded
+            ? html `
+							<div class="expanded-content">
+								<slot name="expanded"></slot>
+							</div>`
+            : null}
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTableRowExpandable.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTableRowExpandable.prototype, "expanded", void 0);
+__decorate([
+    query('slot[name="expanded"]')
+], NileTableRowExpandable.prototype, "_expandedSlot", void 0);
+NileTableRowExpandable = __decorate([
+    customElement('nile-table-row-expandable')
+], NileTableRowExpandable);
+export { NileTableRowExpandable };
+export default NileTableRowExpandable;
+//# sourceMappingURL=nile-table-row-expandable.js.map

package/dist/src/nile-table-row-expandable/nile-table-row-expandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-table-row-expandable.js","sourceRoot":"","sources":["../../../src/nile-table-row-expandable/nile-table-row-expandable.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QAUsC,eAAU,GAAG,KAAK,CAAC;QACnB,aAAQ,GAAG,KAAK,CAAC;QAiE7D,gBAAgB;IACjB,CAAC;IA3EA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAQO,YAAY,CAAC,CAAa;QACjC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE;YACjD,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAGO,kBAAkB,CAAC,KAAkB;QAC5C,MAAM,YAAY,GAAQ;YACzB,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;SAClD,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC9C,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;YAC3E,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;YACvB,CAAC;QACF,CAAC;IACF,CAAC;IAED;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;kBAIK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;yBAC/D,IAAI,CAAC,kBAAkB;;OAEzC,IAAI,CAAC,UAAU;YACnB,CAAC,CAAC,IAAI,CAAA;;;;iBAIQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc;iBAC7C,IAAI,CAAC,YAAY;;;sBAGZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY;4BACvC;YACzB,CAAC,CAAC,IAAI;;;;MAIH,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;;cAGK;YACX,CAAC,CAAC,IAAI;;GAEN,CAAC;IACH,CAAC;CAGD,CAAA;AAnE4C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAAoB;AACnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAAkB;AAGrD;IADP,KAAK,CAAC,uBAAuB,CAAC;6DACS;AAd5B,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA6ElC;;AAED,eAAe,sBAAsB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property, query} from 'lit/decorators.js';\nimport {styles} from './nile-table-row-expandable.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile table-row-expandable component.\n *\n * @tag nile-table-row-expandable\n *\n */\n@customElement('nile-table-row-expandable')\nexport class NileTableRowExpandable extends NileElement {\n\n\t/**\n\t * The styles for nile-table-row-expandable\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t@property({ type: Boolean, reflect: true }) expandable = false;\n\t@property({ type: Boolean, reflect: true }) expanded = false;\n\n\t@query('slot[name=\"expanded\"]')\n\tprivate _expandedSlot!: HTMLSlotElement;\n\n\tprivate toggleExpand(e: MouseEvent): void {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.dispatchEvent(new CustomEvent('nile-change', {\n\t\t\tdetail: { expanded: this.expanded },\n\t\t\tbubbles: true,\n\t\t\tcomposed: true,\n\t\t}));\n\t}\n\n\n\tprivate handleSortingAlter(event: CustomEvent) {\n\t\tconst header_items: any = [\n\t\t\t...this.querySelectorAll('nile-table-header-item'),\n\t\t];\n\t\tfor (let i = 0; i < header_items.length; i++) {\n\t\t\tconst header = header_items[i];\n\t\t\tconst haveIcon = header.textContent == event.detail.value.curr_sort_string;\n\t\t\tif (!haveIcon) {\n\t\t\t\theader.sorting_ct = 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div part=\"row-container\" class=\"row-container\">\n\t\t\t\t<div\n\t\t\t\t\tpart=\"nile-row\"\n\t\t\t\t\tclass=\"row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}\"\n\t\t\t\t\t@nile-click-sort=\"${this.handleSortingAlter}\"\n\t\t\t\t>\n\t\t\t\t\t${this.expandable\n\t\t\t? html`\n\t\t\t\t\t\t<slot name=\"expandableIcon\">\n\t\t\t\t\t\t\t<nile-icon\n\t\t\t\t\t\t\t\tclass=\"expand-icon\"\n\t\t\t\t\t\t\t\t\tname=\"${this.expanded ? 'chevron-up' : 'chevron-down'}\"\n\t\t\t\t\t\t\t\t@click=${this.toggleExpand}\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\tsize=\"10\"\n\t\t\t\t\t\t\t\taria-label=\"${this.expanded ? 'Collapse row' : 'Expand row'}\">\n\t\t\t\t\t\t\t</nile-icon> </slot>`\n\t\t\t: null}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t${this.expandable && this.expanded\n\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"expanded-content\">\n\t\t\t\t\t\t\t\t<slot name=\"expanded\"></slot>\n\t\t\t\t\t\t\t</div>`\n\t\t\t: null}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileTableRowExpandable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-row-expandable': NileTableRowExpandable;\n  }\n}"]}