@krumio/trailhand-ui 1.10.1 → 1.11.0

package/dist/components/pagination/pagination.js

@@ -0,0 +1,221 @@
+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, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import 'iconify-icon';
+import { addIcon } from 'iconify-icon';
+import chevronLeft from '@iconify/icons-heroicons/chevron-left-20-solid';
+import chevronRight from '@iconify/icons-heroicons/chevron-right-20-solid';
+// Pre-load icons to avoid CDN delay
+addIcon('heroicons:chevron-left-20-solid', chevronLeft);
+addIcon('heroicons:chevron-right-20-solid', chevronRight);
+/**
+ * A reusable pagination control: previous/next buttons, a "current / total"
+ * page indicator, and an optional "start-end of total" info string.
+ *
+ * This component does not track page state itself.
+ * The consumer passes `current-page` / `total-pages` (and, if `show-info`
+ * is enabled, the item-range props) and listens for the `page-change`
+ * event to apply the new page.
+ *
+ * @fires page-change - Detail: `{ page: number }`. Fired when the user
+ *   clicks the previous or next button with a valid target page. The
+ *   consumer owns page state and is responsible for applying it (and, for
+ *   server-side pagination, fetching the corresponding data).
+ *
+ * @example
+ * ```html
+ * <trailhand-pagination
+ *   current-page="2"
+ *   total-pages="8"
+ *   start-item="11"
+ *   end-item="20"
+ *   total-items="76"
+ *   @page-change=${(e) => this.goToPage(e.detail.page)}
+ * ></trailhand-pagination>
+ * ```
+ */
+export class Pagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The current page number (1-indexed). */
+        this.currentPage = 1;
+        /** Total number of pages. */
+        this.totalPages = 1;
+        /** First item index (1-indexed) shown on the current page. Used in the info text. */
+        this.startItem = 0;
+        /** Last item index (1-indexed) shown on the current page. Used in the info text. */
+        this.endItem = 0;
+        /** Total number of items across all pages. Used in the info text. */
+        this.totalItems = 0;
+        /** Whether to show the "start-end of total" info text. */
+        this.showInfo = true;
+        /** Disables both buttons, e.g. while a page fetch is in flight. */
+        this.disabled = false;
+    }
+    /**
+     * Emit a `page-change` event for the given target page.
+     * @param page - The page number to request.
+     * @private
+     */
+    _emitPageChange(page) {
+        this.dispatchEvent(new CustomEvent('page-change', {
+            detail: { page },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handlePrev() {
+        if (this.currentPage > 1 && !this.disabled) {
+            this._emitPageChange(this.currentPage - 1);
+        }
+    }
+    _handleNext() {
+        if (this.currentPage < this.totalPages && !this.disabled) {
+            this._emitPageChange(this.currentPage + 1);
+        }
+    }
+    _renderChevronLeft() {
+        return html `
+      <iconify-icon
+        class="pagination__icon"
+        icon="heroicons:chevron-left-20-solid"
+      ></iconify-icon>
+    `;
+    }
+    _renderChevronRight() {
+        return html `
+      <iconify-icon
+        class="pagination__icon"
+        icon="heroicons:chevron-right-20-solid"
+      ></iconify-icon>
+    `;
+    }
+    render() {
+        return html `
+      <div class="pagination">
+        ${this.showInfo
+            ? html `
+              <div class="pagination__info">
+                ${this.startItem}-${this.endItem} of ${this.totalItems}
+              </div>
+            `
+            : ''}
+        <div class="pagination__controls">
+          <button
+            class="pagination__btn"
+            ?disabled=${this.currentPage === 1 || this.disabled}
+            @click=${this._handlePrev}
+            aria-label="Previous page"
+          >
+            ${this._renderChevronLeft()}
+          </button>
+
+          <span class="pagination__current">
+            ${this.currentPage} / ${this.totalPages}
+          </span>
+
+          <button
+            class="pagination__btn"
+            ?disabled=${this.currentPage === this.totalPages || this.disabled}
+            @click=${this._handleNext}
+            aria-label="Next page"
+          >
+            ${this._renderChevronRight()}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+}
+Pagination.styles = css `
+    :host {
+      display: block;
+      font-family: var(--font-family, 'Poppins', sans-serif);
+    }
+
+    .pagination {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 0;
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .pagination__info {
+      color: var(--muted, var(--th-color-text-muted, #8D8D8D));
+      font-size: 13px;
+    }
+
+    .pagination__controls {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .pagination__current {
+      color: var(--body-text, var(--th-color-text-primary, #212121));
+      font-size: 13px;
+      min-width: 60px;
+      text-align: center;
+    }
+
+    .pagination__btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: 1px solid var(--border, var(--th-color-border, #D7D7D7));
+      border-radius: 4px;
+      background-color: var(--body-bg, var(--th-color-white, #FFFFFF));
+      color: var(--body-text, var(--th-color-text-primary, #212121));
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .pagination__btn:hover:not(:disabled) {
+      background-color: var(--sortable-table-row-hover-bg, var(--th-color-grey-100, #FAFAFA));
+      border-color: var(--link, var(--th-color-primary, #3d98d3));
+    }
+
+    .pagination__btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .pagination__icon {
+      width: 16px;
+      height: 16px;
+    }
+  `;
+__decorate([
+    property({ type: Number, attribute: 'current-page' })
+], Pagination.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number, attribute: 'total-pages' })
+], Pagination.prototype, "totalPages", void 0);
+__decorate([
+    property({ type: Number, attribute: 'start-item' })
+], Pagination.prototype, "startItem", void 0);
+__decorate([
+    property({ type: Number, attribute: 'end-item' })
+], Pagination.prototype, "endItem", void 0);
+__decorate([
+    property({ type: Number, attribute: 'total-items' })
+], Pagination.prototype, "totalItems", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-info' })
+], Pagination.prototype, "showInfo", void 0);
+__decorate([
+    property({ type: Boolean })
+], Pagination.prototype, "disabled", void 0);
+// Register the element
+customElements.define('trailhand-pagination', Pagination);
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -16,5 +16,7 @@ export * from './components/dropdown';
 export * from './components/code-editor';
 export * from './components/text-area';
 export * from './components/loading-spinner';
+export * from './components/pagination';
+export * from './components/dock';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAG7C,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -17,6 +17,8 @@ export * from './components/dropdown';
 export * from './components/code-editor';
 export * from './components/text-area';
 export * from './components/loading-spinner';
+export * from './components/pagination';
+export * from './components/dock';
 // Export utilities
 export * from './utils';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAE7C,mBAAmB;AACnB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAElC,mBAAmB;AACnB,cAAc,SAAS,CAAC"}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,6 @@
+export interface Debounced<T extends (...args: any[]) => void> {
+    (...args: Parameters<T>): void;
+    flush(): void;
+}
+export declare function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): Debounced<T>;
+//# sourceMappingURL=debounce.d.ts.map

package/dist/utils/debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI;IAC3D,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CA0B9F"}

package/dist/utils/debounce.js

@@ -0,0 +1,25 @@
+export function debounce(fn, wait) {
+    let timer = null;
+    let lastArgs = null;
+    const debounced = ((...args) => {
+        lastArgs = args;
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+            timer = null;
+            fn(...lastArgs);
+        }, wait);
+    });
+    debounced.flush = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+            if (lastArgs) {
+                fn(...lastArgs);
+            }
+        }
+    };
+    return debounced;
+}
+//# sourceMappingURL=debounce.js.map

package/dist/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,QAAQ,CAAqC,EAAK,EAAE,IAAY;IAC9E,IAAI,KAAK,GAAyC,IAAI,CAAC;IACvD,IAAI,QAAQ,GAAyB,IAAI,CAAC;IAE1C,MAAM,SAAS,GAAG,CAAC,CAAC,GAAG,IAAmB,EAAE,EAAE;QAC5C,QAAQ,GAAG,IAAI,CAAC;QAChB,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QACD,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YACtB,KAAK,GAAG,IAAI,CAAC;YACb,EAAE,CAAC,GAAI,QAA0B,CAAC,CAAC;QACrC,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAiB,CAAC;IAEnB,SAAS,CAAC,KAAK,GAAG,GAAG,EAAE;QACrB,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,KAAK,GAAG,IAAI,CAAC;YACb,IAAI,QAAQ,EAAE,CAAC;gBACb,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC;YAClB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krumio/trailhand-ui",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "type": "module",
   "description": "Reusable web components built with Lit Element",
   "main": "./dist/index.js",