@nuralyui/table 0.0.1

package/components/hy-table-actions.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import '../../button/hy-button.component.js';
+import { Sizes } from '../table.types.js';
+export declare class HyTableActions extends LitElement {
+    selectedItems: number;
+    size: Sizes;
+    _onCancelSelection(): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=hy-table-actions.d.ts.map

package/components/hy-table-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,qBACa,cAAe,SAAQ,UAAU;IAChC,aAAa,EAAG,MAAM,CAAC;IACK,IAAI,EAAE,KAAK,CAAgB;IAEnE,kBAAkB;IAGT,MAAM;IAQf,OAAgB,MAAM,4BAAU;CACjC"}

package/components/hy-table-actions.js

@@ -0,0 +1,40 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './table-actions.style.js';
+import '../../button/hy-button.component.js';
+import { Sizes } from '../table.types.js';
+let HyTableActions = class HyTableActions extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = Sizes.Normal;
+    }
+    _onCancelSelection() {
+        this.dispatchEvent(new CustomEvent('cancel-selection'));
+    }
+    render() {
+        return html `
+      <div class="actions-container">
+        <span>${this.selectedItems} selected</span>
+        <button @click=${this._onCancelSelection}>Cancel</button>
+      </div>
+    `;
+    }
+};
+HyTableActions.styles = styles;
+__decorate([
+    property()
+], HyTableActions.prototype, "selectedItems", void 0);
+__decorate([
+    property({ type: Sizes, reflect: true })
+], HyTableActions.prototype, "size", void 0);
+HyTableActions = __decorate([
+    customElement('hy-table-actions')
+], HyTableActions);
+export { HyTableActions };
+//# sourceMappingURL=hy-table-actions.js.map

package/components/hy-table-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-actions.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-actions.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGxC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAE0C,SAAI,GAAU,KAAK,CAAC,MAAM,CAAC;IAcrE,CAAC;IAZC,kBAAkB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC1D,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,aAAa;yBACT,IAAI,CAAC,kBAAkB;;KAE3C,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,qBAAM,GAAG,MAAO,CAAA;AAdpB;IAAX,QAAQ,EAAE;qDAAwB;AACK;IAAvC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAA4B;AAFxD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAgB1B;SAhBY,cAAc","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './table-actions.style.js';\nimport '../../button/hy-button.component.js';\nimport {Sizes} from '../table.types.js';\n\n@customElement('hy-table-actions')\nexport class HyTableActions extends LitElement {\n  @property() selectedItems!: number;\n  @property({type: Sizes, reflect: true}) size: Sizes = Sizes.Normal;\n\n  _onCancelSelection() {\n    this.dispatchEvent(new CustomEvent('cancel-selection'));\n  }\n  override render() {\n    return html`\n      <div class=\"actions-container\">\n        <span>${this.selectedItems} selected</span>\n        <button @click=${this._onCancelSelection}>Cancel</button>\n      </div>\n    `;\n  }\n  static override styles = styles;\n}\n"]}

