nath-angular-ui 0.0.3 → 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.
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Service, Renderer2, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, Directive, contentChildren } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Service, Renderer2, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, Directive, contentChildren, ViewContainerRef } from '@angular/core';
|
|
3
3
|
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,
|
|
@@ -5245,6 +5160,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5245
5160
|
args: [{ selector: 'nath-toc', imports: [], encapsulation: ViewEncapsulation.None, template: "<aside class=\"nath-toc-aside\">\n <nav class=\"nath-toc-nav\">\n <h3 class=\"nath-toc-title\">Table of Contents</h3>\n <ul class=\"nath-toc-list\">\n @for (section of tocSections(); track section.id) {\n <li>\n <button type=\"button\" (click)=\"scrollToSection(section.id)\" class=\"nath-toc-button\">\n {{ section.label }}\n </button>\n </li>\n }\n </ul>\n </nav>\n</aside>\n", styles: ["nath-toc{display:block}nath-toc,.nath-toc-theme{--nath-toc-width: 16rem;--nath-toc-sticky-top: 1rem;--nath-toc-nav-bg: var(--color-white, #ffffff);--nath-toc-nav-padding: 1rem;--nath-toc-nav-radius: .5rem;--nath-toc-nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-toc-title-font-weight: 700;--nath-toc-title-margin-bottom: .75rem;--nath-toc-title-font-size: 1.125rem;--nath-toc-title-color: var(--color-gray-900, oklch(21% .006 285.885));--nath-toc-list-gap: .5rem;--nath-toc-button-text-align: left;--nath-toc-button-width: 100%;--nath-toc-button-text: var(--color-gray-700, oklch(37.3% .045 262.531));--nath-toc-button-hover-text: var(--color-primary-500, #8e9ba5);--nath-toc-button-transition: color .2s}.dark nath-toc,.dark .nath-toc-theme{--nath-toc-nav-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toc-title-color: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-toc-button-text: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-toc-button-hover-text: var(--color-primary-400, oklch(68% .01 286.3))}.nath-toc-aside{width:var(--nath-toc-width);flex-shrink:0;position:sticky;top:var(--nath-toc-sticky-top);height:fit-content}.nath-toc-nav{background-color:var(--nath-toc-nav-bg);padding:var(--nath-toc-nav-padding);border-radius:var(--nath-toc-nav-radius);box-shadow:var(--nath-toc-nav-shadow)}.nath-toc-title{font-weight:var(--nath-toc-title-font-weight);margin-bottom:var(--nath-toc-title-margin-bottom);font-size:var(--nath-toc-title-font-size);color:var(--nath-toc-title-color)}.nath-toc-list{display:flex;flex-direction:column;gap:var(--nath-toc-list-gap);list-style:none;padding:0;margin:0}.nath-toc-button{text-align:var(--nath-toc-button-text-align);width:var(--nath-toc-button-width);color:var(--nath-toc-button-text);transition:var(--nath-toc-button-transition);cursor:pointer;border:none;background:transparent;padding:0;font-size:1rem}.nath-toc-button:hover{color:var(--nath-toc-button-hover-text)}\n"] }]
|
|
5246
5161
|
}], ctorParameters: () => [], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], containerSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerSelector", required: false }] }], scrollContainerSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerSelector", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }] } });
|
|
5247
5162
|
|
|
5163
|
+
class NathTooltipContainer {
|
|
5164
|
+
sanitizer = inject(DomSanitizer);
|
|
5165
|
+
hostRef = inject((ElementRef)); // Inject host reference directly
|
|
5166
|
+
content = input(null, /* @ts-ignore */
|
|
5167
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
5168
|
+
positionStyles = signal({ opacity: '0' }, /* @ts-ignore */
|
|
5169
|
+
...(ngDevMode ? [{ debugName: "positionStyles" }] : /* istanbul ignore next */ []));
|
|
5170
|
+
arrowClass = signal('arrow-top', /* @ts-ignore */
|
|
5171
|
+
...(ngDevMode ? [{ debugName: "arrowClass" }] : /* istanbul ignore next */ []));
|
|
5172
|
+
sanitizedHtml() {
|
|
5173
|
+
const raw = this.content();
|
|
5174
|
+
if (typeof raw === 'string') {
|
|
5175
|
+
return this.sanitizer.sanitize(SecurityContext.HTML, raw) || '';
|
|
5176
|
+
}
|
|
5177
|
+
return '';
|
|
5178
|
+
}
|
|
5179
|
+
isTemplate(value) {
|
|
5180
|
+
return value && typeof value !== 'string';
|
|
5181
|
+
}
|
|
5182
|
+
updatePosition(hostRect, preferredPosition) {
|
|
5183
|
+
const tooltipContainer = this.hostRef.nativeElement.querySelector('.nath-tooltip-container');
|
|
5184
|
+
if (!tooltipContainer) {
|
|
5185
|
+
console.error('Tooltip container not found');
|
|
5186
|
+
return;
|
|
5187
|
+
}
|
|
5188
|
+
const tooltipWidth = tooltipContainer.offsetWidth;
|
|
5189
|
+
const tooltipHeight = tooltipContainer.offsetHeight;
|
|
5190
|
+
const spacing = 12;
|
|
5191
|
+
console.log(`hostRect`, hostRect);
|
|
5192
|
+
console.log(`preferredPosition`, preferredPosition);
|
|
5193
|
+
console.log(`tooltipWidth`, tooltipWidth);
|
|
5194
|
+
console.log(`tooltipHeight`, tooltipHeight);
|
|
5195
|
+
// Determine baseline coordinates and potential flip strategy
|
|
5196
|
+
const coords = this.calculateInitialPosition(hostRect, tooltipWidth, tooltipHeight, preferredPosition, spacing);
|
|
5197
|
+
// Prevent edge bleeding along the cross-axis bounds
|
|
5198
|
+
const cleanCoords = this.constrainToViewport(coords.left, coords.top, tooltipWidth, tooltipHeight, preferredPosition);
|
|
5199
|
+
this.arrowClass.set(`arrow-${coords.finalPosition}`);
|
|
5200
|
+
this.positionStyles.set({
|
|
5201
|
+
transform: `translate3d(${cleanCoords.left}px, ${cleanCoords.top}px, 0)`,
|
|
5202
|
+
opacity: '1',
|
|
5203
|
+
});
|
|
5204
|
+
}
|
|
5205
|
+
/**
|
|
5206
|
+
* Calculates structural baseline layout alignments and performs flipping checks.
|
|
5207
|
+
*/
|
|
5208
|
+
calculateInitialPosition(hostRect, w, h, pos, space) {
|
|
5209
|
+
if (pos === 'top')
|
|
5210
|
+
return this.getTopCoords(hostRect, w, h, space);
|
|
5211
|
+
if (pos === 'bottom')
|
|
5212
|
+
return this.getBottomCoords(hostRect, w, h, space);
|
|
5213
|
+
if (pos === 'left')
|
|
5214
|
+
return this.getLeftCoords(hostRect, w, h, space);
|
|
5215
|
+
return this.getRightCoords(hostRect, w, h, space);
|
|
5216
|
+
}
|
|
5217
|
+
getTopCoords(hostRect, w, h, space) {
|
|
5218
|
+
const top = hostRect.top - h - space;
|
|
5219
|
+
const isOverflow = top < 0;
|
|
5220
|
+
return {
|
|
5221
|
+
top: isOverflow ? hostRect.bottom + space : top,
|
|
5222
|
+
left: hostRect.left + (hostRect.width - w) / 2,
|
|
5223
|
+
finalPosition: isOverflow ? 'bottom' : 'top',
|
|
5224
|
+
};
|
|
5225
|
+
}
|
|
5226
|
+
getBottomCoords(hostRect, w, h, space) {
|
|
5227
|
+
const top = hostRect.bottom + space;
|
|
5228
|
+
const isOverflow = top + h > window.innerHeight;
|
|
5229
|
+
return {
|
|
5230
|
+
top: isOverflow ? hostRect.top - h - space : top,
|
|
5231
|
+
left: hostRect.left + (hostRect.width - w) / 2,
|
|
5232
|
+
finalPosition: isOverflow ? 'top' : 'bottom',
|
|
5233
|
+
};
|
|
5234
|
+
}
|
|
5235
|
+
getLeftCoords(hostRect, w, h, space) {
|
|
5236
|
+
const left = hostRect.left - w - space;
|
|
5237
|
+
const isOverflow = left < 0;
|
|
5238
|
+
return {
|
|
5239
|
+
top: hostRect.top + (hostRect.height - h) / 2,
|
|
5240
|
+
left: isOverflow ? hostRect.right + space : left,
|
|
5241
|
+
finalPosition: isOverflow ? 'right' : 'left',
|
|
5242
|
+
};
|
|
5243
|
+
}
|
|
5244
|
+
getRightCoords(hostRect, w, h, space) {
|
|
5245
|
+
const left = hostRect.right + space;
|
|
5246
|
+
const isOverflow = left + w > window.innerWidth;
|
|
5247
|
+
return {
|
|
5248
|
+
top: hostRect.top + (hostRect.height - h) / 2,
|
|
5249
|
+
left: isOverflow ? hostRect.left - w - space : left,
|
|
5250
|
+
finalPosition: isOverflow ? 'left' : 'right',
|
|
5251
|
+
};
|
|
5252
|
+
}
|
|
5253
|
+
/**
|
|
5254
|
+
* Adjusts calculated coordinates to keep them confined within visible screen padding bounds.
|
|
5255
|
+
*/
|
|
5256
|
+
constrainToViewport(left, top, w, h, pos) {
|
|
5257
|
+
let cleanLeft = left;
|
|
5258
|
+
let cleanTop = top;
|
|
5259
|
+
const boundaryPadding = 8;
|
|
5260
|
+
if (pos === 'top' || pos === 'bottom') {
|
|
5261
|
+
if (cleanLeft < 0)
|
|
5262
|
+
cleanLeft = boundaryPadding;
|
|
5263
|
+
if (cleanLeft + w > window.innerWidth) {
|
|
5264
|
+
cleanLeft = window.innerWidth - w - boundaryPadding;
|
|
5265
|
+
}
|
|
5266
|
+
}
|
|
5267
|
+
else {
|
|
5268
|
+
if (cleanTop < 0)
|
|
5269
|
+
cleanTop = boundaryPadding;
|
|
5270
|
+
if (cleanTop + h > window.innerHeight) {
|
|
5271
|
+
cleanTop = window.innerHeight - h - boundaryPadding;
|
|
5272
|
+
}
|
|
5273
|
+
}
|
|
5274
|
+
return { left: cleanLeft, top: cleanTop };
|
|
5275
|
+
}
|
|
5276
|
+
hide() {
|
|
5277
|
+
this.positionStyles.update((styles) => ({ ...styles, opacity: '0' }));
|
|
5278
|
+
}
|
|
5279
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathTooltipContainer, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
5281
|
+
<div
|
|
5282
|
+
class="nath-tooltip-container nath-tooltip-container-theme"
|
|
5283
|
+
[class]="arrowClass()"
|
|
5284
|
+
[style]="positionStyles()"
|
|
5285
|
+
>
|
|
5286
|
+
<div class="nath-tooltip-content">
|
|
5287
|
+
@if (isTemplate(content())) {
|
|
5288
|
+
<ng-container [ngTemplateOutlet]="$any(content())"></ng-container>
|
|
5289
|
+
} @else {
|
|
5290
|
+
<div [innerHTML]="sanitizedHtml()"></div>
|
|
5291
|
+
}
|
|
5292
|
+
</div>
|
|
5293
|
+
</div>
|
|
5294
|
+
`, isInline: true, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5295
|
+
}
|
|
5296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipContainer, decorators: [{
|
|
5297
|
+
type: Component,
|
|
5298
|
+
args: [{ imports: [NgTemplateOutlet], template: `
|
|
5299
|
+
<div
|
|
5300
|
+
class="nath-tooltip-container nath-tooltip-container-theme"
|
|
5301
|
+
[class]="arrowClass()"
|
|
5302
|
+
[style]="positionStyles()"
|
|
5303
|
+
>
|
|
5304
|
+
<div class="nath-tooltip-content">
|
|
5305
|
+
@if (isTemplate(content())) {
|
|
5306
|
+
<ng-container [ngTemplateOutlet]="$any(content())"></ng-container>
|
|
5307
|
+
} @else {
|
|
5308
|
+
<div [innerHTML]="sanitizedHtml()"></div>
|
|
5309
|
+
}
|
|
5310
|
+
</div>
|
|
5311
|
+
</div>
|
|
5312
|
+
`, encapsulation: ViewEncapsulation.None, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:nowrap}\n"] }]
|
|
5313
|
+
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
|
|
5314
|
+
|
|
5315
|
+
class NathTooltipDirective {
|
|
5316
|
+
tooltipContent = input(null, { ...(ngDevMode ? { debugName: "tooltipContent" } : /* istanbul ignore next */ {}), alias: 'nathTooltip' });
|
|
5317
|
+
tooltipPosition = input('top', /* @ts-ignore */
|
|
5318
|
+
...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
5319
|
+
showDelay = input(200, /* @ts-ignore */
|
|
5320
|
+
...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
|
|
5321
|
+
hideDelay = input(100, /* @ts-ignore */
|
|
5322
|
+
...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
|
|
5323
|
+
elementRef = inject(ElementRef);
|
|
5324
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
5325
|
+
document = inject(DOCUMENT);
|
|
5326
|
+
componentRef = null;
|
|
5327
|
+
showTimeout;
|
|
5328
|
+
hideTimeout;
|
|
5329
|
+
onMouseEnter() {
|
|
5330
|
+
clearTimeout(this.hideTimeout);
|
|
5331
|
+
if (!this.componentRef) {
|
|
5332
|
+
this.showTimeout = setTimeout(() => this.showTooltip(), this.showDelay());
|
|
5333
|
+
}
|
|
5334
|
+
}
|
|
5335
|
+
onMouseLeave() {
|
|
5336
|
+
clearTimeout(this.showTimeout);
|
|
5337
|
+
if (this.componentRef) {
|
|
5338
|
+
this.hideTimeout = setTimeout(() => this.destroyTooltip(), this.hideDelay());
|
|
5339
|
+
}
|
|
5340
|
+
}
|
|
5341
|
+
showTooltip() {
|
|
5342
|
+
if (this.componentRef || !this.tooltipContent())
|
|
5343
|
+
return;
|
|
5344
|
+
this.componentRef = this.viewContainerRef.createComponent(NathTooltipContainer);
|
|
5345
|
+
this.componentRef.setInput('content', this.tooltipContent());
|
|
5346
|
+
const domElem = this.componentRef.hostView.rootNodes[0];
|
|
5347
|
+
this.document.body.appendChild(domElem);
|
|
5348
|
+
this.componentRef.changeDetectorRef.detectChanges();
|
|
5349
|
+
const hostRect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
5350
|
+
this.componentRef.instance.updatePosition(hostRect, this.tooltipPosition());
|
|
5351
|
+
this.componentRef.changeDetectorRef.detectChanges();
|
|
5352
|
+
}
|
|
5353
|
+
destroyTooltip() {
|
|
5354
|
+
if (this.componentRef) {
|
|
5355
|
+
this.componentRef.instance.hide();
|
|
5356
|
+
const refToDestroy = this.componentRef;
|
|
5357
|
+
this.componentRef = null;
|
|
5358
|
+
// Keep this at a fixed 200ms to allow the Tailwind opacity transition to complete
|
|
5359
|
+
setTimeout(() => {
|
|
5360
|
+
refToDestroy.destroy();
|
|
5361
|
+
}, 200);
|
|
5362
|
+
}
|
|
5363
|
+
}
|
|
5364
|
+
ngOnDestroy() {
|
|
5365
|
+
clearTimeout(this.showTimeout);
|
|
5366
|
+
clearTimeout(this.hideTimeout);
|
|
5367
|
+
if (this.componentRef) {
|
|
5368
|
+
this.componentRef.destroy();
|
|
5369
|
+
}
|
|
5370
|
+
}
|
|
5371
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5372
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NathTooltipDirective, isStandalone: true, selector: "[nathTooltip]", inputs: { tooltipContent: { classPropertyName: "tooltipContent", publicName: "nathTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "focusin": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusout": "onMouseLeave()" } }, ngImport: i0 });
|
|
5373
|
+
}
|
|
5374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipDirective, decorators: [{
|
|
5375
|
+
type: Directive,
|
|
5376
|
+
args: [{
|
|
5377
|
+
selector: '[nathTooltip]',
|
|
5378
|
+
host: {
|
|
5379
|
+
'(mouseenter)': 'onMouseEnter()',
|
|
5380
|
+
'(focusin)': 'onMouseEnter()',
|
|
5381
|
+
'(mouseleave)': 'onMouseLeave()',
|
|
5382
|
+
'(focusout)': 'onMouseLeave()',
|
|
5383
|
+
},
|
|
5384
|
+
}]
|
|
5385
|
+
}], propDecorators: { tooltipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "nathTooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }] } });
|
|
5386
|
+
|
|
5248
5387
|
function next(el, selector) {
|
|
5249
5388
|
const nextEl = el.nextElementSibling;
|
|
5250
5389
|
if (!selector || (nextEl && nextEl.matches(selector))) {
|
|
@@ -5278,5 +5417,5 @@ function isSortOrderValid(order) {
|
|
|
5278
5417
|
* Generated bundle index. Do not edit.
|
|
5279
5418
|
*/
|
|
5280
5419
|
|
|
5281
|
-
export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
|
|
5420
|
+
export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
|
|
5282
5421
|
//# sourceMappingURL=nath-angular-ui.mjs.map
|