@triptease/tt-table-wrapper 1.0.2

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/TtTableWrapper.js

@@ -0,0 +1,90 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtTableWrapper = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const styles_js_1 = require("./styles.js");
+require("@triptease/tt-paginator");
+const ARIA_SORT_MAP = {
+    asc: 'ascending',
+    desc: 'descending',
+    none: '',
+};
+const NEXT_DIRECTION = {
+    none: 'asc',
+    asc: 'desc',
+    desc: 'none',
+};
+class TtTableWrapper extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.totalRows = 0;
+        this.pageSize = 10;
+        this.sortState = { key: '', direction: 'none' };
+        this.headerClickHandlers = new Map();
+    }
+    render() {
+        return (0, lit_1.html) `
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="pagination-row">
+        <tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupHandlers();
+    }
+    handleSlotChange() {
+        this.cleanupHandlers();
+        this.sortState = { key: '', direction: 'none' };
+        const headers = this.querySelectorAll('th[data-sort-key]');
+        for (const header of headers) {
+            const handler = () => this.handleSortClick(header);
+            this.headerClickHandlers.set(header, handler);
+            header.addEventListener('click', handler);
+        }
+    }
+    handleSortClick(header) {
+        const key = header.dataset.sortKey;
+        const isSameColumn = key === this.sortState.key;
+        const direction = isSameColumn ? NEXT_DIRECTION[this.sortState.direction] : 'asc';
+        this.clearAriaSortFromAll();
+        if (direction !== 'none') {
+            header.setAttribute('aria-sort', ARIA_SORT_MAP[direction]);
+        }
+        this.sortState = { key, direction };
+        this.dispatchEvent(new CustomEvent('sort-change', {
+            detail: { key, direction },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    clearAriaSortFromAll() {
+        const headers = this.querySelectorAll('th[aria-sort]');
+        for (const header of headers) {
+            header.removeAttribute('aria-sort');
+        }
+    }
+    cleanupHandlers() {
+        for (const [header, handler] of this.headerClickHandlers) {
+            header.removeEventListener('click', handler);
+        }
+        this.headerClickHandlers.clear();
+    }
+}
+exports.TtTableWrapper = TtTableWrapper;
+TtTableWrapper.styles = styles_js_1.styles;
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, attribute: 'total-rows' })
+], TtTableWrapper.prototype, "totalRows", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, attribute: 'page-size' })
+], TtTableWrapper.prototype, "pageSize", void 0);
+//# sourceMappingURL=TtTableWrapper.js.map

package/dist/cjs/src/TtTableWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtTableWrapper.js","sourceRoot":"","sources":["../../../src/TtTableWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\nimport type { SortDirection, SortState } from './types.js';\nimport '@triptease/tt-paginator';\n\nconst ARIA_SORT_MAP: Record<SortDirection, string> = {\n  asc: 'ascending',\n  desc: 'descending',\n  none: '',\n};\n\nconst NEXT_DIRECTION: Record<SortDirection, SortDirection> = {\n  none: 'asc',\n  asc: 'desc',\n  desc: 'none',\n};\n\nexport class TtTableWrapper extends LitElement {\n  static styles = styles;\n\n  @property({ type: Number, attribute: 'total-rows' })\n  totalRows = 0;\n\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  private sortState: SortState = { key: '', direction: 'none' };\n  private headerClickHandlers = new Map<HTMLElement, () => void>();\n\n  render() {\n    return html`\n      <slot @slotchange=${this.handleSlotChange}></slot>\n      <div class=\"pagination-row\">\n        <tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>\n      </div>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupHandlers();\n  }\n\n  private handleSlotChange() {\n    this.cleanupHandlers();\n    this.sortState = { key: '', direction: 'none' };\n\n    const headers = this.querySelectorAll<HTMLElement>('th[data-sort-key]');\n    for (const header of headers) {\n      const handler = () => this.handleSortClick(header);\n      this.headerClickHandlers.set(header, handler);\n      header.addEventListener('click', handler);\n    }\n  }\n\n  private handleSortClick(header: HTMLElement) {\n    const key = header.dataset.sortKey!;\n    const isSameColumn = key === this.sortState.key;\n\n    const direction = isSameColumn ? NEXT_DIRECTION[this.sortState.direction] : 'asc';\n\n    this.clearAriaSortFromAll();\n\n    if (direction !== 'none') {\n      header.setAttribute('aria-sort', ARIA_SORT_MAP[direction]);\n    }\n\n    this.sortState = { key, direction };\n\n    this.dispatchEvent(\n      new CustomEvent('sort-change', {\n        detail: { key, direction },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private clearAriaSortFromAll() {\n    const headers = this.querySelectorAll('th[aria-sort]');\n    for (const header of headers) {\n      header.removeAttribute('aria-sort');\n    }\n  }\n\n  private cleanupHandlers() {\n    for (const [header, handler] of this.headerClickHandlers) {\n      header.removeEventListener('click', handler);\n    }\n    this.headerClickHandlers.clear();\n  }\n}\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtTableWrapper = void 0;
+var tt_table_wrapper_js_1 = require("./tt-table-wrapper.js");
+Object.defineProperty(exports, "TtTableWrapper", { enumerable: true, get: function () { return tt_table_wrapper_js_1.TtTableWrapper; } });
+__exportStar(require("./types.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,6DAAuD;AAA9C,qHAAA,cAAc,OAAA;AACvB,6CAA2B","sourcesContent":["export { TtTableWrapper } from './tt-table-wrapper.js';\nexport * from './types.js';\n"]}

package/dist/cjs/src/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const lit_1 = require("lit");
+const lit_2 = require("@triptease/stylesheet/lit");
+exports.styles = [
+    lit_2.styles,
+    (0, lit_1.css) `
+    :host {
+      display: block;
+    }
+
+    .pagination-row {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: var(--space-scale-1);
+    }
+  `,
+];
+//# sourceMappingURL=styles.js.map

package/dist/cjs/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAC1B,mDAAiE;AAEpD,QAAA,MAAM,GAAG;IACpB,YAAU;IACV,IAAA,SAAG,EAAA;;;;;;;;;;GAUF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n  baseStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .pagination-row {\n      display: flex;\n      justify-content: flex-end;\n      padding-top: var(--space-scale-1);\n    }\n  `,\n];\n"]}

package/dist/cjs/src/tt-table-wrapper.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtTableWrapper = void 0;
+const TtTableWrapper_js_1 = require("./TtTableWrapper.js");
+Object.defineProperty(exports, "TtTableWrapper", { enumerable: true, get: function () { return TtTableWrapper_js_1.TtTableWrapper; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-table-wrapper')) {
+        window.customElements.define('tt-table-wrapper', TtTableWrapper_js_1.TtTableWrapper);
+    }
+}
+//# sourceMappingURL=tt-table-wrapper.js.map

package/dist/cjs/src/tt-table-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table-wrapper.js","sourceRoot":"","sources":["../../../src/tt-table-wrapper.ts"],"names":[],"mappings":";;;AAAA,2DAAqD;AAQ5C,+FARA,kCAAc,OAQA;AANvB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;QACnD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,kCAAc,CAAC,CAAC;IACnE,CAAC;AACH,CAAC","sourcesContent":["import { TtTableWrapper } from './TtTableWrapper.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-table-wrapper')) {\n    window.customElements.define('tt-table-wrapper', TtTableWrapper);\n  }\n}\n\nexport { TtTableWrapper };\n"]}

package/dist/cjs/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtTableWrapper } from './TtTableWrapper.js';\n\nexport type SortDirection = 'asc' | 'desc' | 'none';\n\nexport interface SortState {\n  key: string;\n  direction: SortDirection;\n}\n\ninterface TtTableWrapperExternalAttributes {\n  'total-rows'?: number;\n  'page-size'?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-table-wrapper': TtTableWrapper;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-table-wrapper': TtTableWrapperExternalAttributes & { children: Element; style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-table-wrapper': TtTableWrapperExternalAttributes & {\n          children: React.ReactNode;\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/TtTableWrapper.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import '@triptease/tt-paginator';
+export declare class TtTableWrapper extends LitElement {
+    static styles: import("lit").CSSResult[];
+    totalRows: number;
+    pageSize: number;
+    private sortState;
+    private headerClickHandlers;
+    render(): import("lit-html").TemplateResult<1>;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    private handleSortClick;
+    private clearAriaSortFromAll;
+    private cleanupHandlers;
+}

package/dist/esm/src/TtTableWrapper.js

@@ -0,0 +1,86 @@
+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 { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styles } from './styles.js';
+import '@triptease/tt-paginator';
+const ARIA_SORT_MAP = {
+    asc: 'ascending',
+    desc: 'descending',
+    none: '',
+};
+const NEXT_DIRECTION = {
+    none: 'asc',
+    asc: 'desc',
+    desc: 'none',
+};
+export class TtTableWrapper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.totalRows = 0;
+        this.pageSize = 10;
+        this.sortState = { key: '', direction: 'none' };
+        this.headerClickHandlers = new Map();
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="pagination-row">
+        <tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupHandlers();
+    }
+    handleSlotChange() {
+        this.cleanupHandlers();
+        this.sortState = { key: '', direction: 'none' };
+        const headers = this.querySelectorAll('th[data-sort-key]');
+        for (const header of headers) {
+            const handler = () => this.handleSortClick(header);
+            this.headerClickHandlers.set(header, handler);
+            header.addEventListener('click', handler);
+        }
+    }
+    handleSortClick(header) {
+        const key = header.dataset.sortKey;
+        const isSameColumn = key === this.sortState.key;
+        const direction = isSameColumn ? NEXT_DIRECTION[this.sortState.direction] : 'asc';
+        this.clearAriaSortFromAll();
+        if (direction !== 'none') {
+            header.setAttribute('aria-sort', ARIA_SORT_MAP[direction]);
+        }
+        this.sortState = { key, direction };
+        this.dispatchEvent(new CustomEvent('sort-change', {
+            detail: { key, direction },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    clearAriaSortFromAll() {
+        const headers = this.querySelectorAll('th[aria-sort]');
+        for (const header of headers) {
+            header.removeAttribute('aria-sort');
+        }
+    }
+    cleanupHandlers() {
+        for (const [header, handler] of this.headerClickHandlers) {
+            header.removeEventListener('click', handler);
+        }
+        this.headerClickHandlers.clear();
+    }
+}
+TtTableWrapper.styles = styles;
+__decorate([
+    property({ type: Number, attribute: 'total-rows' })
+], TtTableWrapper.prototype, "totalRows", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-size' })
+], TtTableWrapper.prototype, "pageSize", void 0);
+//# sourceMappingURL=TtTableWrapper.js.map

package/dist/esm/src/TtTableWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtTableWrapper.js","sourceRoot":"","sources":["../../../src/TtTableWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\nimport type { SortDirection, SortState } from './types.js';\nimport '@triptease/tt-paginator';\n\nconst ARIA_SORT_MAP: Record<SortDirection, string> = {\n  asc: 'ascending',\n  desc: 'descending',\n  none: '',\n};\n\nconst NEXT_DIRECTION: Record<SortDirection, SortDirection> = {\n  none: 'asc',\n  asc: 'desc',\n  desc: 'none',\n};\n\nexport class TtTableWrapper extends LitElement {\n  static styles = styles;\n\n  @property({ type: Number, attribute: 'total-rows' })\n  totalRows = 0;\n\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  private sortState: SortState = { key: '', direction: 'none' };\n  private headerClickHandlers = new Map<HTMLElement, () => void>();\n\n  render() {\n    return html`\n      <slot @slotchange=${this.handleSlotChange}></slot>\n      <div class=\"pagination-row\">\n        <tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>\n      </div>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupHandlers();\n  }\n\n  private handleSlotChange() {\n    this.cleanupHandlers();\n    this.sortState = { key: '', direction: 'none' };\n\n    const headers = this.querySelectorAll<HTMLElement>('th[data-sort-key]');\n    for (const header of headers) {\n      const handler = () => this.handleSortClick(header);\n      this.headerClickHandlers.set(header, handler);\n      header.addEventListener('click', handler);\n    }\n  }\n\n  private handleSortClick(header: HTMLElement) {\n    const key = header.dataset.sortKey!;\n    const isSameColumn = key === this.sortState.key;\n\n    const direction = isSameColumn ? NEXT_DIRECTION[this.sortState.direction] : 'asc';\n\n    this.clearAriaSortFromAll();\n\n    if (direction !== 'none') {\n      header.setAttribute('aria-sort', ARIA_SORT_MAP[direction]);\n    }\n\n    this.sortState = { key, direction };\n\n    this.dispatchEvent(\n      new CustomEvent('sort-change', {\n        detail: { key, direction },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private clearAriaSortFromAll() {\n    const headers = this.querySelectorAll('th[aria-sort]');\n    for (const header of headers) {\n      header.removeAttribute('aria-sort');\n    }\n  }\n\n  private cleanupHandlers() {\n    for (const [header, handler] of this.headerClickHandlers) {\n      header.removeEventListener('click', handler);\n    }\n    this.headerClickHandlers.clear();\n  }\n}\n"]}