package/components/hy-table-content.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { SelectionMode, Sizes, SortAttribute } from '../table.types.js';
+export declare class HyTableContent extends LitElement {
+    headers: [];
+    rows: [];
+    size: Sizes;
+    expandable: string | undefined;
+    selectionMode: SelectionMode | undefined;
+    selectedItems: boolean[];
+    currentPage: number;
+    itemPerPage: number;
+    sortAttribute: SortAttribute;
+    expand: boolean[];
+    globalCheck: HTMLInputElement;
+    willUpdate(changedProperties: Map<string, this>): void;
+    updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void;
+    _showExpandedContent(index: number): void;
+    _onCheckAll(): void;
+    _onCheckOne(checkOneEvent: Event, index: number): void;
+    _onSelectOne(index: number): void;
+    _onUpdateSortOrder(index: number): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=hy-table-content.d.ts.map

package/components/hy-table-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-content.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAgB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAU,aAAa,EAAE,KAAK,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAE1F,qBACa,cAAe,SAAQ,UAAU;IACnB,OAAO,EAAG,EAAE,CAAC;IACb,IAAI,EAAG,EAAE,CAAC;IACK,IAAI,EAAG,KAAK,CAAC;IAC3B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,OAAO,EAAE,CAAM;IAC9B,WAAW,EAAG,MAAM,CAAC;IACrB,WAAW,EAAG,MAAM,CAAC;IACrB,aAAa,EAAG,aAAa,CAAC;IACjC,MAAM,EAAE,OAAO,EAAE,CAAM;IAEhC,WAAW,EAAG,gBAAgB,CAAC;IAEtB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC;IAK/C,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAe9F,oBAAoB,CAAC,KAAK,EAAE,MAAM;IAKlC,WAAW;IAUX,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;IAK/C,YAAY,CAAC,KAAK,EAAE,MAAM;IAI1B,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAIvB,MAAM;IAmFf,OAAgB,MAAM,4BAAU;CACjC"}

package/components/hy-table-content.js

@@ -0,0 +1,168 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styles } from './table-content.style.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { choose } from 'lit/directives/choose.js';
+import { SelectionMode, Sizes, SortOrder } from '../table.types.js';
+let HyTableContent = class HyTableContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedItems = [];
+        this.expand = [];
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('rows')) {
+            this.expand = Array(this.rows.length).fill(false);
+        }
+    }
+    updated(_changedProperties) {
+        if (this.globalCheck && _changedProperties.has('selectedItems')) {
+            if (this.selectedItems.every((isSelected) => isSelected)) {
+                this.globalCheck.checked = true;
+                this.globalCheck.setAttribute('data-indeterminate', 'false');
+            }
+            else if (this.selectedItems.some((isSelected) => isSelected)) {
+                this.globalCheck.checked = false;
+                this.globalCheck.setAttribute('data-indeterminate', 'true');
+            }
+            else {
+                this.globalCheck.checked = false;
+                this.globalCheck.setAttribute('data-indeterminate', 'false');
+            }
+        }
+    }
+    _showExpandedContent(index) {
+        this.expand[index] = !this.expand[index];
+        this.requestUpdate();
+    }
+    _onCheckAll() {
+        this.dispatchEvent(new CustomEvent('check-all', {
+            detail: { isEveryItemChecked: this.selectedItems.every((isSelected) => isSelected) },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    _onCheckOne(checkOneEvent, index) {
+        const checked = checkOneEvent.target.checked;
+        this.dispatchEvent(new CustomEvent('check-one', { detail: { value: checked, index }, composed: true, bubbles: true }));
+    }
+    _onSelectOne(index) {
+        this.dispatchEvent(new CustomEvent('select-one', { detail: { index } }));
+    }
+    _onUpdateSortOrder(index) {
+        this.dispatchEvent(new CustomEvent('update-sort', { detail: { index }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html ` <table>
+      <tr>
+        ${this.expandable || this.selectionMode
+            ? html `<th>
+              ${this.selectionMode == SelectionMode.Multiple
+                ? html `<input id="global-check" type="checkbox" @change=${this._onCheckAll} />`
+                : nothing}
+            </th>`
+            : nothing}
+        ${repeat(this.headers, (header, index) => html `
+              ${this.expandable != header.key
+            ? html `<th @click=${() => this._onUpdateSortOrder(index)}>
+                    <span
+                      >${header.name}${index == this.sortAttribute.index
+                ? choose(this.sortAttribute.order, [
+                    [SortOrder.Default, () => html `<hy-icon name="arrows-v"></hy-icon>`],
+                    [SortOrder.Ascending, () => html `<hy-icon name="long-arrow-up"></hy-icon>`],
+                    [SortOrder.Descending, () => html `<hy-icon name="long-arrow-down"></hy-icon>`],
+                ])
+                : html `<hy-icon name="arrows-v"></hy-icon>`}
+                    </span>
+                  </th>`
+            : nothing}
+            `)}
+      </tr>
+      ${repeat(this.rows, (row, index) => html `
+          <tr>
+            ${this.expandable && !this.selectionMode
+            ? html `
+                    <td @click=${() => this._showExpandedContent(index)} class="expand-icon">
+                      <hy-icon name="${this.expand[index] ? 'angle-up' : 'angle-down'}"></hy-icon>
+                    </td>
+                  `
+            : this.selectionMode
+                ? choose(this.selectionMode, [
+                    [
+                        SelectionMode.Multiple,
+                        () => html `<td>
+                          <input
+                            type="checkbox"
+                            @change=${(checkOneEvent) => this._onCheckOne(checkOneEvent, index)}
+                            .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}
+                          />
+                        </td> `,
+                    ],
+                    [
+                        SelectionMode.Single,
+                        () => html ` <td>
+                        <input
+                          type="radio"
+                          name="item"
+                          @change=${() => this._onSelectOne(index)}
+                          .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}
+                        />
+                      </td>`,
+                    ],
+                ])
+                : nothing}
+            ${repeat(this.headers, (header) => html ` ${this.expandable != header.key ? html `<td>${row[header.key]}</td>` : nothing} `)}
+
+            <tr style="display:${this.expand[index] ? 'table-row' : 'none'};">
+            <td colspan=${this.headers.length}> ${this.expandable}: ${row[this.expandable]}</td>
+            </tr>
+          </tr>
+        `)}
+    </table>`;
+    }
+};
+HyTableContent.styles = styles;
+__decorate([
+    property({ type: Array })
+], HyTableContent.prototype, "headers", void 0);
+__decorate([
+    property({ type: Array })
+], HyTableContent.prototype, "rows", void 0);
+__decorate([
+    property({ type: Sizes, reflect: true })
+], HyTableContent.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], HyTableContent.prototype, "expandable", void 0);
+__decorate([
+    property()
+], HyTableContent.prototype, "selectionMode", void 0);
+__decorate([
+    property()
+], HyTableContent.prototype, "selectedItems", void 0);
+__decorate([
+    property()
+], HyTableContent.prototype, "currentPage", void 0);
+__decorate([
+    property()
+], HyTableContent.prototype, "itemPerPage", void 0);
+__decorate([
+    property()
+], HyTableContent.prototype, "sortAttribute", void 0);
+__decorate([
+    state()
+], HyTableContent.prototype, "expand", void 0);
+__decorate([
+    query('#global-check')
+], HyTableContent.prototype, "globalCheck", void 0);
+HyTableContent = __decorate([
+    customElement('hy-table-content')
+], HyTableContent);
+export { HyTableContent };
+//# sourceMappingURL=hy-table-content.js.map

package/components/hy-table-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-content.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './table-content.style.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport {IHeader, SelectionMode, Sizes, SortAttribute, SortOrder} from '../table.types.js';\n\n@customElement('hy-table-content')\nexport class HyTableContent extends LitElement {\n  @property({type: Array}) headers!: [];\n  @property({type: Array}) rows!: [];\n  @property({type: Sizes, reflect: true}) size!: Sizes;\n  @property({type: String}) expandable: string | undefined;\n  @property() selectionMode: SelectionMode | undefined;\n  @property() selectedItems: boolean[] = [];\n  @property() currentPage!: number;\n  @property() itemPerPage!: number;\n  @property() sortAttribute!: SortAttribute;\n  @state() expand: boolean[] = [];\n  @query('#global-check')\n  globalCheck!: HTMLInputElement;\n\n  override willUpdate(changedProperties: Map<string, this>) {\n    if (changedProperties.has('rows')) {\n      this.expand = Array(this.rows.length).fill(false);\n    }\n  }\n  override updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void {\n    if (this.globalCheck && _changedProperties.has('selectedItems')) {\n      if (this.selectedItems.every((isSelected) => isSelected)) {\n        this.globalCheck.checked = true;\n        this.globalCheck.setAttribute('data-indeterminate', 'false');\n      } else if (this.selectedItems.some((isSelected) => isSelected)) {\n        this.globalCheck.checked = false;\n        this.globalCheck.setAttribute('data-indeterminate', 'true');\n      } else {\n        this.globalCheck.checked = false;\n        this.globalCheck.setAttribute('data-indeterminate', 'false');\n      }\n    }\n  }\n\n  _showExpandedContent(index: number) {\n    this.expand[index] = !this.expand[index];\n    this.requestUpdate();\n  }\n\n  _onCheckAll() {\n    this.dispatchEvent(\n      new CustomEvent('check-all', {\n        detail: {isEveryItemChecked: this.selectedItems.every((isSelected) => isSelected)},\n        composed: true,\n        bubbles: true,\n      })\n    );\n  }\n\n  _onCheckOne(checkOneEvent: Event, index: number) {\n    const checked = (checkOneEvent.target as HTMLInputElement).checked;\n    this.dispatchEvent(new CustomEvent('check-one', {detail: {value: checked, index}, composed: true, bubbles: true}));\n  }\n\n  _onSelectOne(index: number) {\n    this.dispatchEvent(new CustomEvent('select-one', {detail: {index}}));\n  }\n\n  _onUpdateSortOrder(index: number) {\n    this.dispatchEvent(new CustomEvent('update-sort', {detail: {index}, bubbles: true, composed: true}));\n  }\n\n  override render() {\n    return html` <table>\n      <tr>\n        ${this.expandable || this.selectionMode\n          ? html`<th>\n              ${this.selectionMode == SelectionMode.Multiple\n                ? html`<input id=\"global-check\" type=\"checkbox\" @change=${this._onCheckAll} />`\n                : nothing}\n            </th>`\n          : nothing}\n        ${repeat(\n          this.headers,\n          (header: IHeader, index) =>\n            html`\n              ${this.expandable != header.key\n                ? html`<th @click=${() => this._onUpdateSortOrder(index)}>\n                    <span\n                      >${header.name}${index == this.sortAttribute.index\n                        ? choose(this.sortAttribute.order, [\n                            [SortOrder.Default, () => html`<hy-icon name=\"arrows-v\"></hy-icon>`],\n                            [SortOrder.Ascending, () => html`<hy-icon name=\"long-arrow-up\"></hy-icon>`],\n                            [SortOrder.Descending, () => html`<hy-icon name=\"long-arrow-down\"></hy-icon>`],\n                          ])\n                        : html`<hy-icon name=\"arrows-v\"></hy-icon>`}\n                    </span>\n                  </th>`\n                : nothing}\n            `\n        )}\n      </tr>\n      ${repeat(\n        this.rows,\n        (row, index) => html`\n          <tr>\n            ${\n              this.expandable && !this.selectionMode\n                ? html`\n                    <td @click=${() => this._showExpandedContent(index)} class=\"expand-icon\">\n                      <hy-icon name=\"${this.expand[index] ? 'angle-up' : 'angle-down'}\"></hy-icon>\n                    </td>\n                  `\n                : this.selectionMode\n                ? choose(this.selectionMode, [\n                    [\n                      SelectionMode.Multiple,\n                      () =>\n                        html`<td>\n                          <input\n                            type=\"checkbox\"\n                            @change=${(checkOneEvent: Event) => this._onCheckOne(checkOneEvent, index)}\n                            .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}\n                          />\n                        </td> `,\n                    ],\n                    [\n                      SelectionMode.Single,\n                      () => html` <td>\n                        <input\n                          type=\"radio\"\n                          name=\"item\"\n                          @change=${() => this._onSelectOne(index)}\n                          .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}\n                        />\n                      </td>`,\n                    ],\n                  ])\n                : nothing\n            }\n            ${repeat(\n              this.headers,\n              (header: IHeader) =>\n                html` ${this.expandable != header.key ? html`<td>${row[header.key]}</td>` : nothing} `\n            )}\n\n            <tr style=\"display:${this.expand[index] ? 'table-row' : 'none'};\">\n            <td colspan=${this.headers.length}> ${this.expandable}: ${row[this.expandable!]}</td>\n            </tr>\n          </tr>\n        `\n      )}\n    </table>`;\n  }\n\n  static override styles = styles;\n}\n"]}

package/components/hy-table-filter.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class HyTableFilter extends LitElement {
+    showInput: boolean;
+    value: string;
+    updated(): void;
+    _handleInput(): void;
+    _onChange(inputChangeEvent: Event): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=hy-table-filter.d.ts.map

package/components/hy-table-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAK9C,qBACa,aAAc,SAAQ,UAAU;IAE3C,SAAS,UAAS;IAGlB,KAAK,SAAgB;IAEZ,OAAO;IAMhB,YAAY;IAIZ,SAAS,CAAC,gBAAgB,EAAE,KAAK;IAIxB,MAAM;IAiBf,OAAgB,MAAM,4BAAU;CACjC"}

package/components/hy-table-filter.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './table-filter.style.js';
+import { EMPTY_STRING } from '../table.types.js';
+let HyTableFilter = class HyTableFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showInput = false;
+        this.value = EMPTY_STRING;
+    }
+    updated() {
+        var _a, _b;
+        if (this.showInput) {
+            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    _handleInput() {
+        this.showInput = !this.showInput;
+    }
+    _onChange(inputChangeEvent) {
+        this.value = inputChangeEvent.target.value;
+        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="filter-container">
+        ${this.showInput
+            ? html ` <hy-icon name="search" class="search-icon"></hy-icon>
+              <input
+                type="text"
+                placeholder="search"
+                @blur=${!this.value.trim() ? this._handleInput : nothing}
+                @input=${this._onChange}
+              />`
+            : html `<div class="icon-container" @click=${this._handleInput}>
+              <hy-icon name="search"></hy-icon>
+            </div> `}
+      </div>
+    `;
+    }
+};
+HyTableFilter.styles = styles;
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HyTableFilter.prototype, "showInput", void 0);
+__decorate([
+    state()
+], HyTableFilter.prototype, "value", void 0);
+HyTableFilter = __decorate([
+    customElement('hy-table-filter')
+], HyTableFilter);
+export { HyTableFilter };
+//# sourceMappingURL=hy-table-filter.js.map

package/components/hy-table-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-filter.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-filter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAG/C,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAEE,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,YAAY,CAAC;IAkCvB,CAAC;IAhCU,OAAO;;QACd,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SAClD;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,SAAS,CAAC,gBAAuB;QAC/B,IAAI,CAAC,KAAK,GAAI,gBAAgB,CAAC,MAA2B,CAAC,KAAK,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;wBAIQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;yBAC/C,IAAI,CAAC,SAAS;iBACtB;YACP,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,YAAY;;oBAEnD;;KAEf,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,oBAAM,GAAG,MAAO,CAAA;AApChC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACvB;AAGlB;IADC,KAAK,EAAE;4CACa;AALV,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuCzB;SAvCY,aAAa","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './table-filter.style.js';\nimport {EMPTY_STRING} from '../table.types.js';\n\n@customElement('hy-table-filter')\nexport class HyTableFilter extends LitElement {\n  @property({reflect: true, type: Boolean})\n  showInput = false;\n\n  @state()\n  value = EMPTY_STRING;\n\n  override updated() {\n    if (this.showInput) {\n      this.shadowRoot?.querySelector('input')?.focus();\n    }\n  }\n\n  _handleInput() {\n    this.showInput = !this.showInput;\n  }\n\n  _onChange(inputChangeEvent: Event) {\n    this.value = (inputChangeEvent.target as HTMLInputElement).value;\n    this.dispatchEvent(new CustomEvent('value-change', {detail: {value: this.value}, bubbles: true, composed: true}));\n  }\n  override render() {\n    return html`\n      <div class=\"filter-container\">\n        ${this.showInput\n          ? html` <hy-icon name=\"search\" class=\"search-icon\"></hy-icon>\n              <input\n                type=\"text\"\n                placeholder=\"search\"\n                @blur=${!this.value.trim() ? this._handleInput : nothing}\n                @input=${this._onChange}\n              />`\n          : html`<div class=\"icon-container\" @click=${this._handleInput}>\n              <hy-icon name=\"search\"></hy-icon>\n            </div> `}\n      </div>\n    `;\n  }\n  static override styles = styles;\n}\n"]}

package/components/hy-table-pagination.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { Sizes } from '../table.types.js';
+export declare class HyTablePagination extends LitElement {
+    numberOfItems: number;
+    itemPerPage: number[];
+    selectedItemPerPage: number;
+    currentPage: number;
+    size: Sizes;
+    numberOfPages: number;
+    fromItem: number;
+    toItem: number;
+    enableNext: boolean;
+    enablePrevious: boolean;
+    willUpdate(_changedProperties: PropertyValueMap<this>): void;
+    _handleItemPerPageChange(itemPerPageEvent: Event): void;
+    _nextPage(): void;
+    _previousPage(): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=hy-table-pagination.d.ts.map

package/components/hy-table-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAgB,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,aAAa,EAAG,MAAM,CAAC;IAEvB,WAAW,EAAG,MAAM,EAAE,CAAC;IAEvB,mBAAmB,EAAG,MAAM,CAAC;IAE7B,WAAW,EAAG,MAAM,CAAC;IACmB,IAAI,EAAG,KAAK,CAAC;IAGrD,aAAa,EAAG,MAAM,CAAC;IAEvB,QAAQ,EAAG,MAAM,CAAC;IAElB,MAAM,EAAG,MAAM,CAAC;IAEhB,UAAU,UAAQ;IAElB,cAAc,UAAQ;IAEb,UAAU,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAYrE,wBAAwB,CAAC,gBAAgB,EAAE,KAAK;IAKhD,SAAS;IAIT,aAAa;IAKJ,MAAM;IAkCf,OAAgB,MAAM,4BAAU;CACjC"}

package/components/hy-table-pagination.js

@@ -0,0 +1,111 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './table-pagination.style.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { Sizes } from '../table.types.js';
+let HyTablePagination = class HyTablePagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.enableNext = true;
+        this.enablePrevious = true;
+    }
+    willUpdate(_changedProperties) {
+        this.numberOfPages = Math.ceil(this.numberOfItems / this.selectedItemPerPage);
+        this.fromItem =
+            this.currentPage > 0 ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1 : 0;
+        this.toItem =
+            this.currentPage * this.selectedItemPerPage <= this.numberOfItems
+                ? this.currentPage * this.selectedItemPerPage
+                : this.numberOfItems;
+        this.enableNext = this.toItem < this.numberOfItems;
+        this.enablePrevious = this.fromItem > 1;
+    }
+    _handleItemPerPageChange(itemPerPageEvent) {
+        this.selectedItemPerPage = +itemPerPageEvent.target.value;
+        this.dispatchEvent(new CustomEvent('item-per-page', { detail: { selectedItemPerPage: this.selectedItemPerPage } }));
+    }
+    _nextPage() {
+        this.currentPage++;
+        this.dispatchEvent(new CustomEvent('update-page', { detail: { page: this.currentPage } }));
+    }
+    _previousPage() {
+        this.currentPage--;
+        this.dispatchEvent(new CustomEvent('update-page', { detail: { page: this.currentPage } }));
+    }
+    render() {
+        return html `
+      <div class="pagination-container">
+        <div class="left-content">
+          <span class="select-details">
+            Items per page:
+            <select @change=${this._handleItemPerPageChange}>
+              ${repeat(this.itemPerPage, (item) => html ` <option value=${item}>${item}</option> `)}
+            </select>
+          </span>
+          <span class="items-details"> ${this.fromItem} - ${this.toItem} of ${this.numberOfItems} items</span>
+        </div>
+
+        <div class="right-content">
+          <span class="page-details"> ${this.currentPage} of ${this.numberOfPages} pages </span>
+          <span class="icon-container">
+            <hy-icon
+              class="left-arrow"
+              data-enabled=${this.enablePrevious}
+              name="caret-left"
+              @click=${this.enablePrevious ? this._previousPage : nothing}
+            ></hy-icon>
+
+            <hy-icon
+              class="right-arrow"
+              data-enabled=${this.enableNext}
+              name="caret-right"
+              @click=${this.enableNext ? this._nextPage : nothing}
+            ></hy-icon>
+          </span>
+        </div>
+      </div>
+    `;
+    }
+};
+HyTablePagination.styles = styles;
+__decorate([
+    property()
+], HyTablePagination.prototype, "numberOfItems", void 0);
+__decorate([
+    property()
+], HyTablePagination.prototype, "itemPerPage", void 0);
+__decorate([
+    property()
+], HyTablePagination.prototype, "selectedItemPerPage", void 0);
+__decorate([
+    property()
+], HyTablePagination.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Sizes, reflect: true })
+], HyTablePagination.prototype, "size", void 0);
+__decorate([
+    state()
+], HyTablePagination.prototype, "numberOfPages", void 0);
+__decorate([
+    state()
+], HyTablePagination.prototype, "fromItem", void 0);
+__decorate([
+    state()
+], HyTablePagination.prototype, "toItem", void 0);
+__decorate([
+    state()
+], HyTablePagination.prototype, "enableNext", void 0);
+__decorate([
+    state()
+], HyTablePagination.prototype, "enablePrevious", void 0);
+HyTablePagination = __decorate([
+    customElement('hy-table-pagination')
+], HyTablePagination);
+export { HyTablePagination };
+//# sourceMappingURL=hy-table-pagination.js.map

package/components/hy-table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-table-pagination.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './table-pagination.style.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {Sizes} from '../table.types.js';\n\n@customElement('hy-table-pagination')\nexport class HyTablePagination extends LitElement {\n  @property()\n  numberOfItems!: number;\n  @property()\n  itemPerPage!: number[];\n  @property()\n  selectedItemPerPage!: number;\n  @property()\n  currentPage!: number;\n  @property({type: Sizes, reflect: true}) size!: Sizes;\n\n  @state()\n  numberOfPages!: number;\n  @state()\n  fromItem!: number;\n  @state()\n  toItem!: number;\n  @state()\n  enableNext = true;\n  @state()\n  enablePrevious = true;\n\n  override willUpdate(_changedProperties: PropertyValueMap<this>): void {\n    this.numberOfPages = Math.ceil(this.numberOfItems / this.selectedItemPerPage);\n    this.fromItem =\n      this.currentPage > 0 ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1 : 0;\n    this.toItem =\n      this.currentPage * this.selectedItemPerPage <= this.numberOfItems\n        ? this.currentPage * this.selectedItemPerPage\n        : this.numberOfItems;\n    this.enableNext = this.toItem < this.numberOfItems;\n    this.enablePrevious = this.fromItem > 1;\n  }\n\n  _handleItemPerPageChange(itemPerPageEvent: Event) {\n    this.selectedItemPerPage = +(itemPerPageEvent.target as HTMLSelectElement).value;\n    this.dispatchEvent(new CustomEvent('item-per-page', {detail: {selectedItemPerPage: this.selectedItemPerPage}}));\n  }\n\n  _nextPage() {\n    this.currentPage++;\n    this.dispatchEvent(new CustomEvent('update-page', {detail: {page: this.currentPage}}));\n  }\n  _previousPage() {\n    this.currentPage--;\n    this.dispatchEvent(new CustomEvent('update-page', {detail: {page: this.currentPage}}));\n  }\n\n  override render() {\n    return html`\n      <div class=\"pagination-container\">\n        <div class=\"left-content\">\n          <span class=\"select-details\">\n            Items per page:\n            <select @change=${this._handleItemPerPageChange}>\n              ${repeat(this.itemPerPage, (item) => html` <option value=${item}>${item}</option> `)}\n            </select>\n          </span>\n          <span class=\"items-details\"> ${this.fromItem} - ${this.toItem} of ${this.numberOfItems} items</span>\n        </div>\n\n        <div class=\"right-content\">\n          <span class=\"page-details\"> ${this.currentPage} of ${this.numberOfPages} pages </span>\n          <span class=\"icon-container\">\n            <hy-icon\n              class=\"left-arrow\"\n              data-enabled=${this.enablePrevious}\n              name=\"caret-left\"\n              @click=${this.enablePrevious ? this._previousPage : nothing}\n            ></hy-icon>\n\n            <hy-icon\n              class=\"right-arrow\"\n              data-enabled=${this.enableNext}\n              name=\"caret-right\"\n              @click=${this.enableNext ? this._nextPage : nothing}\n            ></hy-icon>\n          </span>\n        </div>\n      </div>\n    `;\n  }\n  static override styles = styles;\n}\n"]}

package/components/table-actions.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=table-actions.style.d.ts.map

package/components/table-actions.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-actions.style.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.style.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,MAAM,2BAAsC,CAAC"}

package/components/table-actions.style.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+import { styleVariables } from './table-actions.variables.js';
+const tableActionsStyle = css `
+  .actions-container {
+    background-color: var(--hybrid-actions-background-color);
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    color: var(--hybrid-actions-text-color);
+  }
+
+  .actions-container button {
+    cursor: pointer;
+    border: none;
+    color: var(--hybrid-actions-text-color);
+    background-color: var(--hybrid-actions-background-color);
+  }
+
+  .actions-container {
+    padding: 10px;
+  }
+  :host([size='small']) .actions-container {
+    padding: 5px;
+  }
+  :host([size='large']) .actions-container {
+    padding: 15px;
+  }
+`;
+export const styles = [tableActionsStyle, styleVariables];
+//# sourceMappingURL=table-actions.style.js.map

package/components/table-actions.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-actions.style.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './table-actions.variables.js';\n\nconst tableActionsStyle = css`\n  .actions-container {\n    background-color: var(--hybrid-actions-background-color);\n    padding: 10px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: space-between;\n    color: var(--hybrid-actions-text-color);\n  }\n\n  .actions-container button {\n    cursor: pointer;\n    border: none;\n    color: var(--hybrid-actions-text-color);\n    background-color: var(--hybrid-actions-background-color);\n  }\n\n  .actions-container {\n    padding: 10px;\n  }\n  :host([size='small']) .actions-container {\n    padding: 5px;\n  }\n  :host([size='large']) .actions-container {\n    padding: 15px;\n  }\n`;\n\nexport const styles = [tableActionsStyle, styleVariables];\n"]}

package/components/table-actions.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=table-actions.variables.d.ts.map

package/components/table-actions.variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-actions.variables.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAU1B,CAAC"}

package/components/table-actions.variables.js

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :host {
+    --hybrid-actions-text-color: #ffffff;
+    --hybrid-actions-background-color: #0f62fe;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+    }
+  }
+`;
+//# sourceMappingURL=table-actions.variables.js.map

package/components/table-actions.variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-actions.variables.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;CAUhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    --hybrid-actions-text-color: #ffffff;\n    --hybrid-actions-background-color: #0f62fe;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n    }\n  }\n`;\n"]}

package/components/table-content.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=table-content.style.d.ts.map

package/components/table-content.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-content.style.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-content.style.ts"],"names":[],"mappings":"AA6EA,eAAO,MAAM,MAAM,2BAAsC,CAAC"}