nath-angular-ui 0.2.3 → 0.3.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,5 +1,5 @@
|
|
|
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, ViewContainerRef } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, Pipe, 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';
|
|
@@ -349,6 +349,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
349
349
|
args: [{ selector: 'nath-breadcrumbs', imports: [RouterModule], encapsulation: ViewEncapsulation.None, template: "@if (breadcrumbs().length > 0) {\r\n <nav aria-label=\"breadcrumb\" class=\"nath-breadcrumb-container\">\r\n <ol class=\"nath-breadcrumb-list\">\r\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\r\n <li class=\"nath-breadcrumb-item\" [class.is-active]=\"last\">\r\n @if (crumb.routerLink && !last) {\r\n <a\r\n class=\"nath-breadcrumb-link\"\r\n [routerLink]=\"crumb.routerLink\"\r\n [queryParams]=\"crumb.queryParams\"\r\n [routerLinkActive]=\"crumb.routerLinkActive ?? []\"\r\n [routerLinkActiveOptions]=\"\r\n crumb.routerLinkActiveOptions ?? { exact: false }\r\n \"\r\n >{{ crumb.label }}</a\r\n >\r\n } @else {\r\n <span class=\"nath-breadcrumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n }\r\n </li>\r\n }\r\n </ol>\r\n </nav>\r\n}\r\n", styles: ["nath-breadcrumbs,.nath-breadcrumbs-theme{--nath-breadcrumb-gap: .5rem;--nath-breadcrumb-padding-y: 1rem;--nath-breadcrumb-separator: \"/\";--nath-breadcrumb-separator-margin: .5rem;--nath-breadcrumb-separator-color: #a1a1aa;--nath-breadcrumb-link-color: #3b82f6;--nath-breadcrumb-link-hover-color: #2563eb;--nath-breadcrumb-active-color: #6c757d;--nath-breadcrumb-active-font-weight: 500}.dark nath-breadcrumbs,.dark .nath-breadcrumbs-theme{--nath-breadcrumb-separator-color: #52525b;--nath-breadcrumb-link-color: #60a5fa;--nath-breadcrumb-link-hover-color: #93c5fd;--nath-breadcrumb-active-color: #a1a1aa}.nath-breadcrumb-container{display:block}.nath-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nath-breadcrumb-gap);padding-top:var(--nath-breadcrumb-padding-y);padding-bottom:var(--nath-breadcrumb-padding-y);list-style:none;margin:0}.nath-breadcrumb-item{display:flex;align-items:center}.nath-breadcrumb-item:not(:last-child):after{content:var(--nath-breadcrumb-separator);margin-left:var(--nath-breadcrumb-separator-margin);color:var(--nath-breadcrumb-separator-color)}.nath-breadcrumb-link{color:var(--nath-breadcrumb-link-color);text-decoration:none;transition:color .2s ease-in-out}.nath-breadcrumb-link:hover{color:var(--nath-breadcrumb-link-hover-color);text-decoration:underline}.nath-breadcrumb-current{color:var(--nath-breadcrumb-active-color);font-weight:var(--nath-breadcrumb-active-font-weight)}\n"] }]
|
|
350
350
|
}] });
|
|
351
351
|
|
|
352
|
+
class CodeFileTabNamePipe {
|
|
353
|
+
transform(value, showFullPath) {
|
|
354
|
+
return showFullPath ? value : (value.split('/').at(-1) ?? '');
|
|
355
|
+
}
|
|
356
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CodeFileTabNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
357
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: CodeFileTabNamePipe, isStandalone: true, name: "nathCodeFileTabName" });
|
|
358
|
+
}
|
|
359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CodeFileTabNamePipe, decorators: [{
|
|
360
|
+
type: Pipe,
|
|
361
|
+
args: [{
|
|
362
|
+
name: 'nathCodeFileTabName',
|
|
363
|
+
}]
|
|
364
|
+
}] });
|
|
365
|
+
|
|
366
|
+
class NathCodeViewer {
|
|
367
|
+
// Signal inputs
|
|
368
|
+
files = input.required(/* @ts-ignore */
|
|
369
|
+
...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
|
|
370
|
+
showLineNumbers = input(true, /* @ts-ignore */
|
|
371
|
+
...(ngDevMode ? [{ debugName: "showLineNumbers" }] : /* istanbul ignore next */ []));
|
|
372
|
+
// If true, show the full path instead of just the file name
|
|
373
|
+
showFullPaths = input(false, /* @ts-ignore */
|
|
374
|
+
...(ngDevMode ? [{ debugName: "showFullPaths" }] : /* istanbul ignore next */ []));
|
|
375
|
+
// Active tab track index state
|
|
376
|
+
activeIndex = signal(0, /* @ts-ignore */
|
|
377
|
+
...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
378
|
+
copied = signal(false, /* @ts-ignore */
|
|
379
|
+
...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
|
|
380
|
+
// Derived state for the currently active file
|
|
381
|
+
activeFile = computed(() => {
|
|
382
|
+
const list = this.files();
|
|
383
|
+
const index = this.activeIndex();
|
|
384
|
+
return list[index] ?? list[0];
|
|
385
|
+
}, /* @ts-ignore */
|
|
386
|
+
...(ngDevMode ? [{ debugName: "activeFile" }] : /* istanbul ignore next */ []));
|
|
387
|
+
// Derived state to split the active file's code into individual lines
|
|
388
|
+
lines = computed(() => {
|
|
389
|
+
const file = this.activeFile();
|
|
390
|
+
if (!file?.content)
|
|
391
|
+
return [];
|
|
392
|
+
return file.content.split('\n');
|
|
393
|
+
}, /* @ts-ignore */
|
|
394
|
+
...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
|
|
395
|
+
selectTab(index) {
|
|
396
|
+
this.activeIndex.set(index);
|
|
397
|
+
}
|
|
398
|
+
copyToClipboard() {
|
|
399
|
+
const file = this.activeFile();
|
|
400
|
+
if (!file)
|
|
401
|
+
return;
|
|
402
|
+
navigator.clipboard
|
|
403
|
+
.writeText(file.content)
|
|
404
|
+
.then(() => {
|
|
405
|
+
this.copied.set(true);
|
|
406
|
+
setTimeout(() => this.copied.set(false), 2000);
|
|
407
|
+
})
|
|
408
|
+
.catch((err) => {
|
|
409
|
+
console.error('Failed to copy code: ', err);
|
|
410
|
+
});
|
|
411
|
+
}
|
|
412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCodeViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathCodeViewer, isStandalone: true, selector: "nath-code-viewer", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, showLineNumbers: { classPropertyName: "showLineNumbers", publicName: "showLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, showFullPaths: { classPropertyName: "showFullPaths", publicName: "showFullPaths", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-copied": "copied()" }, classAttribute: "docs-code-container" }, ngImport: i0, template: "<div class=\"code-header\">\n <div class=\"tabs-list\" role=\"tablist\" aria-label=\"File selections\">\n @for (file of files(); track file.name) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"tab-button\"\n [class.active]=\"activeIndex() === $index\"\n [attr.aria-selected]=\"activeIndex() === $index\"\n [attr.aria-controls]=\"'panel-' + $index\"\n [attr.id]=\"'tab-' + $index\"\n (click)=\"selectTab($index)\"\n >\n {{ file.name | nathCodeFileTabName: showFullPaths() }}\n </button>\n }\n </div>\n\n <button\n type=\"button\"\n class=\"copy-button\"\n [attr.aria-label]=\"copied() ? 'Copied code to clipboard' : 'Copy code to clipboard'\"\n (click)=\"copyToClipboard()\"\n >\n {{ copied() ? 'Copied!' : 'Copy' }}\n </button>\n</div>\n\n<div\n class=\"code-body\"\n role=\"tabpanel\"\n [attr.id]=\"'panel-' + activeIndex()\"\n [attr.aria-labelledby]=\"'tab-' + activeIndex()\"\n>\n @if (showLineNumbers()) {\n <div class=\"line-numbers\" aria-hidden=\"true\">\n @for (line of lines(); track $index) {\n <span>{{ $index + 1 }}</span>\n }\n </div>\n }\n\n <pre><code>@for (line of lines(); track $index) {<span class=\"code-line\">{{ line || '\\n' }}</span>}</code></pre>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background-color:#1e1e1e;color:#d4d4d4;border-radius:8px;overflow:hidden;font-family:Courier New,Courier,monospace;margin:16px 0;box-shadow:0 4px 6px #0000001a;min-width:0;width:100%}.code-header{display:flex;justify-content:space-between;align-items:center;background-color:#252526;border-bottom:1px solid #3c3c3c;padding:0 16px;flex-shrink:0}.tabs-list{display:flex;gap:4px;overflow-x:auto}.tab-button{background:transparent;color:#858585;border:none;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:color .2s,border-color .2s}.tab-button:hover{color:#e0e0e0}.tab-button.active{color:#fff;border-bottom-color:#007acc;background-color:#1e1e1e}.tab-button:focus-visible{outline:2px solid #007acc;outline-offset:-2px}.copy-button{background-color:#333;color:#ccc;border:1px solid #444444;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background-color .2s,color .2s}.copy-button:hover{background-color:#444;color:#fff}.copy-button:focus-visible{outline:2px solid #007acc;outline-offset:2px}.code-body{display:flex;padding:16px 0;overflow-x:auto;font-size:.9rem;line-height:1.5;width:100%}.line-numbers{display:flex;flex-direction:column;align-items:flex-end;padding:0 16px;color:#858585;-webkit-user-select:none;user-select:none;border-right:1px solid #2d2d2d;text-align:right;min-width:24px;flex-shrink:0}pre{margin:0;padding:0 16px;flex-grow:1;min-width:0}code{display:block}.code-line{display:block;white-space:pre}\n"], dependencies: [{ kind: "pipe", type: CodeFileTabNamePipe, name: "nathCodeFileTabName" }] });
|
|
414
|
+
}
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCodeViewer, decorators: [{
|
|
416
|
+
type: Component,
|
|
417
|
+
args: [{ selector: 'nath-code-viewer', host: {
|
|
418
|
+
class: 'docs-code-container',
|
|
419
|
+
'[class.has-copied]': 'copied()',
|
|
420
|
+
}, imports: [CodeFileTabNamePipe], template: "<div class=\"code-header\">\n <div class=\"tabs-list\" role=\"tablist\" aria-label=\"File selections\">\n @for (file of files(); track file.name) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"tab-button\"\n [class.active]=\"activeIndex() === $index\"\n [attr.aria-selected]=\"activeIndex() === $index\"\n [attr.aria-controls]=\"'panel-' + $index\"\n [attr.id]=\"'tab-' + $index\"\n (click)=\"selectTab($index)\"\n >\n {{ file.name | nathCodeFileTabName: showFullPaths() }}\n </button>\n }\n </div>\n\n <button\n type=\"button\"\n class=\"copy-button\"\n [attr.aria-label]=\"copied() ? 'Copied code to clipboard' : 'Copy code to clipboard'\"\n (click)=\"copyToClipboard()\"\n >\n {{ copied() ? 'Copied!' : 'Copy' }}\n </button>\n</div>\n\n<div\n class=\"code-body\"\n role=\"tabpanel\"\n [attr.id]=\"'panel-' + activeIndex()\"\n [attr.aria-labelledby]=\"'tab-' + activeIndex()\"\n>\n @if (showLineNumbers()) {\n <div class=\"line-numbers\" aria-hidden=\"true\">\n @for (line of lines(); track $index) {\n <span>{{ $index + 1 }}</span>\n }\n </div>\n }\n\n <pre><code>@for (line of lines(); track $index) {<span class=\"code-line\">{{ line || '\\n' }}</span>}</code></pre>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background-color:#1e1e1e;color:#d4d4d4;border-radius:8px;overflow:hidden;font-family:Courier New,Courier,monospace;margin:16px 0;box-shadow:0 4px 6px #0000001a;min-width:0;width:100%}.code-header{display:flex;justify-content:space-between;align-items:center;background-color:#252526;border-bottom:1px solid #3c3c3c;padding:0 16px;flex-shrink:0}.tabs-list{display:flex;gap:4px;overflow-x:auto}.tab-button{background:transparent;color:#858585;border:none;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:color .2s,border-color .2s}.tab-button:hover{color:#e0e0e0}.tab-button.active{color:#fff;border-bottom-color:#007acc;background-color:#1e1e1e}.tab-button:focus-visible{outline:2px solid #007acc;outline-offset:-2px}.copy-button{background-color:#333;color:#ccc;border:1px solid #444444;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background-color .2s,color .2s}.copy-button:hover{background-color:#444;color:#fff}.copy-button:focus-visible{outline:2px solid #007acc;outline-offset:2px}.code-body{display:flex;padding:16px 0;overflow-x:auto;font-size:.9rem;line-height:1.5;width:100%}.line-numbers{display:flex;flex-direction:column;align-items:flex-end;padding:0 16px;color:#858585;-webkit-user-select:none;user-select:none;border-right:1px solid #2d2d2d;text-align:right;min-width:24px;flex-shrink:0}pre{margin:0;padding:0 16px;flex-grow:1;min-width:0}code{display:block}.code-line{display:block;white-space:pre}\n"] }]
|
|
421
|
+
}], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: true }] }], showLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLineNumbers", required: false }] }], showFullPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullPaths", required: false }] }] } });
|
|
422
|
+
|
|
352
423
|
class NathDatepicker {
|
|
353
424
|
// --- I/O ---
|
|
354
425
|
withTime = input(false, /* @ts-ignore */
|
|
@@ -420,13 +491,13 @@ class NathDatepicker {
|
|
|
420
491
|
}
|
|
421
492
|
}
|
|
422
493
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
494
|
+
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 [lang]=\"language()\"\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 });
|
|
424
495
|
}
|
|
425
496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, decorators: [{
|
|
426
497
|
type: Component,
|
|
427
498
|
args: [{ selector: 'nath-datepicker', imports: [CommonModule, OverlayModule, FormsModule], encapsulation: ViewEncapsulation.None, host: {
|
|
428
499
|
class: 'nath-datepicker-host',
|
|
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"] }]
|
|
500
|
+
}, 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 [lang]=\"language()\"\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
501
|
}], 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"] }] } });
|
|
431
502
|
|
|
432
503
|
const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
|
|
@@ -1518,14 +1589,14 @@ class NathMenu {
|
|
|
1518
1589
|
}
|
|
1519
1590
|
}
|
|
1520
1591
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1521
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenu, isStandalone: true, selector: "nath-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, positionX: { classPropertyName: "positionX", publicName: "positionX", isSignal: true, isRequired: false, transformFunction: null }, positionY: { classPropertyName: "positionY", publicName: "positionY", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", styleClass: "styleClassChange", whenHide: "whenHide" }, host: { listeners: { "document:click": "hide();" }, properties: { "class": "styleClass()" } }, viewQueries: [{ propertyName: "rootMenuElement", first: true, predicate: ["rootMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVisible()) {\
|
|
1592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenu, isStandalone: true, selector: "nath-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, positionX: { classPropertyName: "positionX", publicName: "positionX", isSignal: true, isRequired: false, transformFunction: null }, positionY: { classPropertyName: "positionY", publicName: "positionY", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", styleClass: "styleClassChange", whenHide: "whenHide" }, host: { listeners: { "document:click": "hide();" }, properties: { "class": "styleClass()" } }, viewQueries: [{ propertyName: "rootMenuElement", first: true, predicate: ["rootMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVisible()) {\n <div\n #rootMenu\n class=\"nath-menu-theme nath-menu-panel\"\n [class.nath-menu-panel--inline]=\"inline()\"\n [class.nath-menu-panel--invisible]=\"!inline()\"\n [style.left.px]=\"adjustedPosition().x\"\n [style.top.px]=\"adjustedPosition().y\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n >\n <nath-menu-list [items]=\"model()\" [flat]=\"flat()\" (whenCommand)=\"handleCommand($event)\" />\n </div>\n}\n", styles: ["nath-menu,.nath-menu-theme{--nath-menu-bg: #ffffff;--nath-menu-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--nath-menu-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-font-size: .875rem;--nath-menu-padding: .5rem 0;--nath-menu-radius: .5rem;--nath-menu-z-index: 999999}.dark nath-menu,.dark .nath-menu-theme{--nath-menu-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-menu-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-text: var(--color-zinc-200, oklch(92% .004 286.32))}nath-menu{display:block}.nath-menu-panel{position:fixed;background-color:var(--nath-menu-bg);border:1px solid var(--nath-menu-border);border-radius:var(--nath-menu-radius);box-shadow:var(--nath-menu-shadow);padding:var(--nath-menu-padding);font-size:var(--nath-menu-font-size);color:var(--nath-menu-text);z-index:var(--nath-menu-z-index);overflow:visible}.nath-menu-panel--inline{position:static}.nath-menu-panel--invisible{visibility:hidden}\n"], dependencies: [{ kind: "component", type: NathMenuList, selector: "nath-menu-list", inputs: ["items", "direction", "flat"], outputs: ["whenCommand"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1522
1593
|
}
|
|
1523
1594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenu, decorators: [{
|
|
1524
1595
|
type: Component,
|
|
1525
1596
|
args: [{ selector: 'nath-menu', imports: [NathMenuList], host: {
|
|
1526
1597
|
'[class]': `styleClass()`,
|
|
1527
1598
|
'(document:click)': `hide();`,
|
|
1528
|
-
}, encapsulation: ViewEncapsulation.None, template: "@if (isVisible()) {\
|
|
1599
|
+
}, encapsulation: ViewEncapsulation.None, template: "@if (isVisible()) {\n <div\n #rootMenu\n class=\"nath-menu-theme nath-menu-panel\"\n [class.nath-menu-panel--inline]=\"inline()\"\n [class.nath-menu-panel--invisible]=\"!inline()\"\n [style.left.px]=\"adjustedPosition().x\"\n [style.top.px]=\"adjustedPosition().y\"\n (click)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.stopPropagation()\"\n >\n <nath-menu-list [items]=\"model()\" [flat]=\"flat()\" (whenCommand)=\"handleCommand($event)\" />\n </div>\n}\n", styles: ["nath-menu,.nath-menu-theme{--nath-menu-bg: #ffffff;--nath-menu-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--nath-menu-text: var(--color-gray-700, oklch(37.1% .021 264.444));--nath-menu-font-size: .875rem;--nath-menu-padding: .5rem 0;--nath-menu-radius: .5rem;--nath-menu-z-index: 999999}.dark nath-menu,.dark .nath-menu-theme{--nath-menu-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-menu-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-text: var(--color-zinc-200, oklch(92% .004 286.32))}nath-menu{display:block}.nath-menu-panel{position:fixed;background-color:var(--nath-menu-bg);border:1px solid var(--nath-menu-border);border-radius:var(--nath-menu-radius);box-shadow:var(--nath-menu-shadow);padding:var(--nath-menu-padding);font-size:var(--nath-menu-font-size);color:var(--nath-menu-text);z-index:var(--nath-menu-z-index);overflow:visible}.nath-menu-panel--inline{position:static}.nath-menu-panel--invisible{visibility:hidden}\n"] }]
|
|
1529
1600
|
}], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }, { type: i0.Output, args: ["styleClassChange"] }], positionX: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionX", required: false }] }], positionY: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionY", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], whenHide: [{ type: i0.Output, args: ["whenHide"] }], rootMenuElement: [{ type: i0.ViewChild, args: ['rootMenu', { isSignal: true }] }] } });
|
|
1530
1601
|
|
|
1531
1602
|
let nextId$1 = 0;
|
|
@@ -5413,5 +5484,5 @@ function isSortOrderValid(order) {
|
|
|
5413
5484
|
* Generated bundle index. Do not edit.
|
|
5414
5485
|
*/
|
|
5415
5486
|
|
|
5416
|
-
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 };
|
|
5487
|
+
export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, 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 };
|
|
5417
5488
|
//# sourceMappingURL=nath-angular-ui.mjs.map
|