nath-angular-ui 0.1.0 → 0.2.0
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,17 +4,16 @@ 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,
|
|
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';
|
|
8
8
|
import * as i1$1 from '@angular/router';
|
|
9
9
|
import { RouterModule, Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
|
|
10
|
-
import
|
|
10
|
+
import * as i1$2 from '@angular/forms';
|
|
11
|
+
import { FormsModule, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
11
12
|
import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
12
13
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
13
|
-
import * as i1$
|
|
14
|
+
import * as i1$3 from '@angular/cdk/drag-drop';
|
|
14
15
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
15
16
|
import { filter } from 'rxjs/operators';
|
|
16
|
-
import * as i1$3 from '@angular/forms';
|
|
17
|
-
import { FormControl, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
18
17
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
19
18
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
20
19
|
import { fromEvent } from 'rxjs';
|
|
@@ -351,10 +350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
351
350
|
}] });
|
|
352
351
|
|
|
353
352
|
class NathDatepicker {
|
|
354
|
-
// ---
|
|
353
|
+
// --- I/O ---
|
|
354
|
+
withTime = input(false, /* @ts-ignore */
|
|
355
|
+
...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
|
|
355
356
|
placeholder = input('dd/mm/yyyy', /* @ts-ignore */
|
|
356
357
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
357
|
-
inputId = input(
|
|
358
|
+
inputId = input(null, /* @ts-ignore */
|
|
358
359
|
...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
359
360
|
language = input('en', /* @ts-ignore */
|
|
360
361
|
...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
|
|
@@ -364,155 +365,69 @@ class NathDatepicker {
|
|
|
364
365
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
365
366
|
dirty = model(false, /* @ts-ignore */
|
|
366
367
|
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
367
|
-
// --- View Children (Signals-based) ---
|
|
368
|
-
inputElement = viewChild('dateInput', /* @ts-ignore */
|
|
369
|
-
...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
|
|
370
368
|
// --- Internal State Signals ---
|
|
371
369
|
value = model(null, /* @ts-ignore */
|
|
372
370
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
373
|
-
|
|
374
|
-
...(ngDevMode ? [{ debugName: "
|
|
375
|
-
|
|
376
|
-
...(ngDevMode ? [{ debugName: "
|
|
377
|
-
daysInMonth = computed(() => this.generateCalendarDays(this.currentViewDate()), /* @ts-ignore */
|
|
378
|
-
...(ngDevMode ? [{ debugName: "daysInMonth" }] : /* istanbul ignore next */ []));
|
|
379
|
-
currentMonthLabel = computed(() => {
|
|
380
|
-
return this.currentViewDate().toLocaleString(this.language() || 'en', {
|
|
381
|
-
month: 'long',
|
|
382
|
-
year: 'numeric',
|
|
383
|
-
});
|
|
384
|
-
}, /* @ts-ignore */
|
|
385
|
-
...(ngDevMode ? [{ debugName: "currentMonthLabel" }] : /* istanbul ignore next */ []));
|
|
386
|
-
// --- CDK Overlay Configuration ---
|
|
387
|
-
overlayPositions = [
|
|
388
|
-
{
|
|
389
|
-
originX: 'start',
|
|
390
|
-
originY: 'bottom',
|
|
391
|
-
overlayX: 'start',
|
|
392
|
-
overlayY: 'top',
|
|
393
|
-
offsetY: 4,
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
originX: 'start',
|
|
397
|
-
originY: 'top',
|
|
398
|
-
overlayX: 'start',
|
|
399
|
-
overlayY: 'bottom',
|
|
400
|
-
offsetY: -4,
|
|
401
|
-
},
|
|
402
|
-
];
|
|
371
|
+
dateInputValue = model(null, /* @ts-ignore */
|
|
372
|
+
...(ngDevMode ? [{ debugName: "dateInputValue" }] : /* istanbul ignore next */ []));
|
|
373
|
+
dateTimeInputValue = model(null, /* @ts-ignore */
|
|
374
|
+
...(ngDevMode ? [{ debugName: "dateTimeInputValue" }] : /* istanbul ignore next */ []));
|
|
403
375
|
constructor() {
|
|
404
|
-
// Automatically track value changes to sync the input element layout
|
|
405
376
|
effect(() => {
|
|
406
|
-
const
|
|
407
|
-
const
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
if (
|
|
412
|
-
|
|
413
|
-
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
414
|
-
const year = date.getFullYear();
|
|
415
|
-
targetValue = `${day}/${month}/${year}`;
|
|
377
|
+
const value = this.value();
|
|
378
|
+
const dateInputValue = this.dateInputValue();
|
|
379
|
+
const dateTimeInputValue = this.dateTimeInputValue();
|
|
380
|
+
if (this.withTime()) {
|
|
381
|
+
const dateToCompare = dateTimeInputValue ? new Date(dateTimeInputValue) : null;
|
|
382
|
+
if (dateToCompare?.getTime() !== value?.getTime()) {
|
|
383
|
+
this.dateTimeInputValue.set(this.toLocaleISOString(value) ?? null);
|
|
416
384
|
}
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
385
|
+
}
|
|
386
|
+
else {
|
|
387
|
+
const dateToCompare = dateInputValue ? new Date(dateInputValue) : null;
|
|
388
|
+
if (dateToCompare?.getTime() !== value?.getTime()) {
|
|
389
|
+
this.dateInputValue.set(this.toLocaleDateISOString(value) ?? null);
|
|
421
390
|
}
|
|
422
391
|
}
|
|
423
392
|
});
|
|
424
393
|
}
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
const day = String(date.getDate()).padStart(2, '0');
|
|
430
|
-
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
431
|
-
const year = date.getFullYear();
|
|
432
|
-
return `${day}${month}${year}`;
|
|
394
|
+
toLocaleISOString(date) {
|
|
395
|
+
return (date?.toLocaleString('sv', {
|
|
396
|
+
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
397
|
+
}) ?? null);
|
|
433
398
|
}
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
}
|
|
438
|
-
this.touched.set(true);
|
|
439
|
-
this.isOpen.update((v) => !v);
|
|
399
|
+
toLocaleDateISOString(date) {
|
|
400
|
+
return (date?.toLocaleDateString('sv', {
|
|
401
|
+
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
402
|
+
}) ?? null);
|
|
440
403
|
}
|
|
441
|
-
|
|
442
|
-
const
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
const day = Number.parseInt(rawValue.substring(0, 2), 10);
|
|
446
|
-
const month = Number.parseInt(rawValue.substring(3, 5), 10) - 1;
|
|
447
|
-
const year = Number.parseInt(rawValue.substring(6, 10), 10); // Ensured string captures index 9
|
|
448
|
-
const parsedDate = new Date(year, month, day);
|
|
449
|
-
if (!Number.isNaN(parsedDate.getTime()) &&
|
|
450
|
-
parsedDate.getDate() === day &&
|
|
451
|
-
parsedDate.getMonth() === month) {
|
|
452
|
-
this.value.set(parsedDate);
|
|
453
|
-
this.currentViewDate.set(parsedDate);
|
|
454
|
-
return;
|
|
455
|
-
}
|
|
404
|
+
onDateTimeInputChange(event) {
|
|
405
|
+
const target = event.target;
|
|
406
|
+
if (target.value) {
|
|
407
|
+
this.value.set(new Date(target.value));
|
|
456
408
|
}
|
|
457
|
-
|
|
409
|
+
else {
|
|
458
410
|
this.value.set(null);
|
|
459
411
|
}
|
|
460
412
|
}
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
// Mask expects slashes when inserted explicitly into the native input string
|
|
470
|
-
inputEl.value = `${day}/${month}/${year}`;
|
|
471
|
-
inputEl.dispatchEvent(new Event('input'));
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
changeMonth(direction) {
|
|
475
|
-
const current = this.currentViewDate();
|
|
476
|
-
const nextTarget = new Date(current.getFullYear(), current.getMonth() + direction, 1);
|
|
477
|
-
this.currentViewDate.set(nextTarget);
|
|
478
|
-
}
|
|
479
|
-
isSameDay(dateA, dateB) {
|
|
480
|
-
if (!dateA || !dateB)
|
|
481
|
-
return false;
|
|
482
|
-
return (dateA.getDate() === dateB.getDate() &&
|
|
483
|
-
dateA.getMonth() === dateB.getMonth() &&
|
|
484
|
-
dateA.getFullYear() === dateB.getFullYear());
|
|
485
|
-
}
|
|
486
|
-
generateCalendarDays(viewDate) {
|
|
487
|
-
const year = viewDate.getFullYear();
|
|
488
|
-
const month = viewDate.getMonth();
|
|
489
|
-
const firstDayOfMonth = new Date(year, month, 1);
|
|
490
|
-
const startDayOfWeek = firstDayOfMonth.getDay();
|
|
491
|
-
const startDate = new Date(firstDayOfMonth);
|
|
492
|
-
startDate.setDate(startDate.getDate() - startDayOfWeek);
|
|
493
|
-
const days = [];
|
|
494
|
-
for (let i = 0; i < 42; i++) {
|
|
495
|
-
days.push(new Date(startDate));
|
|
496
|
-
startDate.setDate(startDate.getDate() + 1);
|
|
497
|
-
}
|
|
498
|
-
return days;
|
|
413
|
+
onDateInputChange(event) {
|
|
414
|
+
const target = event.target;
|
|
415
|
+
if (target.value) {
|
|
416
|
+
this.value.set(new Date(target.value + ' 00:00:00'));
|
|
417
|
+
}
|
|
418
|
+
else {
|
|
419
|
+
this.value.set(null);
|
|
420
|
+
}
|
|
499
421
|
}
|
|
500
422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
501
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathDatepicker, isStandalone: true, selector: "nath-datepicker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", dirty: "dirtyChange", value: "valueChange" }, host: { classAttribute: "nath-datepicker-host" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nath-datepicker-container input\">\r\n <input\r\n #dateInput\r\n [attr.id]=\"inputId() || null\"\r\n type=\"text\"\r\n mask=\"d0/M0/0000\"\r\n [leadZeroDateTime]=\"true\"\r\n [value]=\"formattedInputValue\"\r\n (input)=\"onInputChange($event)\"\r\n [placeholder]=\"placeholder()\"\r\n class=\"nath-datepicker-input\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n (click)=\"toggleCalendar()\"\r\n aria-label=\"Open calendar\"\r\n class=\"nath-datepicker-trigger\"\r\n >\r\n <svg lucideCalendar [size]=\"16\" />\r\n </button>\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n (overlayOutsideClick)=\"isOpen.set(false)\"\r\n>\r\n <div class=\"nath-datepicker-panel nath-datepicker-theme\">\r\n <div class=\"nath-datepicker-header\">\r\n <button (click)=\"changeMonth(-1)\" class=\"nath-datepicker-nav-btn\">\r\n <svg lucideChevronLeft [size]=\"16\" />\r\n </button>\r\n\r\n <span class=\"nath-datepicker-month-label\">{{ currentMonthLabel() }}</span>\r\n\r\n <button (click)=\"changeMonth(1)\" class=\"nath-datepicker-nav-btn\">\r\n <svg lucideChevronRight [size]=\"16\" />\r\n </button>\r\n </div>\r\n\r\n <div class=\"nath-datepicker-weekdays\">\r\n <div>Su</div>\r\n <div>Mo</div>\r\n <div>Tu</div>\r\n <div>We</div>\r\n <div>Th</div>\r\n <div>Fr</div>\r\n <div>Sa</div>\r\n </div>\r\n\r\n <div class=\"nath-datepicker-days-grid\">\r\n @for (date of daysInMonth(); track date.getTime()) {\r\n <button\r\n type=\"button\"\r\n (click)=\"selectDate(date)\"\r\n [disabled]=\"date.getMonth() !== currentViewDate().getMonth()\"\r\n class=\"nath-datepicker-day\"\r\n [class.is-outside]=\"date.getMonth() !== currentViewDate().getMonth()\"\r\n [class.is-selected]=\"isSameDay(date, value())\"\r\n >\r\n {{ date.getDate() }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-width: 100%;--nath-datepicker-max-width: 24rem;--nath-datepicker-bg: #ffffff;--nath-datepicker-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-datepicker-radius: .375rem;--nath-datepicker-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-datepicker-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-datepicker-input-padding: .5rem .75rem;--nath-datepicker-panel-bg: #ffffff;--nath-datepicker-panel-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-datepicker-panel-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-datepicker-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-datepicker-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-datepicker-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-datepicker-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-datepicker-selected-bg: var(--color-indigo-600, oklch(51.1% .262 276.966));--nath-datepicker-selected-text: #ffffff;--nath-datepicker-selected-hover-bg: var(--color-indigo-700, oklch(45.7% .24 277.023))}.dark nath-datepicker,.dark .nath-datepicker-theme{--nath-datepicker-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-datepicker-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-datepicker-panel-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-datepicker-panel-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-datepicker-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-datepicker-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-datepicker-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-datepicker-hover-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-datepicker-selected-text: #000000}.nath-datepicker-host{display:block;width:100%}.nath-datepicker-container{display:flex;position:relative;align-items:center;width:var(--nath-datepicker-width);max-width:var(--nath-datepicker-max-width);background-color:var(--nath-datepicker-bg);border:1px solid var(--nath-datepicker-border);border-radius:var(--nath-datepicker-radius);box-shadow:var(--nath-datepicker-shadow);transition:border-color .2s,box-shadow .2s}.nath-datepicker-container:focus-within{outline:none;border-color:var(--nath-datepicker-ring-color);box-shadow:0 0 0 2px var(--nath-datepicker-ring-color)}.nath-datepicker-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-datepicker-input-padding);color:var(--nath-datepicker-text-main);font-size:.875rem}.nath-datepicker-trigger{display:flex;align-items:center;justify-content:center;padding:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-datepicker-text-muted)}.nath-datepicker-panel{background-color:var(--nath-datepicker-panel-bg);border:1px solid var(--nath-datepicker-panel-border);border-radius:.5rem;box-shadow:var(--nath-datepicker-panel-shadow);padding:1rem;width:18rem;margin-top:.25rem;z-index:50;-webkit-user-select:none;user-select:none}.nath-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.nath-datepicker-nav-btn{display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:9999px;border:none;background:transparent;color:var(--nath-datepicker-text-muted);cursor:pointer;transition:background-color .2s}.nath-datepicker-nav-btn:hover{background-color:var(--nath-datepicker-hover-bg)}.nath-datepicker-month-label{font-size:.875rem;font-weight:600;color:var(--nath-datepicker-text-main)}.nath-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;text-align:center;font-size:.75rem;font-weight:500;color:var(--nath-datepicker-text-muted);margin-bottom:.25rem}.nath-datepicker-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}.nath-datepicker-day{width:2rem;height:2rem;border-radius:9999px;border:none;background:transparent;font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,color .2s;color:var(--nath-datepicker-text-main)}.nath-datepicker-day:focus{outline:none;box-shadow:0 0 0 2px var(--nath-datepicker-ring-color)}.nath-datepicker-day:hover:not(.is-selected):not(.is-outside){background-color:var(--nath-datepicker-hover-bg)}.nath-datepicker-day.is-outside{color:var(--nath-datepicker-text-disabled);cursor:default;pointer-events:none}.nath-datepicker-day.is-selected{background-color:var(--nath-datepicker-selected-bg);color:var(--nath-datepicker-selected-text);font-weight:600}.nath-datepicker-day.is-selected:hover{background-color:var(--nath-datepicker-selected-hover-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathDatepicker, isStandalone: true, selector: "nath-datepicker", inputs: { withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, dateTimeInputValue: { classPropertyName: "dateTimeInputValue", publicName: "dateTimeInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", dirty: "dirtyChange", value: "valueChange", dateInputValue: "dateInputValueChange", dateTimeInputValue: "dateTimeInputValueChange" }, host: { classAttribute: "nath-datepicker-host" }, ngImport: i0, template: "@if (withTime()) {\n <input\n type=\"datetime-local\"\n [(ngModel)]=\"dateTimeInputValue\"\n [attr.id]=\"inputId() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n class=\"nath-datepicker-datetime-input\"\n (input)=\"onDateTimeInputChange($event)\"\n />\n} @else {\n <input\n type=\"date\"\n [(ngModel)]=\"dateInputValue\"\n [attr.id]=\"inputId() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n class=\"nath-datepicker-date-input\"\n (input)=\"onDateInputChange($event)\"\n />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
502
424
|
}
|
|
503
425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, decorators: [{
|
|
504
426
|
type: Component,
|
|
505
|
-
args: [{ selector: 'nath-datepicker', imports: [
|
|
506
|
-
CommonModule,
|
|
507
|
-
OverlayModule,
|
|
508
|
-
NgxMaskDirective,
|
|
509
|
-
LucideCalendar,
|
|
510
|
-
LucideChevronLeft,
|
|
511
|
-
LucideChevronRight,
|
|
512
|
-
], providers: [provideNgxMask()], encapsulation: ViewEncapsulation.None, host: {
|
|
427
|
+
args: [{ selector: 'nath-datepicker', imports: [CommonModule, OverlayModule, FormsModule], encapsulation: ViewEncapsulation.None, host: {
|
|
513
428
|
class: 'nath-datepicker-host',
|
|
514
|
-
}, template: "
|
|
515
|
-
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }, { type: i0.Output, args: ["dirtyChange"] }],
|
|
429
|
+
}, template: "@if (withTime()) {\n <input\n type=\"datetime-local\"\n [(ngModel)]=\"dateTimeInputValue\"\n [attr.id]=\"inputId() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n class=\"nath-datepicker-datetime-input\"\n (input)=\"onDateTimeInputChange($event)\"\n />\n} @else {\n <input\n type=\"date\"\n [(ngModel)]=\"dateInputValue\"\n [attr.id]=\"inputId() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n class=\"nath-datepicker-date-input\"\n (input)=\"onDateInputChange($event)\"\n />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"] }]
|
|
430
|
+
}], ctorParameters: () => [], propDecorators: { withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }, { type: i0.Output, args: ["dirtyChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateInputValue", required: false }] }, { type: i0.Output, args: ["dateInputValueChange"] }], dateTimeInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeInputValue", required: false }] }, { type: i0.Output, args: ["dateTimeInputValueChange"] }] } });
|
|
516
431
|
|
|
517
432
|
const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
|
|
518
433
|
class DialogRef {
|
|
@@ -608,7 +523,7 @@ class NathDialogContainer extends BasePortalOutlet {
|
|
|
608
523
|
</div>
|
|
609
524
|
</div>
|
|
610
525
|
</div>
|
|
611
|
-
`, isInline: true, styles: ["nath-dialog-container,.nath-dialog-theme{--nath-dialog-bg: #ffffff;--nath-dialog-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-radius: .75rem;--nath-dialog-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-dialog-mask-bg: rgba(0, 0, 0, .4);--nath-dialog-mask-blur: 4px;--nath-dialog-header-border: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-main: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-dialog-text-title: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-btn-hover-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-icon-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-btn-icon-hover: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-dialog-btn-default-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-default-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-hover: var(--color-zinc-200, oklch(92% .004 286.32))}.dark nath-dialog-container,.dark .nath-dialog-theme{--nath-dialog-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-dialog-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-header-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-text-main: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-text-title: #ffffff;--nath-dialog-btn-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-icon-hover: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-hover: var(--color-zinc-700, oklch(37% .013 285.805))}nath-dialog-container{display:contents}.nath-dialog-mask{position:fixed;inset:0;z-index:50;background-color:var(--nath-dialog-mask-bg);-webkit-backdrop-filter:blur(var(--nath-dialog-mask-blur));backdrop-filter:blur(var(--nath-dialog-mask-blur));display:flex;align-items:center;justify-content:center;padding:1rem}.nath-dialog-window{background-color:var(--nath-dialog-bg);color:var(--nath-dialog-text-main);border:1px solid var(--nath-dialog-border);border-radius:var(--nath-dialog-radius);box-shadow:var(--nath-dialog-shadow);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;pointer-events:auto;cursor:default;overflow:hidden}.nath-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--nath-dialog-header-border);cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.nath-dialog-title{font-size:1.125rem;font-weight:600;line-height:1.75rem;letter-spacing:-.025em;color:var(--nath-dialog-text-title);margin:0}.nath-dialog-header-actions{display:flex;gap:.5rem}.nath-dialog-action-btn{color:var(--nath-dialog-btn-icon-color);border-radius:.5rem;padding:.25rem;transition:colors .2s;cursor:pointer;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.nath-dialog-action-btn:hover{color:var(--nath-dialog-btn-icon-hover);background-color:var(--nath-dialog-btn-hover-bg)}.nath-dialog-body{padding:1rem;overflow-y:auto;flex-grow:1}.nath-dialog-footer{padding:1rem;display:flex;justify-content:end;gap:1rem;position:sticky;bottom:-1px;background-color:var(--nath-dialog-bg)}.nath-dialog-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;transition:colors .2s;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center}.nath-dialog-btn--default{background-color:var(--nath-dialog-btn-default-bg);color:var(--nath-dialog-btn-default-text)}.nath-dialog-btn--default:hover{background-color:var(--nath-dialog-btn-default-hover)}.nath-dialog-window.dialog-maximized{max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;border-radius:0!important;transform:none!important}.nath-dialog-content-text{font-size:.875rem;color:var(--nath-dialog-text-muted)}.nath-confirmation-dialog{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$
|
|
526
|
+
`, isInline: true, styles: ["nath-dialog-container,.nath-dialog-theme{--nath-dialog-bg: #ffffff;--nath-dialog-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-radius: .75rem;--nath-dialog-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-dialog-mask-bg: rgba(0, 0, 0, .4);--nath-dialog-mask-blur: 4px;--nath-dialog-header-border: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-main: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-dialog-text-title: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-btn-hover-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-icon-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-btn-icon-hover: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-dialog-btn-default-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-default-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-hover: var(--color-zinc-200, oklch(92% .004 286.32))}.dark nath-dialog-container,.dark .nath-dialog-theme{--nath-dialog-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-dialog-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-header-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-text-main: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-text-title: #ffffff;--nath-dialog-btn-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-icon-hover: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-hover: var(--color-zinc-700, oklch(37% .013 285.805))}nath-dialog-container{display:contents}.nath-dialog-mask{position:fixed;inset:0;z-index:50;background-color:var(--nath-dialog-mask-bg);-webkit-backdrop-filter:blur(var(--nath-dialog-mask-blur));backdrop-filter:blur(var(--nath-dialog-mask-blur));display:flex;align-items:center;justify-content:center;padding:1rem}.nath-dialog-window{background-color:var(--nath-dialog-bg);color:var(--nath-dialog-text-main);border:1px solid var(--nath-dialog-border);border-radius:var(--nath-dialog-radius);box-shadow:var(--nath-dialog-shadow);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;pointer-events:auto;cursor:default;overflow:hidden}.nath-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--nath-dialog-header-border);cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.nath-dialog-title{font-size:1.125rem;font-weight:600;line-height:1.75rem;letter-spacing:-.025em;color:var(--nath-dialog-text-title);margin:0}.nath-dialog-header-actions{display:flex;gap:.5rem}.nath-dialog-action-btn{color:var(--nath-dialog-btn-icon-color);border-radius:.5rem;padding:.25rem;transition:colors .2s;cursor:pointer;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.nath-dialog-action-btn:hover{color:var(--nath-dialog-btn-icon-hover);background-color:var(--nath-dialog-btn-hover-bg)}.nath-dialog-body{padding:1rem;overflow-y:auto;flex-grow:1}.nath-dialog-footer{padding:1rem;display:flex;justify-content:end;gap:1rem;position:sticky;bottom:-1px;background-color:var(--nath-dialog-bg)}.nath-dialog-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;transition:colors .2s;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center}.nath-dialog-btn--default{background-color:var(--nath-dialog-btn-default-bg);color:var(--nath-dialog-btn-default-text)}.nath-dialog-btn--default:hover{background-color:var(--nath-dialog-btn-default-hover)}.nath-dialog-window.dialog-maximized{max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;border-radius:0!important;transform:none!important}.nath-dialog-content-text{font-size:.875rem;color:var(--nath-dialog-text-muted)}.nath-confirmation-dialog{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
612
527
|
}
|
|
613
528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDialogContainer, decorators: [{
|
|
614
529
|
type: Component,
|
|
@@ -2423,7 +2338,7 @@ class NathPaginator {
|
|
|
2423
2338
|
}
|
|
2424
2339
|
</select>
|
|
2425
2340
|
</div>
|
|
2426
|
-
`, isInline: true, styles: ["nath-paginator,.nath-paginator-theme{--nath-paginator-select-bg: #ffffff;--nath-paginator-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-paginator-text-muted: var(--color-slate-500, oklch(55.1% .027 264.364));--nath-paginator-text-disabled: var(--color-slate-300, oklch(87.1% .006 286.286));--nath-paginator-hover-bg: var(--color-slate-100, oklch(96.7% .003 264.542));--nath-paginator-active-bg: var(--color-primary-100, oklch(92.5% .004 286.32));--nath-paginator-active-text: var(--color-primary-800, oklch(35% .01 286.3));--nath-paginator-ellipsis-color: var(--color-slate-400, oklch(70.5% .015 286.067));--nath-paginator-border: var(--color-surface-300, oklch(87.1% .006 286.286))}.dark nath-paginator,.dark .nath-paginator-theme{--nath-paginator-select-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-paginator-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-paginator-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-paginator-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-paginator-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-paginator-active-bg: var(--color-primary-400, oklch(68% .01 286.3));--nath-paginator-active-text: var(--color-primary-950, oklch(20% .01 286.3));--nath-paginator-ellipsis-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-paginator-border: var(--color-surface-600, oklch(44.2% .017 285.786))}.nath-paginator-host{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem}@media(min-width:640px){.nath-paginator-host{flex-direction:row}}.nath-paginator-container{display:flex;align-items:center;gap:.25rem}.nath-paginator-info{color:var(--nath-paginator-text-main);font-size:.875rem;margin-right:.25rem}.nath-paginator-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-muted);cursor:pointer;transition:background-color .2s,opacity .2s}.nath-paginator-btn:hover:not(:disabled){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-btn:disabled{opacity:.4;cursor:default}.nath-paginator-page-btn{padding:.375rem .875rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-main);font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}.nath-paginator-page-btn:hover:not(:disabled):not(.is-active){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-page-btn.is-active{background-color:var(--nath-paginator-active-bg);color:var(--nath-paginator-active-text);box-shadow:0 1px 2px #0000000d}.nath-paginator-ellipsis{padding:.375rem .75rem;color:var(--nath-paginator-ellipsis-color);font-weight:500;-webkit-user-select:none;user-select:none}.nath-paginator-page-size-container{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--nath-paginator-text-muted)}.nath-paginator-select{background-color:var(--nath-paginator-select-bg);border:1px solid var(--nath-paginator-border);border-radius:.375rem;padding:.25rem .5rem;color:var(--nath-paginator-text-main);outline:none;cursor:pointer;background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\");background-repeat:no-repeat;background-position:calc(100% - .75rem) center!important;-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;padding-right:2rem!important}.dark .nath-paginator-select{background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\")}.nath-paginator-select option{background-color:var(--nath-paginator-select-bg);color:var(--nath-paginator-text-main)}.nath-paginator-select-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
2341
|
+
`, isInline: true, styles: ["nath-paginator,.nath-paginator-theme{--nath-paginator-select-bg: #ffffff;--nath-paginator-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-paginator-text-muted: var(--color-slate-500, oklch(55.1% .027 264.364));--nath-paginator-text-disabled: var(--color-slate-300, oklch(87.1% .006 286.286));--nath-paginator-hover-bg: var(--color-slate-100, oklch(96.7% .003 264.542));--nath-paginator-active-bg: var(--color-primary-100, oklch(92.5% .004 286.32));--nath-paginator-active-text: var(--color-primary-800, oklch(35% .01 286.3));--nath-paginator-ellipsis-color: var(--color-slate-400, oklch(70.5% .015 286.067));--nath-paginator-border: var(--color-surface-300, oklch(87.1% .006 286.286))}.dark nath-paginator,.dark .nath-paginator-theme{--nath-paginator-select-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-paginator-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-paginator-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-paginator-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-paginator-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-paginator-active-bg: var(--color-primary-400, oklch(68% .01 286.3));--nath-paginator-active-text: var(--color-primary-950, oklch(20% .01 286.3));--nath-paginator-ellipsis-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-paginator-border: var(--color-surface-600, oklch(44.2% .017 285.786))}.nath-paginator-host{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem}@media(min-width:640px){.nath-paginator-host{flex-direction:row}}.nath-paginator-container{display:flex;align-items:center;gap:.25rem}.nath-paginator-info{color:var(--nath-paginator-text-main);font-size:.875rem;margin-right:.25rem}.nath-paginator-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-muted);cursor:pointer;transition:background-color .2s,opacity .2s}.nath-paginator-btn:hover:not(:disabled){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-btn:disabled{opacity:.4;cursor:default}.nath-paginator-page-btn{padding:.375rem .875rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-main);font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}.nath-paginator-page-btn:hover:not(:disabled):not(.is-active){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-page-btn.is-active{background-color:var(--nath-paginator-active-bg);color:var(--nath-paginator-active-text);box-shadow:0 1px 2px #0000000d}.nath-paginator-ellipsis{padding:.375rem .75rem;color:var(--nath-paginator-ellipsis-color);font-weight:500;-webkit-user-select:none;user-select:none}.nath-paginator-page-size-container{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--nath-paginator-text-muted)}.nath-paginator-select{background-color:var(--nath-paginator-select-bg);border:1px solid var(--nath-paginator-border);border-radius:.375rem;padding:.25rem .5rem;color:var(--nath-paginator-text-main);outline:none;cursor:pointer;background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\");background-repeat:no-repeat;background-position:calc(100% - .75rem) center!important;-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;padding-right:2rem!important}.dark .nath-paginator-select{background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\")}.nath-paginator-select option{background-color:var(--nath-paginator-select-bg);color:var(--nath-paginator-text-main)}.nath-paginator-select-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2427
2342
|
}
|
|
2428
2343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathPaginator, decorators: [{
|
|
2429
2344
|
type: Component,
|