@ojiepermana/angular 21.3.3 → 22.0.1

package/fesm2022/ojiepermana-angular-component-pagination.mjs

@@ -1,21 +1,41 @@
+import { buttonVariants } from '@ojiepermana/angular/component/button';
 import * as i0 from '@angular/core';
-import { model, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular/component/utils';
-import { buttonVariants } from '@ojiepermana/angular/component/button';
 
 /**
  * Simple pagination. Emits the desired page via `(pageChange)` and reflects
- * the current page through the `page` model input.
+ * the current page through the `page` model input while allowing lightweight
+ * label and visibility tweaks for localized and icon-only demos.
  */
 class PaginationComponent {
-    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
-    total = input(1, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    total = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
     /** Number of sibling pages on each side of current. */
-    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    pageChange = output();
-    classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    siblingCount = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    showPageNumbers = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageNumbers" }] : /* istanbul ignore next */ []));
+    previousText = input('Previous', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousText" }] : /* istanbul ignore next */ []));
+    nextText = input('Next', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextText" }] : /* istanbul ignore next */ []));
+    previousAriaLabel = input('Go to previous page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousAriaLabel" }] : /* istanbul ignore next */ []));
+    nextAriaLabel = input('Go to next page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
+    formatPageLabel = input((page) => page.toString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatPageLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     pages = computed(() => {
+        if (!this.showPageNumbers()) {
+            return [];
+        }
         const total = Math.max(1, this.total());
         const current = Math.min(Math.max(1, this.page()), total);
         const siblings = Math.max(0, this.siblingCount());
@@ -32,9 +52,12 @@ class PaginationComponent {
         if (total > 1)
             range.push({ key: `p-${total}`, kind: 'page', value: total });
         return range;
-    }, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
-    navClasses() {
-        return cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    navClasses(hasText) {
+        return hasText
+            ? cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5')
+            : cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'h-9 w-9');
     }
     pageClasses(active) {
         return cn(buttonVariants({ variant: active ? 'outline' : 'ghost', size: 'icon' }), 'h-9 w-9');
@@ -45,19 +68,19 @@ class PaginationComponent {
         if (next === this.page())
             return;
         this.page.set(next);
-        this.pageChange.emit(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PaginationComponent, isStandalone: true, selector: "ui-pagination, nav[ui-pagination]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageChange: "pageChange" }, host: { attributes: { "role": "navigation", "aria-label": "pagination" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: PaginationComponent, isStandalone: true, selector: "ui-pagination, nav[ui-pagination]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, previousAriaLabel: { classPropertyName: "previousAriaLabel", publicName: "previousAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, formatPageLabel: { classPropertyName: "formatPageLabel", publicName: "formatPageLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation", "aria-label": "pagination" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
     <ul class="flex flex-row items-center gap-1">
       <li>
         <button
           type="button"
           [disabled]="page() <= 1 || null"
-          [attr.aria-label]="'Go to previous page'"
-          [class]="navClasses()"
+          [attr.aria-label]="previousAriaLabel()"
+          [class]="navClasses(previousText().length > 0)"
           (click)="go(page() - 1)">
           <svg
+            aria-hidden="true"
             class="h-4 w-4"
             viewBox="0 0 24 24"
             fill="none"
@@ -67,7 +90,9 @@ class PaginationComponent {
             stroke-linejoin="round">
             <polyline points="15 18 9 12 15 6" />
           </svg>
-          <span>Previous</span>
+          @if (previousText()) {
+            <span>{{ previousText() }}</span>
+          }
         </button>
       </li>
 
@@ -79,7 +104,7 @@ class PaginationComponent {
               [attr.aria-current]="p.value === page() ? 'page' : null"
               [class]="pageClasses(p.value === page())"
               (click)="go(p.value)">
-              {{ p.value }}
+              {{ formatPageLabel()(p.value) }}
             </button>
           } @else {
             <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">…</span>
@@ -91,11 +116,14 @@ class PaginationComponent {
         <button
           type="button"
           [disabled]="page() >= total() || null"
-          [attr.aria-label]="'Go to next page'"
-          [class]="navClasses()"
+          [attr.aria-label]="nextAriaLabel()"
+          [class]="navClasses(nextText().length > 0)"
           (click)="go(page() + 1)">
-          <span>Next</span>
+          @if (nextText()) {
+            <span>{{ nextText() }}</span>
+          }
           <svg
+            aria-hidden="true"
             class="h-4 w-4"
             viewBox="0 0 24 24"
             fill="none"
@@ -110,7 +138,7 @@ class PaginationComponent {
     </ul>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-pagination, nav[ui-pagination]',
@@ -126,10 +154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <button
           type="button"
           [disabled]="page() <= 1 || null"
-          [attr.aria-label]="'Go to previous page'"
-          [class]="navClasses()"
+          [attr.aria-label]="previousAriaLabel()"
+          [class]="navClasses(previousText().length > 0)"
           (click)="go(page() - 1)">
           <svg
+            aria-hidden="true"
             class="h-4 w-4"
             viewBox="0 0 24 24"
             fill="none"
@@ -139,7 +168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             stroke-linejoin="round">
             <polyline points="15 18 9 12 15 6" />
           </svg>
-          <span>Previous</span>
+          @if (previousText()) {
+            <span>{{ previousText() }}</span>
+          }
         </button>
       </li>
 
@@ -151,7 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               [attr.aria-current]="p.value === page() ? 'page' : null"
               [class]="pageClasses(p.value === page())"
               (click)="go(p.value)">
-              {{ p.value }}
+              {{ formatPageLabel()(p.value) }}
             </button>
           } @else {
             <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">…</span>
@@ -163,11 +194,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <button
           type="button"
           [disabled]="page() >= total() || null"
-          [attr.aria-label]="'Go to next page'"
-          [class]="navClasses()"
+          [attr.aria-label]="nextAriaLabel()"
+          [class]="navClasses(nextText().length > 0)"
           (click)="go(page() + 1)">
-          <span>Next</span>
+          @if (nextText()) {
+            <span>{{ nextText() }}</span>
+          }
           <svg
+            aria-hidden="true"
             class="h-4 w-4"
             viewBox="0 0 24 24"
             fill="none"
@@ -182,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     </ul>
   `,
                 }]
-        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], previousAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousAriaLabel", required: false }] }], nextAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextAriaLabel", required: false }] }], formatPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPageLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ojiepermana-angular-component-pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-pagination.mjs","sources":["../../../projects/angular/component/pagination/src/lib/pagination.component.ts","../../../projects/angular/component/pagination/ojiepermana-angular-component-pagination.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\nimport { buttonVariants } from '@ojiepermana/angular/component/button';\n\n/**\n * Simple pagination. Emits the desired page via `(pageChange)` and reflects\n * the current page through the `page` model input.\n */\n@Component({\n  selector: 'ui-pagination, nav[ui-pagination]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'navigation',\n    'aria-label': 'pagination',\n    '[class]': 'classes()',\n  },\n  template: `\n    <ul class=\"flex flex-row items-center gap-1\">\n      <li>\n        <button\n          type=\"button\"\n          [disabled]=\"page() <= 1 || null\"\n          [attr.aria-label]=\"'Go to previous page'\"\n          [class]=\"navClasses()\"\n          (click)=\"go(page() - 1)\">\n          <svg\n            class=\"h-4 w-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n          <span>Previous</span>\n        </button>\n      </li>\n\n      @for (p of pages(); track p.key) {\n        <li>\n          @if (p.kind === 'page') {\n            <button\n              type=\"button\"\n              [attr.aria-current]=\"p.value === page() ? 'page' : null\"\n              [class]=\"pageClasses(p.value === page())\"\n              (click)=\"go(p.value)\">\n              {{ p.value }}\n            </button>\n          } @else {\n            <span class=\"flex h-9 w-9 items-center justify-center\" aria-hidden=\"true\">…</span>\n          }\n        </li>\n      }\n\n      <li>\n        <button\n          type=\"button\"\n          [disabled]=\"page() >= total() || null\"\n          [attr.aria-label]=\"'Go to next page'\"\n          [class]=\"navClasses()\"\n          (click)=\"go(page() + 1)\">\n          <span>Next</span>\n          <svg\n            class=\"h-4 w-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  `,\n})\nexport class PaginationComponent {\n  readonly page = model<number>(1);\n  readonly total = input<number>(1);\n  /** Number of sibling pages on each side of current. */\n  readonly siblingCount = input<number>(1);\n  readonly class = input<string>('');\n\n  readonly pageChange = output<number>();\n\n  protected readonly classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()));\n\n  protected readonly pages = computed(() => {\n    const total = Math.max(1, this.total());\n    const current = Math.min(Math.max(1, this.page()), total);\n    const siblings = Math.max(0, this.siblingCount());\n    const range: Array<{ key: string; kind: 'page' | 'ellipsis'; value: number }> = [];\n    const start = Math.max(2, current - siblings);\n    const end = Math.min(total - 1, current + siblings);\n\n    range.push({ key: 'p-1', kind: 'page', value: 1 });\n    if (start > 2) range.push({ key: 'e-start', kind: 'ellipsis', value: -1 });\n    for (let i = start; i <= end; i++) range.push({ key: `p-${i}`, kind: 'page', value: i });\n    if (end < total - 1) range.push({ key: 'e-end', kind: 'ellipsis', value: -1 });\n    if (total > 1) range.push({ key: `p-${total}`, kind: 'page', value: total });\n    return range;\n  });\n\n  protected navClasses(): string {\n    return cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5');\n  }\n\n  protected pageClasses(active: boolean): string {\n    return cn(buttonVariants({ variant: active ? 'outline' : 'ghost', size: 'icon' }), 'h-9 w-9');\n  }\n\n  protected go(target: number): void {\n    const total = Math.max(1, this.total());\n    const next = Math.min(Math.max(1, target), total);\n    if (next === this.page()) return;\n    this.page.set(next);\n    this.pageChange.emit(next);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ojiepermana-angular-component-pagination.mjs","sources":["../../../projects/angular/component/pagination/pagination.component.ts","../../../projects/angular/component/pagination/ojiepermana-angular-component-pagination.ts"],"sourcesContent":["import { buttonVariants } from '@ojiepermana/angular/component/button';\nimport { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Simple pagination. Emits the desired page via `(pageChange)` and reflects\n * the current page through the `page` model input while allowing lightweight\n * label and visibility tweaks for localized and icon-only demos.\n */\n@Component({\n  selector: 'ui-pagination, nav[ui-pagination]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'navigation',\n    'aria-label': 'pagination',\n    '[class]': 'classes()',\n  },\n  template: `\n    <ul class=\"flex flex-row items-center gap-1\">\n      <li>\n        <button\n          type=\"button\"\n          [disabled]=\"page() <= 1 || null\"\n          [attr.aria-label]=\"previousAriaLabel()\"\n          [class]=\"navClasses(previousText().length > 0)\"\n          (click)=\"go(page() - 1)\">\n          <svg\n            aria-hidden=\"true\"\n            class=\"h-4 w-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n          @if (previousText()) {\n            <span>{{ previousText() }}</span>\n          }\n        </button>\n      </li>\n\n      @for (p of pages(); track p.key) {\n        <li>\n          @if (p.kind === 'page') {\n            <button\n              type=\"button\"\n              [attr.aria-current]=\"p.value === page() ? 'page' : null\"\n              [class]=\"pageClasses(p.value === page())\"\n              (click)=\"go(p.value)\">\n              {{ formatPageLabel()(p.value) }}\n            </button>\n          } @else {\n            <span class=\"flex h-9 w-9 items-center justify-center\" aria-hidden=\"true\">…</span>\n          }\n        </li>\n      }\n\n      <li>\n        <button\n          type=\"button\"\n          [disabled]=\"page() >= total() || null\"\n          [attr.aria-label]=\"nextAriaLabel()\"\n          [class]=\"navClasses(nextText().length > 0)\"\n          (click)=\"go(page() + 1)\">\n          @if (nextText()) {\n            <span>{{ nextText() }}</span>\n          }\n          <svg\n            aria-hidden=\"true\"\n            class=\"h-4 w-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  `,\n})\nexport class PaginationComponent {\n  readonly page = model<number>(1);\n  readonly total = input<number>(1);\n  /** Number of sibling pages on each side of current. */\n  readonly siblingCount = input<number>(1);\n  readonly showPageNumbers = input<boolean>(true);\n  readonly previousText = input<string>('Previous');\n  readonly nextText = input<string>('Next');\n  readonly previousAriaLabel = input<string>('Go to previous page');\n  readonly nextAriaLabel = input<string>('Go to next page');\n  readonly formatPageLabel = input<(page: number) => string>((page) => page.toString());\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()));\n\n  protected readonly pages = computed(() => {\n    if (!this.showPageNumbers()) {\n      return [];\n    }\n\n    const total = Math.max(1, this.total());\n    const current = Math.min(Math.max(1, this.page()), total);\n    const siblings = Math.max(0, this.siblingCount());\n    const range: Array<{ key: string; kind: 'page' | 'ellipsis'; value: number }> = [];\n    const start = Math.max(2, current - siblings);\n    const end = Math.min(total - 1, current + siblings);\n\n    range.push({ key: 'p-1', kind: 'page', value: 1 });\n    if (start > 2) range.push({ key: 'e-start', kind: 'ellipsis', value: -1 });\n    for (let i = start; i <= end; i++) range.push({ key: `p-${i}`, kind: 'page', value: i });\n    if (end < total - 1) range.push({ key: 'e-end', kind: 'ellipsis', value: -1 });\n    if (total > 1) range.push({ key: `p-${total}`, kind: 'page', value: total });\n    return range;\n  });\n\n  protected navClasses(hasText: boolean): string {\n    return hasText\n      ? cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5')\n      : cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'h-9 w-9');\n  }\n\n  protected pageClasses(active: boolean): string {\n    return cn(buttonVariants({ variant: active ? 'outline' : 'ghost', size: 'icon' }), 'h-9 w-9');\n  }\n\n  protected go(target: number): void {\n    const total = Math.max(1, this.total());\n    const next = Math.min(Math.max(1, target), total);\n    if (next === this.page()) return;\n    this.page.set(next);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}