@malva-ui/core 0.1.12

package/esm2022/pagination/lib/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../../../../libs/core/pagination/src/lib/pagination/pagination.ts","../../../../../../../libs/core/pagination/src/lib/pagination/pagination.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n  model,\n  inject,\n  computed,\n  effect,\n  contentChild,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MlvPaginationService } from './pagination.service';\nimport type { MlvPaginationObject } from './pagination.model';\nimport {\n  MlvPaginationCount,\n  MlvPaginationPerPageItem,\n} from './pagination.directives';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MlvButton } from '@malva-ui/core/button';\nimport { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';\nimport { MlvInput } from '@malva-ui/core/input';\nimport { MlvClick } from '@malva-ui/cdk/accessibility';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport type { MlvDensity } from '@malva-ui/cdk/density';\nimport {\n  MlvPopup,\n  MlvPopupContent,\n  MlvPopupTrigger,\n} from '@malva-ui/core/popup';\nimport { MlvDropdownPanel } from '@malva-ui/core/dropdown';\nimport type { MlvSelectOption } from '@malva-ui/core/dropdown';\nimport { MlvSelectionService } from '@malva-ui/core/form-utils';\nimport { MLV_PAGINATION_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\n\n/** Constant representing the default number of items per page. */\nconst DEFAULT_ITEMS_PER_PAGE = 10;\n\nconst DEFAULT_ITEMS_PER_PAGE_OPTIONS = [10, 30, 60, 100, Infinity];\n\n/**\n * Pagination control: an item-count line with an items-per-page selector, and a\n * page-navigation strip with prev/next arrows and numbered page buttons.\n *\n * Both `currentPage` and `itemsPerPage` are two-way bindable models — the\n * component owns no data, only the position within it. `totalItems` is the one\n * required input.\n *\n * The page strip collapses on **page count**, not on width: once there are more\n * pages than fit the fixed window, `MlvPaginationService` replaces the middle\n * runs with an ellipsis marker that renders as a small numeric field. Type a\n * page number there and press Enter to jump. The whole strip is hidden while\n * there is only one page, and the per-page selector is hidden while\n * `totalItems` is at or below the smallest `perPageOptions` entry.\n *\n * @example Basic\n * ```html\n * <mlv-pagination [totalItems]=\"total\" [(currentPage)]=\"page\" />\n * ```\n *\n * @example Custom per-page choices, including \"all items\"\n * ```html\n * <mlv-pagination\n *   [totalItems]=\"total\"\n *   [(currentPage)]=\"page\"\n *   [(itemsPerPage)]=\"perPage\"\n *   [perPageOptions]=\"[10, 25, 50, Infinity]\"\n * />\n * ```\n *\n * @example Replacing the item-count text\n * ```html\n * <mlv-pagination [totalItems]=\"total\" [(currentPage)]=\"page\">\n *   <ng-template mlvPaginationCount let-page let-start=\"start\" let-end=\"end\">\n *     Showing {{ start }}–{{ end }} on page {{ page }}\n *   </ng-template>\n * </mlv-pagination>\n * ```\n */\n@Component({\n  selector: 'mlv-pagination',\n  templateUrl: './pagination.html',\n  styleUrl: './pagination.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  // `mlv-dropdown-panel` injects `MlvSelectionService` non-optionally and expects\n  // its owner to provide it, the same way `mlv-select` and `mlv-combobox` do. The\n  // panel only uses it as a focus-first channel, so nothing here reads selection\n  // state from it — `selectedValues` stays the single source of truth.\n  providers: [MlvPaginationService, MlvSelectionService],\n  imports: [\n    NgTemplateOutlet,\n    MlvButton,\n    LucideChevronLeft,\n    LucideChevronRight,\n    MlvInput,\n    MlvClick,\n    MlvPopup,\n    MlvDropdownPanel,\n    MlvPopupTrigger,\n    MlvPopupContent,\n  ],\n  host: {\n    class: 'mlv-pagination',\n    '[class.mlv-pagination--mobile]': 'mobile()',\n  },\n})\nexport class MlvPagination {\n  /** @protected Projected custom item-count template, if any. */\n  protected readonly _itemsCountRef = contentChild(MlvPaginationCount);\n\n  /** @protected Projected custom items-per-page template, if any. */\n  protected readonly _itemsPerPageRef = contentChild(MlvPaginationPerPageItem);\n\n  /**\n   * Unique id for this pagination instance, defaulted to a generated one.\n   *\n   * **Currently inert** — nothing reads it. The per-page trigger and its\n   * listbox pair through their own generated `_perPageListboxId`, and the id is\n   * not reflected onto the host. Binding it compiles but changes nothing.\n   */\n  readonly id = input<string>(mlvNextId('mlv-pagination'));\n\n  /**\n   * Adds `mlv-pagination--mobile` to the host.\n   *\n   * The library ships **no rules** for that class — the component's own layout\n   * is identical either way. Treat it as a styling hook for the consumer, not\n   * as a built-in responsive mode.\n   */\n  readonly mobile = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Total number of items across all pages. Required.\n   *\n   * Drives the page count (`totalItems / itemsPerPage`), the \"X–Y of Z\" range\n   * text, and which `perPageOptions` are offered: the list is cut after the\n   * first option that covers `totalItems`, and the selector disappears entirely\n   * when `totalItems` is at or below the smallest option.\n   *\n   * Not coerced: bind a `number`, not a route-param string.\n   */\n  readonly totalItems = input.required<number>();\n\n  /**\n   * Items shown per page. Two-way bindable; also set by the per-page selector.\n   * `Infinity` means \"all items on one page\".\n   */\n  readonly itemsPerPage = model<number>(DEFAULT_ITEMS_PER_PAGE);\n\n  /**\n   * Choices offered by the items-per-page selector.\n   *\n   * The list is cut after the first option that covers `totalItems` — so one\n   * \"show everything\" choice always survives and the rest are dropped. Include\n   * `Infinity` to offer \"All (Z)\" for datasets larger than every option.\n   */\n  readonly perPageOptions = input<number[]>(DEFAULT_ITEMS_PER_PAGE_OPTIONS);\n\n  /**\n   * **Currently inert** — nothing reads it. The item count is always rendered;\n   * project an `[mlvPaginationCount]` template to change or suppress the text.\n   */\n  readonly displayTotalItems = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Currently active page, 1-based. Two-way bindable. */\n  readonly currentPage = model<number>(1);\n\n  /**\n   * Density applied to the items-per-page dropdown list.\n   *\n   * The dropdown panel is portaled to the CDK overlay container, outside the\n   * component's DOM tree, so ancestor density classes cannot cascade into it.\n   * Forwarded to the underlying `mlv-popup`, which stamps the resolved\n   * `mlv--{density}` class on the detached panel. When omitted, the global\n   * `MlvDensityService` density applies.\n   */\n  readonly mlvDensity = input<MlvDensity | undefined>(undefined);\n\n  /** @protected Component-scoped pagination state service. */\n  protected readonly _service = inject(MlvPaginationService);\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_PAGINATION_I18N);\n\n  /** @private Resolver for ICU parameterized i18n strings. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /** @protected Index of the first item shown on the current page (1-based). */\n  protected readonly _currentItemsStart = computed(\n    () => (this.currentPage() - 1) * this.itemsPerPage() + 1,\n  );\n  /** @protected Index of the last item shown on the current page (clamped to total). */\n  protected readonly _currentItemsEnd = computed(() => {\n    const calculatedEnd = this._currentItemsStart() + this.itemsPerPage() - 1;\n    return Math.min(calculatedEnd, this.totalItems());\n  });\n\n  /** @protected `Infinity` constant exposed for the \"All items\" per-page option comparison in the template. */\n  protected readonly infinity = Infinity;\n\n  /** @protected Resolved total item count display (e.g. \"50 items\"). */\n  protected readonly _resolvedItemCount = computed(() => {\n    const i18n = this._i18n();\n    return this._resolver.resolve(\n      i18n as unknown as Record<string, string>,\n      'itemCount',\n      {\n        count: this.totalItems(),\n      },\n    );\n  });\n\n  /** @protected Resolved \"X–Y of Z\" range display. */\n  protected readonly _resolvedRange = computed(() => {\n    const i18n = this._i18n();\n    return this._resolver.resolve(\n      i18n as unknown as Record<string, string>,\n      'itemRange',\n      {\n        start: this._currentItemsStart(),\n        end: this._currentItemsEnd(),\n        total: this.totalItems(),\n      },\n    );\n  });\n\n  /** @protected Resolved \"All (Z)\" label for the Infinity per-page option in the trigger button. */\n  protected readonly _resolvedAllItems = computed(() => {\n    const i18n = this._i18n();\n    return this._resolver.resolve(\n      i18n as unknown as Record<string, string>,\n      'allItems',\n      {\n        total: this.totalItems(),\n      },\n    );\n  });\n\n  /** @protected Resolves per-page option label (e.g. \"10 items per page\" or \"All (50)\"). */\n  protected _resolvedPerPageLabel(option: number): string {\n    const i18n = this._i18n();\n    if (option === Infinity) {\n      return this._resolver.resolve(\n        i18n as unknown as Record<string, string>,\n        'allItems',\n        {\n          total: this.totalItems(),\n        },\n      );\n    }\n    return this._resolver.resolve(\n      i18n as unknown as Record<string, string>,\n      'itemsPerPage',\n      {\n        count: option,\n      },\n    );\n  }\n\n  /**\n   * @protected Per-page choices in the shape `mlv-dropdown-panel` consumes.\n   *\n   * Labels come from {@link _resolvedPerPageLabel}, so the `Infinity` entry keeps\n   * its \"All (Z)\" wording rather than rendering as a number.\n   */\n  protected readonly _perPageOptions = computed<MlvSelectOption<number>[]>(() =>\n    this._service.normalizedItemsPerPageOptions().map((option) => ({\n      label: this._resolvedPerPageLabel(option),\n      value: option,\n    })),\n  );\n\n  /** @protected Currently selected per-page value, as the panel's array shape. */\n  protected readonly _selectedPerPage = computed<number[]>(() => [\n    this.itemsPerPage(),\n  ]);\n\n  /** @protected Id linking the trigger's `aria-controls` to the panel's listbox. */\n  protected readonly _perPageListboxId = mlvNextId('mlv-pagination-per-page');\n\n  /** @private Aggregated pagination inputs pushed into the pagination service. */\n  private readonly _paginationObject = computed<MlvPaginationObject>(() => ({\n    totalItems: this.totalItems(),\n    currentPage: this.currentPage(),\n    itemsPerPage: this.itemsPerPage(),\n    itemsPerPageOptions: this.perPageOptions(),\n  }));\n\n  constructor() {\n    effect(() => {\n      this._service.pagination.set(this._paginationObject());\n    });\n  }\n\n  /**\n   * Template context handed to a projected `[mlvPaginationCount]` or\n   * `[mlvPaginationPerPageItem]` slot.\n   *\n   * `$implicit` is the current page; `start`/`end` are the 1-based indices of\n   * the first and last item on it (`end` clamped to `totalItems`); `options` is\n   * the per-page list after trimming against `totalItems`.\n   */\n  getCellContext() {\n    return {\n      $implicit: this.currentPage(),\n      total: this.totalItems(),\n      start: this._currentItemsStart(),\n      end: this._currentItemsEnd(),\n      options: this._service.normalizedItemsPerPageOptions(),\n    };\n  }\n\n  /**\n   * Sets `currentPage`. Performs no clamping — callers inside the component\n   * only reach it from enabled controls, so the page is already in range.\n   */\n  goToPage(page: number) {\n    this.currentPage.set(page);\n  }\n\n  /** Sets `itemsPerPage`. `Infinity` puts every item on one page. */\n  setItemsPerPage(itemsPerPage: number): void {\n    this.itemsPerPage.set(itemsPerPage);\n  }\n\n  /**\n   * @protected Applies a per-page choice from the dropdown panel.\n   *\n   * The panel's selection model is array-shaped even for single select, so the\n   * one value is unwrapped here. An empty emission means the panel deselected\n   * rather than selected, which is not a per-page choice.\n   */\n  protected _onPerPageChange(values: readonly number[]): void {\n    const [next] = values;\n    if (next === undefined) return;\n\n    this.setItemsPerPage(next);\n  }\n\n  /**\n   * Jumps to the page typed into an ellipsis page-jump field (Enter keydown).\n   * Out-of-range values are ignored — the field keeps its text and the page\n   * does not change.\n   */\n  setPageFromInput(event: Event): void {\n    const value = Number((event.target as HTMLInputElement).value);\n\n    const totalPages = this._service.totalPages();\n\n    if (value < 1 || value > totalPages) {\n      return;\n    }\n\n    this.goToPage(value);\n  }\n\n  /** @protected Resolves the accessible label for a numbered page button. */\n  protected _pageAriaLabel(page: number): string {\n    return this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'page',\n      { page },\n    );\n  }\n}\n","<div class=\"mlv-pagination__items-count-wrapper\">\n  <div class=\"mlv-pagination__items-count\">\n    @if (_itemsCountRef()?.templateRef; as itemsCountTpl) {\n    <ng-template\n      [ngTemplateOutlet]=\"itemsCountTpl\"\n      [ngTemplateOutletContext]=\"getCellContext()\"\n    ></ng-template>\n    } @else {\n    <span>{{ _resolvedItemCount() }}</span>\n    }\n  </div>\n\n  @if (_service.normalizedItemsPerPageOptions().length) {\n  <div class=\"mlv-pagination__items-per-page\">\n    @if (_itemsPerPageRef()?.templateRef; as itemsPerPageTpl) {\n    <ng-template\n      [ngTemplateOutlet]=\"itemsPerPageTpl\"\n      [ngTemplateOutletContext]=\"getCellContext()\"\n    ></ng-template>\n    } @else {\n    <button\n      type=\"button\"\n      mlvButton\n      mlvDensity=\"compact\"\n      variant=\"transparent\"\n      #popupTrigger=\"mlvPopupTrigger\"\n      [mlvPopupTrigger]=\"perPagePopup\"\n      [ariaHasPopup]=\"'listbox'\"\n      [attr.aria-controls]=\"_perPageListboxId\"\n    >\n      @if (infinity === itemsPerPage()) { {{ _resolvedAllItems() }} } @else { {{\n      _resolvedRange() }} }\n    </button>\n    <mlv-popup #perPagePopup [mlvDensity]=\"mlvDensity()\">\n      <!--\n        The shared panel owns the listbox pattern: it pins listRole/itemRole and\n        the aria selection defaults, and renders the selected state, so none of\n        that is hand-rolled here. Same composition mlv-select uses.\n      -->\n      <mlv-dropdown-panel\n        *mlvPopupContent\n        [options]=\"_perPageOptions()\"\n        [selectedValues]=\"_selectedPerPage()\"\n        [listboxId]=\"_perPageListboxId\"\n        (valueChange)=\"_onPerPageChange($event); popupTrigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n  }\n</div>\n\n@if (_service.totalPages() > 1) {\n<div\n  class=\"mlv-pagination__items-wrapper\"\n  role=\"navigation\"\n  [attr.aria-label]=\"_i18n().navigationLabel\"\n>\n  <div class=\"mlv-pagination__items\">\n    <button\n      type=\"button\"\n      mlvDensity=\"compact\"\n      class=\"mlv-pagination__item\"\n      shape=\"square\"\n      variant=\"transparent\"\n      mlvButton\n      [disabled]=\"currentPage() === 1\"\n      (mlvClick)=\"goToPage(currentPage() - 1)\"\n      [attr.aria-label]=\"_i18n().previousPage\"\n    >\n      <svg lucideChevronLeft size=\"20\" />\n    </button>\n\n    <div class=\"mlv-pagination__items__container\">\n      @for (page of _service.pages(); track `${page}-${$index}`) { @if (page ===\n      _service.moreElementValue) {\n      <mlv-input\n        type=\"number\"\n        (keydown.enter)=\"setPageFromInput($event)\"\n        class=\"mlv-pagination__item mlv-pagination__item--input\"\n        placeholder=\"...\"\n        [ariaLabel]=\"_i18n().goToPage\"\n      />\n      } @else {\n      <button\n        type=\"button\"\n        mlvDensity=\"compact\"\n        class=\"mlv-pagination__item\"\n        [variant]=\"page === currentPage() ? 'primary' : 'transparent'\"\n        shape=\"square\"\n        mlvButton\n        (mlvClick)=\"goToPage(page)\"\n        [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n        [attr.aria-label]=\"_pageAriaLabel(page)\"\n      >\n        {{ page }}\n      </button>\n      } }\n    </div>\n\n    <button\n      type=\"button\"\n      mlvDensity=\"compact\"\n      class=\"mlv-pagination__item\"\n      variant=\"transparent\"\n      shape=\"square\"\n      mlvButton\n      [disabled]=\"currentPage() === _service.totalPages()\"\n      (mlvClick)=\"goToPage(currentPage() + 1)\"\n      [attr.aria-label]=\"_i18n().nextPage\"\n    >\n      <svg lucideChevronRight size=\"20\" />\n    </button>\n  </div>\n</div>\n}\n"]}

package/esm2022/pagination/lib/pagination/pagination.model.js

@@ -0,0 +1 @@
+//# sourceMappingURL=pagination.model.js.map

package/esm2022/pagination/lib/pagination/pagination.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.model.js","sourceRoot":"","sources":["../../../../../../../libs/core/pagination/src/lib/pagination/pagination.model.ts"],"names":[],"mappings":"","sourcesContent":["export interface MlvPaginationObject {\n  totalItems: number;\n  itemsPerPage?: number;\n  itemsPerPageOptions: number[];\n  currentPage?: number;\n}\n"]}

package/esm2022/pagination/lib/pagination/pagination.service.js

@@ -0,0 +1,108 @@
+import { range } from '@malva-ui/cdk/utils';
+import { computed, Injectable, isDevMode, signal } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Constant representing the number of pages which appear before and after current page. */
+const CORNER_DISPLAY_PAGES = 1;
+const SIDE_CURRENT_DISPLAY_PAGES = 2;
+/**
+ * Helper class that is used to retrieve all the pages, the number of pages, and to validate the pagination object.
+ */
+export class MlvPaginationService {
+    /** @hidden */
+    moreElementValue = -1;
+    pagination = signal({
+        currentPage: 1,
+        totalItems: 0,
+        itemsPerPage: 0,
+        itemsPerPageOptions: [],
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    /**
+     * A number array representing the pages of the pagination object.
+     * Array length always the same and configured by CORNER_DISPLAY_PAGES & SIDE_CURRENT_DISPLAY_PAGES.
+     */
+    pages = computed(() => {
+        const pagination = this.pagination();
+        if (!pagination.currentPage) {
+            pagination.currentPage = 1;
+        }
+        this.validate();
+        const totalPages = this.totalPages();
+        const pages = range(totalPages, (i) => i + 1);
+        // +1 for current page, +2 for "more" elements - after start & before end pages
+        const pagesToDisplay = CORNER_DISPLAY_PAGES * 2 + SIDE_CURRENT_DISPLAY_PAGES * 2 + 1 + 2;
+        if (pages.length <= pagesToDisplay) {
+            return pages;
+        }
+        const pagesBefore = pagination.currentPage - 1;
+        const pagesAfter = totalPages - pagination.currentPage;
+        const minimalPagesGap = Math.round(pagesToDisplay / 2);
+        if (pagesBefore < minimalPagesGap) {
+            return [
+                ...pages.slice(0, pagesToDisplay - 2),
+                this.moreElementValue,
+                ...pages.slice(totalPages - CORNER_DISPLAY_PAGES),
+            ];
+        }
+        if (pagesAfter < minimalPagesGap) {
+            return [
+                ...pages.slice(0, CORNER_DISPLAY_PAGES),
+                this.moreElementValue,
+                ...pages.slice(totalPages - pagesToDisplay + 2),
+            ];
+        }
+        return [
+            ...pages.slice(0, CORNER_DISPLAY_PAGES),
+            this.moreElementValue,
+            ...pages.slice(pagination.currentPage - SIDE_CURRENT_DISPLAY_PAGES - 1, pagination.currentPage + SIDE_CURRENT_DISPLAY_PAGES),
+            this.moreElementValue,
+            ...pages.slice(totalPages - CORNER_DISPLAY_PAGES),
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    /**
+     * Total number of pages.
+     */
+    totalPages = computed(() => {
+        const pagination = this.pagination();
+        if (!pagination.itemsPerPage) {
+            return 0;
+        }
+        return Math.ceil(pagination.totalItems / pagination.itemsPerPage);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    normalizedItemsPerPageOptions = computed(() => {
+        const pagination = this.pagination();
+        if (pagination.totalItems <= pagination.itemsPerPageOptions[0]) {
+            return [];
+        }
+        if (pagination.totalItems >=
+            pagination.itemsPerPageOptions[pagination.itemsPerPageOptions.length - 1]) {
+            return pagination.itemsPerPageOptions;
+        }
+        const index = pagination.itemsPerPageOptions.findIndex((option) => option >= pagination.totalItems);
+        return pagination.itemsPerPageOptions.slice(0, index + 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedItemsPerPageOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Provides validation for the pagination object.
+     */
+    validate() {
+        if (isDevMode()) {
+            const pagination = this.pagination();
+            if (isNaN(pagination.totalItems) || pagination.totalItems <= 0) {
+                console.warn(`"totalItems" must be a number greater than zero but got "${pagination.totalItems}". This warning only appears in development mode.`);
+            }
+            const itemsPerPage = pagination.itemsPerPage ?? NaN;
+            if (isNaN(itemsPerPage) || itemsPerPage <= 0) {
+                console.warn(`"itemsPerPage" must be a number greater than zero but got "${pagination.itemsPerPage}". This warning only appears in development mode.`);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=pagination.service.js.map

package/esm2022/pagination/lib/pagination/pagination.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.service.js","sourceRoot":"","sources":["../../../../../../../libs/core/pagination/src/lib/pagination/pagination.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { range } from '@malva-ui/cdk/utils';\nimport { computed, Injectable, isDevMode, signal } from '@angular/core';\nimport type { MlvPaginationObject } from './pagination.model';\n\n/** Constant representing the number of pages which appear before and after current page. */\nconst CORNER_DISPLAY_PAGES = 1;\nconst SIDE_CURRENT_DISPLAY_PAGES = 2;\n\n/**\n * Helper class that is used to retrieve all the pages, the number of pages, and to validate the pagination object.\n */\n@Injectable()\nexport class MlvPaginationService {\n  /** @hidden */\n  readonly moreElementValue = -1;\n\n  readonly pagination = signal<MlvPaginationObject>({\n    currentPage: 1,\n    totalItems: 0,\n    itemsPerPage: 0,\n    itemsPerPageOptions: [],\n  });\n\n  /**\n   * A number array representing the pages of the pagination object.\n   * Array length always the same and configured by CORNER_DISPLAY_PAGES & SIDE_CURRENT_DISPLAY_PAGES.\n   */\n  readonly pages = computed(() => {\n    const pagination = this.pagination();\n\n    if (!pagination.currentPage) {\n      pagination.currentPage = 1;\n    }\n\n    this.validate();\n\n    const totalPages = this.totalPages();\n    const pages = range(totalPages, (i) => i + 1);\n\n    // +1 for current page, +2 for \"more\" elements - after start & before end pages\n    const pagesToDisplay =\n      CORNER_DISPLAY_PAGES * 2 + SIDE_CURRENT_DISPLAY_PAGES * 2 + 1 + 2;\n\n    if (pages.length <= pagesToDisplay) {\n      return pages;\n    }\n\n    const pagesBefore = pagination.currentPage - 1;\n    const pagesAfter = totalPages - pagination.currentPage;\n    const minimalPagesGap = Math.round(pagesToDisplay / 2);\n\n    if (pagesBefore < minimalPagesGap) {\n      return [\n        ...pages.slice(0, pagesToDisplay - 2),\n        this.moreElementValue,\n        ...pages.slice(totalPages - CORNER_DISPLAY_PAGES),\n      ];\n    }\n\n    if (pagesAfter < minimalPagesGap) {\n      return [\n        ...pages.slice(0, CORNER_DISPLAY_PAGES),\n        this.moreElementValue,\n        ...pages.slice(totalPages - pagesToDisplay + 2),\n      ];\n    }\n\n    return [\n      ...pages.slice(0, CORNER_DISPLAY_PAGES),\n      this.moreElementValue,\n      ...pages.slice(\n        pagination.currentPage - SIDE_CURRENT_DISPLAY_PAGES - 1,\n        pagination.currentPage + SIDE_CURRENT_DISPLAY_PAGES,\n      ),\n      this.moreElementValue,\n      ...pages.slice(totalPages - CORNER_DISPLAY_PAGES),\n    ];\n  });\n\n  /**\n   * Total number of pages.\n   */\n  totalPages = computed(() => {\n    const pagination = this.pagination();\n\n    if (!pagination.itemsPerPage) {\n      return 0;\n    }\n\n    return Math.ceil(pagination.totalItems / pagination.itemsPerPage);\n  });\n\n  normalizedItemsPerPageOptions = computed(() => {\n    const pagination = this.pagination();\n\n    if (pagination.totalItems <= pagination.itemsPerPageOptions[0]) {\n      return [];\n    }\n\n    if (\n      pagination.totalItems >=\n      pagination.itemsPerPageOptions[pagination.itemsPerPageOptions.length - 1]\n    ) {\n      return pagination.itemsPerPageOptions;\n    }\n\n    const index = pagination.itemsPerPageOptions.findIndex(\n      (option) => option >= pagination.totalItems,\n    );\n\n    return pagination.itemsPerPageOptions.slice(0, index + 1);\n  });\n\n  /**\n   * Provides validation for the pagination object.\n   */\n  validate(): void {\n    if (isDevMode()) {\n      const pagination = this.pagination();\n\n      if (isNaN(pagination.totalItems) || pagination.totalItems <= 0) {\n        console.warn(\n          `\"totalItems\" must be a number greater than zero but got \"${pagination.totalItems}\". This warning only appears in development mode.`,\n        );\n      }\n\n      const itemsPerPage = pagination.itemsPerPage ?? NaN;\n      if (isNaN(itemsPerPage) || itemsPerPage <= 0) {\n        console.warn(\n          `\"itemsPerPage\" must be a number greater than zero but got \"${pagination.itemsPerPage}\". This warning only appears in development mode.`,\n        );\n      }\n    }\n  }\n}\n"]}

package/esm2022/pagination/malva-ui-core-pagination.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-pagination.js.map

package/esm2022/pagination/malva-ui-core-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-pagination.js","sourceRoot":"","sources":["../../../../../libs/core/pagination/src/malva-ui-core-pagination.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/pin-input/index.js

@@ -0,0 +1,3 @@
+export * from './lib/pin-input/pin-input';
+export * from './lib/pin-input/pin-input-separator';
+//# sourceMappingURL=index.js.map

package/esm2022/pin-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/pin-input/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qCAAqC,CAAC","sourcesContent":["export * from './lib/pin-input/pin-input';\nexport * from './lib/pin-input/pin-input-separator';\n"]}

package/esm2022/pin-input/lib/pin-input/pin-input-separator.js

@@ -0,0 +1,31 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Structural directive used to provide a custom template for the separator
+ * rendered between `mlv-pin-input` cells. When no instance is projected, the
+ * component falls back to a default Lucide dot icon.
+ *
+ * @example
+ * ```html
+ * <mlv-pin-input [length]="6" separator="each">
+ *   <ng-template mlvPinInputSeparator>
+ *     <span class="dash">—</span>
+ *   </ng-template>
+ * </mlv-pin-input>
+ * ```
+ */
+export class MlvPinInputSeparator {
+    /**
+     * The template reference for the projected separator content.
+     */
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInputSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPinInputSeparator, isStandalone: true, selector: "[mlvPinInputSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInputSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPinInputSeparator]',
+                }]
+        }] });
+//# sourceMappingURL=pin-input-separator.js.map

package/esm2022/pin-input/lib/pin-input/pin-input-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input-separator.js","sourceRoot":"","sources":["../../../../../../../libs/core/pin-input/src/lib/pin-input/pin-input-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;;;;;;;;;;;;GAaG;AAIH,MAAM,OAAO,oBAAoB;IAC/B;;OAEG;IACM,WAAW,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;uGAJzC,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAHhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;iBACnC","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Structural directive used to provide a custom template for the separator\n * rendered between `mlv-pin-input` cells. When no instance is projected, the\n * component falls back to a default Lucide dot icon.\n *\n * @example\n * ```html\n * <mlv-pin-input [length]=\"6\" separator=\"each\">\n *   <ng-template mlvPinInputSeparator>\n *     <span class=\"dash\">—</span>\n *   </ng-template>\n * </mlv-pin-input>\n * ```\n */\n@Directive({\n  selector: '[mlvPinInputSeparator]',\n})\nexport class MlvPinInputSeparator {\n  /**\n   * The template reference for the projected separator content.\n   */\n  readonly templateRef = inject(TemplateRef<unknown>);\n}\n"]}

package/esm2022/pin-input/lib/pin-input/pin-input.js

@@ -0,0 +1,365 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, contentChild, effect, forwardRef, inject, input, model, output, signal, viewChildren, ViewEncapsulation, } from '@angular/core';
+import { LucideDot } from '@lucide/angular';
+import { clamp } from '@malva-ui/cdk/utils';
+import { MlvHint, MlvDescription, MlvLabel, MLV_FORM_CONTROL, MlvMessage, MlvSignalFormControlBase, } from '@malva-ui/core/form-utils';
+import { MlvInput } from '@malva-ui/core/input';
+import { MLV_PIN_INPUT_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvPinInputSeparator } from './pin-input-separator';
+import * as i0 from "@angular/core";
+/**
+ * OTP / PIN input component — a row of single-character `mlv-input` cells that
+ * behave as one logical form control.
+ *
+ * - Auto-advances focus to the next cell after a character is entered.
+ * - Backspace moves focus backwards and clears the cell.
+ * - Arrow keys navigate between cells.
+ * - Pasting a string distributes characters across cells starting from the first cell.
+ * - Integrates with Angular Reactive Forms and Template-Driven Forms via CVA.
+ * - Supports `mlv-label`, `mlv-hint`, and `mlv-message` via the same `label`,
+ *   `hint`, `message`, and `state` inputs as every other Malva UI form control.
+ *
+ * @example Reactive form with label and error message
+ * ```html
+ * <mlv-pin-input
+ *   [length]="6"
+ *   [formControl]="otpControl"
+ *   label="One-time code"
+ *   hint="Sent to +1 ••• 1234"
+ *   [state]="otpControl.invalid && otpControl.touched ? 'error' : 'default'"
+ *   [message]="otpControl.invalid && otpControl.touched ? 'Code is invalid' : ''"
+ * />
+ * ```
+ *
+ * @example Password mode
+ * ```html
+ * <mlv-pin-input type="password" [length]="6" [formControl]="pinControl" />
+ * ```
+ */
+export class MlvPinInput extends MlvSignalFormControlBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_PIN_INPUT_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /**
+     * Number of cells (characters) in the PIN / OTP.
+     * @default 6
+     */
+    length = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /**
+     * Input type applied to each cell.
+     * Use `'password'` to mask characters; `'number'` for digit-only PIN.
+     * @default 'text'
+     */
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder character shown in each empty cell.
+     * @default '·'
+     */
+    placeholder = input('·', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls separator placement between cells.
+     *
+     * - `''` (default) — no separators
+     * - `'each'` — separator between every pair of consecutive cells
+     * - comma-separated indices (e.g. `'1,3'`) — separator before the cell at
+     *   each listed index. With `length=4` and `'1,3'` the result is
+     *   `[0]—[1][2]—[3]`.
+     *
+     * By default separators render as a Lucide dot icon. Project a custom
+     * template via `*mlvPinInputSeparator` to override.
+     *
+     * @default ''
+     */
+    separator = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the complete value string when all cells are filled.
+     */
+    completed = output();
+    /** The complete PIN/OTP value used by all Angular forms APIs. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ── Internal state ─────────────────────────────────────────────────────────
+    /**
+     * @protected Char values per cell index. Sparse — empty cell = `''`.
+     */
+    _values = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_values" }] : /* istanbul ignore next */ []));
+    /** @private Latest model value written by this component, used to avoid collapsing sparse cells. */
+    _internalModelWrite = null;
+    /** @protected Stable cell indexes derived from {@link length}. */
+    _cellIndices = computed(() => Array.from({ length: this.length() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cellIndices" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Live refs to each rendered `<mlv-input>` cell, order-aligned
+     * with `_cellControls`. Used for programmatic focus / text selection.
+     */
+    _cells = viewChildren(MlvInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cells" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Optional projected template used as separator content between
+     * cells. When absent the component renders a default Lucide dot icon.
+     */
+    _separatorDef = contentChild(MlvPinInputSeparator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorDef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Custom separator template, derived from `_separatorDef`.
+     */
+    _separatorTemplate = computed(() => this._separatorDef()?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved set of cell indices that should be preceded by a
+     * separator. Derived from the `separator` input and `length`.
+     *
+     * - `''` → empty set
+     * - `'each'` → `{1, 2, …, length - 1}`
+     * - `'1,3'` → `{1, 3}` (values outside `[1, length - 1]` are ignored)
+     */
+    _separatorPositions = computed(() => {
+        const spec = this.separator().trim();
+        if (!spec)
+            return new Set();
+        const len = this.length();
+        if (spec === 'each') {
+            return new Set(Array.from({ length: Math.max(0, len - 1) }, (_, i) => i + 1));
+        }
+        const parsed = spec
+            .split(',')
+            .map((s) => Number.parseInt(s.trim(), 10))
+            .filter((n) => Number.isInteger(n) && n > 0 && n < len);
+        return new Set(parsed);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorPositions" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether a separator should be rendered before the cell at
+     * `index`.
+     */
+    _hasSeparatorBefore(index) {
+        return this._separatorPositions().has(index);
+    }
+    /**
+     * @protected Stable per-cell id. The first cell's id is referenced by the
+     * optional `<mlv-label>`'s `for` attribute so clicking the label focuses
+     * the first cell.
+     */
+    _cellId(index) {
+        return `${this.id()}-cell-${index}`;
+    }
+    /**
+     * @protected Resolves a single cell's aria-label, e.g. "Digit 2 of 6".
+     * @param index 0-based cell index.
+     */
+    _cellLabel(index) {
+        return this._resolver.resolve(this._i18n(), 'digit', { position: index + 1, length: this.length() });
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const value = this.value() ?? '';
+            const len = this.length();
+            if (this._internalModelWrite === value) {
+                this._internalModelWrite = null;
+                return;
+            }
+            const chars = value.split('').slice(0, len);
+            const padded = Array.from({ length: len }, (_, index) => chars[index] ?? '');
+            this._values.set(padded);
+        });
+    }
+    // ── Forms value ────────────────────────────────────────────────────────────
+    /** Whether the control holds a clearable value — At least one cell filled. */
+    hasValue = computed(() => this._values().some((cell) => cell !== ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // ── Cell event handlers ────────────────────────────────────────────────────
+    /**
+     * @protected Reacts to cell FormControl value changes. Normalises multi-char
+     * input to the last character and auto-advances focus, or distributes a
+     * multi-char string across subsequent cells when triggered by IME / fast typing.
+     */
+    _onCellChange(index, raw) {
+        // When a cell already holds a character and the user types again, the
+        // native input accumulates (e.g. cell was '3', user types '4' → '34').
+        // Strip the previous value prefix so we treat only the new keystroke.
+        let effective = raw;
+        if (effective.length > 1) {
+            const prev = this._values()[index] ?? '';
+            if (prev && effective.startsWith(prev)) {
+                effective = effective.slice(prev.length);
+            }
+        }
+        if (effective.length > 1) {
+            this._distributeChars(effective, index);
+            return;
+        }
+        const char = effective.slice(-1);
+        this._setCell(index, char);
+        if (!char) {
+            this._emit();
+            return;
+        }
+        if (index < this.length() - 1) {
+            this._focusCell(index + 1);
+        }
+        else {
+            // Last cell — no next cell to advance to. Re-select the content so the
+            // next keystroke replaces this character instead of appending.
+            this._cellAt(index)?.select();
+        }
+        this._emit();
+    }
+    /**
+     * @protected Handles cell keyboard input — Backspace, Delete, arrows, Home/End.
+     */
+    _onCellKeydown(index, event) {
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (this._values()[index]) {
+                    this._setCell(index, '');
+                    this._emit();
+                }
+                else {
+                    this._focusCell(index - 1);
+                }
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this._setCell(index, '');
+                this._emit();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this._focusCell(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this._focusCell(index + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusCell(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusCell(this.length() - 1);
+                break;
+        }
+    }
+    /**
+     * @protected Pastes a string of characters across cells starting from the
+     * first cell. Whitespace is stripped before distribution.
+     */
+    _onCellPaste(_index, event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        this._distributeChars(text, 0);
+    }
+    /**
+     * @protected Selects the contents of a cell when it receives focus so the
+     * next keystroke replaces the current character.
+     */
+    _onCellFocus(index) {
+        this.setFocused(true);
+        this._cellAt(index)?.select();
+    }
+    /**
+     * @protected Emits the signal-forms touch output when a cell loses focus.
+     */
+    _onCellBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    // ── Private helpers ────────────────────────────────────────────────────────
+    /**
+     * @private Sets a single cell's value, preserving the length of `_values`.
+     */
+    _setCell(index, char) {
+        const updated = [...this._values()];
+        while (updated.length < this.length())
+            updated.push('');
+        updated[index] = char;
+        this._values.set(updated);
+    }
+    /**
+     * @private Distributes a sequence of characters across cells starting from
+     * `startIndex`, advances focus to the next empty cell, and emits.
+     */
+    _distributeChars(text, startIndex) {
+        const chars = text.replace(/\s/g, '').split('');
+        const updated = Array.from({ length: this.length() }, (_, i) => this._values()[i] ?? '');
+        let lastFilled = startIndex;
+        for (let i = 0; i < chars.length && startIndex + i < this.length(); i++) {
+            updated[startIndex + i] = chars[i];
+            lastFilled = startIndex + i;
+        }
+        this._values.set(updated);
+        this._focusCell(lastFilled + 1);
+        this._emit();
+    }
+    /**
+     * @private Focuses the cell at the given index, clamped to `[0, length - 1]`.
+     */
+    _focusCell(index) {
+        const clamped = clamp(index, 0, this.length() - 1);
+        this._cellAt(clamped)?.focus();
+    }
+    /**
+     * @private Returns the `MlvInput` instance rendered for the cell at
+     * the given index, or `null` if the cell is not yet rendered.
+     */
+    _cellAt(index) {
+        return this._cells()[index] ?? null;
+    }
+    /**
+     * @private Pushes the current joined value to the forms model and
+     * emits `completed` when every cell is filled.
+     */
+    _emit() {
+        const values = this._values();
+        const full = values.join('');
+        if (this.value() !== full) {
+            this._internalModelWrite = full;
+            this.value.set(full);
+        }
+        if (values.length === this.length() && values.every((v) => v !== '')) {
+            this.completed.emit(full);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPinInput, isStandalone: true, selector: "mlv-pin-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", value: "valueChange" }, host: { properties: { "class": "\"mlv-pin-input--state-\" + resolvedState()", "class.mlv-pin-input--disabled": "computedDisabled()", "class.mlv-pin-input--focused": "focused()", "attr.role": "\"group\"", "attr.aria-label": "label() || _i18n().pinEntry", "attr.aria-disabled": "computedDisabled() || null" }, classAttribute: "mlv-pin-input" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvPinInput),
+            },
+        ], queries: [{ propertyName: "_separatorDef", first: true, predicate: MlvPinInputSeparator, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_cells", predicate: MlvInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (label() || hint()) {\n<mlv-label [for]=\"_cellId(0)\" [required]=\"required()\">\n  {{ label() }} @if (hint()) {\n  <mlv-hint>{{ hint() }}</mlv-hint>\n  }\n</mlv-label>\n}\n\n<div class=\"mlv-pin-input__cells\">\n  @for (i of _cellIndices(); track i) { @if (_hasSeparatorBefore(i)) {\n  <span class=\"mlv-pin-input__separator\" aria-hidden=\"true\">\n    @if (_separatorTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <svg lucideDot [size]=\"16\" />\n    }\n  </span>\n  }\n  <mlv-input\n    class=\"mlv-pin-input__cell\"\n    [id]=\"_cellId(i)\"\n    [type]=\"type()\"\n    [state]=\"resolvedState()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_values()[i] ?? ''\"\n    [disabled]=\"computedDisabled()\"\n    [readonly]=\"readonly()\"\n    autocomplete=\"one-time-code\"\n    inputMode=\"numeric\"\n    [ariaLabel]=\"_cellLabel(i)\"\n    [ariaDescribedBy]=\"_describedBy()\"\n    [required]=\"required()\"\n    (valueChange)=\"_onCellChange(i, $event)\"\n    (keydown)=\"_onCellKeydown(i, $event)\"\n    (paste)=\"_onCellPaste(i, $event)\"\n    (inputFocus)=\"_onCellFocus(i)\"\n    (inputBlur)=\"_onCellBlur()\"\n  />\n  }\n</div>\n\n@if (description()) {\n<mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n} @if (message()) {\n<mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n  {{ message() }}\n</mlv-message>\n}\n", styles: [".mlv-pin-input{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.375rem}.mlv-pin-input__cells{display:inline-flex;align-items:center;gap:.5rem}.mlv-pin-input__separator{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--mlv-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.mlv-pin-input__cell{flex:0 0 auto;width:2.75rem}.mlv-pin-input__cell .mlv-form-control-wrapper__control-container{padding:0}.mlv-pin-input__cell .mlv-input__native{padding:0;text-align:center;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-l);font-weight:var(--mlv-font-weight-semibold);font-variant-numeric:tabular-nums;caret-color:var(--mlv-border-focus)}.mlv-pin-input__cell .mlv-input__native::placeholder{font-weight:var(--mlv-font-weight-normal);color:var(--mlv-text-tertiary)}.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-outer-spin-button,.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.mlv-pin-input__cell .mlv-input__native[type=number]{appearance:textfield}.mlv-pin-input--disabled{pointer-events:none}\n"], dependencies: [{ kind: "component", type: MlvInput, selector: "mlv-input", inputs: ["type", "placeholder", "autocomplete", "inputMode", "maxLength", "minLength", "pattern", "name", "autofocus", "min", "max", "step", "bare", "projectControl", "role", "ariaExpanded", "ariaHasPopup", "ariaAutocomplete", "ariaControls", "ariaActiveDescendant", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputFocus", "inputBlur"] }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDot, selector: "svg[lucideDot]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-pin-input', imports: [
+                        MlvInput,
+                        MlvDescription,
+                        MlvLabel,
+                        MlvHint,
+                        MlvMessage,
+                        NgTemplateOutlet,
+                        LucideDot,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvPinInput),
+                        },
+                    ], host: {
+                        class: 'mlv-pin-input',
+                        '[class]': '"mlv-pin-input--state-" + resolvedState()',
+                        '[class.mlv-pin-input--disabled]': 'computedDisabled()',
+                        '[class.mlv-pin-input--focused]': 'focused()',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-label]': 'label() || _i18n().pinEntry',
+                        '[attr.aria-disabled]': 'computedDisabled() || null',
+                    }, template: "@if (label() || hint()) {\n<mlv-label [for]=\"_cellId(0)\" [required]=\"required()\">\n  {{ label() }} @if (hint()) {\n  <mlv-hint>{{ hint() }}</mlv-hint>\n  }\n</mlv-label>\n}\n\n<div class=\"mlv-pin-input__cells\">\n  @for (i of _cellIndices(); track i) { @if (_hasSeparatorBefore(i)) {\n  <span class=\"mlv-pin-input__separator\" aria-hidden=\"true\">\n    @if (_separatorTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <svg lucideDot [size]=\"16\" />\n    }\n  </span>\n  }\n  <mlv-input\n    class=\"mlv-pin-input__cell\"\n    [id]=\"_cellId(i)\"\n    [type]=\"type()\"\n    [state]=\"resolvedState()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_values()[i] ?? ''\"\n    [disabled]=\"computedDisabled()\"\n    [readonly]=\"readonly()\"\n    autocomplete=\"one-time-code\"\n    inputMode=\"numeric\"\n    [ariaLabel]=\"_cellLabel(i)\"\n    [ariaDescribedBy]=\"_describedBy()\"\n    [required]=\"required()\"\n    (valueChange)=\"_onCellChange(i, $event)\"\n    (keydown)=\"_onCellKeydown(i, $event)\"\n    (paste)=\"_onCellPaste(i, $event)\"\n    (inputFocus)=\"_onCellFocus(i)\"\n    (inputBlur)=\"_onCellBlur()\"\n  />\n  }\n</div>\n\n@if (description()) {\n<mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n} @if (message()) {\n<mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n  {{ message() }}\n</mlv-message>\n}\n", styles: [".mlv-pin-input{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.375rem}.mlv-pin-input__cells{display:inline-flex;align-items:center;gap:.5rem}.mlv-pin-input__separator{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--mlv-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.mlv-pin-input__cell{flex:0 0 auto;width:2.75rem}.mlv-pin-input__cell .mlv-form-control-wrapper__control-container{padding:0}.mlv-pin-input__cell .mlv-input__native{padding:0;text-align:center;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-l);font-weight:var(--mlv-font-weight-semibold);font-variant-numeric:tabular-nums;caret-color:var(--mlv-border-focus)}.mlv-pin-input__cell .mlv-input__native::placeholder{font-weight:var(--mlv-font-weight-normal);color:var(--mlv-text-tertiary)}.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-outer-spin-button,.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.mlv-pin-input__cell .mlv-input__native[type=number]{appearance:textfield}.mlv-pin-input--disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _cells: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvInput), { isSignal: true }] }], _separatorDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPinInputSeparator), { isSignal: true }] }] } });
+//# sourceMappingURL=pin-input.js.map