@aquera/nile-elements 0.1.67-beta-2.5 → 0.1.67-beta-2.6

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,19 +16,37 @@ import NileElement from '../internal/nile-element';
  *
  */
 let NileTableRow = class NileTableRow extends NileElement {
-    /**
-     * The styles for TableRow
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
+    constructor() {
+        /**
+         * The styles for TableRow
+         * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+         */
+        super(...arguments);
+        this.expandable = false;
+        this.expanded = false;
+        this.tableBodyHasExpandable = this.closest('nile-table-body');
+        /* #endregion */
+    }
     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,
+        }));
+    }
     /* #endregion */
     /* #region Methods */
     /**
      * Render method
      * @slot This is a slot test
      */
+    firstUpdated() {
+        this._fallbackIcon = this.renderRoot?.querySelector('nile-icon') ?? null;
+    }
     handleSortingAlter(event) {
         const header_items = [
             ...this.querySelectorAll('nile-table-header-item'),
@@ -41,15 +59,75 @@ let NileTableRow = class NileTableRow extends NileElement {
             }
         }
     }
+    updated(changedProperties) {
+        if (!changedProperties.has('expandable') || !this._iconSlot)
+            return;
+        const assigned = this._iconSlot.assignedElements();
+        const hasAssigned = assigned.length > 0;
+        const displayValue = this.expandable ? '' : 'none';
+        if (hasAssigned) {
+            for (const el of assigned) {
+                el.style.display = displayValue;
+            }
+        }
+        else if (this._fallbackIcon) {
+            this._fallbackIcon.style.display = displayValue;
+        }
+    }
     render() {
+        if (!this.expandable && !this.tableBodyHasExpandable.expandableRows) {
+            return html `
+        <slot
+          part="nile-row"
+          @nile-click-sort="${this.handleSortingAlter}"
+        ></slot>
+      `;
+        }
         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 expandable ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort="${this.handleSortingAlter}"
+        >
+          <slot
+						name="expandableIcon"
+						@click=${this.toggleExpand} 
+						class="expand-icon" 
+						part="expandable-icon"
+					>
+            <nile-icon
+              name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+              role="button"
+              size="10"
+              aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+            </nile-icon>
+          </slot>
+          <slot></slot>
+        </div>
+  
+        ${this.expanded && this.expandable
+            ? html `
+              <div class="expanded-content" part="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+            : null}
+      </div>
     `;
     }
 };
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileTableRow.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileTableRow.prototype, "expanded", void 0);
+__decorate([
+    query('slot[name="expanded"]')
+], NileTableRow.prototype, "_expandedSlot", void 0);
+__decorate([
+    query('slot[name="expandableIcon"]')
+], NileTableRow.prototype, "_iconSlot", 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":"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","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  PropertyValues,\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  @property({ type: Boolean, reflect: true , attribute: true}) expandable = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) expanded = false;\n\n  @query('slot[name=\"expanded\"]')\n\tprivate _expandedSlot!: HTMLSlotElement;\n\t\n\t@query('slot[name=\"expandableIcon\"]')\n\tprivate _iconSlot!: HTMLSlotElement;\n\n\tprivate tableBodyHasExpandable: any = this.closest('nile-table-body');\n\n\tprivate _fallbackIcon?: HTMLElement | null;\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  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n\tprotected firstUpdated(): void {\n\t\tthis._fallbackIcon = this.renderRoot?.querySelector('nile-icon') ?? null;\n\t}\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\tprotected updated(changedProperties: PropertyValues): void {\n\t\tif (!changedProperties.has('expandable') || !this._iconSlot) return;\n\n\t\tconst assigned = this._iconSlot.assignedElements();\n\t\tconst hasAssigned = assigned.length > 0;\n\t\tconst displayValue = this.expandable ? '' : 'none';\n\n\t\tif (hasAssigned) {\n\t\t\tfor (const el of assigned) {\n\t\t\t\t(el as HTMLElement).style.display = displayValue;\n\t\t\t}\n\t\t} else if (this._fallbackIcon) {\n\t\t\tthis._fallbackIcon.style.display = displayValue;\n\t\t}\n\t}\n\n  public render(): TemplateResult {\n \n\t\tif (!this.expandable && !this.tableBodyHasExpandable.expandableRows) {\n      return html`\n        <slot\n          part=\"nile-row\"\n          @nile-click-sort=\"${this.handleSortingAlter}\"\n        ></slot>\n      `;\n    }\n  \n \n    return html`\n      <div part=\"row-container\" class=\"row-container\">\n        <div\n          part=\"nile-row\"\n          class=\"row expandable ${this.expanded ? 'expanded' : ''}\"\n          @nile-click-sort=\"${this.handleSortingAlter}\"\n        >\n          <slot\n\t\t\t\t\t\tname=\"expandableIcon\"\n\t\t\t\t\t\t@click=${this.toggleExpand} \n\t\t\t\t\t\tclass=\"expand-icon\" \n\t\t\t\t\t\tpart=\"expandable-icon\"\n\t\t\t\t\t>\n            <nile-icon\n              name=\"${this.expanded ? 'chevron-up' : 'chevron-down'}\"\n              role=\"button\"\n              size=\"10\"\n              aria-label=\"${this.expanded ? 'Collapse row' : 'Expand row'}\">\n            </nile-icon>\n          </slot>\n          <slot></slot>\n        </div>\n  \n        ${this.expanded && this.expandable\n          ? html`\n              <div class=\"expanded-content\" part=\"expanded-content\">\n                <slot name=\"expanded\"></slot>\n              </div>`\n          : null}\n      </div>\n    `;\n  }\n  /* #endregion */\n}\n\nexport default NileTableRow;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-row': NileTableRow;\n  }\n}\n"]}