@lumston/ds-angular 0.0.7 → 0.0.8

package/fesm2022/lumston-ds-angular-src-navigation.mjs

@@ -0,0 +1,473 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Renders an accessible pagination bar for navigating a paged data set.
+ *
+ * Supports both **controlled** and **uncontrolled** modes:
+ * - **Controlled**: provide the `page` input and update it in response to
+ *   the `pageChange` output. The component reflects the external value.
+ * - **Uncontrolled**: omit `page`. The component manages its own active
+ *   page via an internal signal, initialized from `defaultPage`.
+ *
+ * When the total page count exceeds 5, a 5-item sliding window is rendered
+ * centered on the active page. Navigation buttons are rendered inside a
+ * `<nav aria-label="pagination">` landmark. Each button receives
+ * `aria-current="page"` (active) or `aria-disabled="true"` (boundary/disabled)
+ * as appropriate.
+ *
+ * @example
+ * ```html
+ * <!-- Uncontrolled -->
+ * <ls-pagination [count]="20" (pageChange)="onPage($event)" />
+ *
+ * <!-- Controlled -->
+ * <ls-pagination
+ *   [count]="20"
+ *   [page]="currentPage"
+ *   (pageChange)="currentPage = $event" />
+ * ```
+ */
+class PaginationComponent {
+    constructor() {
+        /**
+         * Total number of pages in the data set.
+         *
+         * Must be a positive integer ≥ 1. Determines both the upper boundary for
+         * navigation and the page window calculation.
+         *
+         * @default 1
+         */
+        this.count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        /**
+         * Active page index in controlled mode (1-based).
+         *
+         * When provided, the component reflects this value and does not maintain
+         * internal page state. The host is responsible for updating this input in
+         * response to `pageChange` emissions. Pass `undefined` to switch to
+         * uncontrolled mode.
+         *
+         * @default undefined
+         */
+        this.page = input(undefined, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        /**
+         * Initial active page used in uncontrolled mode (1-based).
+         *
+         * Consumed once on `ngOnInit`. Has no effect when `page` is provided.
+         *
+         * @default 1
+         */
+        this.defaultPage = input(1, ...(ngDevMode ? [{ debugName: "defaultPage" }] : []));
+        /**
+         * Color token applied to the active page item and button hover states.
+         *
+         * @default 'primary'
+         */
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        /**
+         * Visual rendering style of page number items and navigation buttons.
+         *
+         * @default 'outlined'
+         */
+        this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        /**
+         * Border-radius style applied uniformly to all buttons in the bar.
+         *
+         * @default 'rounded'
+         */
+        this.shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+        /**
+         * Physical dimensions (height, font size, padding) of all buttons.
+         *
+         * @default 'medium'
+         */
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /**
+         * Disables all buttons in the pagination bar.
+         *
+         * When `true`, every button receives `disabled` and
+         * `aria-disabled="true"`. The `pageChange` output will not emit.
+         *
+         * @default false
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Renders a "go to first page" button before the previous-page button.
+         *
+         * The button is automatically disabled and receives `aria-disabled="true"`
+         * when the active page is already the first page.
+         *
+         * @default false
+         */
+        this.showFirstButton = input(false, ...(ngDevMode ? [{ debugName: "showFirstButton" }] : []));
+        /**
+         * Renders a "go to last page" button after the next-page button.
+         *
+         * The button is automatically disabled and receives `aria-disabled="true"`
+         * when the active page is already the last page.
+         *
+         * @default false
+         */
+        this.showLastButton = input(false, ...(ngDevMode ? [{ debugName: "showLastButton" }] : []));
+        /**
+         * Hides the previous-page navigation button.
+         *
+         * @default false
+         */
+        this.hidePrevButton = input(false, ...(ngDevMode ? [{ debugName: "hidePrevButton" }] : []));
+        /**
+         * Hides the next-page navigation button.
+         *
+         * @default false
+         */
+        this.hideNextButton = input(false, ...(ngDevMode ? [{ debugName: "hideNextButton" }] : []));
+        /**
+         * Emits the target page number (1-based) when the user activates any
+         * page item or navigation button.
+         *
+         * Does NOT emit when `disabled` is `true` or when the user clicks a
+         * boundary button that is already at its limit (first/last page).
+         * In controlled mode, the host must update the `page` input in response
+         * to this event to reflect the navigation in the UI.
+         */
+        this.pageChange = output();
+        this._internalPage = signal(1, ...(ngDevMode ? [{ debugName: "_internalPage" }] : []));
+        this.activePage = computed(() => this.page() ?? this._internalPage(), ...(ngDevMode ? [{ debugName: "activePage" }] : []));
+        this.pages = computed(() => {
+            const total = this.count();
+            const current = this.activePage();
+            if (total <= 5) {
+                return Array.from({ length: total }, (_, i) => i + 1);
+            }
+            const start = Math.max(1, Math.min(current - 2, total - 4));
+            return Array.from({ length: 5 }, (_, i) => start + i);
+        }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+        this.isFirstPage = computed(() => this.activePage() === 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+        this.isLastPage = computed(() => this.activePage() === this.count(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+        this._baseClasses = computed(() => {
+            const size = this.size();
+            const sizeClass = size === 'small'
+                ? 'pg-item-sm'
+                : size === 'large'
+                    ? 'pg-item-lg'
+                    : 'pg-item-md';
+            const shapeClass = this.shape() === 'circular' ? 'pg-item-circular' : 'pg-item-rounded';
+            return [
+                'pg-item',
+                `pg-item-${this.variant()}-${this.color()}`,
+                sizeClass,
+                shapeClass,
+            ].join(' ');
+        }, ...(ngDevMode ? [{ debugName: "_baseClasses" }] : []));
+    }
+    ngOnInit() {
+        this._internalPage.set(this.defaultPage());
+    }
+    pageItemClasses(n) {
+        const base = this._baseClasses();
+        return n === this.activePage() ? `${base} pg-item-active` : base;
+    }
+    navClasses(isAtBoundary) {
+        const classes = `${this._baseClasses()} pg-nav-btn`;
+        return isAtBoundary || this.disabled()
+            ? `${classes} pg-item-disabled`
+            : classes;
+    }
+    goToPage(n) {
+        if (this.disabled() || n < 1 || n > this.count())
+            return;
+        if (this.page() === undefined) {
+            this._internalPage.set(n);
+        }
+        this.pageChange.emit(n);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: PaginationComponent, isStandalone: true, selector: "ls-pagination", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, defaultPage: { classPropertyName: "defaultPage", publicName: "defaultPage", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstButton: { classPropertyName: "showFirstButton", publicName: "showFirstButton", isSignal: true, isRequired: false, transformFunction: null }, showLastButton: { classPropertyName: "showLastButton", publicName: "showLastButton", isSignal: true, isRequired: false, transformFunction: null }, hidePrevButton: { classPropertyName: "hidePrevButton", publicName: "hidePrevButton", isSignal: true, isRequired: false, transformFunction: null }, hideNextButton: { classPropertyName: "hideNextButton", publicName: "hideNextButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
+    <nav aria-label="pagination">
+      <ul class="pg-list">
+        @if (showFirstButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="first"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
+              (click)="goToPage(1)">
+              <i class="ls-icon ls-chevron-left-double ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+        @if (!hidePrevButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="prev"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
+              (click)="goToPage(activePage() - 1)">
+              <i class="ls-icon ls-chevron-left ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+        @for (n of pages(); track $index) {
+          <li>
+            <button
+              type="button"
+              [class]="pageItemClasses(n)"
+              [attr.aria-current]="n === activePage() ? 'page' : null"
+              [disabled]="disabled()"
+              [attr.aria-disabled]="disabled() ? 'true' : null"
+              (click)="goToPage(n)">
+              {{ n }}
+            </button>
+          </li>
+        }
+        @if (!hideNextButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="next"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
+              (click)="goToPage(activePage() + 1)">
+              <i class="ls-icon ls-chevron-right ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+        @if (showLastButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="last"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
+              (click)="goToPage(count())">
+              <i class="ls-icon ls-chevron-right-double ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+      </ul>
+    </nav>
+  `, isInline: true, styles: [":host{display:contents}.pg-icon-left{transform:rotate(90deg)}.pg-icon-right{transform:rotate(-90deg)}.pg-list{display:inline-flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.pg-item{display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;transition:all var(--ls-transition-duration) ease;border:2px solid transparent;background:none;outline:none;font-family:var(--ls-font-family);line-height:1;-webkit-user-select:none;user-select:none}.pg-item-sm{padding:.375rem .625rem;font-size:.75rem;min-width:1.75rem;height:1.75rem}.pg-item-md{padding:.5rem .875rem;font-size:.875rem;min-width:2.25rem;height:2.25rem}.pg-item-lg{padding:.625rem 1.25rem;font-size:1rem;min-width:2.75rem;height:2.75rem}.pg-item-rounded{border-radius:var(--ls-border-radius-md)}.pg-item-circular{border-radius:var(--ls-border-radius-full);padding-inline:0}.pg-item-circular.pg-item-sm{width:1.75rem}.pg-item-circular.pg-item-md{width:2.25rem}.pg-item-circular.pg-item-lg{width:2.75rem}.pg-item-disabled,.pg-item[disabled]{cursor:not-allowed;opacity:.6}.pg-item-solid-primary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-primary:not([disabled]):hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-secondary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-secondary:not([disabled]):hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-default{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-default:not([disabled]):hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-outlined-primary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-primary:not([disabled]):hover{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-secondary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-secondary:not([disabled]):hover{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-default{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-default:not([disabled]):hover{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-text-primary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-primary:not([disabled]):hover{background-color:#4361ee1a;color:var(--ls-color-primary)}.pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}.pg-item-text-secondary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-secondary:not([disabled]):hover{background-color:#805dca1a;color:var(--ls-color-secondary)}.pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}.pg-item-text-default{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-default:not([disabled]):hover{background-color:#3b3f5c1a;color:var(--ls-color-dark)}.pg-item-text-default.pg-item-active{color:var(--ls-color-dark)}body.dark .pg-item-solid-primary,body.dark .pg-item-solid-secondary,body.dark .pg-item-solid-default{background-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-solid-primary:not([disabled]):hover,body.dark .pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-secondary:not([disabled]):hover,body.dark .pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-default:not([disabled]):hover,body.dark .pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary,body.dark .pg-item-outlined-secondary,body.dark .pg-item-outlined-default{border-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary:not([disabled]):hover,body.dark .pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-secondary:not([disabled]):hover,body.dark .pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-default:not([disabled]):hover,body.dark .pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-text-primary,body.dark .pg-item-text-secondary,body.dark .pg-item-text-default{color:var(--ls-color-white-dark)}body.dark .pg-item-text-primary:not([disabled]):hover,body.dark .pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}body.dark .pg-item-text-secondary:not([disabled]):hover,body.dark .pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}body.dark .pg-item-text-default:not([disabled]):hover,body.dark .pg-item-text-default.pg-item-active{color:var(--ls-color-white-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-pagination', standalone: true, template: `
+    <nav aria-label="pagination">
+      <ul class="pg-list">
+        @if (showFirstButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="first"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
+              (click)="goToPage(1)">
+              <i class="ls-icon ls-chevron-left-double ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+        @if (!hidePrevButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="prev"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
+              (click)="goToPage(activePage() - 1)">
+              <i class="ls-icon ls-chevron-left ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+        @for (n of pages(); track $index) {
+          <li>
+            <button
+              type="button"
+              [class]="pageItemClasses(n)"
+              [attr.aria-current]="n === activePage() ? 'page' : null"
+              [disabled]="disabled()"
+              [attr.aria-disabled]="disabled() ? 'true' : null"
+              (click)="goToPage(n)">
+              {{ n }}
+            </button>
+          </li>
+        }
+        @if (!hideNextButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="next"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
+              (click)="goToPage(activePage() + 1)">
+              <i class="ls-icon ls-chevron-right ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+        @if (showLastButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="last"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
+              (click)="goToPage(count())">
+              <i class="ls-icon ls-chevron-right-double ls-icon-sm"></i>
+            </button>
+          </li>
+        }
+      </ul>
+    </nav>
+  `, styles: [":host{display:contents}.pg-icon-left{transform:rotate(90deg)}.pg-icon-right{transform:rotate(-90deg)}.pg-list{display:inline-flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.pg-item{display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;transition:all var(--ls-transition-duration) ease;border:2px solid transparent;background:none;outline:none;font-family:var(--ls-font-family);line-height:1;-webkit-user-select:none;user-select:none}.pg-item-sm{padding:.375rem .625rem;font-size:.75rem;min-width:1.75rem;height:1.75rem}.pg-item-md{padding:.5rem .875rem;font-size:.875rem;min-width:2.25rem;height:2.25rem}.pg-item-lg{padding:.625rem 1.25rem;font-size:1rem;min-width:2.75rem;height:2.75rem}.pg-item-rounded{border-radius:var(--ls-border-radius-md)}.pg-item-circular{border-radius:var(--ls-border-radius-full);padding-inline:0}.pg-item-circular.pg-item-sm{width:1.75rem}.pg-item-circular.pg-item-md{width:2.25rem}.pg-item-circular.pg-item-lg{width:2.75rem}.pg-item-disabled,.pg-item[disabled]{cursor:not-allowed;opacity:.6}.pg-item-solid-primary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-primary:not([disabled]):hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-secondary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-secondary:not([disabled]):hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-default{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-default:not([disabled]):hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-outlined-primary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-primary:not([disabled]):hover{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-secondary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-secondary:not([disabled]):hover{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-default{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-default:not([disabled]):hover{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-text-primary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-primary:not([disabled]):hover{background-color:#4361ee1a;color:var(--ls-color-primary)}.pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}.pg-item-text-secondary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-secondary:not([disabled]):hover{background-color:#805dca1a;color:var(--ls-color-secondary)}.pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}.pg-item-text-default{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-default:not([disabled]):hover{background-color:#3b3f5c1a;color:var(--ls-color-dark)}.pg-item-text-default.pg-item-active{color:var(--ls-color-dark)}body.dark .pg-item-solid-primary,body.dark .pg-item-solid-secondary,body.dark .pg-item-solid-default{background-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-solid-primary:not([disabled]):hover,body.dark .pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-secondary:not([disabled]):hover,body.dark .pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-default:not([disabled]):hover,body.dark .pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary,body.dark .pg-item-outlined-secondary,body.dark .pg-item-outlined-default{border-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary:not([disabled]):hover,body.dark .pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-secondary:not([disabled]):hover,body.dark .pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-default:not([disabled]):hover,body.dark .pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-text-primary,body.dark .pg-item-text-secondary,body.dark .pg-item-text-default{color:var(--ls-color-white-dark)}body.dark .pg-item-text-primary:not([disabled]):hover,body.dark .pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}body.dark .pg-item-text-secondary:not([disabled]):hover,body.dark .pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}body.dark .pg-item-text-default:not([disabled]):hover,body.dark .pg-item-text-default.pg-item-active{color:var(--ls-color-white-light)}\n"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], defaultPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPage", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFirstButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstButton", required: false }] }], showLastButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastButton", required: false }] }], hidePrevButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePrevButton", required: false }] }], hideNextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextButton", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+
+class BreadcrumbComponent {
+    constructor() {
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+        this.color = input('gray', ...(ngDevMode ? [{ debugName: "color" }] : [])); // El nuevo input de color
+        // Lógica para el color dinámico
+        this._colorStyle = computed(() => {
+            const c = this.color();
+            const value = c === 'primary'
+                ? 'var(--ls-color-primary)'
+                : c === 'secondary'
+                    ? 'var(--ls-color-secondary)'
+                    : c;
+            return { '--ls-breadcrumb-main-color': value };
+        }, ...(ngDevMode ? [{ debugName: "_colorStyle" }] : []));
+        this._classes = computed(() => {
+            return `ls-breadcrumb ls-breadcrumb--${this.variant()}`;
+        }, ...(ngDevMode ? [{ debugName: "_classes" }] : []));
+        this._isTemplateSeparator = computed(() => {
+            return this.separator() instanceof TemplateRef;
+        }, ...(ngDevMode ? [{ debugName: "_isTemplateSeparator" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BreadcrumbComponent, isStandalone: true, selector: "ls-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav aria-label="Breadcrumb" [style]="_colorStyle()">
+      <ol [class]="_classes()">
+        @for (item of items(); track item.label; let isLast = $last) {
+          <li
+            class="ls-breadcrumb-item"
+            [class.ls-breadcrumb-item--active]="isLast">
+            @if (isLast) {
+              <span aria-current="page">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
+            } @else if (item.url) {
+              <a [href]="item.url">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </a>
+            } @else {
+              <span>
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
+            }
+          </li>
+
+          @if (!isLast && variant() !== 'arrowed') {
+            <li class="ls-breadcrumb-separator" aria-hidden="true">
+              @if (_isTemplateSeparator()) {
+                <ng-container *ngTemplateOutlet="$any(separator())" />
+              } @else {
+                {{ separator() }}
+              }
+            </li>
+          }
+        }
+      </ol>
+    </nav>
+  `, isInline: true, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;color:#6c757d}.ls-breadcrumb-item a,.ls-breadcrumb-item span{display:inline-flex;align-items:center;gap:.5rem}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex-shrink:0;vertical-align:middle}.ls-breadcrumb-item .ls-breadcrumb-icon *{vertical-align:middle}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], selector: 'ls-breadcrumb', standalone: true, template: `
+    <nav aria-label="Breadcrumb" [style]="_colorStyle()">
+      <ol [class]="_classes()">
+        @for (item of items(); track item.label; let isLast = $last) {
+          <li
+            class="ls-breadcrumb-item"
+            [class.ls-breadcrumb-item--active]="isLast">
+            @if (isLast) {
+              <span aria-current="page">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
+            } @else if (item.url) {
+              <a [href]="item.url">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </a>
+            } @else {
+              <span>
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
+            }
+          </li>
+
+          @if (!isLast && variant() !== 'arrowed') {
+            <li class="ls-breadcrumb-separator" aria-hidden="true">
+              @if (_isTemplateSeparator()) {
+                <ng-container *ngTemplateOutlet="$any(separator())" />
+              } @else {
+                {{ separator() }}
+              }
+            </li>
+          }
+        }
+      </ol>
+    </nav>
+  `, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;color:#6c757d}.ls-breadcrumb-item a,.ls-breadcrumb-item span{display:inline-flex;align-items:center;gap:.5rem}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex-shrink:0;vertical-align:middle}.ls-breadcrumb-item .ls-breadcrumb-icon *{vertical-align:middle}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbComponent, PaginationComponent };
+//# sourceMappingURL=lumston-ds-angular-src-navigation.mjs.map

package/fesm2022/lumston-ds-angular-src-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lumston-ds-angular-src-navigation.mjs","sources":["../../../../libs/ds-angular/src/navigation/pagination/pagination.component.ts","../../../../libs/ds-angular/src/navigation/breadcrumb/breadcrumb.component.ts","../../../../libs/ds-angular/src/navigation/lumston-ds-angular-src-navigation.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  OnInit,\r\n  computed,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\n\r\n/** Controls the visual rendering style of page number items and nav buttons. */\r\nexport type PaginationVariant = 'text' | 'outlined' | 'solid';\r\n\r\n/**\r\n * Applies the design-token color to the active page item and hover states.\r\n *\r\n * - `'primary'`   — Brand primary color.\r\n * - `'secondary'` — Brand secondary color.\r\n * - `'default'`   — Neutral gray, no brand color applied.\r\n */\r\nexport type PaginationColor = 'primary' | 'secondary' | 'default';\r\n\r\n/** Determines the border-radius style applied uniformly to all page buttons. */\r\nexport type PaginationShape = 'circular' | 'rounded';\r\n\r\n/**\r\n * Controls the physical dimensions (height, font size, padding) of all\r\n * buttons in the pagination bar.\r\n */\r\nexport type PaginationSize = 'small' | 'medium' | 'large';\r\n\r\n/**\r\n * Renders an accessible pagination bar for navigating a paged data set.\r\n *\r\n * Supports both **controlled** and **uncontrolled** modes:\r\n * - **Controlled**: provide the `page` input and update it in response to\r\n *   the `pageChange` output. The component reflects the external value.\r\n * - **Uncontrolled**: omit `page`. The component manages its own active\r\n *   page via an internal signal, initialized from `defaultPage`.\r\n *\r\n * When the total page count exceeds 5, a 5-item sliding window is rendered\r\n * centered on the active page. Navigation buttons are rendered inside a\r\n * `<nav aria-label=\"pagination\">` landmark. Each button receives\r\n * `aria-current=\"page\"` (active) or `aria-disabled=\"true\"` (boundary/disabled)\r\n * as appropriate.\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Uncontrolled -->\r\n * <ls-pagination [count]=\"20\" (pageChange)=\"onPage($event)\" />\r\n *\r\n * <!-- Controlled -->\r\n * <ls-pagination\r\n *   [count]=\"20\"\r\n *   [page]=\"currentPage\"\r\n *   (pageChange)=\"currentPage = $event\" />\r\n * ```\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [],\r\n  selector: 'ls-pagination',\r\n  standalone: true,\r\n  styleUrls: ['./pagination.component.css'],\r\n  template: `\r\n    <nav aria-label=\"pagination\">\r\n      <ul class=\"pg-list\">\r\n        @if (showFirstButton()) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              aria-label=\"first\"\r\n              [class]=\"navClasses(isFirstPage())\"\r\n              [disabled]=\"isFirstPage() || disabled()\"\r\n              [attr.aria-disabled]=\"isFirstPage() || disabled() ? 'true' : null\"\r\n              (click)=\"goToPage(1)\">\r\n              <i class=\"ls-icon ls-chevron-left-double ls-icon-sm\"></i>\r\n            </button>\r\n          </li>\r\n        }\r\n        @if (!hidePrevButton()) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              aria-label=\"prev\"\r\n              [class]=\"navClasses(isFirstPage())\"\r\n              [disabled]=\"isFirstPage() || disabled()\"\r\n              [attr.aria-disabled]=\"isFirstPage() || disabled() ? 'true' : null\"\r\n              (click)=\"goToPage(activePage() - 1)\">\r\n              <i class=\"ls-icon ls-chevron-left ls-icon-sm\"></i>\r\n            </button>\r\n          </li>\r\n        }\r\n        @for (n of pages(); track $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"pageItemClasses(n)\"\r\n              [attr.aria-current]=\"n === activePage() ? 'page' : null\"\r\n              [disabled]=\"disabled()\"\r\n              [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n              (click)=\"goToPage(n)\">\r\n              {{ n }}\r\n            </button>\r\n          </li>\r\n        }\r\n        @if (!hideNextButton()) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              aria-label=\"next\"\r\n              [class]=\"navClasses(isLastPage())\"\r\n              [disabled]=\"isLastPage() || disabled()\"\r\n              [attr.aria-disabled]=\"isLastPage() || disabled() ? 'true' : null\"\r\n              (click)=\"goToPage(activePage() + 1)\">\r\n              <i class=\"ls-icon ls-chevron-right ls-icon-sm\"></i>\r\n            </button>\r\n          </li>\r\n        }\r\n        @if (showLastButton()) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              aria-label=\"last\"\r\n              [class]=\"navClasses(isLastPage())\"\r\n              [disabled]=\"isLastPage() || disabled()\"\r\n              [attr.aria-disabled]=\"isLastPage() || disabled() ? 'true' : null\"\r\n              (click)=\"goToPage(count())\">\r\n              <i class=\"ls-icon ls-chevron-right-double ls-icon-sm\"></i>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  `,\r\n})\r\nexport class PaginationComponent implements OnInit {\r\n  /**\r\n   * Total number of pages in the data set.\r\n   *\r\n   * Must be a positive integer ≥ 1. Determines both the upper boundary for\r\n   * navigation and the page window calculation.\r\n   *\r\n   * @default 1\r\n   */\r\n  readonly count = input<number>(1);\r\n\r\n  /**\r\n   * Active page index in controlled mode (1-based).\r\n   *\r\n   * When provided, the component reflects this value and does not maintain\r\n   * internal page state. The host is responsible for updating this input in\r\n   * response to `pageChange` emissions. Pass `undefined` to switch to\r\n   * uncontrolled mode.\r\n   *\r\n   * @default undefined\r\n   */\r\n  readonly page = input<number | undefined>(undefined);\r\n\r\n  /**\r\n   * Initial active page used in uncontrolled mode (1-based).\r\n   *\r\n   * Consumed once on `ngOnInit`. Has no effect when `page` is provided.\r\n   *\r\n   * @default 1\r\n   */\r\n  readonly defaultPage = input<number>(1);\r\n\r\n  /**\r\n   * Color token applied to the active page item and button hover states.\r\n   *\r\n   * @default 'primary'\r\n   */\r\n  readonly color = input<PaginationColor>('primary');\r\n\r\n  /**\r\n   * Visual rendering style of page number items and navigation buttons.\r\n   *\r\n   * @default 'outlined'\r\n   */\r\n  readonly variant = input<PaginationVariant>('outlined');\r\n\r\n  /**\r\n   * Border-radius style applied uniformly to all buttons in the bar.\r\n   *\r\n   * @default 'rounded'\r\n   */\r\n  readonly shape = input<PaginationShape>('rounded');\r\n\r\n  /**\r\n   * Physical dimensions (height, font size, padding) of all buttons.\r\n   *\r\n   * @default 'medium'\r\n   */\r\n  readonly size = input<PaginationSize>('medium');\r\n\r\n  /**\r\n   * Disables all buttons in the pagination bar.\r\n   *\r\n   * When `true`, every button receives `disabled` and\r\n   * `aria-disabled=\"true\"`. The `pageChange` output will not emit.\r\n   *\r\n   * @default false\r\n   */\r\n  readonly disabled = input<boolean>(false);\r\n\r\n  /**\r\n   * Renders a \"go to first page\" button before the previous-page button.\r\n   *\r\n   * The button is automatically disabled and receives `aria-disabled=\"true\"`\r\n   * when the active page is already the first page.\r\n   *\r\n   * @default false\r\n   */\r\n  readonly showFirstButton = input<boolean>(false);\r\n\r\n  /**\r\n   * Renders a \"go to last page\" button after the next-page button.\r\n   *\r\n   * The button is automatically disabled and receives `aria-disabled=\"true\"`\r\n   * when the active page is already the last page.\r\n   *\r\n   * @default false\r\n   */\r\n  readonly showLastButton = input<boolean>(false);\r\n\r\n  /**\r\n   * Hides the previous-page navigation button.\r\n   *\r\n   * @default false\r\n   */\r\n  readonly hidePrevButton = input<boolean>(false);\r\n\r\n  /**\r\n   * Hides the next-page navigation button.\r\n   *\r\n   * @default false\r\n   */\r\n  readonly hideNextButton = input<boolean>(false);\r\n\r\n  /**\r\n   * Emits the target page number (1-based) when the user activates any\r\n   * page item or navigation button.\r\n   *\r\n   * Does NOT emit when `disabled` is `true` or when the user clicks a\r\n   * boundary button that is already at its limit (first/last page).\r\n   * In controlled mode, the host must update the `page` input in response\r\n   * to this event to reflect the navigation in the UI.\r\n   */\r\n  readonly pageChange = output<number>();\r\n\r\n  private readonly _internalPage = signal<number>(1);\r\n\r\n  protected readonly activePage = computed(\r\n    () => this.page() ?? this._internalPage()\r\n  );\r\n  protected readonly pages = computed(() => {\r\n    const total = this.count();\r\n    const current = this.activePage();\r\n    if (total <= 5) {\r\n      return Array.from({ length: total }, (_, i) => i + 1);\r\n    }\r\n    const start = Math.max(1, Math.min(current - 2, total - 4));\r\n    return Array.from({ length: 5 }, (_, i) => start + i);\r\n  });\r\n  protected readonly isFirstPage = computed(() => this.activePage() === 1);\r\n  protected readonly isLastPage = computed(\r\n    () => this.activePage() === this.count()\r\n  );\r\n\r\n  private readonly _baseClasses = computed(() => {\r\n    const size = this.size();\r\n    const sizeClass =\r\n      size === 'small'\r\n        ? 'pg-item-sm'\r\n        : size === 'large'\r\n          ? 'pg-item-lg'\r\n          : 'pg-item-md';\r\n    const shapeClass =\r\n      this.shape() === 'circular' ? 'pg-item-circular' : 'pg-item-rounded';\r\n    return [\r\n      'pg-item',\r\n      `pg-item-${this.variant()}-${this.color()}`,\r\n      sizeClass,\r\n      shapeClass,\r\n    ].join(' ');\r\n  });\r\n\r\n  ngOnInit(): void {\r\n    this._internalPage.set(this.defaultPage());\r\n  }\r\n\r\n  protected pageItemClasses(n: number): string {\r\n    const base = this._baseClasses();\r\n    return n === this.activePage() ? `${base} pg-item-active` : base;\r\n  }\r\n\r\n  protected navClasses(isAtBoundary: boolean): string {\r\n    const classes = `${this._baseClasses()} pg-nav-btn`;\r\n    return isAtBoundary || this.disabled()\r\n      ? `${classes} pg-item-disabled`\r\n      : classes;\r\n  }\r\n\r\n  protected goToPage(n: number): void {\r\n    if (this.disabled() || n < 1 || n > this.count()) return;\r\n    if (this.page() === undefined) {\r\n      this._internalPage.set(n);\r\n    }\r\n    this.pageChange.emit(n);\r\n  }\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n  TemplateRef,\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\nexport interface BreadcrumbItem {\r\n  label: string;\r\n  url?: string;\r\n  icon?: string;\r\n}\r\n\r\nexport type BreadcrumbVariant = 'default' | 'arrowed' | 'dotted';\r\n\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [NgTemplateOutlet],\r\n  selector: 'ls-breadcrumb',\r\n  standalone: true,\r\n  styleUrls: ['./breadcrumb.component.css'],\r\n  template: `\r\n    <nav aria-label=\"Breadcrumb\" [style]=\"_colorStyle()\">\r\n      <ol [class]=\"_classes()\">\r\n        @for (item of items(); track item.label; let isLast = $last) {\r\n          <li\r\n            class=\"ls-breadcrumb-item\"\r\n            [class.ls-breadcrumb-item--active]=\"isLast\">\r\n            @if (isLast) {\r\n              <span aria-current=\"page\">\r\n                @if (item.icon) {\r\n                  <i\r\n                    [class]=\"\r\n                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'\r\n                    \"></i>\r\n                }\r\n                {{ item.label }}\r\n              </span>\r\n            } @else if (item.url) {\r\n              <a [href]=\"item.url\">\r\n                @if (item.icon) {\r\n                  <i\r\n                    [class]=\"\r\n                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'\r\n                    \"></i>\r\n                }\r\n                {{ item.label }}\r\n              </a>\r\n            } @else {\r\n              <span>\r\n                @if (item.icon) {\r\n                  <i\r\n                    [class]=\"\r\n                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'\r\n                    \"></i>\r\n                }\r\n                {{ item.label }}\r\n              </span>\r\n            }\r\n          </li>\r\n\r\n          @if (!isLast && variant() !== 'arrowed') {\r\n            <li class=\"ls-breadcrumb-separator\" aria-hidden=\"true\">\r\n              @if (_isTemplateSeparator()) {\r\n                <ng-container *ngTemplateOutlet=\"$any(separator())\" />\r\n              } @else {\r\n                {{ separator() }}\r\n              }\r\n            </li>\r\n          }\r\n        }\r\n      </ol>\r\n    </nav>\r\n  `,\r\n})\r\nexport class BreadcrumbComponent {\r\n  readonly items = input.required<BreadcrumbItem[]>();\r\n  readonly variant = input<BreadcrumbVariant>('default');\r\n  readonly separator = input<string | TemplateRef<unknown>>('/');\r\n  readonly color = input<string>('gray'); // El nuevo input de color\r\n\r\n  // Lógica para el color dinámico\r\n  protected readonly _colorStyle = computed(() => {\r\n    const c = this.color();\r\n    const value =\r\n      c === 'primary'\r\n        ? 'var(--ls-color-primary)'\r\n        : c === 'secondary'\r\n          ? 'var(--ls-color-secondary)'\r\n          : c;\r\n    return { '--ls-breadcrumb-main-color': value };\r\n  });\r\n\r\n  protected readonly _classes = computed(() => {\r\n    return `ls-breadcrumb ls-breadcrumb--${this.variant()}`;\r\n  });\r\n\r\n  protected readonly _isTemplateSeparator = computed(() => {\r\n    return this.separator() instanceof TemplateRef;\r\n  });\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}