package/dist/esm/src/index.d.ts

@@ -0,0 +1,2 @@
+export { TtTableWrapper } from './tt-table-wrapper.js';
+export * from './types.js';

package/dist/esm/src/index.js

@@ -0,0 +1,3 @@
+export { TtTableWrapper } from './tt-table-wrapper.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,cAAc,YAAY,CAAC","sourcesContent":["export { TtTableWrapper } from './tt-table-wrapper.js';\nexport * from './types.js';\n"]}

package/dist/esm/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult[];

package/dist/esm/src/styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+import { styles as baseStyles } from '@triptease/stylesheet/lit';
+export const styles = [
+    baseStyles,
+    css `
+    :host {
+      display: block;
+    }
+
+    .pagination-row {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: var(--space-scale-1);
+    }
+  `,
+];
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;GAUF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n  baseStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .pagination-row {\n      display: flex;\n      justify-content: flex-end;\n      padding-top: var(--space-scale-1);\n    }\n  `,\n];\n"]}

package/dist/esm/src/tt-table-wrapper.d.ts

@@ -0,0 +1,2 @@
+import { TtTableWrapper } from './TtTableWrapper.js';
+export { TtTableWrapper };

package/dist/esm/src/tt-table-wrapper.js

@@ -0,0 +1,8 @@
+import { TtTableWrapper } from './TtTableWrapper.js';
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-table-wrapper')) {
+        window.customElements.define('tt-table-wrapper', TtTableWrapper);
+    }
+}
+export { TtTableWrapper };
+//# sourceMappingURL=tt-table-wrapper.js.map

package/dist/esm/src/tt-table-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-table-wrapper.js","sourceRoot":"","sources":["../../../src/tt-table-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;QACnD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACnE,CAAC;AACH,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { TtTableWrapper } from './TtTableWrapper.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-table-wrapper')) {\n    window.customElements.define('tt-table-wrapper', TtTableWrapper);\n  }\n}\n\nexport { TtTableWrapper };\n"]}

package/dist/esm/src/types.d.ts

@@ -0,0 +1,36 @@
+import { TtTableWrapper } from './TtTableWrapper.js';
+export type SortDirection = 'asc' | 'desc' | 'none';
+export interface SortState {
+    key: string;
+    direction: SortDirection;
+}
+interface TtTableWrapperExternalAttributes {
+    'total-rows'?: number;
+    'page-size'?: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tt-table-wrapper': TtTableWrapper;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'tt-table-wrapper': TtTableWrapperExternalAttributes & {
+                children: Element;
+                style?: string;
+            };
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'tt-table-wrapper': TtTableWrapperExternalAttributes & {
+                    children: React.ReactNode;
+                    key?: string;
+                    ref?: React.Ref<unknown>;
+                    style?: React.CSSProperties;
+                };
+            }
+        }
+    }
+}
+export {};

package/dist/esm/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtTableWrapper } from './TtTableWrapper.js';\n\nexport type SortDirection = 'asc' | 'desc' | 'none';\n\nexport interface SortState {\n  key: string;\n  direction: SortDirection;\n}\n\ninterface TtTableWrapperExternalAttributes {\n  'total-rows'?: number;\n  'page-size'?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-table-wrapper': TtTableWrapper;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-table-wrapper': TtTableWrapperExternalAttributes & { children: Element; style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-table-wrapper': TtTableWrapperExternalAttributes & {\n          children: React.ReactNode;\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@triptease/tt-table-wrapper",
+  "description": "Table wrapper web component with sorting and pagination",
+  "license": "MIT",
+  "author": "@triptease",
+  "version": "1.0.2",
+  "type": "module",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    },
+    "./types": {
+      "types": "./dist/esm/src/types.d.ts",
+      "import": "./dist/esm/src/types.js",
+      "require": "./dist/cjs/src/types.js"
+    }
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "yarn build:node && yarn build:web && yarn analyze --exclude dist",
+    "build:esm": "tsc",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
+    "build:node:watch": "tsc --watch",
+    "build:web": "node ../../scripts/esbuild.mjs",
+    "prepublish": "tsc && yarn analyze --exclude dist",
+    "test": "yarn playwright install && vitest run --config=./vitest.browser.config.mjs",
+    "test:watch": "vitest --config=./vitest.browser.config.mjs"
+  },
+  "dependencies": {
+    "@triptease/stylesheet": "2.1.1",
+    "@triptease/tt-paginator": "1.0.3",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "concurrently": "^8.2.2",
+    "playwright": "^1.57.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  }
+}