nath-angular-ui 0.4.2 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
|
|
|
4
4
|
import { CommonModule, NgTemplateOutlet, DOCUMENT, NgStyle, NgClass, KeyValuePipe } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/cdk/overlay';
|
|
6
6
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
7
|
-
import { LucideX, LucideChevronDown, isLucideIconComponent, LucideDynamicIcon, LucideMinimize2, LucideMaximize2, LucideEye, LucideLoaderCircle, LucideSquare, LucideSquareCheck, LucideInbox, LucideChevronRight, LucideChevronsRight, LucideChevronLeft, LucideChevronsLeft, LucideCircle, LucideArrowUp, LucideArrowDown, LucideArrowUp01, LucideArrowDown01, LucideArrowUpAZ, LucideArrowDownAZ, LucideMoon, LucideSun, LucideCircleCheck, LucideCircleAlert, LucideInfo, LucideTriangleAlert } from '@lucide/angular';
|
|
7
|
+
import { LucideX, LucideChevronDown, isLucideIconComponent, LucideDynamicIcon, LucideHouse, LucideMinimize2, LucideMaximize2, LucideEye, LucideLoaderCircle, LucideSquare, LucideSquareCheck, LucideInbox, LucideChevronRight, LucideChevronsRight, LucideChevronLeft, LucideChevronsLeft, LucideCircle, LucideArrowUp, LucideArrowDown, LucideArrowUp01, LucideArrowDown01, LucideArrowUpAZ, LucideArrowDownAZ, LucideMoon, LucideSun, LucideCircleCheck, LucideCircleAlert, LucideInfo, LucideTriangleAlert } from '@lucide/angular';
|
|
8
8
|
import * as i1$1 from '@angular/router';
|
|
9
9
|
import { RouterModule, Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
|
|
10
10
|
import * as i1$2 from '@angular/forms';
|
|
@@ -306,11 +306,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
306
306
|
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], allowIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowIndeterminate", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], yesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yesLabel", required: false }] }], noLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noLabel", required: false }] }], indeterminateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checkboxRef: [{ type: i0.ViewChild, args: ['checkboxElement', { isSignal: true }] }] } });
|
|
307
307
|
|
|
308
308
|
class BreadcrumbService {
|
|
309
|
+
// A private writable signal holding the home item which will always be visible, if any
|
|
310
|
+
_home = signal(null, /* @ts-ignore */
|
|
311
|
+
...(ngDevMode ? [{ debugName: "_home" }] : /* istanbul ignore next */ []));
|
|
309
312
|
// A private writable signal holding the current breadcrumbs array
|
|
310
313
|
_breadcrumbs = signal([], /* @ts-ignore */
|
|
311
314
|
...(ngDevMode ? [{ debugName: "_breadcrumbs" }] : /* istanbul ignore next */ []));
|
|
312
|
-
// Expose as a read-only
|
|
315
|
+
// Expose as a read-only signals so components can only read, not mutate directly
|
|
316
|
+
home = this._home.asReadonly();
|
|
313
317
|
breadcrumbs = this._breadcrumbs.asReadonly();
|
|
318
|
+
/**
|
|
319
|
+
* Set the home item
|
|
320
|
+
* @param crumb The home item
|
|
321
|
+
*/
|
|
322
|
+
setHome(crumb) {
|
|
323
|
+
this._home.set(crumb);
|
|
324
|
+
}
|
|
314
325
|
/**
|
|
315
326
|
* Set the breadcrumbs for the current view.
|
|
316
327
|
* @param crumbs Array of breadcrumbs items
|
|
@@ -340,13 +351,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
340
351
|
class NathBreadcrumbs {
|
|
341
352
|
breadcrumbService = inject(BreadcrumbService);
|
|
342
353
|
// Directly expose the read-only signal to the template
|
|
354
|
+
home = this.breadcrumbService.home;
|
|
343
355
|
breadcrumbs = this.breadcrumbService.breadcrumbs;
|
|
344
356
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathBreadcrumbs, isStandalone: true, selector: "nath-breadcrumbs", ngImport: i0, template: "@if (breadcrumbs().length > 0) {\
|
|
357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathBreadcrumbs, isStandalone: true, selector: "nath-breadcrumbs", ngImport: i0, template: "@if (home() || breadcrumbs().length > 0) {\n <nav aria-label=\"breadcrumb\" class=\"nath-breadcrumb-container\">\n <ol class=\"nath-breadcrumb-list\">\n @let h = home();\n @if (h) {\n <li class=\"nath-breadcrumb-item\">\n @if (h.routerLink) {\n <a\n class=\"nath-breadcrumb-link\"\n [routerLink]=\"h.routerLink\"\n [queryParams]=\"h.queryParams\"\n [routerLinkActive]=\"h.routerLinkActive ?? []\"\n [routerLinkActiveOptions]=\"h.routerLinkActiveOptions ?? { exact: false }\"\n ><svg lucideHouse [size]=\"16\"\n /></a>\n } @else {\n <span class=\"nath-breadcrumb-current\" aria-current=\"page\"\n ><svg lucideHouse [size]=\"16\"\n /></span>\n }\n </li>\n }\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n <li class=\"nath-breadcrumb-item\" [class.is-active]=\"last\">\n @if (crumb.routerLink && !last) {\n <a\n class=\"nath-breadcrumb-link\"\n [routerLink]=\"crumb.routerLink\"\n [queryParams]=\"crumb.queryParams\"\n [routerLinkActive]=\"crumb.routerLinkActive ?? []\"\n [routerLinkActiveOptions]=\"crumb.routerLinkActiveOptions ?? { exact: false }\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"nath-breadcrumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n }\n </li>\n }\n </ol>\n </nav>\n}\n", styles: ["nath-breadcrumbs,.nath-breadcrumbs-theme{--nath-breadcrumb-gap: .5rem;--nath-breadcrumb-padding-y: 1rem;--nath-breadcrumb-separator: \"/\";--nath-breadcrumb-separator-margin: .5rem;--nath-breadcrumb-separator-color: #a1a1aa;--nath-breadcrumb-link-color: #3b82f6;--nath-breadcrumb-link-hover-color: #2563eb;--nath-breadcrumb-active-color: #6c757d;--nath-breadcrumb-active-font-weight: 500}.dark nath-breadcrumbs,.dark .nath-breadcrumbs-theme{--nath-breadcrumb-separator-color: #52525b;--nath-breadcrumb-link-color: #60a5fa;--nath-breadcrumb-link-hover-color: #93c5fd;--nath-breadcrumb-active-color: #a1a1aa}.nath-breadcrumb-container{display:block}.nath-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nath-breadcrumb-gap);padding-top:var(--nath-breadcrumb-padding-y);padding-bottom:var(--nath-breadcrumb-padding-y);list-style:none;margin:0}.nath-breadcrumb-item{display:flex;align-items:center}.nath-breadcrumb-item:not(:last-child):after{content:var(--nath-breadcrumb-separator);margin-left:var(--nath-breadcrumb-separator-margin);color:var(--nath-breadcrumb-separator-color)}.nath-breadcrumb-link{color:var(--nath-breadcrumb-link-color);text-decoration:none;transition:color .2s ease-in-out}.nath-breadcrumb-link:hover{color:var(--nath-breadcrumb-link-hover-color);text-decoration:underline}.nath-breadcrumb-current{color:var(--nath-breadcrumb-active-color);font-weight:var(--nath-breadcrumb-active-font-weight)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: LucideHouse, selector: "svg[lucideHouse], svg[lucideHome]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
346
358
|
}
|
|
347
359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathBreadcrumbs, decorators: [{
|
|
348
360
|
type: Component,
|
|
349
|
-
args: [{ selector: 'nath-breadcrumbs', imports: [RouterModule], encapsulation: ViewEncapsulation.None, template: "@if (breadcrumbs().length > 0) {\
|
|
361
|
+
args: [{ selector: 'nath-breadcrumbs', imports: [RouterModule, LucideHouse], encapsulation: ViewEncapsulation.None, template: "@if (home() || breadcrumbs().length > 0) {\n <nav aria-label=\"breadcrumb\" class=\"nath-breadcrumb-container\">\n <ol class=\"nath-breadcrumb-list\">\n @let h = home();\n @if (h) {\n <li class=\"nath-breadcrumb-item\">\n @if (h.routerLink) {\n <a\n class=\"nath-breadcrumb-link\"\n [routerLink]=\"h.routerLink\"\n [queryParams]=\"h.queryParams\"\n [routerLinkActive]=\"h.routerLinkActive ?? []\"\n [routerLinkActiveOptions]=\"h.routerLinkActiveOptions ?? { exact: false }\"\n ><svg lucideHouse [size]=\"16\"\n /></a>\n } @else {\n <span class=\"nath-breadcrumb-current\" aria-current=\"page\"\n ><svg lucideHouse [size]=\"16\"\n /></span>\n }\n </li>\n }\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n <li class=\"nath-breadcrumb-item\" [class.is-active]=\"last\">\n @if (crumb.routerLink && !last) {\n <a\n class=\"nath-breadcrumb-link\"\n [routerLink]=\"crumb.routerLink\"\n [queryParams]=\"crumb.queryParams\"\n [routerLinkActive]=\"crumb.routerLinkActive ?? []\"\n [routerLinkActiveOptions]=\"crumb.routerLinkActiveOptions ?? { exact: false }\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"nath-breadcrumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\n }\n </li>\n }\n </ol>\n </nav>\n}\n", styles: ["nath-breadcrumbs,.nath-breadcrumbs-theme{--nath-breadcrumb-gap: .5rem;--nath-breadcrumb-padding-y: 1rem;--nath-breadcrumb-separator: \"/\";--nath-breadcrumb-separator-margin: .5rem;--nath-breadcrumb-separator-color: #a1a1aa;--nath-breadcrumb-link-color: #3b82f6;--nath-breadcrumb-link-hover-color: #2563eb;--nath-breadcrumb-active-color: #6c757d;--nath-breadcrumb-active-font-weight: 500}.dark nath-breadcrumbs,.dark .nath-breadcrumbs-theme{--nath-breadcrumb-separator-color: #52525b;--nath-breadcrumb-link-color: #60a5fa;--nath-breadcrumb-link-hover-color: #93c5fd;--nath-breadcrumb-active-color: #a1a1aa}.nath-breadcrumb-container{display:block}.nath-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nath-breadcrumb-gap);padding-top:var(--nath-breadcrumb-padding-y);padding-bottom:var(--nath-breadcrumb-padding-y);list-style:none;margin:0}.nath-breadcrumb-item{display:flex;align-items:center}.nath-breadcrumb-item:not(:last-child):after{content:var(--nath-breadcrumb-separator);margin-left:var(--nath-breadcrumb-separator-margin);color:var(--nath-breadcrumb-separator-color)}.nath-breadcrumb-link{color:var(--nath-breadcrumb-link-color);text-decoration:none;transition:color .2s ease-in-out}.nath-breadcrumb-link:hover{color:var(--nath-breadcrumb-link-hover-color);text-decoration:underline}.nath-breadcrumb-current{color:var(--nath-breadcrumb-active-color);font-weight:var(--nath-breadcrumb-active-font-weight)}\n"] }]
|
|
350
362
|
}] });
|
|
351
363
|
|
|
352
364
|
class CodeFileTabNamePipe {
|
|
@@ -2570,37 +2582,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2570
2582
|
|
|
2571
2583
|
class NathPaginatedView {
|
|
2572
2584
|
// Two-way Model Signals
|
|
2585
|
+
/**
|
|
2586
|
+
* Page number (required)
|
|
2587
|
+
* Indexed from 1
|
|
2588
|
+
*/
|
|
2573
2589
|
page = model.required(/* @ts-ignore */
|
|
2574
2590
|
...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
|
|
2591
|
+
/**
|
|
2592
|
+
* Number of items per page
|
|
2593
|
+
* @default 10
|
|
2594
|
+
*/
|
|
2575
2595
|
pageSize = model(10, /* @ts-ignore */
|
|
2576
2596
|
...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
2597
|
+
/**
|
|
2598
|
+
* Model of selected items (also available in the let-selection="selection" context)
|
|
2599
|
+
* @default []
|
|
2600
|
+
*/
|
|
2577
2601
|
selectedItems = model([], /* @ts-ignore */
|
|
2578
2602
|
...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
|
|
2579
2603
|
// Inputs
|
|
2604
|
+
/**
|
|
2605
|
+
* Mode for pagination (client or server)
|
|
2606
|
+
* @default 'client'
|
|
2607
|
+
*/
|
|
2580
2608
|
mode = input('client', /* @ts-ignore */
|
|
2581
2609
|
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
2610
|
+
/**
|
|
2611
|
+
* Array of items to display
|
|
2612
|
+
* @required
|
|
2613
|
+
*/
|
|
2582
2614
|
items = input.required(/* @ts-ignore */
|
|
2583
2615
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2616
|
+
/**
|
|
2617
|
+
* Total number of items
|
|
2618
|
+
* @default null
|
|
2619
|
+
*/
|
|
2584
2620
|
totalItems = input(null, /* @ts-ignore */
|
|
2585
2621
|
...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
|
|
2622
|
+
/**
|
|
2623
|
+
* Array of options for the page size
|
|
2624
|
+
* @default [10, 20, 50, 100]
|
|
2625
|
+
*/
|
|
2586
2626
|
pageSizeOptions = input([10, 20, 50, 100], /* @ts-ignore */
|
|
2587
2627
|
...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
2628
|
+
/**
|
|
2629
|
+
* Whether to disable the paginator
|
|
2630
|
+
* @default false
|
|
2631
|
+
*/
|
|
2588
2632
|
disabled = input(false, /* @ts-ignore */
|
|
2589
2633
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2634
|
+
/**
|
|
2635
|
+
* Whether to show the bottom paginator
|
|
2636
|
+
* @default true
|
|
2637
|
+
*/
|
|
2590
2638
|
showBottomPaginator = input(true, /* @ts-ignore */
|
|
2591
2639
|
...(ngDevMode ? [{ debugName: "showBottomPaginator" }] : /* istanbul ignore next */ []));
|
|
2640
|
+
/**
|
|
2641
|
+
* Message to display when no results are found
|
|
2642
|
+
* @default 'No results found'
|
|
2643
|
+
*/
|
|
2592
2644
|
emptyMessage = input('No results found', /* @ts-ignore */
|
|
2593
2645
|
...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
|
|
2646
|
+
/**
|
|
2647
|
+
* Whether to show a loading overlay
|
|
2648
|
+
* @default false
|
|
2649
|
+
*/
|
|
2594
2650
|
loading = input(false, /* @ts-ignore */
|
|
2595
2651
|
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2652
|
+
/**
|
|
2653
|
+
* Whether to persist selection across page changes
|
|
2654
|
+
* @default false
|
|
2655
|
+
*/
|
|
2599
2656
|
persistSelection = input(false, /* @ts-ignore */
|
|
2600
2657
|
...(ngDevMode ? [{ debugName: "persistSelection" }] : /* istanbul ignore next */ []));
|
|
2658
|
+
/**
|
|
2659
|
+
* Function or key to track items by
|
|
2660
|
+
* @default 'id'
|
|
2661
|
+
*/
|
|
2601
2662
|
trackBy = input('id', /* @ts-ignore */
|
|
2602
2663
|
...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
|
|
2664
|
+
/**
|
|
2665
|
+
* Paginator change event
|
|
2666
|
+
*/
|
|
2603
2667
|
paginatorChange = output();
|
|
2668
|
+
/**
|
|
2669
|
+
* Expanded items (also available in the let-expansion="expansion" context)
|
|
2670
|
+
* @default []
|
|
2671
|
+
*/
|
|
2604
2672
|
expandedItems = signal([], /* @ts-ignore */
|
|
2605
2673
|
...(ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []));
|
|
2606
2674
|
constructor() {
|
|
@@ -2779,7 +2847,7 @@ class NathPaginatedView {
|
|
|
2779
2847
|
}
|
|
2780
2848
|
}
|
|
2781
2849
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathPaginatedView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathPaginatedView, isStandalone: true, selector: "nath-paginated-view", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showBottomPaginator: { classPropertyName: "showBottomPaginator", publicName: "showBottomPaginator", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null },
|
|
2850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathPaginatedView, isStandalone: true, selector: "nath-paginated-view", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showBottomPaginator: { classPropertyName: "showBottomPaginator", publicName: "showBottomPaginator", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, persistSelection: { classPropertyName: "persistSelection", publicName: "persistSelection", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", selectedItems: "selectedItemsChange", paginatorChange: "paginatorChange" }, host: { classAttribute: "nath-paginated-view-host" }, queries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "paginatorLeftTpl", first: true, predicate: ["paginatorLeft"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
2783
2851
|
<ng-template #paginatorTpl let-position="position">
|
|
2784
2852
|
<div
|
|
2785
2853
|
class="nath-paginated-view-paginator-container"
|
|
@@ -2892,7 +2960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2892
2960
|
`, encapsulation: ViewEncapsulation.None, host: {
|
|
2893
2961
|
class: 'nath-paginated-view-host',
|
|
2894
2962
|
}, styles: ["nath-paginated-view,.nath-paginated-view-theme{--nath-paginated-view-bg: transparent;--nath-paginated-view-overlay-bg: rgba(0, 0, 0, .5);--nath-paginated-view-loader-color: #000000;--nath-paginated-view-empty-text: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-paginated-view-paginator-bg: transparent}.dark nath-paginated-view,.dark .nath-paginated-view-theme{--nath-paginated-view-loader-color: #ffffff;--nath-paginated-view-empty-text: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-paginated-view-paginator-bg: transparent}.nath-paginated-view-host{display:block;position:relative;width:100%}.nath-paginated-view-paginator-container{position:sticky;display:flex;align-items:center;gap:1rem;justify-content:space-between;padding-top:.25rem;padding-bottom:.25rem;background-color:var(--nath-paginated-view-paginator-bg);z-index:10;width:100%}.nath-paginated-view-paginator-container.is-top{top:0}.nath-paginated-view-paginator-container.is-bottom{bottom:0}.nath-paginated-view-empty{padding:1rem;display:flex;flex-direction:column;align-items:center;color:var(--nath-paginated-view-empty-text)}.nath-paginated-view-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:var(--nath-paginated-view-overlay-bg);z-index:20}.nath-paginated-view-loader{color:var(--nath-paginated-view-loader-color)}\n"] }]
|
|
2895
|
-
}], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showBottomPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBottomPaginator", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }],
|
|
2963
|
+
}], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showBottomPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBottomPaginator", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], persistSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistSelection", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], paginatorChange: [{ type: i0.Output, args: ["paginatorChange"] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], paginatorLeftTpl: [{ type: i0.ContentChild, args: ['paginatorLeft', { isSignal: true }] }] } });
|
|
2896
2964
|
|
|
2897
2965
|
class NathPanel {
|
|
2898
2966
|
header = input('', /* @ts-ignore */
|