@ng-solid/design-system 22.2.1 → 22.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,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, input, effect, Directive, model, ElementRef, ChangeDetectionStrategy, Component, contentChildren, HostListener, booleanAttribute, output, signal, computed, numberAttribute,
|
|
2
|
+
import { Injectable, inject, input, effect, Directive, model, ElementRef, ChangeDetectionStrategy, Component, contentChildren, HostListener, booleanAttribute, output, signal, computed, numberAttribute, viewChild, PLATFORM_ID, DestroyRef, forwardRef, LOCALE_ID, ChangeDetectorRef, ViewChild, ViewEncapsulation, Renderer2, HostBinding, ViewContainerRef, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, DOCUMENT as DOCUMENT$1, Pipe, TemplateRef, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { NsIconsComponent } from '@ng-solid/icons';
|
|
4
4
|
import * as i1$1 from '@angular/common';
|
|
5
|
-
import { DOCUMENT, isPlatformBrowser, CommonModule, NgClass, NgStyle } from '@angular/common';
|
|
5
|
+
import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, CommonModule, NgClass, NgStyle } from '@angular/common';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormsModule, NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
8
8
|
import { DateFormatter, startOfWeek, startOfMonth, getDayOfWeek, endOfMonth, isToday, today, getLocalTimeZone } from '@internationalized/date';
|
|
@@ -444,6 +444,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
444
444
|
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;inline-size:var(--ns-component-avatar-size-md);block-size:var(--ns-component-avatar-size-md);border-radius:var(--ns-component-avatar-radius);background:var(--ns-component-avatar-background);border-color:var(--ns-component-avatar-border-color);color:var(--ns-component-avatar-color);font-size:var(--ns-component-avatar-font-size);font-weight:var(--ns-component-avatar-font-weight)}:host.ns-avatar--sm{inline-size:var(--ns-component-avatar-size-sm);block-size:var(--ns-component-avatar-size-sm)}:host.ns-avatar--lg{inline-size:var(--ns-component-avatar-size-lg);block-size:var(--ns-component-avatar-size-lg)}:host.ns-avatar--square{border-radius:var(--ns-component-avatar-radius-square)}.ns-avatar__image{width:100%;height:100%;object-fit:cover;transition:opacity var(--ns-component-avatar-image-transition-duration)}.ns-avatar__initials,.ns-avatar__icon{--tw-leading: 1;line-height:1}@media(prefers-reduced-motion:reduce){.ns-avatar__image{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
445
445
|
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
446
446
|
|
|
447
|
+
/**
|
|
448
|
+
* Stacks projected `ns-avatar` instances with a configurable overlap and
|
|
449
|
+
* collapses the overflow into a "+N" counter. Overlap and visibility are
|
|
450
|
+
* applied imperatively to each projected avatar's native element (read via
|
|
451
|
+
* `contentChildren(..., { read: ElementRef })`) rather than through
|
|
452
|
+
* `::ng-deep`, since the overlap is a per-instance numeric input, not a
|
|
453
|
+
* design token.
|
|
454
|
+
*/
|
|
455
|
+
class NsAvatarGroupComponent {
|
|
456
|
+
overlap = input(8, { ...(ngDevMode ? { debugName: "overlap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
457
|
+
max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
458
|
+
total = input(undefined, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
459
|
+
ariaLabel = input('Avatar group', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
460
|
+
avatars = contentChildren(NsAvatarComponent, { ...(ngDevMode ? { debugName: "avatars" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
461
|
+
visibleCount = computed(() => {
|
|
462
|
+
const count = this.avatars().length;
|
|
463
|
+
const max = this.max();
|
|
464
|
+
return max === undefined ? count : Math.min(max, count);
|
|
465
|
+
}, ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
|
|
466
|
+
overflowCount = computed(() => {
|
|
467
|
+
const total = this.total();
|
|
468
|
+
const baseline = total === undefined ? this.avatars().length : total;
|
|
469
|
+
return Math.max(0, baseline - this.visibleCount());
|
|
470
|
+
}, ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
|
|
471
|
+
constructor() {
|
|
472
|
+
effect(() => this.syncAvatars());
|
|
473
|
+
}
|
|
474
|
+
syncAvatars() {
|
|
475
|
+
const avatars = this.avatars();
|
|
476
|
+
const visible = this.visibleCount();
|
|
477
|
+
const overlap = this.overlap();
|
|
478
|
+
avatars.forEach((avatarRef, index) => {
|
|
479
|
+
const element = avatarRef.nativeElement;
|
|
480
|
+
element.style.display = index < visible ? '' : 'none';
|
|
481
|
+
element.style.marginInlineStart = index === 0 ? '0' : `${-overlap}px`;
|
|
482
|
+
element.style.zIndex = String(avatars.length - index);
|
|
483
|
+
});
|
|
484
|
+
}
|
|
485
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsAvatarGroupComponent, isStandalone: true, selector: "ns-avatar-group", inputs: { overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class.ns-avatar-group": "true" } }, queries: [{ propertyName: "avatars", predicate: NsAvatarComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: `
|
|
487
|
+
<ng-content />
|
|
488
|
+
@if (overflowCount() > 0) {
|
|
489
|
+
<span
|
|
490
|
+
class="ns-avatar-group__counter"
|
|
491
|
+
[style.margin-inline-start.px]="-overlap()"
|
|
492
|
+
>+{{ overflowCount() }}</span
|
|
493
|
+
>
|
|
494
|
+
}
|
|
495
|
+
`, isInline: true, styles: ["@layer properties;:host.ns-avatar-group{display:inline-flex;align-items:center}.ns-avatar-group__counter{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;inline-size:var(--ns-component-avatar-group-size);block-size:var(--ns-component-avatar-group-size);border-radius:var(--ns-component-avatar-group-radius);border-color:var(--ns-component-avatar-group-counter-border-color);border-width:var(--ns-component-avatar-group-counter-border-width);background:var(--ns-component-avatar-group-counter-background);color:var(--ns-component-avatar-group-counter-color);font-size:var(--ns-component-avatar-group-counter-font-size);font-weight:var(--ns-component-avatar-group-counter-font-weight)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
496
|
+
}
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsAvatarGroupComponent, decorators: [{
|
|
498
|
+
type: Component,
|
|
499
|
+
args: [{ selector: 'ns-avatar-group', standalone: true, template: `
|
|
500
|
+
<ng-content />
|
|
501
|
+
@if (overflowCount() > 0) {
|
|
502
|
+
<span
|
|
503
|
+
class="ns-avatar-group__counter"
|
|
504
|
+
[style.margin-inline-start.px]="-overlap()"
|
|
505
|
+
>+{{ overflowCount() }}</span
|
|
506
|
+
>
|
|
507
|
+
}
|
|
508
|
+
`, host: {
|
|
509
|
+
role: 'group',
|
|
510
|
+
'[attr.aria-label]': 'ariaLabel()',
|
|
511
|
+
'[class.ns-avatar-group]': 'true'
|
|
512
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host.ns-avatar-group{display:inline-flex;align-items:center}.ns-avatar-group__counter{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;inline-size:var(--ns-component-avatar-group-size);block-size:var(--ns-component-avatar-group-size);border-radius:var(--ns-component-avatar-group-radius);border-color:var(--ns-component-avatar-group-counter-border-color);border-width:var(--ns-component-avatar-group-counter-border-width);background:var(--ns-component-avatar-group-counter-background);color:var(--ns-component-avatar-group-counter-color);font-size:var(--ns-component-avatar-group-counter-font-size);font-weight:var(--ns-component-avatar-group-counter-font-weight)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
513
|
+
}], ctorParameters: () => [], propDecorators: { overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsAvatarComponent), { ...{
|
|
514
|
+
read: ElementRef
|
|
515
|
+
}, isSignal: true }] }] } });
|
|
516
|
+
|
|
447
517
|
function numberOrUndefined(value) {
|
|
448
518
|
return value === undefined || value === null
|
|
449
519
|
? undefined
|
|
@@ -551,14 +621,37 @@ class NsButtonComponent {
|
|
|
551
621
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
552
622
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
553
623
|
selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanOrUndefined });
|
|
624
|
+
/**
|
|
625
|
+
* Roving-tabindex participation, managed by a hosting `ns-button-group`.
|
|
626
|
+
* `true` (the default) leaves the button's native tabbing behavior alone;
|
|
627
|
+
* a group sets it to `false` on every button except the current roving
|
|
628
|
+
* stop.
|
|
629
|
+
*/
|
|
630
|
+
active = signal(true, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
631
|
+
/**
|
|
632
|
+
* Radio semantics, managed by a hosting `ns-button-group` in
|
|
633
|
+
* `selectionMode="single"`. Swaps `aria-pressed` for `role="radio"` +
|
|
634
|
+
* `aria-checked`.
|
|
635
|
+
*/
|
|
636
|
+
checkable = signal(false, ...(ngDevMode ? [{ debugName: "checkable" }] : /* istanbul ignore next */ []));
|
|
637
|
+
control = viewChild.required('control');
|
|
638
|
+
focus() {
|
|
639
|
+
this.control().nativeElement.focus();
|
|
640
|
+
}
|
|
554
641
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsButtonComponent, isStandalone: true, selector: "ns-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-button": "true", "class.ns-button--block": "block()", "class.ns-button--icon-only": "iconOnly()", "class.ns-button--loading": "loading()", "class.ns-button--selected": "selected() === true", "class.ns-button--unselected": "selected() === false", "attr.data-selected": "selected() === undefined ? null : selected()", "class.ns-button--sm": "size() === 'sm'", "class.ns-button--md": "size() === 'md'", "class.ns-button--lg": "size() === 'lg'", "class.ns-button--primary": "variant() === 'primary'", "class.ns-button--secondary": "variant() === 'secondary'", "class.ns-button--tertiary": "variant() === 'tertiary'", "class.ns-button--success": "variant() === 'success'", "class.ns-button--danger": "variant() === 'danger'" } }, ngImport: i0, template: `
|
|
642
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsButtonComponent, isStandalone: true, selector: "ns-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-button": "true", "class.ns-button--block": "block()", "class.ns-button--icon-only": "iconOnly()", "class.ns-button--loading": "loading()", "class.ns-button--selected": "selected() === true", "class.ns-button--unselected": "selected() === false", "attr.data-selected": "selected() === undefined ? null : selected()", "class.ns-button--sm": "size() === 'sm'", "class.ns-button--md": "size() === 'md'", "class.ns-button--lg": "size() === 'lg'", "class.ns-button--primary": "variant() === 'primary'", "class.ns-button--secondary": "variant() === 'secondary'", "class.ns-button--tertiary": "variant() === 'tertiary'", "class.ns-button--success": "variant() === 'success'", "class.ns-button--danger": "variant() === 'danger'" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
556
643
|
<button
|
|
644
|
+
#control
|
|
557
645
|
class="ns-button__control"
|
|
558
646
|
[attr.type]="type()"
|
|
559
647
|
[attr.aria-label]="ariaLabel() || null"
|
|
560
648
|
[attr.aria-busy]="loading() || null"
|
|
561
|
-
[attr.
|
|
649
|
+
[attr.role]="checkable() ? 'radio' : null"
|
|
650
|
+
[attr.aria-checked]="checkable() ? selected() === true : null"
|
|
651
|
+
[attr.aria-pressed]="
|
|
652
|
+
checkable() ? null : selected() === undefined ? null : selected()
|
|
653
|
+
"
|
|
654
|
+
[attr.tabindex]="active() ? null : -1"
|
|
562
655
|
[disabled]="disabled() || loading()"
|
|
563
656
|
>
|
|
564
657
|
@if (loading()) {
|
|
@@ -579,11 +672,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
579
672
|
type: Component,
|
|
580
673
|
args: [{ selector: 'ns-button', standalone: true, imports: [NsIconsComponent], template: `
|
|
581
674
|
<button
|
|
675
|
+
#control
|
|
582
676
|
class="ns-button__control"
|
|
583
677
|
[attr.type]="type()"
|
|
584
678
|
[attr.aria-label]="ariaLabel() || null"
|
|
585
679
|
[attr.aria-busy]="loading() || null"
|
|
586
|
-
[attr.
|
|
680
|
+
[attr.role]="checkable() ? 'radio' : null"
|
|
681
|
+
[attr.aria-checked]="checkable() ? selected() === true : null"
|
|
682
|
+
[attr.aria-pressed]="
|
|
683
|
+
checkable() ? null : selected() === undefined ? null : selected()
|
|
684
|
+
"
|
|
685
|
+
[attr.tabindex]="active() ? null : -1"
|
|
587
686
|
[disabled]="disabled() || loading()"
|
|
588
687
|
>
|
|
589
688
|
@if (loading()) {
|
|
@@ -615,28 +714,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
615
714
|
'[class.ns-button--success]': "variant() === 'success'",
|
|
616
715
|
'[class.ns-button--danger]': "variant() === 'danger'"
|
|
617
716
|
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:inline-block}:host(.ns-button--block){display:block}.ns-button__control{display:inline-flex;width:100%;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-outline-style: none;outline-style:none;min-inline-size:var(--ns-component-button-min-width);min-block-size:var(--ns-component-button-min-height);gap:var(--ns-component-button-gap);padding-block:var(--ns-component-button-padding-block);padding-inline:var(--ns-component-button-padding-inline);border-color:var(--ns-component-button-background);border-radius:var(--ns-component-button-radius);background:var(--ns-component-button-background);color:var(--ns-component-button-color);font-size:var(--ns-component-button-font-size);font-weight:var(--ns-component-button-font-weight);transition:background var(--ns-component-button-transition-duration),border-color var(--ns-component-button-transition-duration),color var(--ns-component-button-transition-duration),box-shadow var(--ns-component-button-transition-duration)}.ns-button__control:disabled{cursor:not-allowed}.ns-button__control:disabled{opacity:60%}.ns-button__control:hover:not(:disabled){background:var(--ns-component-button-background-hover);border-color:var(--ns-component-button-background-hover)}.ns-button__control:active:not(:disabled){background:var(--ns-component-button-background-active);border-color:var(--ns-component-button-background-active)}.ns-button__control:focus-visible{box-shadow:var(--ns-component-button-focus-shadow)}:host(.ns-button--sm) .ns-button__control{min-block-size:var(--ns-component-button-min-height-sm)}:host(.ns-button--lg) .ns-button__control{min-block-size:var(--ns-component-button-min-height-lg)}:host(.ns-button--secondary) .ns-button__control{border-color:var(--ns-component-button-secondary-border-color);background:var(--ns-component-button-secondary-background);color:var(--ns-component-button-secondary-color)}:host(.ns-button--secondary) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-secondary-background-hover);border-color:var(--ns-component-button-secondary-background-hover)}:host(.ns-button--secondary) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-secondary-background-active);border-color:var(--ns-component-button-secondary-background-active)}:host(.ns-button--tertiary) .ns-button__control{border-color:transparent;background:transparent;color:var(--ns-component-button-tertiary-color)}:host(.ns-button--tertiary) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-tertiary-background-hover)}:host(.ns-button--tertiary) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-tertiary-background-active)}:host(.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height);padding-inline:var(--ns-component-button-icon-padding-inline)}:host(.ns-button--success) .ns-button__control{background:var(--ns-component-button-success-background);border-color:var(--ns-component-button-success-background);color:var(--ns-component-button-success-solid-color)}:host(.ns-button--success) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-success-background-hover);border-color:var(--ns-component-button-success-background-hover);color:var(--ns-component-button-success-solid-color-hover)}:host(.ns-button--success) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-success-background-active);border-color:var(--ns-component-button-success-background-active);color:var(--ns-component-button-success-solid-color-active)}:host(.ns-button--danger) .ns-button__control{background:var(--ns-component-button-danger-background);border-color:var(--ns-component-button-danger-background);color:var(--ns-component-button-danger-solid-color)}:host(.ns-button--danger) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-danger-background-hover);border-color:var(--ns-component-button-danger-background-hover);color:var(--ns-component-button-danger-solid-color-hover)}:host(.ns-button--danger) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-danger-background-active);border-color:var(--ns-component-button-danger-background-active);color:var(--ns-component-button-danger-solid-color-active)}:host(.ns-button--selected) .ns-button__control{position:relative;z-index:1;box-shadow:var(--ns-component-button-selected-shadow);font-weight:var(--ns-component-button-selected-font-weight)}:host(.ns-button--selected) .ns-button__control:focus-visible{box-shadow:var(--ns-component-button-focus-shadow)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control{background:var(--ns-component-button-secondary-selected-background);border-color:var(--ns-component-button-secondary-selected-border-color);color:var(--ns-component-button-secondary-selected-color)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-secondary-selected-background-hover);border-color:var(--ns-component-button-secondary-selected-border-color-hover)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-secondary-selected-background-active);border-color:var(--ns-component-button-secondary-selected-border-color-active)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control{background:var(--ns-component-button-tertiary-selected-background);border-color:var(--ns-component-button-tertiary-selected-border-color);color:var(--ns-component-button-tertiary-selected-color)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-tertiary-selected-background-hover);border-color:var(--ns-component-button-tertiary-selected-border-color-hover)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-tertiary-selected-background-active);border-color:var(--ns-component-button-tertiary-selected-border-color-active)}:host-context(.ns-button-group).ns-button--secondary.ns-button--unselected .ns-button__control,:host-context(.ns-button-group).ns-button--tertiary.ns-button--unselected .ns-button__control{opacity:var(--ns-component-button-group-unselected-opacity)}:host-context(.ns-button-group--horizontal) .ns-button__control{border-radius:0}:host-context(.ns-button-group--horizontal):first-child .ns-button__control{border-start-start-radius:var(--ns-component-button-group-segment-radius);border-end-start-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--horizontal):last-child .ns-button__control{border-start-end-radius:var(--ns-component-button-group-segment-radius);border-end-end-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--vertical) .ns-button__control{border-radius:0}:host-context(.ns-button-group--vertical):first-child .ns-button__control{border-start-start-radius:var(--ns-component-button-group-segment-radius);border-start-end-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--vertical):last-child .ns-button__control{border-end-start-radius:var(--ns-component-button-group-segment-radius);border-end-end-radius:var(--ns-component-button-group-segment-radius)}.ns-button__spinner{display:inline-block;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;border-color:currentcolor;border-right-color:transparent;inline-size:var(--ns-component-button-spinner-size);block-size:var(--ns-component-button-spinner-size);animation:ns-button-spin var(--ns-component-button-loading-duration) linear infinite}@keyframes ns-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ns-button__control{transition:none}.ns-button__spinner{animation:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
618
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
|
|
717
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }] } });
|
|
619
718
|
|
|
719
|
+
const NAVIGATION_KEYS$2 = [
|
|
720
|
+
'ArrowDown',
|
|
721
|
+
'ArrowUp',
|
|
722
|
+
'ArrowLeft',
|
|
723
|
+
'ArrowRight',
|
|
724
|
+
'Home',
|
|
725
|
+
'End'
|
|
726
|
+
];
|
|
620
727
|
/**
|
|
621
728
|
* Segmented geometry is applied when direct `ns-button` children are projected
|
|
622
729
|
* into the group. Wrapping a button is not part of this contract.
|
|
730
|
+
*
|
|
731
|
+
* Selection itself stays consumer-controlled through each `ns-button`'s own
|
|
732
|
+
* `[selected]` input; the group only reflects it in ARIA (`aria-checked` for
|
|
733
|
+
* `selectionMode="single"`, the default `aria-pressed` for `"multiple"`) and
|
|
734
|
+
* drives a roving tabindex so only one button sits in the tab order.
|
|
623
735
|
*/
|
|
624
736
|
class NsButtonGroupComponent {
|
|
625
737
|
ariaLabel = input('Actions', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
626
738
|
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
739
|
+
selectionMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
|
|
740
|
+
buttons = contentChildren(NsButtonComponent, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
741
|
+
activeIndex = 0;
|
|
742
|
+
constructor() {
|
|
743
|
+
effect(() => this.syncState());
|
|
744
|
+
}
|
|
745
|
+
onKeydown(event) {
|
|
746
|
+
const buttons = this.buttons();
|
|
747
|
+
if (!buttons.length || !NAVIGATION_KEYS$2.includes(event.key)) {
|
|
748
|
+
return;
|
|
749
|
+
}
|
|
750
|
+
const next = getNsNextNavigableIndex(buttons.map((button) => ({ key: 0, disabled: button.disabled() })), this.activeIndex, event.key, this.orientation());
|
|
751
|
+
if (next >= 0 && next !== this.activeIndex) {
|
|
752
|
+
event.preventDefault();
|
|
753
|
+
this.focus(next);
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
focus(index) {
|
|
757
|
+
this.activeIndex = index;
|
|
758
|
+
this.syncState();
|
|
759
|
+
this.buttons()[index]?.focus();
|
|
760
|
+
}
|
|
761
|
+
syncState() {
|
|
762
|
+
const buttons = this.buttons();
|
|
763
|
+
if (!buttons.length) {
|
|
764
|
+
return;
|
|
765
|
+
}
|
|
766
|
+
if (this.activeIndex >= buttons.length ||
|
|
767
|
+
buttons[this.activeIndex].disabled()) {
|
|
768
|
+
const firstEnabled = buttons.findIndex((button) => !button.disabled());
|
|
769
|
+
this.activeIndex = firstEnabled >= 0 ? firstEnabled : 0;
|
|
770
|
+
}
|
|
771
|
+
const checkable = this.selectionMode() === 'single';
|
|
772
|
+
buttons.forEach((button, index) => {
|
|
773
|
+
button.active.set(index === this.activeIndex);
|
|
774
|
+
button.checkable.set(checkable);
|
|
775
|
+
});
|
|
776
|
+
}
|
|
627
777
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
778
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.21", type: NsButtonGroupComponent, isStandalone: true, selector: "ns-button-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.role": "selectionMode() === 'single' ? 'radiogroup' : 'group'", "attr.aria-label": "ariaLabel()", "class.ns-button-group": "true", "class.ns-button-group--horizontal": "orientation() === 'horizontal'", "class.ns-button-group--vertical": "orientation() === 'vertical'" } }, queries: [{ propertyName: "buttons", predicate: NsButtonComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;inline-size:fit-content;max-inline-size:100%;justify-self:start;gap:var(--ns-component-button-group-control-gap);padding:var(--ns-component-button-group-padding);border-radius:var(--ns-component-button-group-radius);background:var(--ns-component-button-group-background)}:host(.ns-button-group--vertical){flex-direction:column}:host(.ns-button-group--horizontal){flex-direction:row}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
629
779
|
}
|
|
630
780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonGroupComponent, decorators: [{
|
|
631
781
|
type: Component,
|
|
632
782
|
args: [{ selector: 'ns-button-group', standalone: true, template: '<ng-content />', host: {
|
|
633
|
-
role: 'group',
|
|
783
|
+
'[attr.role]': "selectionMode() === 'single' ? 'radiogroup' : 'group'",
|
|
634
784
|
'[attr.aria-label]': 'ariaLabel()',
|
|
635
785
|
'[class.ns-button-group]': 'true',
|
|
636
786
|
'[class.ns-button-group--horizontal]': "orientation() === 'horizontal'",
|
|
637
787
|
'[class.ns-button-group--vertical]': "orientation() === 'vertical'"
|
|
638
788
|
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;inline-size:fit-content;max-inline-size:100%;justify-self:start;gap:var(--ns-component-button-group-control-gap);padding:var(--ns-component-button-group-padding);border-radius:var(--ns-component-button-group-radius);background:var(--ns-component-button-group-background)}:host(.ns-button-group--vertical){flex-direction:column}:host(.ns-button-group--horizontal){flex-direction:row}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
639
|
-
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } })
|
|
789
|
+
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsButtonComponent), { isSignal: true }] }], onKeydown: [{
|
|
790
|
+
type: HostListener,
|
|
791
|
+
args: ['keydown', ['$event']]
|
|
792
|
+
}] } });
|
|
640
793
|
|
|
641
794
|
class NsCardComponent {
|
|
642
795
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -683,12 +836,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
683
836
|
class NsChipComponent {
|
|
684
837
|
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
685
838
|
variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
839
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
686
840
|
dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
687
841
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
688
842
|
dismissLabel = input('Remove', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
|
|
689
843
|
removed = output();
|
|
690
844
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
691
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsChipComponent, isStandalone: true, selector: "ns-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class.ns-chip": "true", "class.ns-chip--disabled": "disabled()", "class.ns-chip--solid": "variant() === 'solid'", "class.ns-chip--soft": "variant() === 'soft'", "class.ns-chip--outline": "variant() === 'outline'", "class.ns-chip--neutral": "color() === 'neutral'", "class.ns-chip--primary": "color() === 'primary'", "class.ns-chip--success": "color() === 'success'", "class.ns-chip--warning": "color() === 'warning'", "class.ns-chip--danger": "color() === 'danger'" } }, ngImport: i0, template: `
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsChipComponent, isStandalone: true, selector: "ns-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class.ns-chip": "true", "class.ns-chip--disabled": "disabled()", "class.ns-chip--solid": "variant() === 'solid'", "class.ns-chip--soft": "variant() === 'soft'", "class.ns-chip--outline": "variant() === 'outline'", "class.ns-chip--tint": "variant() === 'tint'", "class.ns-chip--neutral": "color() === 'neutral'", "class.ns-chip--primary": "color() === 'primary'", "class.ns-chip--success": "color() === 'success'", "class.ns-chip--warning": "color() === 'warning'", "class.ns-chip--danger": "color() === 'danger'", "class.ns-chip--info": "color() === 'info'", "class.ns-chip--selected": "color() === 'selected'", "class.ns-chip--md": "size() === 'md'", "class.ns-chip--pill": "size() === 'pill'" } }, ngImport: i0, template: `
|
|
692
846
|
<span class="ns-chip__label"><ng-content /></span>
|
|
693
847
|
@if (dismissible()) {
|
|
694
848
|
<button
|
|
@@ -701,7 +855,7 @@ class NsChipComponent {
|
|
|
701
855
|
×
|
|
702
856
|
</button>
|
|
703
857
|
}
|
|
704
|
-
`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;align-items:center;border-style:var(--tw-border-style);border-width:1px;white-space:nowrap;gap:var(--ns-component-chip-gap);min-block-size:var(--ns-component-chip-min-height);padding-inline:var(--ns-component-chip-padding-inline);border-color:var(--ns-component-chip-border-color);border-radius:var(--ns-component-chip-radius);background:var(--ns-component-chip-background);color:var(--ns-component-chip-color);font-size:var(--ns-component-chip-font-size);transition:background var(--ns-component-chip-transition-duration),color var(--ns-component-chip-transition-duration),border-color var(--ns-component-chip-transition-duration)}.ns-chip__dismiss{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:transparent;color:inherit;--tw-outline-style: none;outline-style:none;inline-size:var(--ns-component-chip-dismiss-size);block-size:var(--ns-component-chip-dismiss-size);transition:background var(--ns-component-chip-transition-duration)}.ns-chip__dismiss:hover:not(:disabled){background:var(--ns-component-chip-dismiss-background-hover)}.ns-chip__dismiss:focus-visible{box-shadow:var(--ns-component-chip-focus-shadow)}:host(.ns-chip--disabled){opacity:60%}:host(.ns-chip--solid){background:var(--ns-component-chip-solid-background);color:var(--ns-component-chip-solid-color)}:host(.ns-chip--soft){background:var(--ns-component-chip-background)}:host(.ns-chip--outline){background:transparent;color:var(--ns-component-chip-outline-color)}:host(.ns-chip--primary){background:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-color)}:host(.ns-chip--soft.ns-chip--primary){background:var(--ns-component-chip-soft-primary-background);color:var(--ns-component-chip-soft-primary-color)}:host(.ns-chip--success){background:var(--ns-component-chip-success-background);color:var(--ns-component-chip-success-color)}:host(.ns-chip--soft.ns-chip--success){background:var(--ns-component-chip-soft-success-background);color:var(--ns-component-chip-soft-success-color)}:host(.ns-chip--warning){background:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-color)}:host(.ns-chip--soft.ns-chip--warning){background:var(--ns-component-chip-soft-warning-background);color:var(--ns-component-chip-soft-warning-color)}:host(.ns-chip--danger){background:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-color)}:host(.ns-chip--soft.ns-chip--danger){background:var(--ns-component-chip-soft-danger-background);color:var(--ns-component-chip-soft-danger-color)}@media(prefers-reduced-motion:reduce){:host,.ns-chip__dismiss{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
858
|
+
`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;align-items:center;border-style:var(--tw-border-style);border-width:1px;white-space:nowrap;gap:var(--ns-component-chip-gap);min-block-size:var(--ns-component-chip-min-height);padding-inline:var(--ns-component-chip-padding-inline);border-color:var(--ns-component-chip-border-color);border-radius:var(--ns-component-chip-radius);background:var(--ns-component-chip-background);color:var(--ns-component-chip-color);font-size:var(--ns-component-chip-font-size);transition:background var(--ns-component-chip-transition-duration),color var(--ns-component-chip-transition-duration),border-color var(--ns-component-chip-transition-duration)}.ns-chip__dismiss{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:transparent;color:inherit;--tw-outline-style: none;outline-style:none;inline-size:var(--ns-component-chip-dismiss-size);block-size:var(--ns-component-chip-dismiss-size);transition:background var(--ns-component-chip-transition-duration)}.ns-chip__dismiss:hover:not(:disabled){background:var(--ns-component-chip-dismiss-background-hover)}.ns-chip__dismiss:focus-visible{box-shadow:var(--ns-component-chip-focus-shadow)}:host(.ns-chip--disabled){opacity:60%}:host(.ns-chip--solid){background:var(--ns-component-chip-solid-background);color:var(--ns-component-chip-solid-color)}:host(.ns-chip--soft){background:var(--ns-component-chip-background)}:host(.ns-chip--outline){background:transparent;color:var(--ns-component-chip-outline-color)}:host(.ns-chip--outline.ns-chip--neutral){color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--soft.ns-chip--neutral){background:var(--ns-component-chip-soft-neutral-background);color:var(--ns-component-chip-soft-neutral-color)}:host(.ns-chip--primary){background:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-color)}:host(.ns-chip--soft.ns-chip--primary){background:var(--ns-component-chip-soft-primary-background);color:var(--ns-component-chip-soft-primary-color)}:host(.ns-chip--success){background:var(--ns-component-chip-success-background);color:var(--ns-component-chip-success-color)}:host(.ns-chip--soft.ns-chip--success){background:var(--ns-component-chip-soft-success-background);color:var(--ns-component-chip-soft-success-color)}:host(.ns-chip--warning){background:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-color)}:host(.ns-chip--soft.ns-chip--warning){background:var(--ns-component-chip-soft-warning-background);color:var(--ns-component-chip-soft-warning-color)}:host(.ns-chip--danger){background:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-color)}:host(.ns-chip--soft.ns-chip--danger){background:var(--ns-component-chip-soft-danger-background);color:var(--ns-component-chip-soft-danger-color)}:host(.ns-chip--info){background:var(--ns-component-chip-soft-info-background);color:var(--ns-component-chip-soft-info-color)}:host(.ns-chip--selected){background:var(--ns-component-chip-soft-selected-background);color:var(--ns-component-chip-soft-selected-color)}:host(.ns-chip--tint){background:transparent}:host(.ns-chip--tint.ns-chip--primary){border-color:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-background)}:host(.ns-chip--tint.ns-chip--success){background:var(--ns-component-chip-tint-success-background);border-color:var(--ns-component-chip-tint-success-color);color:var(--ns-component-chip-tint-success-color)}:host(.ns-chip--tint.ns-chip--warning){border-color:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-background)}:host(.ns-chip--tint.ns-chip--danger){border-color:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-background)}:host(.ns-chip--tint.ns-chip--neutral){border-color:var(--ns-component-chip-border-color);color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--pill){min-block-size:auto;border-radius:var(--ns-component-chip-pill-radius);font-size:var(--ns-component-chip-pill-font-size);font-weight:var(--ns-component-chip-pill-font-weight);padding-block:var(--ns-component-chip-pill-padding-block);padding-inline:var(--ns-component-chip-pill-padding-inline)}@media(prefers-reduced-motion:reduce){:host,.ns-chip__dismiss{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
705
859
|
}
|
|
706
860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsChipComponent, decorators: [{
|
|
707
861
|
type: Component,
|
|
@@ -724,13 +878,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
724
878
|
'[class.ns-chip--solid]': "variant() === 'solid'",
|
|
725
879
|
'[class.ns-chip--soft]': "variant() === 'soft'",
|
|
726
880
|
'[class.ns-chip--outline]': "variant() === 'outline'",
|
|
881
|
+
'[class.ns-chip--tint]': "variant() === 'tint'",
|
|
727
882
|
'[class.ns-chip--neutral]': "color() === 'neutral'",
|
|
728
883
|
'[class.ns-chip--primary]': "color() === 'primary'",
|
|
729
884
|
'[class.ns-chip--success]': "color() === 'success'",
|
|
730
885
|
'[class.ns-chip--warning]': "color() === 'warning'",
|
|
731
|
-
'[class.ns-chip--danger]': "color() === 'danger'"
|
|
732
|
-
|
|
733
|
-
|
|
886
|
+
'[class.ns-chip--danger]': "color() === 'danger'",
|
|
887
|
+
'[class.ns-chip--info]': "color() === 'info'",
|
|
888
|
+
'[class.ns-chip--selected]': "color() === 'selected'",
|
|
889
|
+
'[class.ns-chip--md]': "size() === 'md'",
|
|
890
|
+
'[class.ns-chip--pill]': "size() === 'pill'"
|
|
891
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:inline-flex;align-items:center;border-style:var(--tw-border-style);border-width:1px;white-space:nowrap;gap:var(--ns-component-chip-gap);min-block-size:var(--ns-component-chip-min-height);padding-inline:var(--ns-component-chip-padding-inline);border-color:var(--ns-component-chip-border-color);border-radius:var(--ns-component-chip-radius);background:var(--ns-component-chip-background);color:var(--ns-component-chip-color);font-size:var(--ns-component-chip-font-size);transition:background var(--ns-component-chip-transition-duration),color var(--ns-component-chip-transition-duration),border-color var(--ns-component-chip-transition-duration)}.ns-chip__dismiss{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:transparent;color:inherit;--tw-outline-style: none;outline-style:none;inline-size:var(--ns-component-chip-dismiss-size);block-size:var(--ns-component-chip-dismiss-size);transition:background var(--ns-component-chip-transition-duration)}.ns-chip__dismiss:hover:not(:disabled){background:var(--ns-component-chip-dismiss-background-hover)}.ns-chip__dismiss:focus-visible{box-shadow:var(--ns-component-chip-focus-shadow)}:host(.ns-chip--disabled){opacity:60%}:host(.ns-chip--solid){background:var(--ns-component-chip-solid-background);color:var(--ns-component-chip-solid-color)}:host(.ns-chip--soft){background:var(--ns-component-chip-background)}:host(.ns-chip--outline){background:transparent;color:var(--ns-component-chip-outline-color)}:host(.ns-chip--outline.ns-chip--neutral){color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--soft.ns-chip--neutral){background:var(--ns-component-chip-soft-neutral-background);color:var(--ns-component-chip-soft-neutral-color)}:host(.ns-chip--primary){background:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-color)}:host(.ns-chip--soft.ns-chip--primary){background:var(--ns-component-chip-soft-primary-background);color:var(--ns-component-chip-soft-primary-color)}:host(.ns-chip--success){background:var(--ns-component-chip-success-background);color:var(--ns-component-chip-success-color)}:host(.ns-chip--soft.ns-chip--success){background:var(--ns-component-chip-soft-success-background);color:var(--ns-component-chip-soft-success-color)}:host(.ns-chip--warning){background:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-color)}:host(.ns-chip--soft.ns-chip--warning){background:var(--ns-component-chip-soft-warning-background);color:var(--ns-component-chip-soft-warning-color)}:host(.ns-chip--danger){background:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-color)}:host(.ns-chip--soft.ns-chip--danger){background:var(--ns-component-chip-soft-danger-background);color:var(--ns-component-chip-soft-danger-color)}:host(.ns-chip--info){background:var(--ns-component-chip-soft-info-background);color:var(--ns-component-chip-soft-info-color)}:host(.ns-chip--selected){background:var(--ns-component-chip-soft-selected-background);color:var(--ns-component-chip-soft-selected-color)}:host(.ns-chip--tint){background:transparent}:host(.ns-chip--tint.ns-chip--primary){border-color:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-background)}:host(.ns-chip--tint.ns-chip--success){background:var(--ns-component-chip-tint-success-background);border-color:var(--ns-component-chip-tint-success-color);color:var(--ns-component-chip-tint-success-color)}:host(.ns-chip--tint.ns-chip--warning){border-color:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-background)}:host(.ns-chip--tint.ns-chip--danger){border-color:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-background)}:host(.ns-chip--tint.ns-chip--neutral){border-color:var(--ns-component-chip-border-color);color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--pill){min-block-size:auto;border-radius:var(--ns-component-chip-pill-radius);font-size:var(--ns-component-chip-pill-font-size);font-weight:var(--ns-component-chip-pill-font-weight);padding-block:var(--ns-component-chip-pill-padding-block);padding-inline:var(--ns-component-chip-pill-padding-inline)}@media(prefers-reduced-motion:reduce){:host,.ns-chip__dismiss{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
892
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
734
893
|
|
|
735
894
|
class NsCollectionController {
|
|
736
895
|
selectionMode;
|
|
@@ -786,142 +945,43 @@ class NsCollectionController {
|
|
|
786
945
|
}
|
|
787
946
|
}
|
|
788
947
|
|
|
789
|
-
class
|
|
790
|
-
|
|
791
|
-
field = inject(NsFieldContext, {
|
|
792
|
-
optional: true,
|
|
793
|
-
skipSelf: true
|
|
794
|
-
});
|
|
795
|
-
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
796
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
797
|
-
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
948
|
+
class NsEmptyStateComponent {
|
|
949
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
798
950
|
description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
799
|
-
errorMessage = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
800
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
801
|
-
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
802
|
-
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
803
|
-
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
804
|
-
name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
805
|
-
ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
806
|
-
ariaDescribedBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
807
951
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
describedBy = computed(() => {
|
|
815
|
-
const ids = [
|
|
816
|
-
this.ariaDescribedBy(),
|
|
817
|
-
this.field?.getDescribedBy(),
|
|
818
|
-
this.description() ? this.descriptionId : undefined,
|
|
819
|
-
this.invalid() && this.errorMessage() ? this.errorId : undefined
|
|
820
|
-
].filter((id) => Boolean(id));
|
|
821
|
-
return ids.length ? ids.join(' ') : undefined;
|
|
822
|
-
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
823
|
-
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
824
|
-
setValue(value) {
|
|
825
|
-
if (!Object.is(this.value(), value)) {
|
|
826
|
-
this.value.set(value);
|
|
827
|
-
this.onChange(value);
|
|
828
|
-
}
|
|
829
|
-
}
|
|
830
|
-
onTouched = () => { };
|
|
831
|
-
onChange = () => { };
|
|
832
|
-
writeValue(value) {
|
|
833
|
-
this.value.set(value);
|
|
834
|
-
}
|
|
835
|
-
registerOnChange(fn) {
|
|
836
|
-
this.onChange = fn;
|
|
837
|
-
}
|
|
838
|
-
registerOnTouched(fn) {
|
|
839
|
-
this.onTouched = fn;
|
|
840
|
-
}
|
|
841
|
-
setDisabledState(isDisabled) {
|
|
842
|
-
this.disabled.set(isDisabled);
|
|
843
|
-
}
|
|
844
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
845
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsValueAccessor, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange" }, ngImport: i0 });
|
|
846
|
-
}
|
|
847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsValueAccessor, decorators: [{
|
|
848
|
-
type: Directive
|
|
849
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
850
|
-
|
|
851
|
-
class NsCheckboxComponent extends NsValueAccessor {
|
|
852
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
853
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsCheckboxComponent, isStandalone: true, selector: "ns-checkbox", host: { properties: { "class.ns-checkbox": "true" } }, providers: [
|
|
854
|
-
{
|
|
855
|
-
provide: NG_VALUE_ACCESSOR,
|
|
856
|
-
useExisting: forwardRef(() => NsCheckboxComponent),
|
|
857
|
-
multi: true
|
|
858
|
-
}
|
|
859
|
-
], usesInheritance: true, ngImport: i0, template: `<label class="ns-checkbox__label" [for]="controlId()"
|
|
860
|
-
><input
|
|
861
|
-
class="ns-checkbox__input"
|
|
862
|
-
[id]="controlId()"
|
|
863
|
-
[name]="name()"
|
|
864
|
-
type="checkbox"
|
|
865
|
-
[ngModel]="value()"
|
|
866
|
-
(ngModelChange)="setValue($event)"
|
|
867
|
-
[disabled]="disabled()"
|
|
868
|
-
[required]="required()"
|
|
869
|
-
[attr.aria-invalid]="invalid() || null"
|
|
870
|
-
[attr.aria-describedby]="describedBy()"
|
|
871
|
-
(blur)="onTouched()"
|
|
872
|
-
/><span>{{ label() }}</span>
|
|
873
|
-
@if (required()) {
|
|
874
|
-
<span aria-hidden="true"> *</span>
|
|
875
|
-
}
|
|
876
|
-
</label>
|
|
952
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
953
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEmptyStateComponent, isStandalone: true, selector: "ns-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-empty-state": "true", "class.ns-empty-state--sm": "size() === 'sm'", "class.ns-empty-state--md": "size() === 'md'" } }, ngImport: i0, template: `
|
|
954
|
+
<span class="ns-empty-state__icon"
|
|
955
|
+
><ng-content select="[empty-state-icon]"
|
|
956
|
+
/></span>
|
|
957
|
+
<p class="ns-empty-state__title">{{ title() }}</p>
|
|
877
958
|
@if (description()) {
|
|
878
|
-
<p class="ns-
|
|
879
|
-
{{ description() }}
|
|
880
|
-
</p>
|
|
959
|
+
<p class="ns-empty-state__description">{{ description() }}</p>
|
|
881
960
|
}
|
|
882
|
-
|
|
883
|
-
<
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
}`, isInline: true, styles: ["@layer properties;:host{display:inline-block}.ns-checkbox__label{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);gap:var(--ns-component-checkbox-gap);color:var(--ns-component-checkbox-color)}.ns-checkbox__input{margin:0;display:grid;width:calc(var(--ns-primitive-space-1) * 5);height:calc(var(--ns-primitive-space-1) * 5);flex-shrink:0;cursor:pointer;appearance:none;place-content:center;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-checkbox-border-color);border-radius:var(--ns-component-checkbox-radius);background:var(--ns-component-checkbox-background)}.ns-checkbox__input:after{width:calc(var(--ns-primitive-space-1) * 2);height:calc(var(--ns-primitive-space-1) * 2);content:\"\";transform:rotate(-45deg) scale(0);transform-origin:center;border-bottom:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);border-left:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);transition:transform var(--ns-component-checkbox-transition-duration) var(--ns-component-checkbox-transition-easing)}.ns-checkbox__input:checked{border-color:var(--ns-component-checkbox-accent);background:var(--ns-component-checkbox-accent)}.ns-checkbox__input:checked:after{transform:rotate(-45deg) scale(1)}.ns-checkbox__input:focus-visible{border-color:var(--ns-component-checkbox-accent);box-shadow:var(--ns-component-checkbox-focus-shadow)}.ns-checkbox__input[aria-invalid=true]{border-color:var(--ns-component-checkbox-invalid-border-color)}.ns-checkbox__input:disabled{cursor:not-allowed;opacity:50%}.ns-checkbox__label:has(.ns-checkbox__input:disabled){cursor:not-allowed;color:var(--ns-component-checkbox-disabled-color)}.ns-checkbox__description,.ns-checkbox__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-checkbox__description{color:var(--ns-component-checkbox-description-color)}.ns-checkbox__error{color:var(--ns-component-checkbox-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
961
|
+
<div class="ns-empty-state__actions">
|
|
962
|
+
<ng-content select="[empty-state-actions]" />
|
|
963
|
+
</div>
|
|
964
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ns-component-empty-state-gap);padding-block:var(--ns-component-empty-state-padding-block)}.ns-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--ns-component-empty-state-icon-size);block-size:var(--ns-component-empty-state-icon-size);color:var(--ns-component-empty-state-description-color)}.ns-empty-state__icon:empty{display:none}.ns-empty-state__title{margin:0;color:var(--ns-component-empty-state-title-color);font-size:var(--ns-component-empty-state-title-font-size);font-weight:var(--ns-component-empty-state-title-font-weight)}.ns-empty-state__description{margin:0;color:var(--ns-component-empty-state-description-color);font-size:var(--ns-component-empty-state-description-font-size)}.ns-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ns-component-empty-state-actions-gap)}.ns-empty-state__actions:empty{display:none}:host(.ns-empty-state--sm) .ns-empty-state__icon{inline-size:var(--ns-component-empty-state-icon-size-sm);block-size:var(--ns-component-empty-state-icon-size-sm)}:host(.ns-empty-state--sm) .ns-empty-state__title{font-size:var(--ns-component-empty-state-title-font-size-sm)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
887
965
|
}
|
|
888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type:
|
|
966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEmptyStateComponent, decorators: [{
|
|
889
967
|
type: Component,
|
|
890
|
-
args: [{ selector: 'ns-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
type="checkbox"
|
|
896
|
-
[ngModel]="value()"
|
|
897
|
-
(ngModelChange)="setValue($event)"
|
|
898
|
-
[disabled]="disabled()"
|
|
899
|
-
[required]="required()"
|
|
900
|
-
[attr.aria-invalid]="invalid() || null"
|
|
901
|
-
[attr.aria-describedby]="describedBy()"
|
|
902
|
-
(blur)="onTouched()"
|
|
903
|
-
/><span>{{ label() }}</span>
|
|
904
|
-
@if (required()) {
|
|
905
|
-
<span aria-hidden="true"> *</span>
|
|
906
|
-
}
|
|
907
|
-
</label>
|
|
968
|
+
args: [{ selector: 'ns-empty-state', standalone: true, template: `
|
|
969
|
+
<span class="ns-empty-state__icon"
|
|
970
|
+
><ng-content select="[empty-state-icon]"
|
|
971
|
+
/></span>
|
|
972
|
+
<p class="ns-empty-state__title">{{ title() }}</p>
|
|
908
973
|
@if (description()) {
|
|
909
|
-
<p class="ns-
|
|
910
|
-
{{ description() }}
|
|
911
|
-
</p>
|
|
974
|
+
<p class="ns-empty-state__description">{{ description() }}</p>
|
|
912
975
|
}
|
|
913
|
-
|
|
914
|
-
<
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
}
|
|
923
|
-
], host: { '[class.ns-checkbox]': 'true' }, styles: ["@layer properties;:host{display:inline-block}.ns-checkbox__label{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);gap:var(--ns-component-checkbox-gap);color:var(--ns-component-checkbox-color)}.ns-checkbox__input{margin:0;display:grid;width:calc(var(--ns-primitive-space-1) * 5);height:calc(var(--ns-primitive-space-1) * 5);flex-shrink:0;cursor:pointer;appearance:none;place-content:center;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-checkbox-border-color);border-radius:var(--ns-component-checkbox-radius);background:var(--ns-component-checkbox-background)}.ns-checkbox__input:after{width:calc(var(--ns-primitive-space-1) * 2);height:calc(var(--ns-primitive-space-1) * 2);content:\"\";transform:rotate(-45deg) scale(0);transform-origin:center;border-bottom:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);border-left:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);transition:transform var(--ns-component-checkbox-transition-duration) var(--ns-component-checkbox-transition-easing)}.ns-checkbox__input:checked{border-color:var(--ns-component-checkbox-accent);background:var(--ns-component-checkbox-accent)}.ns-checkbox__input:checked:after{transform:rotate(-45deg) scale(1)}.ns-checkbox__input:focus-visible{border-color:var(--ns-component-checkbox-accent);box-shadow:var(--ns-component-checkbox-focus-shadow)}.ns-checkbox__input[aria-invalid=true]{border-color:var(--ns-component-checkbox-invalid-border-color)}.ns-checkbox__input:disabled{cursor:not-allowed;opacity:50%}.ns-checkbox__label:has(.ns-checkbox__input:disabled){cursor:not-allowed;color:var(--ns-component-checkbox-disabled-color)}.ns-checkbox__description,.ns-checkbox__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-checkbox__description{color:var(--ns-component-checkbox-description-color)}.ns-checkbox__error{color:var(--ns-component-checkbox-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
924
|
-
}] });
|
|
976
|
+
<div class="ns-empty-state__actions">
|
|
977
|
+
<ng-content select="[empty-state-actions]" />
|
|
978
|
+
</div>
|
|
979
|
+
`, host: {
|
|
980
|
+
'[class.ns-empty-state]': 'true',
|
|
981
|
+
'[class.ns-empty-state--sm]': "size() === 'sm'",
|
|
982
|
+
'[class.ns-empty-state--md]': "size() === 'md'"
|
|
983
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ns-component-empty-state-gap);padding-block:var(--ns-component-empty-state-padding-block)}.ns-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--ns-component-empty-state-icon-size);block-size:var(--ns-component-empty-state-icon-size);color:var(--ns-component-empty-state-description-color)}.ns-empty-state__icon:empty{display:none}.ns-empty-state__title{margin:0;color:var(--ns-component-empty-state-title-color);font-size:var(--ns-component-empty-state-title-font-size);font-weight:var(--ns-component-empty-state-title-font-weight)}.ns-empty-state__description{margin:0;color:var(--ns-component-empty-state-description-color);font-size:var(--ns-component-empty-state-description-font-size)}.ns-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ns-component-empty-state-actions-gap)}.ns-empty-state__actions:empty{display:none}:host(.ns-empty-state--sm) .ns-empty-state__icon{inline-size:var(--ns-component-empty-state-icon-size-sm);block-size:var(--ns-component-empty-state-icon-size-sm)}:host(.ns-empty-state--sm) .ns-empty-state__title{font-size:var(--ns-component-empty-state-title-font-size-sm)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
984
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
925
985
|
|
|
926
986
|
const VIEWPORT_GUTTER = 8;
|
|
927
987
|
class NsOverlayRef {
|
|
@@ -1045,14 +1105,13 @@ class NsOverlayService {
|
|
|
1045
1105
|
portal.className = 'ns-overlay__portal';
|
|
1046
1106
|
portal.tabIndex = -1;
|
|
1047
1107
|
portal.inert = false;
|
|
1108
|
+
// The portal is a positioning/stacking box only — it never paints
|
|
1109
|
+
// chrome. Every projected root (menu, popover, modal, drawer, ...)
|
|
1110
|
+
// already draws its own background/border/radius/shadow, so doing it
|
|
1111
|
+
// here again duplicated the chrome and, since no `overlay` component
|
|
1112
|
+
// tokens existed, silently fell back to invalid values.
|
|
1048
1113
|
portal.style.position = 'fixed';
|
|
1049
1114
|
portal.style.zIndex = `calc(var(--ns-component-overlay-layer) + ${this.overlays.length})`;
|
|
1050
|
-
portal.style.borderStyle = 'solid';
|
|
1051
|
-
portal.style.borderWidth = 'var(--ns-component-overlay-border-width)';
|
|
1052
|
-
portal.style.borderColor = 'var(--ns-component-overlay-border-color)';
|
|
1053
|
-
portal.style.borderRadius = 'var(--ns-component-overlay-radius)';
|
|
1054
|
-
portal.style.background = 'var(--ns-component-overlay-background)';
|
|
1055
|
-
portal.style.boxShadow = 'var(--ns-component-overlay-shadow)';
|
|
1056
1115
|
this.document.body.appendChild(portal);
|
|
1057
1116
|
this.overlayStackStates.set(portal, {
|
|
1058
1117
|
inert: portal.inert,
|
|
@@ -1326,6 +1385,540 @@ function clamp(value, min, max) {
|
|
|
1326
1385
|
return Math.max(min, Math.max(min, max) < min ? min : Math.min(value, max));
|
|
1327
1386
|
}
|
|
1328
1387
|
|
|
1388
|
+
const NAVIGATION_KEYS$1 = [
|
|
1389
|
+
'ArrowDown',
|
|
1390
|
+
'ArrowUp',
|
|
1391
|
+
'Home',
|
|
1392
|
+
'End'
|
|
1393
|
+
];
|
|
1394
|
+
/**
|
|
1395
|
+
* Centered command palette (⌘K-style) built on `NsOverlayService` for its
|
|
1396
|
+
* focus trap, escape dismissal, scroll lock and inert background — the same
|
|
1397
|
+
* mechanism `ns-menu` and `ns-popover` use, minus anchor-relative placement
|
|
1398
|
+
* since this overlay is always centered in the viewport. It has no
|
|
1399
|
+
* dedicated open/close service: like `ns-menu` and `ns-popover`, it exposes
|
|
1400
|
+
* an `open` model that the host application binds to (for example from a
|
|
1401
|
+
* global keyboard shortcut), so a single declared instance can be toggled
|
|
1402
|
+
* from anywhere without an extra imperative API to keep in sync.
|
|
1403
|
+
*
|
|
1404
|
+
* `query` is a debounced model: the input reflects every keystroke
|
|
1405
|
+
* immediately, but `query` (and therefore `queryChange`) only updates after
|
|
1406
|
+
* `debounceMs` of inactivity, so consumers filtering `groups` server-side
|
|
1407
|
+
* are not flooded on every keystroke.
|
|
1408
|
+
*
|
|
1409
|
+
* `NsCommandItem.icon` is a plain string key, not markup — pair it with
|
|
1410
|
+
* `itemIconTemplate` (an `<ng-template let-item>`, rendered through
|
|
1411
|
+
* `ngTemplateOutlet` with `$implicit` bound to the item) to project an icon
|
|
1412
|
+
* component per item. Falls back to the `avatarText` initials badge, then to
|
|
1413
|
+
* a reserved-width placeholder so labels stay aligned when neither is set.
|
|
1414
|
+
*/
|
|
1415
|
+
class NsCommandPaletteComponent {
|
|
1416
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
1417
|
+
query = model('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
|
|
1418
|
+
placeholder = input('Buscar…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1419
|
+
debounceMs = input(200, { ...(ngDevMode ? { debugName: "debounceMs" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
1420
|
+
groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
1421
|
+
itemIconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "itemIconTemplate" }] : /* istanbul ignore next */ []));
|
|
1422
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1423
|
+
emptyTitle = input('Sin resultados', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
|
|
1424
|
+
emptyDescription = input(undefined, ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
|
|
1425
|
+
ariaLabel = input('Paleta de comandos', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1426
|
+
activated = output();
|
|
1427
|
+
closed = output();
|
|
1428
|
+
draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
1429
|
+
activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
|
|
1430
|
+
listboxId = inject(NsAriaIdService).create('ns-command-palette-listbox');
|
|
1431
|
+
idPrefix = inject(NsAriaIdService).create('ns-command-palette-item');
|
|
1432
|
+
element = inject((ElementRef));
|
|
1433
|
+
overlay = inject(NsOverlayService);
|
|
1434
|
+
destroyRef = inject(DestroyRef);
|
|
1435
|
+
overlayRef;
|
|
1436
|
+
viewInitialized = false;
|
|
1437
|
+
debounceTimer;
|
|
1438
|
+
constructor() {
|
|
1439
|
+
effect(() => {
|
|
1440
|
+
const open = this.open();
|
|
1441
|
+
if (!this.viewInitialized) {
|
|
1442
|
+
return;
|
|
1443
|
+
}
|
|
1444
|
+
open ? this.openOverlay() : this.overlayRef?.close('programmatic');
|
|
1445
|
+
});
|
|
1446
|
+
effect(() => {
|
|
1447
|
+
const value = this.query();
|
|
1448
|
+
if (!this.debounceTimer) {
|
|
1449
|
+
this.draft.set(value);
|
|
1450
|
+
}
|
|
1451
|
+
});
|
|
1452
|
+
effect(() => this.syncActiveItem());
|
|
1453
|
+
this.destroyRef.onDestroy(() => clearTimeout(this.debounceTimer));
|
|
1454
|
+
}
|
|
1455
|
+
ngAfterViewInit() {
|
|
1456
|
+
this.viewInitialized = true;
|
|
1457
|
+
if (this.open()) {
|
|
1458
|
+
this.openOverlay();
|
|
1459
|
+
}
|
|
1460
|
+
}
|
|
1461
|
+
ngOnDestroy() {
|
|
1462
|
+
this.overlayRef?.close('programmatic');
|
|
1463
|
+
}
|
|
1464
|
+
close() {
|
|
1465
|
+
this.open.set(false);
|
|
1466
|
+
}
|
|
1467
|
+
flatItems() {
|
|
1468
|
+
return this.groups().flatMap((group) => [...group.items]);
|
|
1469
|
+
}
|
|
1470
|
+
itemDomId(item) {
|
|
1471
|
+
return `${this.idPrefix}-${item.id}`;
|
|
1472
|
+
}
|
|
1473
|
+
activeDomId() {
|
|
1474
|
+
const id = this.activeId();
|
|
1475
|
+
if (!id) {
|
|
1476
|
+
return undefined;
|
|
1477
|
+
}
|
|
1478
|
+
const item = this.flatItems().find((candidate) => candidate.id === id);
|
|
1479
|
+
return item ? this.itemDomId(item) : undefined;
|
|
1480
|
+
}
|
|
1481
|
+
setActive(item) {
|
|
1482
|
+
if (!item.disabled) {
|
|
1483
|
+
this.activeId.set(item.id);
|
|
1484
|
+
}
|
|
1485
|
+
}
|
|
1486
|
+
activateItem(item) {
|
|
1487
|
+
if (item.disabled) {
|
|
1488
|
+
return;
|
|
1489
|
+
}
|
|
1490
|
+
this.activated.emit(item);
|
|
1491
|
+
this.close();
|
|
1492
|
+
}
|
|
1493
|
+
onQueryInput(event) {
|
|
1494
|
+
const value = event.target.value;
|
|
1495
|
+
this.draft.set(value);
|
|
1496
|
+
clearTimeout(this.debounceTimer);
|
|
1497
|
+
this.debounceTimer = setTimeout(() => {
|
|
1498
|
+
this.debounceTimer = undefined;
|
|
1499
|
+
this.query.set(value);
|
|
1500
|
+
}, this.debounceMs());
|
|
1501
|
+
}
|
|
1502
|
+
onKeydown(event) {
|
|
1503
|
+
const items = this.flatItems();
|
|
1504
|
+
if (event.key === 'Enter') {
|
|
1505
|
+
const active = items.find((item) => item.id === this.activeId());
|
|
1506
|
+
if (active) {
|
|
1507
|
+
event.preventDefault();
|
|
1508
|
+
this.activateItem(active);
|
|
1509
|
+
}
|
|
1510
|
+
return;
|
|
1511
|
+
}
|
|
1512
|
+
if (!items.length || !NAVIGATION_KEYS$1.includes(event.key)) {
|
|
1513
|
+
return;
|
|
1514
|
+
}
|
|
1515
|
+
const navigable = items.map((item) => ({
|
|
1516
|
+
key: item.id,
|
|
1517
|
+
disabled: item.disabled
|
|
1518
|
+
}));
|
|
1519
|
+
const currentIndex = items.findIndex((item) => item.id === this.activeId());
|
|
1520
|
+
const nextIndex = getNsNextNavigableIndex(navigable, currentIndex, event.key, 'vertical');
|
|
1521
|
+
if (nextIndex >= 0 && nextIndex !== currentIndex) {
|
|
1522
|
+
event.preventDefault();
|
|
1523
|
+
this.activeId.set(items[nextIndex].id);
|
|
1524
|
+
this.scrollActiveIntoView(nextIndex);
|
|
1525
|
+
}
|
|
1526
|
+
}
|
|
1527
|
+
scrollActiveIntoView(index) {
|
|
1528
|
+
const elements = this.element.nativeElement.querySelectorAll('.ns-command-palette__item');
|
|
1529
|
+
elements[index]?.scrollIntoView?.({ block: 'nearest' });
|
|
1530
|
+
}
|
|
1531
|
+
syncActiveItem() {
|
|
1532
|
+
const items = this.flatItems();
|
|
1533
|
+
const current = this.activeId();
|
|
1534
|
+
if (!items.length) {
|
|
1535
|
+
if (current !== null) {
|
|
1536
|
+
this.activeId.set(null);
|
|
1537
|
+
}
|
|
1538
|
+
return;
|
|
1539
|
+
}
|
|
1540
|
+
const stillValid = items.some((item) => item.id === current && !item.disabled);
|
|
1541
|
+
if (!stillValid) {
|
|
1542
|
+
const firstEnabled = items.find((item) => !item.disabled);
|
|
1543
|
+
this.activeId.set(firstEnabled ? firstEnabled.id : null);
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
openOverlay() {
|
|
1547
|
+
if (this.overlayRef) {
|
|
1548
|
+
return;
|
|
1549
|
+
}
|
|
1550
|
+
const overlayRef = this.overlay.open({
|
|
1551
|
+
closeOnEscape: true,
|
|
1552
|
+
closeOnOutsidePointer: false,
|
|
1553
|
+
trapFocus: true,
|
|
1554
|
+
restoreFocus: true,
|
|
1555
|
+
inert: true,
|
|
1556
|
+
lockScroll: true
|
|
1557
|
+
});
|
|
1558
|
+
overlayRef.attach(this.element.nativeElement);
|
|
1559
|
+
this.overlayRef = overlayRef;
|
|
1560
|
+
overlayRef.onClose((reason) => {
|
|
1561
|
+
if (this.overlayRef !== overlayRef) {
|
|
1562
|
+
return;
|
|
1563
|
+
}
|
|
1564
|
+
this.overlayRef = undefined;
|
|
1565
|
+
if (this.open()) {
|
|
1566
|
+
this.open.set(false);
|
|
1567
|
+
}
|
|
1568
|
+
this.closed.emit(reason);
|
|
1569
|
+
});
|
|
1570
|
+
}
|
|
1571
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1572
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsCommandPaletteComponent, isStandalone: true, selector: "ns-command-palette", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, itemIconTemplate: { classPropertyName: "itemIconTemplate", publicName: "itemIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", query: "queryChange", activated: "activated", closed: "closed" }, host: { properties: { "class.ns-command-palette": "true", "attr.data-state": "open() ? 'open' : 'closed'", "attr.aria-hidden": "!open()" } }, ngImport: i0, template: `
|
|
1573
|
+
<div class="ns-command-palette__backdrop" (click)="close()"></div>
|
|
1574
|
+
<div
|
|
1575
|
+
class="ns-command-palette__panel"
|
|
1576
|
+
role="dialog"
|
|
1577
|
+
aria-modal="true"
|
|
1578
|
+
[attr.aria-label]="ariaLabel()"
|
|
1579
|
+
>
|
|
1580
|
+
<div class="ns-command-palette__search">
|
|
1581
|
+
<span class="ns-command-palette__search-icon" aria-hidden="true"
|
|
1582
|
+
><ng-content select="[command-palette-icon]"
|
|
1583
|
+
/></span>
|
|
1584
|
+
<input
|
|
1585
|
+
#searchInput
|
|
1586
|
+
class="ns-command-palette__input"
|
|
1587
|
+
type="text"
|
|
1588
|
+
role="combobox"
|
|
1589
|
+
aria-autocomplete="list"
|
|
1590
|
+
aria-expanded="true"
|
|
1591
|
+
[attr.aria-controls]="listboxId"
|
|
1592
|
+
[attr.aria-activedescendant]="activeDomId() || null"
|
|
1593
|
+
[placeholder]="placeholder()"
|
|
1594
|
+
[value]="draft()"
|
|
1595
|
+
(input)="onQueryInput($event)"
|
|
1596
|
+
(keydown)="onKeydown($event)"
|
|
1597
|
+
/>
|
|
1598
|
+
</div>
|
|
1599
|
+
<div class="ns-command-palette__body">
|
|
1600
|
+
@if (loading()) {
|
|
1601
|
+
<p class="ns-command-palette__loading">Buscando…</p>
|
|
1602
|
+
} @else if (!flatItems().length) {
|
|
1603
|
+
<ns-empty-state
|
|
1604
|
+
size="sm"
|
|
1605
|
+
[title]="emptyTitle()"
|
|
1606
|
+
[description]="emptyDescription()"
|
|
1607
|
+
/>
|
|
1608
|
+
} @else {
|
|
1609
|
+
<div
|
|
1610
|
+
class="ns-command-palette__list"
|
|
1611
|
+
role="listbox"
|
|
1612
|
+
[id]="listboxId"
|
|
1613
|
+
[attr.aria-label]="ariaLabel()"
|
|
1614
|
+
>
|
|
1615
|
+
@for (group of groups(); track group.id) {
|
|
1616
|
+
@if (group.items.length) {
|
|
1617
|
+
<div class="ns-command-palette__group">
|
|
1618
|
+
<p class="ns-command-palette__group-label">
|
|
1619
|
+
{{ group.label }}
|
|
1620
|
+
</p>
|
|
1621
|
+
@for (item of group.items; track item.id) {
|
|
1622
|
+
<div
|
|
1623
|
+
[id]="itemDomId(item)"
|
|
1624
|
+
class="ns-command-palette__item"
|
|
1625
|
+
role="option"
|
|
1626
|
+
[attr.aria-selected]="item.id === activeId()"
|
|
1627
|
+
[attr.aria-disabled]="item.disabled || null"
|
|
1628
|
+
[class.ns-command-palette__item--active]="
|
|
1629
|
+
item.id === activeId()
|
|
1630
|
+
"
|
|
1631
|
+
[class.ns-command-palette__item--disabled]="item.disabled"
|
|
1632
|
+
(click)="activateItem(item)"
|
|
1633
|
+
(mouseenter)="setActive(item)"
|
|
1634
|
+
>
|
|
1635
|
+
@if (itemIconTemplate(); as iconTemplate) {
|
|
1636
|
+
<span class="ns-command-palette__item-icon">
|
|
1637
|
+
<ng-container
|
|
1638
|
+
[ngTemplateOutlet]="iconTemplate"
|
|
1639
|
+
[ngTemplateOutletContext]="{ $implicit: item }"
|
|
1640
|
+
/>
|
|
1641
|
+
</span>
|
|
1642
|
+
} @else if (item.avatarText) {
|
|
1643
|
+
<span class="ns-command-palette__item-avatar">{{
|
|
1644
|
+
item.avatarText
|
|
1645
|
+
}}</span>
|
|
1646
|
+
} @else {
|
|
1647
|
+
<span
|
|
1648
|
+
class="ns-command-palette__item-icon-placeholder"
|
|
1649
|
+
aria-hidden="true"
|
|
1650
|
+
></span>
|
|
1651
|
+
}
|
|
1652
|
+
<span class="ns-command-palette__item-label">{{
|
|
1653
|
+
item.label
|
|
1654
|
+
}}</span>
|
|
1655
|
+
@if (item.meta) {
|
|
1656
|
+
<span class="ns-command-palette__item-meta">{{
|
|
1657
|
+
item.meta
|
|
1658
|
+
}}</span>
|
|
1659
|
+
}
|
|
1660
|
+
</div>
|
|
1661
|
+
}
|
|
1662
|
+
</div>
|
|
1663
|
+
}
|
|
1664
|
+
}
|
|
1665
|
+
</div>
|
|
1666
|
+
}
|
|
1667
|
+
</div>
|
|
1668
|
+
<div class="ns-command-palette__footer">
|
|
1669
|
+
<ng-content select="[command-palette-footer]" />
|
|
1670
|
+
</div>
|
|
1671
|
+
</div>
|
|
1672
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";@layer properties;:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--ns-component-command-palette-layer)}:host([data-state=closed]){display:none}.ns-command-palette__backdrop{position:fixed;inset:0;background:var(--ns-component-command-palette-backdrop-color)}@supports (color: color-mix(in lab,red,red)){.ns-command-palette__backdrop{background:color-mix(in srgb,var(--ns-component-command-palette-backdrop-color) 34%,transparent)}}.ns-command-palette__panel{position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden;max-width:var(--ns-component-command-palette-width);max-height:80dvh;border:var(--ns-component-command-palette-border-width) solid var(--ns-component-command-palette-border-color);border-radius:var(--ns-component-command-palette-radius);background:var(--ns-component-command-palette-background);color:var(--ns-component-command-palette-color);box-shadow:var(--ns-component-command-palette-shadow);animation:ns-command-palette-enter var(--ns-component-command-palette-enter-duration) var(--ns-component-command-palette-enter-easing)}.ns-command-palette__search{display:flex;align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-command-palette-search-gap);padding-block:var(--ns-component-command-palette-search-padding-block);padding-inline:var(--ns-component-command-palette-search-padding-inline);border-color:var(--ns-component-command-palette-search-border-color)}.ns-command-palette__search-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--ns-component-command-palette-search-icon-color)}.ns-command-palette__search-icon:empty{display:none}.ns-command-palette__input{min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;--tw-outline-style: none;outline-style:none;color:var(--ns-component-command-palette-search-color);font-size:var(--ns-component-command-palette-search-font-size)}.ns-command-palette__input::placeholder{color:var(--ns-component-command-palette-search-placeholder-color)}.ns-command-palette__input:focus-visible{box-shadow:var(--ns-component-command-palette-focus-shadow)}.ns-command-palette__body{min-height:0px;overflow:auto}.ns-command-palette__loading{margin:0;text-align:center;padding:var(--ns-component-command-palette-list-padding);color:var(--ns-component-command-palette-item-meta-color)}.ns-command-palette__list{display:flex;flex-direction:column;padding:var(--ns-component-command-palette-list-padding);gap:var(--ns-component-command-palette-group-gap)}.ns-command-palette__group{display:flex;flex-direction:column;gap:var(--ns-component-command-palette-group-gap)}.ns-command-palette__group-label{margin:0;text-transform:uppercase;color:var(--ns-component-command-palette-group-label-color);font-size:var(--ns-component-command-palette-group-label-font-size);font-weight:var(--ns-component-command-palette-group-label-font-weight);padding-inline:var(--ns-component-command-palette-item-padding-inline)}.ns-command-palette__item{display:flex;cursor:pointer;align-items:center;gap:var(--ns-component-command-palette-item-gap);padding-block:var(--ns-component-command-palette-item-padding-block);padding-inline:var(--ns-component-command-palette-item-padding-inline);border-radius:var(--ns-component-command-palette-item-radius);color:var(--ns-component-command-palette-item-color)}.ns-command-palette__item--active{background:var(--ns-component-command-palette-item-active-background);color:var(--ns-component-command-palette-item-active-color)}.ns-command-palette__item--active .ns-command-palette__item-meta{color:var(--ns-component-command-palette-item-meta-color-active)}.ns-command-palette__item--active .ns-command-palette__item-avatar{background:var(--ns-component-command-palette-item-avatar-active-background);color:var(--ns-component-command-palette-item-avatar-active-color)}.ns-command-palette__item--disabled{pointer-events:none;cursor:not-allowed;opacity:60%;color:var(--ns-component-command-palette-item-disabled-color)}.ns-command-palette__item-icon,.ns-command-palette__item-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-command-palette__item-icon-placeholder{display:inline-block;flex-shrink:0;inline-size:var(--ns-component-command-palette-item-icon-width)}.ns-command-palette__item-label{min-width:0px;flex:1}.ns-command-palette__item-meta{color:var(--ns-component-command-palette-item-meta-color)}.ns-command-palette__footer{display:flex;align-items:center;border-top-style:var(--tw-border-style);border-top-width:1px;gap:var(--ns-component-command-palette-search-gap);color:var(--ns-component-command-palette-footer-color);font-size:var(--ns-component-command-palette-footer-font-size);padding-block:var(--ns-component-command-palette-footer-padding-block);padding-inline:var(--ns-component-command-palette-footer-padding-inline);border-color:var(--ns-component-command-palette-footer-border-color)}.ns-command-palette__footer:empty{display:none;--tw-border-style: none;border-style:none;padding:0}.ns-command-palette__footer kbd{display:inline-flex;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;font-family:var(--ns-semantic-common-font-body);background:var(--ns-component-command-palette-kbd-background);color:var(--ns-component-command-palette-kbd-color);border-radius:var(--ns-component-command-palette-kbd-radius);padding-block:var(--ns-component-command-palette-kbd-padding-block);padding-inline:var(--ns-component-command-palette-kbd-padding-inline);font-size:var(--ns-component-command-palette-kbd-font-size)}.ns-command-palette__footer kbd[data-active]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-command-palette-kbd-active-border-color);color:var(--ns-component-command-palette-kbd-active-color)}@keyframes ns-command-palette-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-command-palette-list-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.ns-command-palette__panel{animation:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsEmptyStateComponent, selector: "ns-empty-state", inputs: ["title", "description", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1673
|
+
}
|
|
1674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCommandPaletteComponent, decorators: [{
|
|
1675
|
+
type: Component,
|
|
1676
|
+
args: [{ selector: 'ns-command-palette', standalone: true, imports: [NsEmptyStateComponent, NgTemplateOutlet], template: `
|
|
1677
|
+
<div class="ns-command-palette__backdrop" (click)="close()"></div>
|
|
1678
|
+
<div
|
|
1679
|
+
class="ns-command-palette__panel"
|
|
1680
|
+
role="dialog"
|
|
1681
|
+
aria-modal="true"
|
|
1682
|
+
[attr.aria-label]="ariaLabel()"
|
|
1683
|
+
>
|
|
1684
|
+
<div class="ns-command-palette__search">
|
|
1685
|
+
<span class="ns-command-palette__search-icon" aria-hidden="true"
|
|
1686
|
+
><ng-content select="[command-palette-icon]"
|
|
1687
|
+
/></span>
|
|
1688
|
+
<input
|
|
1689
|
+
#searchInput
|
|
1690
|
+
class="ns-command-palette__input"
|
|
1691
|
+
type="text"
|
|
1692
|
+
role="combobox"
|
|
1693
|
+
aria-autocomplete="list"
|
|
1694
|
+
aria-expanded="true"
|
|
1695
|
+
[attr.aria-controls]="listboxId"
|
|
1696
|
+
[attr.aria-activedescendant]="activeDomId() || null"
|
|
1697
|
+
[placeholder]="placeholder()"
|
|
1698
|
+
[value]="draft()"
|
|
1699
|
+
(input)="onQueryInput($event)"
|
|
1700
|
+
(keydown)="onKeydown($event)"
|
|
1701
|
+
/>
|
|
1702
|
+
</div>
|
|
1703
|
+
<div class="ns-command-palette__body">
|
|
1704
|
+
@if (loading()) {
|
|
1705
|
+
<p class="ns-command-palette__loading">Buscando…</p>
|
|
1706
|
+
} @else if (!flatItems().length) {
|
|
1707
|
+
<ns-empty-state
|
|
1708
|
+
size="sm"
|
|
1709
|
+
[title]="emptyTitle()"
|
|
1710
|
+
[description]="emptyDescription()"
|
|
1711
|
+
/>
|
|
1712
|
+
} @else {
|
|
1713
|
+
<div
|
|
1714
|
+
class="ns-command-palette__list"
|
|
1715
|
+
role="listbox"
|
|
1716
|
+
[id]="listboxId"
|
|
1717
|
+
[attr.aria-label]="ariaLabel()"
|
|
1718
|
+
>
|
|
1719
|
+
@for (group of groups(); track group.id) {
|
|
1720
|
+
@if (group.items.length) {
|
|
1721
|
+
<div class="ns-command-palette__group">
|
|
1722
|
+
<p class="ns-command-palette__group-label">
|
|
1723
|
+
{{ group.label }}
|
|
1724
|
+
</p>
|
|
1725
|
+
@for (item of group.items; track item.id) {
|
|
1726
|
+
<div
|
|
1727
|
+
[id]="itemDomId(item)"
|
|
1728
|
+
class="ns-command-palette__item"
|
|
1729
|
+
role="option"
|
|
1730
|
+
[attr.aria-selected]="item.id === activeId()"
|
|
1731
|
+
[attr.aria-disabled]="item.disabled || null"
|
|
1732
|
+
[class.ns-command-palette__item--active]="
|
|
1733
|
+
item.id === activeId()
|
|
1734
|
+
"
|
|
1735
|
+
[class.ns-command-palette__item--disabled]="item.disabled"
|
|
1736
|
+
(click)="activateItem(item)"
|
|
1737
|
+
(mouseenter)="setActive(item)"
|
|
1738
|
+
>
|
|
1739
|
+
@if (itemIconTemplate(); as iconTemplate) {
|
|
1740
|
+
<span class="ns-command-palette__item-icon">
|
|
1741
|
+
<ng-container
|
|
1742
|
+
[ngTemplateOutlet]="iconTemplate"
|
|
1743
|
+
[ngTemplateOutletContext]="{ $implicit: item }"
|
|
1744
|
+
/>
|
|
1745
|
+
</span>
|
|
1746
|
+
} @else if (item.avatarText) {
|
|
1747
|
+
<span class="ns-command-palette__item-avatar">{{
|
|
1748
|
+
item.avatarText
|
|
1749
|
+
}}</span>
|
|
1750
|
+
} @else {
|
|
1751
|
+
<span
|
|
1752
|
+
class="ns-command-palette__item-icon-placeholder"
|
|
1753
|
+
aria-hidden="true"
|
|
1754
|
+
></span>
|
|
1755
|
+
}
|
|
1756
|
+
<span class="ns-command-palette__item-label">{{
|
|
1757
|
+
item.label
|
|
1758
|
+
}}</span>
|
|
1759
|
+
@if (item.meta) {
|
|
1760
|
+
<span class="ns-command-palette__item-meta">{{
|
|
1761
|
+
item.meta
|
|
1762
|
+
}}</span>
|
|
1763
|
+
}
|
|
1764
|
+
</div>
|
|
1765
|
+
}
|
|
1766
|
+
</div>
|
|
1767
|
+
}
|
|
1768
|
+
}
|
|
1769
|
+
</div>
|
|
1770
|
+
}
|
|
1771
|
+
</div>
|
|
1772
|
+
<div class="ns-command-palette__footer">
|
|
1773
|
+
<ng-content select="[command-palette-footer]" />
|
|
1774
|
+
</div>
|
|
1775
|
+
</div>
|
|
1776
|
+
`, host: {
|
|
1777
|
+
'[class.ns-command-palette]': 'true',
|
|
1778
|
+
'[attr.data-state]': "open() ? 'open' : 'closed'",
|
|
1779
|
+
'[attr.aria-hidden]': '!open()'
|
|
1780
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";@layer properties;:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--ns-component-command-palette-layer)}:host([data-state=closed]){display:none}.ns-command-palette__backdrop{position:fixed;inset:0;background:var(--ns-component-command-palette-backdrop-color)}@supports (color: color-mix(in lab,red,red)){.ns-command-palette__backdrop{background:color-mix(in srgb,var(--ns-component-command-palette-backdrop-color) 34%,transparent)}}.ns-command-palette__panel{position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden;max-width:var(--ns-component-command-palette-width);max-height:80dvh;border:var(--ns-component-command-palette-border-width) solid var(--ns-component-command-palette-border-color);border-radius:var(--ns-component-command-palette-radius);background:var(--ns-component-command-palette-background);color:var(--ns-component-command-palette-color);box-shadow:var(--ns-component-command-palette-shadow);animation:ns-command-palette-enter var(--ns-component-command-palette-enter-duration) var(--ns-component-command-palette-enter-easing)}.ns-command-palette__search{display:flex;align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-command-palette-search-gap);padding-block:var(--ns-component-command-palette-search-padding-block);padding-inline:var(--ns-component-command-palette-search-padding-inline);border-color:var(--ns-component-command-palette-search-border-color)}.ns-command-palette__search-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--ns-component-command-palette-search-icon-color)}.ns-command-palette__search-icon:empty{display:none}.ns-command-palette__input{min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;--tw-outline-style: none;outline-style:none;color:var(--ns-component-command-palette-search-color);font-size:var(--ns-component-command-palette-search-font-size)}.ns-command-palette__input::placeholder{color:var(--ns-component-command-palette-search-placeholder-color)}.ns-command-palette__input:focus-visible{box-shadow:var(--ns-component-command-palette-focus-shadow)}.ns-command-palette__body{min-height:0px;overflow:auto}.ns-command-palette__loading{margin:0;text-align:center;padding:var(--ns-component-command-palette-list-padding);color:var(--ns-component-command-palette-item-meta-color)}.ns-command-palette__list{display:flex;flex-direction:column;padding:var(--ns-component-command-palette-list-padding);gap:var(--ns-component-command-palette-group-gap)}.ns-command-palette__group{display:flex;flex-direction:column;gap:var(--ns-component-command-palette-group-gap)}.ns-command-palette__group-label{margin:0;text-transform:uppercase;color:var(--ns-component-command-palette-group-label-color);font-size:var(--ns-component-command-palette-group-label-font-size);font-weight:var(--ns-component-command-palette-group-label-font-weight);padding-inline:var(--ns-component-command-palette-item-padding-inline)}.ns-command-palette__item{display:flex;cursor:pointer;align-items:center;gap:var(--ns-component-command-palette-item-gap);padding-block:var(--ns-component-command-palette-item-padding-block);padding-inline:var(--ns-component-command-palette-item-padding-inline);border-radius:var(--ns-component-command-palette-item-radius);color:var(--ns-component-command-palette-item-color)}.ns-command-palette__item--active{background:var(--ns-component-command-palette-item-active-background);color:var(--ns-component-command-palette-item-active-color)}.ns-command-palette__item--active .ns-command-palette__item-meta{color:var(--ns-component-command-palette-item-meta-color-active)}.ns-command-palette__item--active .ns-command-palette__item-avatar{background:var(--ns-component-command-palette-item-avatar-active-background);color:var(--ns-component-command-palette-item-avatar-active-color)}.ns-command-palette__item--disabled{pointer-events:none;cursor:not-allowed;opacity:60%;color:var(--ns-component-command-palette-item-disabled-color)}.ns-command-palette__item-icon,.ns-command-palette__item-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-command-palette__item-icon-placeholder{display:inline-block;flex-shrink:0;inline-size:var(--ns-component-command-palette-item-icon-width)}.ns-command-palette__item-label{min-width:0px;flex:1}.ns-command-palette__item-meta{color:var(--ns-component-command-palette-item-meta-color)}.ns-command-palette__footer{display:flex;align-items:center;border-top-style:var(--tw-border-style);border-top-width:1px;gap:var(--ns-component-command-palette-search-gap);color:var(--ns-component-command-palette-footer-color);font-size:var(--ns-component-command-palette-footer-font-size);padding-block:var(--ns-component-command-palette-footer-padding-block);padding-inline:var(--ns-component-command-palette-footer-padding-inline);border-color:var(--ns-component-command-palette-footer-border-color)}.ns-command-palette__footer:empty{display:none;--tw-border-style: none;border-style:none;padding:0}.ns-command-palette__footer kbd{display:inline-flex;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;font-family:var(--ns-semantic-common-font-body);background:var(--ns-component-command-palette-kbd-background);color:var(--ns-component-command-palette-kbd-color);border-radius:var(--ns-component-command-palette-kbd-radius);padding-block:var(--ns-component-command-palette-kbd-padding-block);padding-inline:var(--ns-component-command-palette-kbd-padding-inline);font-size:var(--ns-component-command-palette-kbd-font-size)}.ns-command-palette__footer kbd[data-active]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-command-palette-kbd-active-border-color);color:var(--ns-component-command-palette-kbd-active-color)}@keyframes ns-command-palette-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-command-palette-list-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.ns-command-palette__panel{animation:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1781
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], itemIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIconTemplate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1782
|
+
|
|
1783
|
+
class NsValueAccessor {
|
|
1784
|
+
ariaIds = inject(NsAriaIdService);
|
|
1785
|
+
field = inject(NsFieldContext, {
|
|
1786
|
+
optional: true,
|
|
1787
|
+
skipSelf: true
|
|
1788
|
+
});
|
|
1789
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1790
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1791
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1792
|
+
description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
1793
|
+
errorMessage = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1794
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1795
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
1796
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1797
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1798
|
+
name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1799
|
+
ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1800
|
+
ariaDescribedBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
1801
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1802
|
+
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1803
|
+
variant = input('outline', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1804
|
+
id = this.ariaIds.create('ns-control');
|
|
1805
|
+
descriptionId = `${this.id}-description`;
|
|
1806
|
+
errorId = `${this.id}-error`;
|
|
1807
|
+
controlId = computed(() => this.field?.getControlId() || this.id, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
|
|
1808
|
+
describedBy = computed(() => {
|
|
1809
|
+
const ids = [
|
|
1810
|
+
this.ariaDescribedBy(),
|
|
1811
|
+
this.field?.getDescribedBy(),
|
|
1812
|
+
this.description() ? this.descriptionId : undefined,
|
|
1813
|
+
this.invalid() && this.errorMessage() ? this.errorId : undefined
|
|
1814
|
+
].filter((id) => Boolean(id));
|
|
1815
|
+
return ids.length ? ids.join(' ') : undefined;
|
|
1816
|
+
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
1817
|
+
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1818
|
+
setValue(value) {
|
|
1819
|
+
if (!Object.is(this.value(), value)) {
|
|
1820
|
+
this.value.set(value);
|
|
1821
|
+
this.onChange(value);
|
|
1822
|
+
}
|
|
1823
|
+
}
|
|
1824
|
+
onTouched = () => { };
|
|
1825
|
+
onChange = () => { };
|
|
1826
|
+
writeValue(value) {
|
|
1827
|
+
this.value.set(value);
|
|
1828
|
+
}
|
|
1829
|
+
registerOnChange(fn) {
|
|
1830
|
+
this.onChange = fn;
|
|
1831
|
+
}
|
|
1832
|
+
registerOnTouched(fn) {
|
|
1833
|
+
this.onTouched = fn;
|
|
1834
|
+
}
|
|
1835
|
+
setDisabledState(isDisabled) {
|
|
1836
|
+
this.disabled.set(isDisabled);
|
|
1837
|
+
}
|
|
1838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1839
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsValueAccessor, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange" }, ngImport: i0 });
|
|
1840
|
+
}
|
|
1841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsValueAccessor, decorators: [{
|
|
1842
|
+
type: Directive
|
|
1843
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1844
|
+
|
|
1845
|
+
class NsCheckboxComponent extends NsValueAccessor {
|
|
1846
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsCheckboxComponent, isStandalone: true, selector: "ns-checkbox", host: { properties: { "class.ns-checkbox": "true" } }, providers: [
|
|
1848
|
+
{
|
|
1849
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1850
|
+
useExisting: forwardRef(() => NsCheckboxComponent),
|
|
1851
|
+
multi: true
|
|
1852
|
+
}
|
|
1853
|
+
], usesInheritance: true, ngImport: i0, template: `<label class="ns-checkbox__label" [for]="controlId()"
|
|
1854
|
+
><input
|
|
1855
|
+
class="ns-checkbox__input"
|
|
1856
|
+
[id]="controlId()"
|
|
1857
|
+
[name]="name()"
|
|
1858
|
+
type="checkbox"
|
|
1859
|
+
[ngModel]="value()"
|
|
1860
|
+
(ngModelChange)="setValue($event)"
|
|
1861
|
+
[disabled]="disabled()"
|
|
1862
|
+
[required]="required()"
|
|
1863
|
+
[attr.aria-invalid]="invalid() || null"
|
|
1864
|
+
[attr.aria-label]="ariaLabel()"
|
|
1865
|
+
[attr.aria-describedby]="describedBy()"
|
|
1866
|
+
(blur)="onTouched()"
|
|
1867
|
+
/><span>{{ label() }}</span>
|
|
1868
|
+
@if (required()) {
|
|
1869
|
+
<span aria-hidden="true"> *</span>
|
|
1870
|
+
}
|
|
1871
|
+
</label>
|
|
1872
|
+
@if (description()) {
|
|
1873
|
+
<p class="ns-checkbox__description" [id]="descriptionId">
|
|
1874
|
+
{{ description() }}
|
|
1875
|
+
</p>
|
|
1876
|
+
}
|
|
1877
|
+
@if (invalid() && errorMessage()) {
|
|
1878
|
+
<p class="ns-checkbox__error" [id]="errorId" role="alert">
|
|
1879
|
+
{{ errorMessage() }}
|
|
1880
|
+
</p>
|
|
1881
|
+
}`, isInline: true, styles: ["@layer properties;:host{display:inline-block}.ns-checkbox__label{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);gap:var(--ns-component-checkbox-gap);color:var(--ns-component-checkbox-color)}.ns-checkbox__input{margin:0;display:grid;width:calc(var(--ns-primitive-space-1) * 5);height:calc(var(--ns-primitive-space-1) * 5);flex-shrink:0;cursor:pointer;appearance:none;place-content:center;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-checkbox-border-color);border-radius:var(--ns-component-checkbox-radius);background:var(--ns-component-checkbox-background)}.ns-checkbox__input:after{width:var(--ns-component-checkbox-check-width);height:var(--ns-component-checkbox-check-height);content:\"\";transform:rotate(-45deg) scale(0);transform-origin:center;border-bottom:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);border-left:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);transition:transform var(--ns-component-checkbox-transition-duration) var(--ns-component-checkbox-transition-easing)}.ns-checkbox__input:checked{border-color:var(--ns-component-checkbox-accent);background:var(--ns-component-checkbox-accent)}.ns-checkbox__input:checked:after{transform:rotate(-45deg) scale(1)}.ns-checkbox__input:focus-visible{border-color:var(--ns-component-checkbox-accent);box-shadow:var(--ns-component-checkbox-focus-shadow)}.ns-checkbox__input[aria-invalid=true]{border-color:var(--ns-component-checkbox-invalid-border-color)}.ns-checkbox__input:disabled{cursor:not-allowed;opacity:50%}.ns-checkbox__label:has(.ns-checkbox__input:disabled){cursor:not-allowed;color:var(--ns-component-checkbox-disabled-color)}.ns-checkbox__description,.ns-checkbox__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-checkbox__description{color:var(--ns-component-checkbox-description-color)}.ns-checkbox__error{color:var(--ns-component-checkbox-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1882
|
+
}
|
|
1883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCheckboxComponent, decorators: [{
|
|
1884
|
+
type: Component,
|
|
1885
|
+
args: [{ selector: 'ns-checkbox', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `<label class="ns-checkbox__label" [for]="controlId()"
|
|
1886
|
+
><input
|
|
1887
|
+
class="ns-checkbox__input"
|
|
1888
|
+
[id]="controlId()"
|
|
1889
|
+
[name]="name()"
|
|
1890
|
+
type="checkbox"
|
|
1891
|
+
[ngModel]="value()"
|
|
1892
|
+
(ngModelChange)="setValue($event)"
|
|
1893
|
+
[disabled]="disabled()"
|
|
1894
|
+
[required]="required()"
|
|
1895
|
+
[attr.aria-invalid]="invalid() || null"
|
|
1896
|
+
[attr.aria-label]="ariaLabel()"
|
|
1897
|
+
[attr.aria-describedby]="describedBy()"
|
|
1898
|
+
(blur)="onTouched()"
|
|
1899
|
+
/><span>{{ label() }}</span>
|
|
1900
|
+
@if (required()) {
|
|
1901
|
+
<span aria-hidden="true"> *</span>
|
|
1902
|
+
}
|
|
1903
|
+
</label>
|
|
1904
|
+
@if (description()) {
|
|
1905
|
+
<p class="ns-checkbox__description" [id]="descriptionId">
|
|
1906
|
+
{{ description() }}
|
|
1907
|
+
</p>
|
|
1908
|
+
}
|
|
1909
|
+
@if (invalid() && errorMessage()) {
|
|
1910
|
+
<p class="ns-checkbox__error" [id]="errorId" role="alert">
|
|
1911
|
+
{{ errorMessage() }}
|
|
1912
|
+
</p>
|
|
1913
|
+
}`, providers: [
|
|
1914
|
+
{
|
|
1915
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1916
|
+
useExisting: forwardRef(() => NsCheckboxComponent),
|
|
1917
|
+
multi: true
|
|
1918
|
+
}
|
|
1919
|
+
], host: { '[class.ns-checkbox]': 'true' }, styles: ["@layer properties;:host{display:inline-block}.ns-checkbox__label{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);gap:var(--ns-component-checkbox-gap);color:var(--ns-component-checkbox-color)}.ns-checkbox__input{margin:0;display:grid;width:calc(var(--ns-primitive-space-1) * 5);height:calc(var(--ns-primitive-space-1) * 5);flex-shrink:0;cursor:pointer;appearance:none;place-content:center;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-checkbox-border-color);border-radius:var(--ns-component-checkbox-radius);background:var(--ns-component-checkbox-background)}.ns-checkbox__input:after{width:var(--ns-component-checkbox-check-width);height:var(--ns-component-checkbox-check-height);content:\"\";transform:rotate(-45deg) scale(0);transform-origin:center;border-bottom:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);border-left:var(--ns-component-checkbox-check-border-width) solid var(--ns-component-checkbox-check-color);transition:transform var(--ns-component-checkbox-transition-duration) var(--ns-component-checkbox-transition-easing)}.ns-checkbox__input:checked{border-color:var(--ns-component-checkbox-accent);background:var(--ns-component-checkbox-accent)}.ns-checkbox__input:checked:after{transform:rotate(-45deg) scale(1)}.ns-checkbox__input:focus-visible{border-color:var(--ns-component-checkbox-accent);box-shadow:var(--ns-component-checkbox-focus-shadow)}.ns-checkbox__input[aria-invalid=true]{border-color:var(--ns-component-checkbox-invalid-border-color)}.ns-checkbox__input:disabled{cursor:not-allowed;opacity:50%}.ns-checkbox__label:has(.ns-checkbox__input:disabled){cursor:not-allowed;color:var(--ns-component-checkbox-disabled-color)}.ns-checkbox__description,.ns-checkbox__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-checkbox__description{color:var(--ns-component-checkbox-description-color)}.ns-checkbox__error{color:var(--ns-component-checkbox-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1920
|
+
}] });
|
|
1921
|
+
|
|
1329
1922
|
class NsDatePickerCalendarComponent {
|
|
1330
1923
|
month = input.required(...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
|
|
1331
1924
|
selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
@@ -2117,7 +2710,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2117
2710
|
{{ calendarAnnouncement() }}
|
|
2118
2711
|
</p>
|
|
2119
2712
|
</section>
|
|
2120
|
-
`, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}.ns-date-picker__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;color:var(--ns-component-date-picker-label-color);font-size:var(--ns-component-date-picker-label-size);font-weight:var(--ns-component-date-picker-label-weight);font-family:var(--ns-component-date-picker-body-font-family)}.ns-date-picker__control{display:flex;width:100%;align-items:center;border-style:var(--tw-border-style);border-width:1px;text-align:left;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-date-picker-min-height);gap:var(--ns-component-date-picker-gap);padding:var(--ns-component-date-picker-padding);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);background:var(--ns-component-date-picker-background);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-variant-numeric:tabular-nums}.ns-date-picker__control>ns-icon{flex:0 0 auto}.ns-date-picker__control:hover:not(:disabled){border-color:var(--ns-component-date-picker-border-hover-color)}.ns-date-picker__control:disabled{cursor:not-allowed;background:var(--ns-component-date-picker-
|
|
2713
|
+
`, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}.ns-date-picker__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;color:var(--ns-component-date-picker-label-color);font-size:var(--ns-component-date-picker-label-size);font-weight:var(--ns-component-date-picker-label-weight);font-family:var(--ns-component-date-picker-body-font-family)}.ns-date-picker__control{display:flex;width:100%;align-items:center;border-style:var(--tw-border-style);border-width:1px;text-align:left;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-date-picker-min-height);gap:var(--ns-component-date-picker-gap);padding:var(--ns-component-date-picker-padding);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);background:var(--ns-component-date-picker-background);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-variant-numeric:tabular-nums}.ns-date-picker__control>ns-icon{flex:0 0 auto}.ns-date-picker__control:hover:not(:disabled){border-color:var(--ns-component-date-picker-border-hover-color)}.ns-date-picker__control:disabled{cursor:not-allowed;background:var(--ns-component-date-picker-disabled-background);color:var(--ns-component-date-picker-muted-color)}.ns-date-picker__control:focus-visible{outline:var(--ns-component-date-picker-focus-outline-width) solid var(--ns-component-date-picker-focus-color);outline-offset:var(--ns-component-date-picker-focus-outline-offset)}.ns-date-picker__control[aria-invalid=true]{border-color:var(--ns-component-date-picker-invalid-border-color)}:host(.ns-date-picker--open) .ns-date-picker__control{border-color:var(--ns-component-date-picker-active-background)}.ns-date-picker__value{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-date-picker__menu{overflow:hidden;border-style:var(--tw-border-style);border-width:1px;box-sizing:border-box;width:100%;min-width:0;padding:var(--ns-component-date-picker-menu-padding);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-overlay-radius);background:var(--ns-component-date-picker-background);color:var(--ns-component-date-picker-color);box-shadow:var(--ns-component-date-picker-overlay-shadow);animation:ns-date-picker-enter var(--ns-component-date-picker-overlay-duration) var(--ns-component-date-picker-overlay-easing)}.ns-date-picker__header{display:flex;flex-direction:column;gap:var(--ns-component-date-picker-header-gap);margin-bottom:var(--ns-component-date-picker-header-gap)}.ns-date-picker__title{margin:0;color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-title-font-family);font-size:var(--ns-component-date-picker-title-size);font-weight:var(--ns-component-date-picker-title-weight);line-height:var(--ns-component-date-picker-title-line-height)}.ns-date-picker__selectors{display:flex;align-items:center;gap:var(--ns-component-date-picker-selector-gap)}.ns-date-picker__selector{position:relative;display:inline-flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding-inline-end:var(--ns-component-date-picker-selector-icon-gap);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-size:var(--ns-component-date-picker-selector-size);font-weight:var(--ns-component-date-picker-selector-weight);text-transform:capitalize}.ns-date-picker__selector ns-icon{pointer-events:none;position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%)}.ns-date-picker__selector--active{color:var(--ns-component-date-picker-active-background)}.ns-date-picker__selector:focus-visible,.ns-date-picker__picker-option:focus-visible,.ns-date-picker__year-navigation:focus-visible{outline:var(--ns-component-date-picker-focus-outline-width) solid var(--ns-component-date-picker-focus-color);outline-offset:var(--ns-component-date-picker-navigation-outline-offset)}.ns-date-picker__announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-date-picker__month-grid,.ns-date-picker__year-grid{display:grid;gap:var(--ns-component-date-picker-gap)}.ns-date-picker__month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ns-date-picker__year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ns-date-picker__picker-option{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;background-color:transparent;text-align:center;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-date-picker-min-height);padding-inline:var(--ns-component-date-picker-gap);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family)}.ns-date-picker__picker-option:hover:not(:disabled){background:var(--ns-component-date-picker-day-background-hover)}.ns-date-picker__picker-option--selected{border-style:var(--tw-border-style);border-width:0px;background:var(--ns-component-date-picker-active-background);color:var(--ns-component-date-picker-active-color)}.ns-date-picker__picker-option--selected:hover:not(:disabled){background:var(--ns-component-date-picker-active-background-hover);color:var(--ns-component-date-picker-active-color)}.ns-date-picker__picker-option--selected:active:not(:disabled){background:var(--ns-component-date-picker-active-background-active);color:var(--ns-component-date-picker-active-color)}.ns-date-picker__picker-option--current:not(.ns-date-picker__picker-option--selected){border-style:var(--tw-border-style);border-width:0px;background:var(--ns-component-date-picker-current-background);color:var(--ns-component-date-picker-current-color)}.ns-date-picker__picker-option--current:not(.ns-date-picker__picker-option--selected):hover:not(:disabled){background:var(--ns-component-date-picker-current-background-hover);color:var(--ns-component-date-picker-current-color-hover)}.ns-date-picker__picker-option--current:not(.ns-date-picker__picker-option--selected):active:not(:disabled){background:var(--ns-component-date-picker-current-background-active);color:var(--ns-component-date-picker-current-color-active)}.ns-date-picker__picker-option:disabled,.ns-date-picker__year-navigation:disabled{cursor:not-allowed;opacity:50%}.ns-date-picker__years{display:flex;flex-direction:column;gap:var(--ns-component-date-picker-header-gap)}.ns-date-picker__year-pagination{display:flex;align-items:center;justify-content:space-between}.ns-date-picker__year-navigation{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;background-color:transparent;width:var(--ns-component-date-picker-min-height);height:var(--ns-component-date-picker-min-height);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);color:var(--ns-component-date-picker-color)}.ns-date-picker__year-range{display:inline-flex;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;text-align:center;min-height:var(--ns-component-date-picker-day-size);padding-inline:var(--ns-component-date-picker-gap);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-year-range-radius);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-weight:var(--ns-component-date-picker-selector-weight)}@keyframes ns-date-picker-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-date-picker-gap) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsDatePickerCalendarComponent, selector: "ns-date-picker-calendar", inputs: ["month", "selected", "range", "focused", "minDate", "maxDate", "unavailableDates", "firstDayOfWeek"], outputs: ["dateSelected", "dateFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2121
2714
|
}
|
|
2122
2715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDatePickerComponent, decorators: [{
|
|
2123
2716
|
type: Component,
|
|
@@ -2276,7 +2869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
2276
2869
|
useExisting: NsDatePickerComponent,
|
|
2277
2870
|
multi: true
|
|
2278
2871
|
}
|
|
2279
|
-
], styles: ["@layer properties;:host{display:block;width:100%}.ns-date-picker__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;color:var(--ns-component-date-picker-label-color);font-size:var(--ns-component-date-picker-label-size);font-weight:var(--ns-component-date-picker-label-weight);font-family:var(--ns-component-date-picker-body-font-family)}.ns-date-picker__control{display:flex;width:100%;align-items:center;border-style:var(--tw-border-style);border-width:1px;text-align:left;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-date-picker-min-height);gap:var(--ns-component-date-picker-gap);padding:var(--ns-component-date-picker-padding);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);background:var(--ns-component-date-picker-background);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-variant-numeric:tabular-nums}.ns-date-picker__control>ns-icon{flex:0 0 auto}.ns-date-picker__control:hover:not(:disabled){border-color:var(--ns-component-date-picker-border-hover-color)}.ns-date-picker__control:disabled{cursor:not-allowed;background:var(--ns-component-date-picker-
|
|
2872
|
+
], styles: ["@layer properties;:host{display:block;width:100%}.ns-date-picker__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;color:var(--ns-component-date-picker-label-color);font-size:var(--ns-component-date-picker-label-size);font-weight:var(--ns-component-date-picker-label-weight);font-family:var(--ns-component-date-picker-body-font-family)}.ns-date-picker__control{display:flex;width:100%;align-items:center;border-style:var(--tw-border-style);border-width:1px;text-align:left;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-date-picker-min-height);gap:var(--ns-component-date-picker-gap);padding:var(--ns-component-date-picker-padding);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);background:var(--ns-component-date-picker-background);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-variant-numeric:tabular-nums}.ns-date-picker__control>ns-icon{flex:0 0 auto}.ns-date-picker__control:hover:not(:disabled){border-color:var(--ns-component-date-picker-border-hover-color)}.ns-date-picker__control:disabled{cursor:not-allowed;background:var(--ns-component-date-picker-disabled-background);color:var(--ns-component-date-picker-muted-color)}.ns-date-picker__control:focus-visible{outline:var(--ns-component-date-picker-focus-outline-width) solid var(--ns-component-date-picker-focus-color);outline-offset:var(--ns-component-date-picker-focus-outline-offset)}.ns-date-picker__control[aria-invalid=true]{border-color:var(--ns-component-date-picker-invalid-border-color)}:host(.ns-date-picker--open) .ns-date-picker__control{border-color:var(--ns-component-date-picker-active-background)}.ns-date-picker__value{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-date-picker__menu{overflow:hidden;border-style:var(--tw-border-style);border-width:1px;box-sizing:border-box;width:100%;min-width:0;padding:var(--ns-component-date-picker-menu-padding);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-overlay-radius);background:var(--ns-component-date-picker-background);color:var(--ns-component-date-picker-color);box-shadow:var(--ns-component-date-picker-overlay-shadow);animation:ns-date-picker-enter var(--ns-component-date-picker-overlay-duration) var(--ns-component-date-picker-overlay-easing)}.ns-date-picker__header{display:flex;flex-direction:column;gap:var(--ns-component-date-picker-header-gap);margin-bottom:var(--ns-component-date-picker-header-gap)}.ns-date-picker__title{margin:0;color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-title-font-family);font-size:var(--ns-component-date-picker-title-size);font-weight:var(--ns-component-date-picker-title-weight);line-height:var(--ns-component-date-picker-title-line-height)}.ns-date-picker__selectors{display:flex;align-items:center;gap:var(--ns-component-date-picker-selector-gap)}.ns-date-picker__selector{position:relative;display:inline-flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding-inline-end:var(--ns-component-date-picker-selector-icon-gap);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-size:var(--ns-component-date-picker-selector-size);font-weight:var(--ns-component-date-picker-selector-weight);text-transform:capitalize}.ns-date-picker__selector ns-icon{pointer-events:none;position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%)}.ns-date-picker__selector--active{color:var(--ns-component-date-picker-active-background)}.ns-date-picker__selector:focus-visible,.ns-date-picker__picker-option:focus-visible,.ns-date-picker__year-navigation:focus-visible{outline:var(--ns-component-date-picker-focus-outline-width) solid var(--ns-component-date-picker-focus-color);outline-offset:var(--ns-component-date-picker-navigation-outline-offset)}.ns-date-picker__announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-date-picker__month-grid,.ns-date-picker__year-grid{display:grid;gap:var(--ns-component-date-picker-gap)}.ns-date-picker__month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ns-date-picker__year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ns-date-picker__picker-option{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;background-color:transparent;text-align:center;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-date-picker-min-height);padding-inline:var(--ns-component-date-picker-gap);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family)}.ns-date-picker__picker-option:hover:not(:disabled){background:var(--ns-component-date-picker-day-background-hover)}.ns-date-picker__picker-option--selected{border-style:var(--tw-border-style);border-width:0px;background:var(--ns-component-date-picker-active-background);color:var(--ns-component-date-picker-active-color)}.ns-date-picker__picker-option--selected:hover:not(:disabled){background:var(--ns-component-date-picker-active-background-hover);color:var(--ns-component-date-picker-active-color)}.ns-date-picker__picker-option--selected:active:not(:disabled){background:var(--ns-component-date-picker-active-background-active);color:var(--ns-component-date-picker-active-color)}.ns-date-picker__picker-option--current:not(.ns-date-picker__picker-option--selected){border-style:var(--tw-border-style);border-width:0px;background:var(--ns-component-date-picker-current-background);color:var(--ns-component-date-picker-current-color)}.ns-date-picker__picker-option--current:not(.ns-date-picker__picker-option--selected):hover:not(:disabled){background:var(--ns-component-date-picker-current-background-hover);color:var(--ns-component-date-picker-current-color-hover)}.ns-date-picker__picker-option--current:not(.ns-date-picker__picker-option--selected):active:not(:disabled){background:var(--ns-component-date-picker-current-background-active);color:var(--ns-component-date-picker-current-color-active)}.ns-date-picker__picker-option:disabled,.ns-date-picker__year-navigation:disabled{cursor:not-allowed;opacity:50%}.ns-date-picker__years{display:flex;flex-direction:column;gap:var(--ns-component-date-picker-header-gap)}.ns-date-picker__year-pagination{display:flex;align-items:center;justify-content:space-between}.ns-date-picker__year-navigation{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;background-color:transparent;width:var(--ns-component-date-picker-min-height);height:var(--ns-component-date-picker-min-height);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-radius);color:var(--ns-component-date-picker-color)}.ns-date-picker__year-range{display:inline-flex;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;text-align:center;min-height:var(--ns-component-date-picker-day-size);padding-inline:var(--ns-component-date-picker-gap);border-color:var(--ns-component-date-picker-border-color);border-radius:var(--ns-component-date-picker-year-range-radius);color:var(--ns-component-date-picker-color);font-family:var(--ns-component-date-picker-body-font-family);font-weight:var(--ns-component-date-picker-selector-weight)}@keyframes ns-date-picker-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-date-picker-gap) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2280
2873
|
}], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], unavailableDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDates", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], calendar: [{
|
|
2281
2874
|
type: ViewChild,
|
|
2282
2875
|
args: ['calendar']
|
|
@@ -2877,7 +3470,7 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
2877
3470
|
useExisting: NsDropdownComponent,
|
|
2878
3471
|
multi: true
|
|
2879
3472
|
}
|
|
2880
|
-
], queries: [{ propertyName: "contentItems", predicate: NsDropdownItemDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >{{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);box-sizing:border-box;min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsSkeletonComponent, selector: "ns-skeleton", inputs: ["width", "height", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3473
|
+
], queries: [{ propertyName: "contentItems", predicate: NsDropdownItemDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >{{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);box-sizing:border-box;min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsSkeletonComponent, selector: "ns-skeleton", inputs: ["width", "height", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2881
3474
|
}
|
|
2882
3475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
|
|
2883
3476
|
type: Component,
|
|
@@ -2893,7 +3486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
2893
3486
|
useExisting: NsDropdownComponent,
|
|
2894
3487
|
multi: true
|
|
2895
3488
|
}
|
|
2896
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >{{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);box-sizing:border-box;min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3489
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >{{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);box-sizing:border-box;min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2897
3490
|
}], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsDropdownItemDirective), { isSignal: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{
|
|
2898
3491
|
type: ViewChild,
|
|
2899
3492
|
args: ['trigger']
|
|
@@ -2909,14 +3502,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
2909
3502
|
}] } });
|
|
2910
3503
|
|
|
2911
3504
|
class NsInputComponent extends NsValueAccessor {
|
|
3505
|
+
/** Leading icon name (`@ng-solid/icons`). Omit for the default, icon-less field. */
|
|
3506
|
+
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
2912
3507
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2913
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputComponent, isStandalone: true, selector: "ns-input", host: { properties: { "class.ns-input": "true", "class.ns-input--invalid": "invalid()", "class.ns-input--disabled": "disabled()" } }, providers: [
|
|
3508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputComponent, isStandalone: true, selector: "ns-input", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-input": "true", "class.ns-input--invalid": "invalid()", "class.ns-input--disabled": "disabled()", "class.ns-input--sm": "size() === 'sm'", "class.ns-input--lg": "size() === 'lg'" } }, providers: [
|
|
2914
3509
|
{
|
|
2915
3510
|
provide: NG_VALUE_ACCESSOR,
|
|
2916
3511
|
useExisting: forwardRef(() => NsInputComponent),
|
|
2917
3512
|
multi: true
|
|
2918
3513
|
}
|
|
2919
|
-
], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-input__label\" [for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<input\n
|
|
3514
|
+
], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-input__label\" [for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n@if (icon()) {\n <div class=\"ns-input__field\">\n <span class=\"ns-input__leading\" aria-hidden=\"true\">\n <ns-icon [name]=\"icon()\" />\n </span>\n <input\n class=\"ns-input__control\"\n [id]=\"controlId()\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"describedBy()\"\n (blur)=\"onTouched()\"\n />\n </div>\n} @else {\n <input\n class=\"ns-input__control\"\n [id]=\"controlId()\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"describedBy()\"\n (blur)=\"onTouched()\"\n />\n}\n@if (description()) {\n <p class=\"ns-input__description\" [id]=\"descriptionId\">{{ description() }}</p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-input__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-input__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-label-color);font-size:var(--ns-component-input-label-size);font-weight:var(--ns-component-input-label-weight)}.ns-input__field{position:relative;display:flex;align-items:center}.ns-input__field .ns-input__control{padding-inline-start:var(--ns-component-input-icon-padding-inline)}.ns-input__leading{position:absolute;inset-inline-start:var(--ns-component-input-padding-inline);display:inline-flex;color:var(--ns-component-input-placeholder);pointer-events:none}.ns-input__leading ::ng-deep svg{width:var(--ns-component-input-icon-size);height:var(--ns-component-input-icon-size)}.ns-input__control{display:block;width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-input-min-height);padding:var(--ns-component-input-padding-block) var(--ns-component-input-padding-inline);border-radius:var(--ns-component-input-radius);border-color:var(--ns-component-input-border-color);background:var(--ns-component-input-background);color:var(--ns-component-input-color);font:inherit}.ns-input__control::placeholder{color:var(--ns-component-input-placeholder)}.ns-input__control:hover:not(:disabled){border-color:var(--ns-component-input-border-hover-color)}.ns-input__control:focus-visible{border-color:var(--ns-component-input-border-focus-color);box-shadow:var(--ns-component-input-focus-shadow)}:host(.ns-input--sm) .ns-input__control{min-height:var(--ns-component-input-min-height-sm)}:host(.ns-input--lg) .ns-input__control{min-height:var(--ns-component-input-min-height-lg)}.ns-input__control:disabled,.ns-input__control[readonly]{cursor:not-allowed;background:var(--ns-component-input-disabled-background);color:var(--ns-component-input-disabled-color)}.ns-input__control[readonly]:not(:disabled){cursor:default}:host(.ns-input--invalid) .ns-input__control{border-color:var(--ns-component-input-invalid-border-color)}:host(.ns-input--invalid) .ns-input__control:focus-visible{box-shadow:var(--ns-component-input-focus-shadow)}.ns-input__description,.ns-input__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-input__description{color:var(--ns-component-input-description-color)}.ns-input__error{color:var(--ns-component-input-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2920
3515
|
}
|
|
2921
3516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputComponent, decorators: [{
|
|
2922
3517
|
type: Component,
|
|
@@ -2926,12 +3521,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
2926
3521
|
useExisting: forwardRef(() => NsInputComponent),
|
|
2927
3522
|
multi: true
|
|
2928
3523
|
}
|
|
2929
|
-
], imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3524
|
+
], imports: [FormsModule, NsIconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2930
3525
|
'[class.ns-input]': 'true',
|
|
2931
3526
|
'[class.ns-input--invalid]': 'invalid()',
|
|
2932
|
-
'[class.ns-input--disabled]': 'disabled()'
|
|
2933
|
-
|
|
2934
|
-
|
|
3527
|
+
'[class.ns-input--disabled]': 'disabled()',
|
|
3528
|
+
'[class.ns-input--sm]': "size() === 'sm'",
|
|
3529
|
+
'[class.ns-input--lg]': "size() === 'lg'"
|
|
3530
|
+
}, template: "@if (label()) {\n <label class=\"ns-input__label\" [for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n@if (icon()) {\n <div class=\"ns-input__field\">\n <span class=\"ns-input__leading\" aria-hidden=\"true\">\n <ns-icon [name]=\"icon()\" />\n </span>\n <input\n class=\"ns-input__control\"\n [id]=\"controlId()\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"describedBy()\"\n (blur)=\"onTouched()\"\n />\n </div>\n} @else {\n <input\n class=\"ns-input__control\"\n [id]=\"controlId()\"\n [type]=\"type()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"describedBy()\"\n (blur)=\"onTouched()\"\n />\n}\n@if (description()) {\n <p class=\"ns-input__description\" [id]=\"descriptionId\">{{ description() }}</p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-input__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-input__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-label-color);font-size:var(--ns-component-input-label-size);font-weight:var(--ns-component-input-label-weight)}.ns-input__field{position:relative;display:flex;align-items:center}.ns-input__field .ns-input__control{padding-inline-start:var(--ns-component-input-icon-padding-inline)}.ns-input__leading{position:absolute;inset-inline-start:var(--ns-component-input-padding-inline);display:inline-flex;color:var(--ns-component-input-placeholder);pointer-events:none}.ns-input__leading ::ng-deep svg{width:var(--ns-component-input-icon-size);height:var(--ns-component-input-icon-size)}.ns-input__control{display:block;width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-input-min-height);padding:var(--ns-component-input-padding-block) var(--ns-component-input-padding-inline);border-radius:var(--ns-component-input-radius);border-color:var(--ns-component-input-border-color);background:var(--ns-component-input-background);color:var(--ns-component-input-color);font:inherit}.ns-input__control::placeholder{color:var(--ns-component-input-placeholder)}.ns-input__control:hover:not(:disabled){border-color:var(--ns-component-input-border-hover-color)}.ns-input__control:focus-visible{border-color:var(--ns-component-input-border-focus-color);box-shadow:var(--ns-component-input-focus-shadow)}:host(.ns-input--sm) .ns-input__control{min-height:var(--ns-component-input-min-height-sm)}:host(.ns-input--lg) .ns-input__control{min-height:var(--ns-component-input-min-height-lg)}.ns-input__control:disabled,.ns-input__control[readonly]{cursor:not-allowed;background:var(--ns-component-input-disabled-background);color:var(--ns-component-input-disabled-color)}.ns-input__control[readonly]:not(:disabled){cursor:default}:host(.ns-input--invalid) .ns-input__control{border-color:var(--ns-component-input-invalid-border-color)}:host(.ns-input--invalid) .ns-input__control:focus-visible{box-shadow:var(--ns-component-input-focus-shadow)}.ns-input__description,.ns-input__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-input__description{color:var(--ns-component-input-description-color)}.ns-input__error{color:var(--ns-component-input-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3531
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
2935
3532
|
|
|
2936
3533
|
class NsInputCodeComponent extends NsValueAccessor {
|
|
2937
3534
|
length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
|
|
@@ -3020,22 +3617,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3020
3617
|
/** Visual-only composition primitive. Projected controls own their form state. */
|
|
3021
3618
|
class NsInputGroupComponent {
|
|
3022
3619
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsInputGroupComponent, isStandalone: true, selector: "ns-input-group", host: { properties: { "class.ns-input-group": "true" } }, ngImport: i0, template: '<div class="ns-input-group__control"><ng-content /></div>', isInline: true, styles: [":host{display:block;width:100%}.ns-input-group__control{display:flex;width:100%;align-items:stretch}.ns-input-group__control>ns-input,.ns-input-group__control>ns-textarea,.ns-input-group__control>ns-input-number{display:block;min-width:0px;flex:1}.ns-input-group__control>ns-input>input.ns-input__control,.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{box-sizing:border-box;display:block;width:100%}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{min-height:var(--ns-component-input-min-height)}.ns-input-group__control>ns-input-group-addon+ns-input>input.ns-input__control,.ns-input-group__control>ns-input-group-addon+ns-textarea>textarea.ns-textarea__control{border-inline-start:0}.ns-input-group__control>ns-input:has(+ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>ns-textarea:has(+ns-input-group-addon)>textarea.ns-textarea__control{border-inline-end:0}.ns-input-group__control>ns-input-group-addon+ns-input-number>.ns-input-number__group>.ns-input-number__control{border-inline-start:0}.ns-input-group__control>ns-input-number:has(+ns-input-group-addon)>.ns-input-number__group>.ns-input-number__steppers{border-inline-end:0}.ns-input-group__control>ns-input>input.ns-input__control{border-radius:0}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{border-radius:0}.ns-input-group__control>:first-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:first-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-start-radius:var(--ns-component-input-group-radius);border-end-start-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:last-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:last-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-end-radius:var(--ns-component-input-group-radius);border-end-end-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:not(:first-child){margin-inline-start:calc(var(--ns-component-input-group-border-width) * -1)}.ns-input-group__control>ns-input-group-addon:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ns-input-group__control>ns-input-group-addon:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
3620
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsInputGroupComponent, isStandalone: true, selector: "ns-input-group", host: { properties: { "class.ns-input-group": "true" } }, ngImport: i0, template: '<div class="ns-input-group__control"><ng-content /></div>', isInline: true, styles: [":host{display:block;width:100%}.ns-input-group__control{display:flex;width:100%;align-items:stretch}.ns-input-group__control>ns-input,.ns-input-group__control>ns-textarea,.ns-input-group__control>ns-input-number{display:block;min-width:0px;flex:1}.ns-input-group__control>ns-input>input.ns-input__control,.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{box-sizing:border-box;display:block;width:100%}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{min-height:var(--ns-component-input-min-height)}.ns-input-group__control>ns-input-group-addon+ns-input>input.ns-input__control,.ns-input-group__control>ns-input-group-addon+ns-textarea>textarea.ns-textarea__control{border-inline-start:0}.ns-input-group__control>ns-input:has(+ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>ns-textarea:has(+ns-input-group-addon)>textarea.ns-textarea__control{border-inline-end:0}.ns-input-group__control>ns-input-group-addon+ns-input-number>.ns-input-number__group>.ns-input-number__control{border-inline-start:0}.ns-input-group__control>ns-input-number:has(+ns-input-group-addon)>.ns-input-number__group>.ns-input-number__steppers{border-inline-end:0}.ns-input-group__control>ns-input>input.ns-input__control{border-radius:0}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{border-radius:0}.ns-input-group__control>:first-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:first-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-start-radius:var(--ns-component-input-group-radius);border-end-start-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:last-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:last-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-end-radius:var(--ns-component-input-group-radius);border-end-end-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:not(:first-child){margin-inline-start:calc(var(--ns-component-input-group-border-width) * -1)}.ns-input-group__control>ns-input-group-addon:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ns-input-group__control>ns-input-group-addon:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}:host(:hover):not(:has(:disabled)) ::slotted(ns-input){--ns-component-input-border-color: var( --ns-component-input-border-hover-color )}:host(:hover):not(:has(:disabled)) ::slotted(ns-textarea){--ns-component-textarea-border-color: var( --ns-component-textarea-border-hover-color )}:host(:hover):not(:has(:disabled)) ::slotted(ns-input-group-addon){--ns-component-input-group-border-color: var( --ns-component-input-group-border-hover-color )}:host(:focus-within):not(:has(:disabled)){position:relative;z-index:1;border-radius:var(--ns-component-input-group-radius);box-shadow:var(--ns-component-input-focus-shadow)}:host(:focus-within):not(:has(:disabled)) ::slotted(ns-input){--ns-component-input-border-color: var( --ns-component-input-border-focus-color );--ns-component-input-focus-shadow: none}:host(:focus-within):not(:has(:disabled)) ::slotted(ns-textarea){--ns-component-textarea-border-color: var( --ns-component-textarea-border-focus-color );--ns-component-textarea-focus-shadow: none}:host(:focus-within):not(:has(:disabled)) ::slotted(ns-input-group-addon){--ns-component-input-group-border-color: var( --ns-component-input-group-border-focus-color )}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
3024
3621
|
}
|
|
3025
3622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, decorators: [{
|
|
3026
3623
|
type: Component,
|
|
3027
|
-
args: [{ selector: 'ns-input-group', standalone: true, template: '<div class="ns-input-group__control"><ng-content /></div>', encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.ns-input-group]': 'true' }, styles: [":host{display:block;width:100%}.ns-input-group__control{display:flex;width:100%;align-items:stretch}.ns-input-group__control>ns-input,.ns-input-group__control>ns-textarea,.ns-input-group__control>ns-input-number{display:block;min-width:0px;flex:1}.ns-input-group__control>ns-input>input.ns-input__control,.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{box-sizing:border-box;display:block;width:100%}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{min-height:var(--ns-component-input-min-height)}.ns-input-group__control>ns-input-group-addon+ns-input>input.ns-input__control,.ns-input-group__control>ns-input-group-addon+ns-textarea>textarea.ns-textarea__control{border-inline-start:0}.ns-input-group__control>ns-input:has(+ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>ns-textarea:has(+ns-input-group-addon)>textarea.ns-textarea__control{border-inline-end:0}.ns-input-group__control>ns-input-group-addon+ns-input-number>.ns-input-number__group>.ns-input-number__control{border-inline-start:0}.ns-input-group__control>ns-input-number:has(+ns-input-group-addon)>.ns-input-number__group>.ns-input-number__steppers{border-inline-end:0}.ns-input-group__control>ns-input>input.ns-input__control{border-radius:0}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{border-radius:0}.ns-input-group__control>:first-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:first-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-start-radius:var(--ns-component-input-group-radius);border-end-start-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:last-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:last-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-end-radius:var(--ns-component-input-group-radius);border-end-end-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:not(:first-child){margin-inline-start:calc(var(--ns-component-input-group-border-width) * -1)}.ns-input-group__control>ns-input-group-addon:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ns-input-group__control>ns-input-group-addon:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3624
|
+
args: [{ selector: 'ns-input-group', standalone: true, template: '<div class="ns-input-group__control"><ng-content /></div>', encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.ns-input-group]': 'true' }, styles: [":host{display:block;width:100%}.ns-input-group__control{display:flex;width:100%;align-items:stretch}.ns-input-group__control>ns-input,.ns-input-group__control>ns-textarea,.ns-input-group__control>ns-input-number{display:block;min-width:0px;flex:1}.ns-input-group__control>ns-input>input.ns-input__control,.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{box-sizing:border-box;display:block;width:100%}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{min-height:var(--ns-component-input-min-height)}.ns-input-group__control>ns-input-group-addon+ns-input>input.ns-input__control,.ns-input-group__control>ns-input-group-addon+ns-textarea>textarea.ns-textarea__control{border-inline-start:0}.ns-input-group__control>ns-input:has(+ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>ns-textarea:has(+ns-input-group-addon)>textarea.ns-textarea__control{border-inline-end:0}.ns-input-group__control>ns-input-group-addon+ns-input-number>.ns-input-number__group>.ns-input-number__control{border-inline-start:0}.ns-input-group__control>ns-input-number:has(+ns-input-group-addon)>.ns-input-number__group>.ns-input-number__steppers{border-inline-end:0}.ns-input-group__control>ns-input>input.ns-input__control{border-radius:0}.ns-input-group__control>ns-textarea>textarea.ns-textarea__control{border-radius:0}.ns-input-group__control>:first-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:first-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-start-radius:var(--ns-component-input-group-radius);border-end-start-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:last-child:not(ns-input-group-addon)>input.ns-input__control,.ns-input-group__control>:last-child:not(ns-input-group-addon)>textarea.ns-textarea__control{border-start-end-radius:var(--ns-component-input-group-radius);border-end-end-radius:var(--ns-component-input-group-radius)}.ns-input-group__control>:not(:first-child){margin-inline-start:calc(var(--ns-component-input-group-border-width) * -1)}.ns-input-group__control>ns-input-group-addon:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ns-input-group__control>ns-input-group-addon:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}:host(:hover):not(:has(:disabled)) ::slotted(ns-input){--ns-component-input-border-color: var( --ns-component-input-border-hover-color )}:host(:hover):not(:has(:disabled)) ::slotted(ns-textarea){--ns-component-textarea-border-color: var( --ns-component-textarea-border-hover-color )}:host(:hover):not(:has(:disabled)) ::slotted(ns-input-group-addon){--ns-component-input-group-border-color: var( --ns-component-input-group-border-hover-color )}:host(:focus-within):not(:has(:disabled)){position:relative;z-index:1;border-radius:var(--ns-component-input-group-radius);box-shadow:var(--ns-component-input-focus-shadow)}:host(:focus-within):not(:has(:disabled)) ::slotted(ns-input){--ns-component-input-border-color: var( --ns-component-input-border-focus-color );--ns-component-input-focus-shadow: none}:host(:focus-within):not(:has(:disabled)) ::slotted(ns-textarea){--ns-component-textarea-border-color: var( --ns-component-textarea-border-focus-color );--ns-component-textarea-focus-shadow: none}:host(:focus-within):not(:has(:disabled)) ::slotted(ns-input-group-addon){--ns-component-input-group-border-color: var( --ns-component-input-group-border-focus-color )}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3028
3625
|
}] });
|
|
3029
3626
|
|
|
3030
3627
|
class NsInputGroupAddonComponent {
|
|
3031
3628
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3032
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsInputGroupAddonComponent, isStandalone: true, selector: "ns-input-group-addon", host: { properties: { "class.ns-input-group-addon": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer properties;:host{display:flex;
|
|
3629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsInputGroupAddonComponent, isStandalone: true, selector: "ns-input-group-addon", host: { properties: { "class.ns-input-group-addon": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer properties;:host{display:flex;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;white-space:nowrap;box-sizing:border-box;min-height:var(--ns-component-input-min-height);padding-block:var(--ns-component-input-padding-block);padding-inline:var(--ns-component-input-group-padding-inline);border-color:var(--ns-component-input-group-border-color);border-radius:var(--ns-component-input-group-radius);background:var(--ns-component-input-background);color:var(--ns-component-input-color)}:host(:focus-within){position:relative;z-index:1;border-color:var(--ns-component-input-group-border-focus-color)}input[type=checkbox],input[type=radio]{margin:0;width:calc(var(--ns-primitive-space-1) * 4);height:calc(var(--ns-primitive-space-1) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
3033
3630
|
}
|
|
3034
3631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupAddonComponent, decorators: [{
|
|
3035
3632
|
type: Component,
|
|
3036
3633
|
args: [{ selector: 'ns-input-group-addon', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
3037
3634
|
'[class.ns-input-group-addon]': 'true'
|
|
3038
|
-
}, styles: ["@layer properties;:host{display:flex;
|
|
3635
|
+
}, styles: ["@layer properties;:host{display:flex;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;white-space:nowrap;box-sizing:border-box;min-height:var(--ns-component-input-min-height);padding-block:var(--ns-component-input-padding-block);padding-inline:var(--ns-component-input-group-padding-inline);border-color:var(--ns-component-input-group-border-color);border-radius:var(--ns-component-input-group-radius);background:var(--ns-component-input-background);color:var(--ns-component-input-color)}:host(:focus-within){position:relative;z-index:1;border-color:var(--ns-component-input-group-border-focus-color)}input[type=checkbox],input[type=radio]{margin:0;width:calc(var(--ns-primitive-space-1) * 4);height:calc(var(--ns-primitive-space-1) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3039
3636
|
}] });
|
|
3040
3637
|
|
|
3041
3638
|
class NsInputNumberComponent extends NsValueAccessor {
|
|
@@ -3184,7 +3781,7 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3184
3781
|
<p class="ns-input-number__error" [id]="errorId" role="alert">
|
|
3185
3782
|
{{ errorMessage() }}
|
|
3186
3783
|
</p>
|
|
3187
|
-
}`, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-number__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-number-label-color);font-size:var(--ns-component-input-number-label-size);font-weight:var(--ns-component-input-number-label-weight)}.ns-input-number__group{display:flex;width:100%;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-input-number__control{display:block;min-
|
|
3784
|
+
}`, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-number__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-number-label-color);font-size:var(--ns-component-input-number-label-size);font-weight:var(--ns-component-input-number-label-weight)}.ns-input-number__group{display:flex;width:100%;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-input-number__control{display:block;min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;min-height:var(--ns-component-input-number-min-height);padding:var(--ns-component-input-number-padding-block) var(--ns-component-input-number-padding-inline);border-color:var(--ns-component-input-number-border-color);border-radius:var(--ns-component-input-number-radius) 0 0 var(--ns-component-input-number-radius);background:var(--ns-component-input-number-background);color:var(--ns-component-input-number-color);font:inherit;font-variant-numeric:tabular-nums}.ns-input-number__group:hover:not(:has(.ns-input-number__control:disabled)) .ns-input-number__control,.ns-input-number__group:hover:not(:has(.ns-input-number__control:disabled)) .ns-input-number__steppers{border-color:var(--ns-component-input-number-border-hover-color)}.ns-input-number__group:focus-within .ns-input-number__control,.ns-input-number__group:focus-within .ns-input-number__steppers{border-color:var(--ns-component-input-number-border-focus-color)}.ns-input-number__group:focus-within{box-shadow:var(--ns-component-input-number-focus-shadow);border-radius:var(--ns-component-input-number-radius)}.ns-input-number__control:disabled,.ns-input-number__control[readonly]{cursor:not-allowed;background:var(--ns-component-input-number-stepper-background-hover);color:var(--ns-component-input-number-stepper-muted-color)}.ns-input-number__control[readonly]:not(:disabled){cursor:default}.ns-input-number__control[aria-invalid=true]{border-color:var(--ns-component-input-number-error-color)}.ns-input-number__steppers{margin-inline-start:-1px;display:flex;width:calc(var(--ns-primitive-space-1) * 10);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-input-number-border-color);border-radius:0 var(--ns-component-input-number-radius) var(--ns-component-input-number-radius) 0}.ns-input-number__steppers button{display:flex;flex:1;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;font-size:var(--ns-semantic-common-text-sm);--tw-leading: 1;line-height:1;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;color:var(--ns-component-input-number-color)}.ns-input-number__steppers button+button{border-top:var(--ns-component-input-number-stepper-border-width) solid var(--ns-component-input-number-border-color)}.ns-input-number__steppers button:hover:not(:disabled){background:var(--ns-component-input-number-stepper-background-hover)}.ns-input-number__steppers button:focus-visible{position:relative;z-index:1;box-shadow:inset 0 0 0 var(--ns-component-input-number-stepper-border-width) var(--ns-component-input-number-border-focus-color)}.ns-input-number__steppers button:disabled{cursor:not-allowed;color:var(--ns-component-input-number-stepper-muted-color)}.ns-input-number__description,.ns-input-number__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-input-number__description{color:var(--ns-component-input-number-description-color)}.ns-input-number__error{color:var(--ns-component-input-number-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3188
3785
|
}
|
|
3189
3786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputNumberComponent, decorators: [{
|
|
3190
3787
|
type: Component,
|
|
@@ -3252,7 +3849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3252
3849
|
useExisting: forwardRef(() => NsInputNumberComponent),
|
|
3253
3850
|
multi: true
|
|
3254
3851
|
}
|
|
3255
|
-
], host: { '[class.ns-input-number]': 'true' }, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-number__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-number-label-color);font-size:var(--ns-component-input-number-label-size);font-weight:var(--ns-component-input-number-label-weight)}.ns-input-number__group{display:flex;width:100%;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-input-number__control{display:block;min-
|
|
3852
|
+
], host: { '[class.ns-input-number]': 'true' }, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-number__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-number-label-color);font-size:var(--ns-component-input-number-label-size);font-weight:var(--ns-component-input-number-label-weight)}.ns-input-number__group{display:flex;width:100%;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-input-number__control{display:block;min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;min-height:var(--ns-component-input-number-min-height);padding:var(--ns-component-input-number-padding-block) var(--ns-component-input-number-padding-inline);border-color:var(--ns-component-input-number-border-color);border-radius:var(--ns-component-input-number-radius) 0 0 var(--ns-component-input-number-radius);background:var(--ns-component-input-number-background);color:var(--ns-component-input-number-color);font:inherit;font-variant-numeric:tabular-nums}.ns-input-number__group:hover:not(:has(.ns-input-number__control:disabled)) .ns-input-number__control,.ns-input-number__group:hover:not(:has(.ns-input-number__control:disabled)) .ns-input-number__steppers{border-color:var(--ns-component-input-number-border-hover-color)}.ns-input-number__group:focus-within .ns-input-number__control,.ns-input-number__group:focus-within .ns-input-number__steppers{border-color:var(--ns-component-input-number-border-focus-color)}.ns-input-number__group:focus-within{box-shadow:var(--ns-component-input-number-focus-shadow);border-radius:var(--ns-component-input-number-radius)}.ns-input-number__control:disabled,.ns-input-number__control[readonly]{cursor:not-allowed;background:var(--ns-component-input-number-stepper-background-hover);color:var(--ns-component-input-number-stepper-muted-color)}.ns-input-number__control[readonly]:not(:disabled){cursor:default}.ns-input-number__control[aria-invalid=true]{border-color:var(--ns-component-input-number-error-color)}.ns-input-number__steppers{margin-inline-start:-1px;display:flex;width:calc(var(--ns-primitive-space-1) * 10);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-input-number-border-color);border-radius:0 var(--ns-component-input-number-radius) var(--ns-component-input-number-radius) 0}.ns-input-number__steppers button{display:flex;flex:1;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;font-size:var(--ns-semantic-common-text-sm);--tw-leading: 1;line-height:1;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;color:var(--ns-component-input-number-color)}.ns-input-number__steppers button+button{border-top:var(--ns-component-input-number-stepper-border-width) solid var(--ns-component-input-number-border-color)}.ns-input-number__steppers button:hover:not(:disabled){background:var(--ns-component-input-number-stepper-background-hover)}.ns-input-number__steppers button:focus-visible{position:relative;z-index:1;box-shadow:inset 0 0 0 var(--ns-component-input-number-stepper-border-width) var(--ns-component-input-number-border-focus-color)}.ns-input-number__steppers button:disabled{cursor:not-allowed;color:var(--ns-component-input-number-stepper-muted-color)}.ns-input-number__description,.ns-input-number__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-input-number__description{color:var(--ns-component-input-number-description-color)}.ns-input-number__error{color:var(--ns-component-input-number-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3256
3853
|
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
|
|
3257
3854
|
|
|
3258
3855
|
class NsInputSearchComponent extends NsValueAccessor {
|
|
@@ -3300,7 +3897,7 @@ class NsInputSearchComponent extends NsValueAccessor {
|
|
|
3300
3897
|
<p class="ns-input-search__error" [id]="errorId" role="alert">
|
|
3301
3898
|
{{ errorMessage() }}
|
|
3302
3899
|
</p>
|
|
3303
|
-
}`, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-search__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-search-label-color)}.ns-input-search__group{display:flex;
|
|
3900
|
+
}`, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-search__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-search-label-color)}.ns-input-search__group{display:flex;align-items:center;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-input-search-min-height);border-color:var(--ns-component-input-search-border-color);border-radius:var(--ns-component-input-search-radius);background:var(--ns-component-input-search-background);padding-inline:var(--ns-component-input-search-padding-inline)}.ns-input-search__control{min-width:0px;flex:1;background-color:transparent;padding-block:calc(var(--ns-primitive-space-1) * 2);--tw-outline-style: none;outline-style:none;color:var(--ns-component-input-search-color);font:inherit}.ns-input-search__control::placeholder{color:var(--ns-component-input-search-placeholder)}.ns-input-search__group:hover:not(:has(.ns-input-search__control:disabled)){border-color:var(--ns-component-input-search-border-hover-color)}.ns-input-search__group:focus-within{border-color:var(--ns-component-input-search-border-focus-color);box-shadow:var(--ns-component-input-search-focus-shadow)}.ns-input-search__group:has(.ns-input-search__control[aria-invalid=true]){border-color:var(--ns-component-input-search-error-color)}.ns-input-search__control[readonly]:not(:disabled){cursor:default}.ns-input-search__group button{display:grid;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);flex-shrink:0;place-items:center;border-radius:calc(infinity * 1px);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;color:var(--ns-component-input-search-action-color)}.ns-input-search__group button:hover{background:var(--ns-component-input-search-action-background-hover);color:var(--ns-component-input-search-color)}.ns-input-search__group button:focus-visible{box-shadow:var(--ns-component-input-search-focus-shadow)}.ns-input-search__description,.ns-input-search__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-input-search__description{color:var(--ns-component-input-search-description-color)}.ns-input-search__error{color:var(--ns-component-input-search-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3304
3901
|
}
|
|
3305
3902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputSearchComponent, decorators: [{
|
|
3306
3903
|
type: Component,
|
|
@@ -3347,12 +3944,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3347
3944
|
useExisting: forwardRef(() => NsInputSearchComponent),
|
|
3348
3945
|
multi: true
|
|
3349
3946
|
}
|
|
3350
|
-
], host: { '[class.ns-input-search]': 'true' }, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-search__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-search-label-color)}.ns-input-search__group{display:flex;
|
|
3947
|
+
], host: { '[class.ns-input-search]': 'true' }, styles: ["@layer properties;:host{display:block;width:100%}.ns-input-search__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-input-search-label-color)}.ns-input-search__group{display:flex;align-items:center;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-input-search-min-height);border-color:var(--ns-component-input-search-border-color);border-radius:var(--ns-component-input-search-radius);background:var(--ns-component-input-search-background);padding-inline:var(--ns-component-input-search-padding-inline)}.ns-input-search__control{min-width:0px;flex:1;background-color:transparent;padding-block:calc(var(--ns-primitive-space-1) * 2);--tw-outline-style: none;outline-style:none;color:var(--ns-component-input-search-color);font:inherit}.ns-input-search__control::placeholder{color:var(--ns-component-input-search-placeholder)}.ns-input-search__group:hover:not(:has(.ns-input-search__control:disabled)){border-color:var(--ns-component-input-search-border-hover-color)}.ns-input-search__group:focus-within{border-color:var(--ns-component-input-search-border-focus-color);box-shadow:var(--ns-component-input-search-focus-shadow)}.ns-input-search__group:has(.ns-input-search__control[aria-invalid=true]){border-color:var(--ns-component-input-search-error-color)}.ns-input-search__control[readonly]:not(:disabled){cursor:default}.ns-input-search__group button{display:grid;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);flex-shrink:0;place-items:center;border-radius:calc(infinity * 1px);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;color:var(--ns-component-input-search-action-color)}.ns-input-search__group button:hover{background:var(--ns-component-input-search-action-background-hover);color:var(--ns-component-input-search-color)}.ns-input-search__group button:focus-visible{box-shadow:var(--ns-component-input-search-focus-shadow)}.ns-input-search__description,.ns-input-search__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-input-search__description{color:var(--ns-component-input-search-description-color)}.ns-input-search__error{color:var(--ns-component-input-search-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3351
3948
|
}] });
|
|
3352
3949
|
|
|
3950
|
+
class NsRadioGroupContext {
|
|
3951
|
+
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3952
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3953
|
+
select = () => { };
|
|
3954
|
+
onTouched = () => { };
|
|
3955
|
+
}
|
|
3956
|
+
|
|
3957
|
+
/**
|
|
3958
|
+
* Selectable card for rich radio options (icon, label and description)
|
|
3959
|
+
* inside an `ns-radio-group`. It reuses `NsRadioGroupContext` and a native
|
|
3960
|
+
* `<input type="radio">`, the same mechanism `ns-radio` relies on, so
|
|
3961
|
+
* `role="radio"`, `aria-checked` and keyboard behavior (native radio-group
|
|
3962
|
+
* navigation when a shared `name` is provided) come from the browser instead
|
|
3963
|
+
* of a hand-rolled ARIA widget.
|
|
3964
|
+
*/
|
|
3965
|
+
class NsOptionCardComponent {
|
|
3966
|
+
ids = inject(NsAriaIdService);
|
|
3967
|
+
group = inject(NsRadioGroupContext, {
|
|
3968
|
+
optional: true,
|
|
3969
|
+
skipSelf: true
|
|
3970
|
+
});
|
|
3971
|
+
id = this.ids.create('ns-option-card');
|
|
3972
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3973
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3974
|
+
description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
3975
|
+
name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3976
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3977
|
+
select() {
|
|
3978
|
+
if (!this.disabled() && !this.group?.disabled()) {
|
|
3979
|
+
this.group?.select(this.value());
|
|
3980
|
+
}
|
|
3981
|
+
}
|
|
3982
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsOptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3983
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsOptionCardComponent, isStandalone: true, selector: "ns-option-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-option-card": "true", "class.ns-option-card--selected": "group?.value() === value()", "class.ns-option-card--disabled": "disabled() || group?.disabled()" } }, ngImport: i0, template: `
|
|
3984
|
+
<input
|
|
3985
|
+
class="ns-option-card__input"
|
|
3986
|
+
type="radio"
|
|
3987
|
+
[id]="id"
|
|
3988
|
+
[name]="name()"
|
|
3989
|
+
[value]="value()"
|
|
3990
|
+
[checked]="group?.value() === value()"
|
|
3991
|
+
[disabled]="disabled() || group?.disabled()"
|
|
3992
|
+
(change)="select()"
|
|
3993
|
+
(blur)="group?.onTouched()"
|
|
3994
|
+
/>
|
|
3995
|
+
<label class="ns-option-card__card" [for]="id">
|
|
3996
|
+
<span class="ns-option-card__indicator" aria-hidden="true"></span>
|
|
3997
|
+
<span class="ns-option-card__icon"
|
|
3998
|
+
><ng-content select="[option-card-icon]"
|
|
3999
|
+
/></span>
|
|
4000
|
+
<span class="ns-option-card__body">
|
|
4001
|
+
<span class="ns-option-card__label">{{ label() }}</span>
|
|
4002
|
+
@if (description()) {
|
|
4003
|
+
<span class="ns-option-card__description">{{ description() }}</span>
|
|
4004
|
+
}
|
|
4005
|
+
</span>
|
|
4006
|
+
</label>
|
|
4007
|
+
`, isInline: true, styles: ["@layer properties;:host{position:relative;display:inline-flex}.ns-option-card__input{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;appearance:none;opacity:0%}.ns-option-card__input:disabled{cursor:not-allowed}.ns-option-card__card{display:flex;width:100%;cursor:pointer;align-items:flex-start;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);gap:var(--ns-component-option-card-gap);padding:var(--ns-component-option-card-padding);border-width:var(--ns-component-option-card-border-width);border-color:var(--ns-component-option-card-border-color);border-radius:var(--ns-component-option-card-radius);background:var(--ns-component-option-card-background);color:var(--ns-component-option-card-color);transition-duration:var(--ns-component-option-card-transition-duration)}.ns-option-card__indicator{margin-top:var(--ns-primitive-space-1);flex-shrink:0;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;inline-size:var(--ns-component-option-card-indicator-size);block-size:var(--ns-component-option-card-indicator-size);border-color:var(--ns-component-option-card-indicator-border-color);background:var(--ns-component-option-card-indicator-background);box-shadow:inset 0 0 0 var(--ns-component-option-card-indicator-inset) var(--ns-component-option-card-indicator-background)}.ns-option-card__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-option-card__icon:empty{display:none}.ns-option-card__body{display:flex;min-width:0px;flex-direction:column;gap:var(--ns-component-option-card-body-gap)}.ns-option-card__label{--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);font-size:var(--ns-component-option-card-font-size);font-weight:var(--ns-component-option-card-font-weight)}.ns-option-card__description{--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4);font-size:var(--ns-component-option-card-description-font-size);color:var(--ns-component-option-card-description-color)}:host(.ns-option-card--selected) .ns-option-card__card{border-color:var(--ns-component-option-card-selected-border-color);background:var(--ns-component-option-card-selected-background);color:var(--ns-component-option-card-selected-color)}:host(.ns-option-card--selected) .ns-option-card__indicator{border-color:var(--ns-component-option-card-selected-indicator-border-color);background:var(--ns-component-option-card-selected-indicator-background)}.ns-option-card__input:focus-visible+.ns-option-card__card{box-shadow:var(--ns-component-option-card-focus-shadow)}:host(.ns-option-card--disabled) .ns-option-card__card{cursor:not-allowed;opacity:60%}@media(prefers-reduced-motion:reduce){.ns-option-card__card{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4008
|
+
}
|
|
4009
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsOptionCardComponent, decorators: [{
|
|
4010
|
+
type: Component,
|
|
4011
|
+
args: [{ selector: 'ns-option-card', standalone: true, template: `
|
|
4012
|
+
<input
|
|
4013
|
+
class="ns-option-card__input"
|
|
4014
|
+
type="radio"
|
|
4015
|
+
[id]="id"
|
|
4016
|
+
[name]="name()"
|
|
4017
|
+
[value]="value()"
|
|
4018
|
+
[checked]="group?.value() === value()"
|
|
4019
|
+
[disabled]="disabled() || group?.disabled()"
|
|
4020
|
+
(change)="select()"
|
|
4021
|
+
(blur)="group?.onTouched()"
|
|
4022
|
+
/>
|
|
4023
|
+
<label class="ns-option-card__card" [for]="id">
|
|
4024
|
+
<span class="ns-option-card__indicator" aria-hidden="true"></span>
|
|
4025
|
+
<span class="ns-option-card__icon"
|
|
4026
|
+
><ng-content select="[option-card-icon]"
|
|
4027
|
+
/></span>
|
|
4028
|
+
<span class="ns-option-card__body">
|
|
4029
|
+
<span class="ns-option-card__label">{{ label() }}</span>
|
|
4030
|
+
@if (description()) {
|
|
4031
|
+
<span class="ns-option-card__description">{{ description() }}</span>
|
|
4032
|
+
}
|
|
4033
|
+
</span>
|
|
4034
|
+
</label>
|
|
4035
|
+
`, host: {
|
|
4036
|
+
'[class.ns-option-card]': 'true',
|
|
4037
|
+
'[class.ns-option-card--selected]': 'group?.value() === value()',
|
|
4038
|
+
'[class.ns-option-card--disabled]': 'disabled() || group?.disabled()'
|
|
4039
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{position:relative;display:inline-flex}.ns-option-card__input{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;appearance:none;opacity:0%}.ns-option-card__input:disabled{cursor:not-allowed}.ns-option-card__card{display:flex;width:100%;cursor:pointer;align-items:flex-start;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);gap:var(--ns-component-option-card-gap);padding:var(--ns-component-option-card-padding);border-width:var(--ns-component-option-card-border-width);border-color:var(--ns-component-option-card-border-color);border-radius:var(--ns-component-option-card-radius);background:var(--ns-component-option-card-background);color:var(--ns-component-option-card-color);transition-duration:var(--ns-component-option-card-transition-duration)}.ns-option-card__indicator{margin-top:var(--ns-primitive-space-1);flex-shrink:0;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;inline-size:var(--ns-component-option-card-indicator-size);block-size:var(--ns-component-option-card-indicator-size);border-color:var(--ns-component-option-card-indicator-border-color);background:var(--ns-component-option-card-indicator-background);box-shadow:inset 0 0 0 var(--ns-component-option-card-indicator-inset) var(--ns-component-option-card-indicator-background)}.ns-option-card__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-option-card__icon:empty{display:none}.ns-option-card__body{display:flex;min-width:0px;flex-direction:column;gap:var(--ns-component-option-card-body-gap)}.ns-option-card__label{--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);font-size:var(--ns-component-option-card-font-size);font-weight:var(--ns-component-option-card-font-weight)}.ns-option-card__description{--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4);font-size:var(--ns-component-option-card-description-font-size);color:var(--ns-component-option-card-description-color)}:host(.ns-option-card--selected) .ns-option-card__card{border-color:var(--ns-component-option-card-selected-border-color);background:var(--ns-component-option-card-selected-background);color:var(--ns-component-option-card-selected-color)}:host(.ns-option-card--selected) .ns-option-card__indicator{border-color:var(--ns-component-option-card-selected-indicator-border-color);background:var(--ns-component-option-card-selected-indicator-background)}.ns-option-card__input:focus-visible+.ns-option-card__card{box-shadow:var(--ns-component-option-card-focus-shadow)}:host(.ns-option-card--disabled) .ns-option-card__card{cursor:not-allowed;opacity:60%}@media(prefers-reduced-motion:reduce){.ns-option-card__card{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4040
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
4041
|
+
|
|
3353
4042
|
class NsPasswordComponent extends NsValueAccessor {
|
|
3354
4043
|
forgotLink = input(undefined, ...(ngDevMode ? [{ debugName: "forgotLink" }] : /* istanbul ignore next */ []));
|
|
3355
|
-
|
|
4044
|
+
forgotLinkLabel = input('¿Olvidó su contraseña?', ...(ngDevMode ? [{ debugName: "forgotLinkLabel" }] : /* istanbul ignore next */ []));
|
|
3356
4045
|
show = false;
|
|
3357
4046
|
constructor() {
|
|
3358
4047
|
super();
|
|
@@ -3362,13 +4051,13 @@ class NsPasswordComponent extends NsValueAccessor {
|
|
|
3362
4051
|
this.show = !this.show;
|
|
3363
4052
|
}
|
|
3364
4053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsPasswordComponent, isStandalone: true, selector: "ns-password", inputs: { forgotLink: { classPropertyName: "forgotLink", publicName: "forgotLink", isSignal: true, isRequired: false, transformFunction: null },
|
|
4054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsPasswordComponent, isStandalone: true, selector: "ns-password", inputs: { forgotLink: { classPropertyName: "forgotLink", publicName: "forgotLink", isSignal: true, isRequired: false, transformFunction: null }, forgotLinkLabel: { classPropertyName: "forgotLinkLabel", publicName: "forgotLinkLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-password": "true" } }, providers: [
|
|
3366
4055
|
{
|
|
3367
4056
|
provide: NG_VALUE_ACCESSOR,
|
|
3368
4057
|
useExisting: forwardRef(() => NsPasswordComponent),
|
|
3369
4058
|
multi: true
|
|
3370
4059
|
}
|
|
3371
|
-
], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <
|
|
4060
|
+
], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <div class=\"ns-password__label-row\">\n <label class=\"ns-password__label\" [for]=\"controlId()\">{{ label() }}</label>\n @if (forgotLink()) {\n <a class=\"ns-password__forgot-link\" [routerLink]=\"forgotLink()\">{{\n forgotLinkLabel()\n }}</a>\n }\n </div>\n}\n\n<div class=\"ns-password__group\">\n <input\n class=\"ns-password__control\"\n [id]=\"controlId()\"\n [type]=\"show ? 'text' : 'password'\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled()\"\n />\n\n <button\n type=\"button\"\n class=\"ns-password__append\"\n [attr.aria-label]=\"show ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"show\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <ns-icon class=\"ns-password__toggle\" [name]=\"show ? 'eye-off' : 'eye'\" />\n </button>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-password__label-row{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:flex;align-items:center;justify-content:space-between;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5)}.ns-password__label{color:var(--ns-component-password-label-color);font-size:var(--ns-component-password-label-size);font-weight:var(--ns-component-password-label-weight)}.ns-password__forgot-link{--tw-outline-style: none;outline-style:none;color:var(--ns-component-password-forgot-link-color);font-size:var(--ns-component-password-label-size);transition:opacity var(--ns-component-password-forgot-link-transition-duration)}.ns-password__forgot-link:hover{opacity:var(--ns-component-password-forgot-link-hover-opacity)}.ns-password__group{position:relative;display:flex;width:100%;align-items:stretch;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-password__control{min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-password-min-height);padding:var(--ns-component-password-padding-block) var(--ns-component-password-padding-inline);padding-inline-end:var(--ns-component-password-append-gutter);border-color:var(--ns-component-password-border-color);border-radius:var(--ns-component-password-radius);background:var(--ns-component-password-background);color:var(--ns-component-password-color);font:inherit}.ns-password__group:hover:not(:has(.ns-password__control:disabled)) .ns-password__control{border-color:var(--ns-component-password-border-hover-color)}.ns-password__group:focus-within{border-radius:var(--ns-component-password-radius);box-shadow:var(--ns-component-password-focus-shadow)}.ns-password__group:focus-within .ns-password__control{border-color:var(--ns-component-password-border-focus-color)}.ns-password__append{position:absolute;inset-inline-end:calc(var(--ns-primitive-space-1) * 1.5);top:50%;display:flex;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-password-radius);color:var(--ns-component-password-color)}.ns-password__append:hover{background:var(--ns-component-password-append-background-hover)}.ns-password__append:focus-visible{box-shadow:var(--ns-component-password-focus-shadow)}.ns-password__control:disabled+.ns-password__append{cursor:not-allowed;color:var(--ns-component-password-append-disabled-color)}.ns-password__toggle ::ng-deep svg{width:var(--ns-component-password-toggle-icon-size);height:var(--ns-component-password-toggle-icon-size)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
|
|
3372
4061
|
}
|
|
3373
4062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsPasswordComponent, decorators: [{
|
|
3374
4063
|
type: Component,
|
|
@@ -3380,15 +4069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3380
4069
|
}
|
|
3381
4070
|
], imports: [RouterLink, FormsModule, NsIconsComponent], host: {
|
|
3382
4071
|
'[class.ns-password]': 'true'
|
|
3383
|
-
}, template: "@if (label()) {\n <
|
|
3384
|
-
}], ctorParameters: () => [], propDecorators: { forgotLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotLink", required: false }] }],
|
|
3385
|
-
|
|
3386
|
-
class NsRadioGroupContext {
|
|
3387
|
-
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3388
|
-
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3389
|
-
select = () => { };
|
|
3390
|
-
onTouched = () => { };
|
|
3391
|
-
}
|
|
4072
|
+
}, template: "@if (label()) {\n <div class=\"ns-password__label-row\">\n <label class=\"ns-password__label\" [for]=\"controlId()\">{{ label() }}</label>\n @if (forgotLink()) {\n <a class=\"ns-password__forgot-link\" [routerLink]=\"forgotLink()\">{{\n forgotLinkLabel()\n }}</a>\n }\n </div>\n}\n\n<div class=\"ns-password__group\">\n <input\n class=\"ns-password__control\"\n [id]=\"controlId()\"\n [type]=\"show ? 'text' : 'password'\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled()\"\n />\n\n <button\n type=\"button\"\n class=\"ns-password__append\"\n [attr.aria-label]=\"show ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"show\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <ns-icon class=\"ns-password__toggle\" [name]=\"show ? 'eye-off' : 'eye'\" />\n </button>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-password__label-row{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:flex;align-items:center;justify-content:space-between;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5)}.ns-password__label{color:var(--ns-component-password-label-color);font-size:var(--ns-component-password-label-size);font-weight:var(--ns-component-password-label-weight)}.ns-password__forgot-link{--tw-outline-style: none;outline-style:none;color:var(--ns-component-password-forgot-link-color);font-size:var(--ns-component-password-label-size);transition:opacity var(--ns-component-password-forgot-link-transition-duration)}.ns-password__forgot-link:hover{opacity:var(--ns-component-password-forgot-link-hover-opacity)}.ns-password__group{position:relative;display:flex;width:100%;align-items:stretch;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-password__control{min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-password-min-height);padding:var(--ns-component-password-padding-block) var(--ns-component-password-padding-inline);padding-inline-end:var(--ns-component-password-append-gutter);border-color:var(--ns-component-password-border-color);border-radius:var(--ns-component-password-radius);background:var(--ns-component-password-background);color:var(--ns-component-password-color);font:inherit}.ns-password__group:hover:not(:has(.ns-password__control:disabled)) .ns-password__control{border-color:var(--ns-component-password-border-hover-color)}.ns-password__group:focus-within{border-radius:var(--ns-component-password-radius);box-shadow:var(--ns-component-password-focus-shadow)}.ns-password__group:focus-within .ns-password__control{border-color:var(--ns-component-password-border-focus-color)}.ns-password__append{position:absolute;inset-inline-end:calc(var(--ns-primitive-space-1) * 1.5);top:50%;display:flex;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-password-radius);color:var(--ns-component-password-color)}.ns-password__append:hover{background:var(--ns-component-password-append-background-hover)}.ns-password__append:focus-visible{box-shadow:var(--ns-component-password-focus-shadow)}.ns-password__control:disabled+.ns-password__append{cursor:not-allowed;color:var(--ns-component-password-append-disabled-color)}.ns-password__toggle ::ng-deep svg{width:var(--ns-component-password-toggle-icon-size);height:var(--ns-component-password-toggle-icon-size)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4073
|
+
}], ctorParameters: () => [], propDecorators: { forgotLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotLink", required: false }] }], forgotLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotLinkLabel", required: false }] }] } });
|
|
3392
4074
|
|
|
3393
4075
|
class NsRadioComponent {
|
|
3394
4076
|
ids = inject(NsAriaIdService);
|
|
@@ -3735,8 +4417,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3735
4417
|
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }] } });
|
|
3736
4418
|
|
|
3737
4419
|
class NsSwitchComponent extends NsValueAccessor {
|
|
4420
|
+
layout = input('inline', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
4421
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3738
4422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3739
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsSwitchComponent, isStandalone: true, selector: "ns-switch", host: { properties: { "class.ns-switch": "true" } }, providers: [
|
|
4423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsSwitchComponent, isStandalone: true, selector: "ns-switch", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-switch": "true", "class.ns-switch--inline": "layout() === 'inline'", "class.ns-switch--row": "layout() === 'row'", "class.ns-switch--sm": "size() === 'sm'", "class.ns-switch--md": "size() === 'md'" } }, providers: [
|
|
3740
4424
|
{
|
|
3741
4425
|
provide: NG_VALUE_ACCESSOR,
|
|
3742
4426
|
useExisting: forwardRef(() => NsSwitchComponent),
|
|
@@ -3771,7 +4455,7 @@ class NsSwitchComponent extends NsValueAccessor {
|
|
|
3771
4455
|
<p class="ns-switch__error" [id]="errorId" role="alert">
|
|
3772
4456
|
{{ errorMessage() }}
|
|
3773
4457
|
</p>
|
|
3774
|
-
}`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) -
|
|
4458
|
+
}`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}:host(.ns-switch--row){display:grid;width:100%;flex-wrap:nowrap;align-items:flex-start;grid-template-columns:1fr auto;column-gap:var(--ns-component-switch-row-gap)}:host(.ns-switch--row) .ns-switch__input{order:2;grid-column:2;grid-row:1;align-self:start}:host(.ns-switch--row) .ns-switch__label{order:1;margin:0;grid-column:1;grid-row:1}:host(.ns-switch--row) .ns-switch__description{order:3;margin:0;margin-top:var(--ns-primitive-space-1);grid-column:1;grid-row:2}:host(.ns-switch--row) .ns-switch__error{order:4;margin:0;margin-top:calc(var(--ns-primitive-space-1) * 2);grid-column:1;grid-row:3}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));top:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));width:var(--ns-component-switch-thumb-size);height:var(--ns-component-switch-thumb-size);background:var(--ns-component-switch-thumb-color)}.ns-switch__input:checked{background:var(--ns-component-switch-active-background)}.ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate))}.ns-switch__input:focus-visible{box-shadow:var(--ns-component-switch-focus-shadow)}.ns-switch__input[aria-invalid=true]{border-color:var(--ns-component-switch-invalid-border-color)}.ns-switch__input:disabled{cursor:not-allowed;opacity:50%}:host(.ns-switch--sm) .ns-switch__input{width:var(--ns-component-switch-track-width-sm);height:var(--ns-component-switch-track-height-sm)}:host(.ns-switch--sm) .ns-switch__input:after{inset-inline-start:calc(var(--ns-component-switch-thumb-inset-sm) - var(--ns-component-switch-thumb-border-offset));top:calc(var(--ns-component-switch-thumb-inset-sm) - var(--ns-component-switch-thumb-border-offset));width:var(--ns-component-switch-thumb-size-sm);height:var(--ns-component-switch-thumb-size-sm)}:host(.ns-switch--sm) .ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate-sm))}.ns-switch__label{margin-inline-start:calc(var(--ns-primitive-space-1) * 3);--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-switch-color)}.ns-switch__description,.ns-switch__error{margin-inline-start:calc(var(--ns-primitive-space-1) * 14);margin-top:calc(var(--ns-primitive-space-1) * 2);flex-basis:100%;font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-switch__description{color:var(--ns-component-switch-description-color)}.ns-switch__error{color:var(--ns-component-switch-error-color)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3775
4459
|
}
|
|
3776
4460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSwitchComponent, decorators: [{
|
|
3777
4461
|
type: Component,
|
|
@@ -3810,8 +4494,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3810
4494
|
useExisting: forwardRef(() => NsSwitchComponent),
|
|
3811
4495
|
multi: true
|
|
3812
4496
|
}
|
|
3813
|
-
], host: {
|
|
3814
|
-
|
|
4497
|
+
], host: {
|
|
4498
|
+
'[class.ns-switch]': 'true',
|
|
4499
|
+
'[class.ns-switch--inline]': "layout() === 'inline'",
|
|
4500
|
+
'[class.ns-switch--row]': "layout() === 'row'",
|
|
4501
|
+
'[class.ns-switch--sm]': "size() === 'sm'",
|
|
4502
|
+
'[class.ns-switch--md]': "size() === 'md'"
|
|
4503
|
+
}, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}:host(.ns-switch--row){display:grid;width:100%;flex-wrap:nowrap;align-items:flex-start;grid-template-columns:1fr auto;column-gap:var(--ns-component-switch-row-gap)}:host(.ns-switch--row) .ns-switch__input{order:2;grid-column:2;grid-row:1;align-self:start}:host(.ns-switch--row) .ns-switch__label{order:1;margin:0;grid-column:1;grid-row:1}:host(.ns-switch--row) .ns-switch__description{order:3;margin:0;margin-top:var(--ns-primitive-space-1);grid-column:1;grid-row:2}:host(.ns-switch--row) .ns-switch__error{order:4;margin:0;margin-top:calc(var(--ns-primitive-space-1) * 2);grid-column:1;grid-row:3}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));top:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));width:var(--ns-component-switch-thumb-size);height:var(--ns-component-switch-thumb-size);background:var(--ns-component-switch-thumb-color)}.ns-switch__input:checked{background:var(--ns-component-switch-active-background)}.ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate))}.ns-switch__input:focus-visible{box-shadow:var(--ns-component-switch-focus-shadow)}.ns-switch__input[aria-invalid=true]{border-color:var(--ns-component-switch-invalid-border-color)}.ns-switch__input:disabled{cursor:not-allowed;opacity:50%}:host(.ns-switch--sm) .ns-switch__input{width:var(--ns-component-switch-track-width-sm);height:var(--ns-component-switch-track-height-sm)}:host(.ns-switch--sm) .ns-switch__input:after{inset-inline-start:calc(var(--ns-component-switch-thumb-inset-sm) - var(--ns-component-switch-thumb-border-offset));top:calc(var(--ns-component-switch-thumb-inset-sm) - var(--ns-component-switch-thumb-border-offset));width:var(--ns-component-switch-thumb-size-sm);height:var(--ns-component-switch-thumb-size-sm)}:host(.ns-switch--sm) .ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate-sm))}.ns-switch__label{margin-inline-start:calc(var(--ns-primitive-space-1) * 3);--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-switch-color)}.ns-switch__description,.ns-switch__error{margin-inline-start:calc(var(--ns-primitive-space-1) * 14);margin-top:calc(var(--ns-primitive-space-1) * 2);flex-basis:100%;font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-switch__description{color:var(--ns-component-switch-description-color)}.ns-switch__error{color:var(--ns-component-switch-error-color)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4504
|
+
}], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
3815
4505
|
|
|
3816
4506
|
class NsTextAreaComponent extends NsValueAccessor {
|
|
3817
4507
|
rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
@@ -4470,7 +5160,7 @@ class NsEditorLinkComponent {
|
|
|
4470
5160
|
}
|
|
4471
5161
|
}
|
|
4472
5162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4473
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsEditorLinkComponent, isStandalone: true, selector: "ns-editor-link", ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-link\"\n [attr.aria-label]=\"'insert_link' | nsEditorLabel\"\n (click)=\"show = true\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M12.654 8.764a.858.858 0 01-1.213-1.213l1.214-1.214a3.717 3.717 0 015.257 0 3.714 3.714 0 01.001 5.258l-1.214 1.214-.804.804a3.72 3.72 0 01-5.263.005.858.858 0 011.214-1.214c.781.782 2.05.78 2.836-.005l.804-.803 1.214-1.214a1.998 1.998 0 00-.001-2.831 2 2 0 00-2.83 0l-1.215 1.213zm-.808 6.472a.858.858 0 011.213 1.213l-1.214 1.214a3.717 3.717 0 01-5.257 0 3.714 3.714 0 01-.001-5.258l1.214-1.214.804-.804a3.72 3.72 0 015.263-.005.858.858 0 01-1.214 1.214 2.005 2.005 0 00-2.836.005l-.804.803L7.8 13.618a1.998 1.998 0 00.001 2.831 2 2 0 002.83 0l1.215-1.213z\"\n ></path>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formLink\"\n class=\"ns-editor__form-link\"\n aria-labelledby=\"ns-editor-link\"\n [ngClass]=\"{ 'ns-editor__form-link--visible': show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_link' | nsEditorLabel }}</label>\n <button\n type=\"button\"\n class=\"ns-editor__close\"\n [attr.aria-label]=\"'close_link' | nsEditorLabel\"\n (click)=\"show = false\"\n ></button>\n </header>\n\n <ns-input [formControlName]=\"'url'\" [placeholder]=\"'link' | nsEditorLabel\" />\n <ns-input [formControlName]=\"'text'\" [placeholder]=\"'text' | nsEditorLabel\" />\n <ns-input\n [formControlName]=\"'tooltip'\"\n [placeholder]=\"'tooltip_link' | nsEditorLabel\"\n />\n <ns-checkbox\n [formControlName]=\"'openNewWindow'\"\n [label]=\"'open_new_window' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\">{{ 'submit_link' | nsEditorLabel }}</ns-button>\n </footer>\n</form>\n", styles: ["@layer properties;.ns-editor__button,.ns-editor__close{position:relative;display:inline-flex;width:calc(var(--ns-primitive-space-1) * 10);height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-editor-radius);color:var(--ns-component-editor-color)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-background)}.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__form-link{position:absolute;margin:0;display:none;min-width:calc(var(--ns-primitive-space-1) * 64);border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-editor-padding);z-index:var(--ns-component-editor-layer);border-color:var(--ns-component-editor-border-color);border-radius:var(--ns-component-editor-overlay-radius);background:var(--ns-component-editor-background);color:var(--ns-component-editor-color);box-shadow:var(--ns-component-editor-overlay-shadow)}.ns-editor__form-link--visible{display:block}.ns-editor__form-link header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-component-editor-gap)}.ns-editor__form-link footer{margin-top:var(--ns-component-editor-gap)}.ns-editor__form-link ns-input+ns-input{margin-top:calc(var(--ns-primitive-space-1) * 2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsInputComponent, selector: "ns-input" }, { kind: "component", type: NsCheckboxComponent, selector: "ns-checkbox" }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsEditorLinkComponent, isStandalone: true, selector: "ns-editor-link", ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-link\"\n [attr.aria-label]=\"'insert_link' | nsEditorLabel\"\n (click)=\"show = true\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M12.654 8.764a.858.858 0 01-1.213-1.213l1.214-1.214a3.717 3.717 0 015.257 0 3.714 3.714 0 01.001 5.258l-1.214 1.214-.804.804a3.72 3.72 0 01-5.263.005.858.858 0 011.214-1.214c.781.782 2.05.78 2.836-.005l.804-.803 1.214-1.214a1.998 1.998 0 00-.001-2.831 2 2 0 00-2.83 0l-1.215 1.213zm-.808 6.472a.858.858 0 011.213 1.213l-1.214 1.214a3.717 3.717 0 01-5.257 0 3.714 3.714 0 01-.001-5.258l1.214-1.214.804-.804a3.72 3.72 0 015.263-.005.858.858 0 01-1.214 1.214 2.005 2.005 0 00-2.836.005l-.804.803L7.8 13.618a1.998 1.998 0 00.001 2.831 2 2 0 002.83 0l1.215-1.213z\"\n ></path>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formLink\"\n class=\"ns-editor__form-link\"\n aria-labelledby=\"ns-editor-link\"\n [ngClass]=\"{ 'ns-editor__form-link--visible': show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_link' | nsEditorLabel }}</label>\n <button\n type=\"button\"\n class=\"ns-editor__close\"\n [attr.aria-label]=\"'close_link' | nsEditorLabel\"\n (click)=\"show = false\"\n ></button>\n </header>\n\n <ns-input [formControlName]=\"'url'\" [placeholder]=\"'link' | nsEditorLabel\" />\n <ns-input [formControlName]=\"'text'\" [placeholder]=\"'text' | nsEditorLabel\" />\n <ns-input\n [formControlName]=\"'tooltip'\"\n [placeholder]=\"'tooltip_link' | nsEditorLabel\"\n />\n <ns-checkbox\n [formControlName]=\"'openNewWindow'\"\n [label]=\"'open_new_window' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\">{{ 'submit_link' | nsEditorLabel }}</ns-button>\n </footer>\n</form>\n", styles: ["@layer properties;.ns-editor__button,.ns-editor__close{position:relative;display:inline-flex;width:calc(var(--ns-primitive-space-1) * 10);height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-editor-radius);color:var(--ns-component-editor-color)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-background)}.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__form-link{position:absolute;margin:0;display:none;min-width:calc(var(--ns-primitive-space-1) * 64);border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-editor-padding);z-index:var(--ns-component-editor-layer);border-color:var(--ns-component-editor-border-color);border-radius:var(--ns-component-editor-overlay-radius);background:var(--ns-component-editor-background);color:var(--ns-component-editor-color);box-shadow:var(--ns-component-editor-overlay-shadow)}.ns-editor__form-link--visible{display:block}.ns-editor__form-link header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-component-editor-gap)}.ns-editor__form-link footer{margin-top:var(--ns-component-editor-gap)}.ns-editor__form-link ns-input+ns-input{margin-top:calc(var(--ns-primitive-space-1) * 2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsInputComponent, selector: "ns-input", inputs: ["icon"] }, { kind: "component", type: NsCheckboxComponent, selector: "ns-checkbox" }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
4474
5164
|
}
|
|
4475
5165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, decorators: [{
|
|
4476
5166
|
type: Component,
|
|
@@ -4800,43 +5490,264 @@ class NsLinkComponent {
|
|
|
4800
5490
|
event.stopPropagation();
|
|
4801
5491
|
}
|
|
4802
5492
|
}
|
|
4803
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4804
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsLinkComponent, isStandalone: true, selector: "ns-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-link": "true", "class.ns-link--disabled": "disabled()", "class.ns-link--neutral": "color() === 'neutral'", "class.ns-link--primary": "color() === 'primary'", "class.ns-link--success": "color() === 'success'", "class.ns-link--warning": "color() === 'warning'", "class.ns-link--danger": "color() === 'danger'" } }, ngImport: i0, template: `
|
|
4805
|
-
<a
|
|
4806
|
-
class="ns-link__anchor"
|
|
4807
|
-
[href]="disabled() ? null : href()"
|
|
4808
|
-
[target]="target() || null"
|
|
4809
|
-
[rel]="rel() || null"
|
|
4810
|
-
[attr.aria-disabled]="disabled() || null"
|
|
4811
|
-
[attr.tabindex]="disabled() ? -1 : null"
|
|
4812
|
-
(click)="onClick($event)"
|
|
4813
|
-
><ng-content
|
|
4814
|
-
/></a>
|
|
4815
|
-
`, isInline: true, styles: [":host{display:inline}.ns-link__anchor{--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-link-radius);color:var(--ns-component-link-color);font-weight:var(--ns-component-link-font-weight);text-decoration:var(--ns-component-link-decoration);text-underline-offset:var(--ns-component-link-underline-offset);transition:color var(--ns-component-link-transition-duration),opacity var(--ns-component-link-transition-duration)}.ns-link__anchor:hover:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:active:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:focus-visible{outline:var(--ns-component-link-focus-outline);outline-offset:var(--ns-component-link-focus-offset)}:host(.ns-link--disabled) .ns-link__anchor{cursor:not-allowed;color:var(--ns-component-link-disabled-color)}:host(.ns-link--success) .ns-link__anchor{color:var(--ns-component-link-success-color)}:host(.ns-link--warning) .ns-link__anchor{color:var(--ns-component-link-warning-color)}:host(.ns-link--danger) .ns-link__anchor{color:var(--ns-component-link-danger-color)}@media(prefers-reduced-motion:reduce){.ns-link__anchor{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5493
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5494
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsLinkComponent, isStandalone: true, selector: "ns-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-link": "true", "class.ns-link--disabled": "disabled()", "class.ns-link--neutral": "color() === 'neutral'", "class.ns-link--primary": "color() === 'primary'", "class.ns-link--success": "color() === 'success'", "class.ns-link--warning": "color() === 'warning'", "class.ns-link--danger": "color() === 'danger'" } }, ngImport: i0, template: `
|
|
5495
|
+
<a
|
|
5496
|
+
class="ns-link__anchor"
|
|
5497
|
+
[href]="disabled() ? null : href()"
|
|
5498
|
+
[target]="target() || null"
|
|
5499
|
+
[rel]="rel() || null"
|
|
5500
|
+
[attr.aria-disabled]="disabled() || null"
|
|
5501
|
+
[attr.tabindex]="disabled() ? -1 : null"
|
|
5502
|
+
(click)="onClick($event)"
|
|
5503
|
+
><ng-content
|
|
5504
|
+
/></a>
|
|
5505
|
+
`, isInline: true, styles: [":host{display:inline}.ns-link__anchor{--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-link-radius);color:var(--ns-component-link-color);font-weight:var(--ns-component-link-font-weight);text-decoration:var(--ns-component-link-decoration);text-underline-offset:var(--ns-component-link-underline-offset);transition:color var(--ns-component-link-transition-duration),opacity var(--ns-component-link-transition-duration)}.ns-link__anchor:hover:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:active:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:focus-visible{outline:var(--ns-component-link-focus-outline);outline-offset:var(--ns-component-link-focus-offset)}:host(.ns-link--disabled) .ns-link__anchor{cursor:not-allowed;color:var(--ns-component-link-disabled-color)}:host(.ns-link--success) .ns-link__anchor{color:var(--ns-component-link-success-color)}:host(.ns-link--warning) .ns-link__anchor{color:var(--ns-component-link-warning-color)}:host(.ns-link--danger) .ns-link__anchor{color:var(--ns-component-link-danger-color)}@media(prefers-reduced-motion:reduce){.ns-link__anchor{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5506
|
+
}
|
|
5507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLinkComponent, decorators: [{
|
|
5508
|
+
type: Component,
|
|
5509
|
+
args: [{ selector: 'ns-link', standalone: true, template: `
|
|
5510
|
+
<a
|
|
5511
|
+
class="ns-link__anchor"
|
|
5512
|
+
[href]="disabled() ? null : href()"
|
|
5513
|
+
[target]="target() || null"
|
|
5514
|
+
[rel]="rel() || null"
|
|
5515
|
+
[attr.aria-disabled]="disabled() || null"
|
|
5516
|
+
[attr.tabindex]="disabled() ? -1 : null"
|
|
5517
|
+
(click)="onClick($event)"
|
|
5518
|
+
><ng-content
|
|
5519
|
+
/></a>
|
|
5520
|
+
`, host: {
|
|
5521
|
+
'[class.ns-link]': 'true',
|
|
5522
|
+
'[class.ns-link--disabled]': 'disabled()',
|
|
5523
|
+
'[class.ns-link--neutral]': "color() === 'neutral'",
|
|
5524
|
+
'[class.ns-link--primary]': "color() === 'primary'",
|
|
5525
|
+
'[class.ns-link--success]': "color() === 'success'",
|
|
5526
|
+
'[class.ns-link--warning]': "color() === 'warning'",
|
|
5527
|
+
'[class.ns-link--danger]': "color() === 'danger'"
|
|
5528
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline}.ns-link__anchor{--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-link-radius);color:var(--ns-component-link-color);font-weight:var(--ns-component-link-font-weight);text-decoration:var(--ns-component-link-decoration);text-underline-offset:var(--ns-component-link-underline-offset);transition:color var(--ns-component-link-transition-duration),opacity var(--ns-component-link-transition-duration)}.ns-link__anchor:hover:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:active:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:focus-visible{outline:var(--ns-component-link-focus-outline);outline-offset:var(--ns-component-link-focus-offset)}:host(.ns-link--disabled) .ns-link__anchor{cursor:not-allowed;color:var(--ns-component-link-disabled-color)}:host(.ns-link--success) .ns-link__anchor{color:var(--ns-component-link-success-color)}:host(.ns-link--warning) .ns-link__anchor{color:var(--ns-component-link-warning-color)}:host(.ns-link--danger) .ns-link__anchor{color:var(--ns-component-link-danger-color)}@media(prefers-reduced-motion:reduce){.ns-link__anchor{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5529
|
+
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5530
|
+
|
|
5531
|
+
class NsMenuItemComponent {
|
|
5532
|
+
element = inject((ElementRef));
|
|
5533
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5534
|
+
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
5535
|
+
activated = output();
|
|
5536
|
+
/** Roving-tabindex state, driven by the parent `ns-menu`. */
|
|
5537
|
+
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
5538
|
+
activate() {
|
|
5539
|
+
if (this.disabled()) {
|
|
5540
|
+
return;
|
|
5541
|
+
}
|
|
5542
|
+
this.activated.emit();
|
|
5543
|
+
}
|
|
5544
|
+
onSpace(event) {
|
|
5545
|
+
event.preventDefault();
|
|
5546
|
+
this.activate();
|
|
5547
|
+
}
|
|
5548
|
+
focus() {
|
|
5549
|
+
this.element.nativeElement.focus();
|
|
5550
|
+
}
|
|
5551
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5552
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsMenuItemComponent, isStandalone: true, selector: "ns-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "activate()", "keydown.enter": "activate()", "keydown.space": "onSpace($event)" }, properties: { "class.ns-menu-item": "true", "class.ns-menu-item--disabled": "disabled()", "class.ns-menu-item--neutral": "color() === 'neutral'", "class.ns-menu-item--primary": "color() === 'primary'", "class.ns-menu-item--success": "color() === 'success'", "class.ns-menu-item--warning": "color() === 'warning'", "class.ns-menu-item--danger": "color() === 'danger'", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "disabled() ? null : active() ? 0 : -1" } }, ngImport: i0, template: `
|
|
5553
|
+
<span class="ns-menu-item__icon"
|
|
5554
|
+
><ng-content select="[menu-item-icon]"
|
|
5555
|
+
/></span>
|
|
5556
|
+
<span class="ns-menu-item__label"><ng-content /></span>
|
|
5557
|
+
`, isInline: true, styles: [":host{display:flex;cursor:pointer;align-items:center;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-menu-item-gap);padding-block:var(--ns-component-menu-item-padding-block);padding-inline:var(--ns-component-menu-item-padding-inline);border-radius:var(--ns-component-menu-item-radius);font-size:var(--ns-component-menu-item-font-size);color:var(--ns-component-menu-item-color);transition-duration:var(--ns-component-menu-transition-duration)}:host:hover,:host:focus-visible{background:var(--ns-component-menu-item-background-hover);color:var(--ns-component-menu-item-color-hover)}:host:focus-visible{box-shadow:var(--ns-component-menu-item-focus-shadow)}:host(.ns-menu-item--neutral){color:var(--ns-component-menu-item-color)}:host(.ns-menu-item--primary){color:var(--ns-component-menu-item-color-primary)}:host(.ns-menu-item--success){color:var(--ns-component-menu-item-color-success)}:host(.ns-menu-item--warning){color:var(--ns-component-menu-item-color-warning)}:host(.ns-menu-item--danger){color:var(--ns-component-menu-item-color-danger)}:host(.ns-menu-item--danger):hover,:host(.ns-menu-item--danger):focus-visible{background:var(--ns-component-menu-item-background-hover-danger);color:var(--ns-component-menu-item-color-danger)}:host(.ns-menu-item--disabled){pointer-events:none;cursor:not-allowed;opacity:60%;color:var(--ns-component-menu-item-disabled-color)}.ns-menu-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-menu-item__icon:empty{display:none}.ns-menu-item__label{min-width:0px;flex:1}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5558
|
+
}
|
|
5559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuItemComponent, decorators: [{
|
|
5560
|
+
type: Component,
|
|
5561
|
+
args: [{ selector: 'ns-menu-item', standalone: true, template: `
|
|
5562
|
+
<span class="ns-menu-item__icon"
|
|
5563
|
+
><ng-content select="[menu-item-icon]"
|
|
5564
|
+
/></span>
|
|
5565
|
+
<span class="ns-menu-item__label"><ng-content /></span>
|
|
5566
|
+
`, host: {
|
|
5567
|
+
role: 'menuitem',
|
|
5568
|
+
'[class.ns-menu-item]': 'true',
|
|
5569
|
+
'[class.ns-menu-item--disabled]': 'disabled()',
|
|
5570
|
+
'[class.ns-menu-item--neutral]': "color() === 'neutral'",
|
|
5571
|
+
'[class.ns-menu-item--primary]': "color() === 'primary'",
|
|
5572
|
+
'[class.ns-menu-item--success]': "color() === 'success'",
|
|
5573
|
+
'[class.ns-menu-item--warning]': "color() === 'warning'",
|
|
5574
|
+
'[class.ns-menu-item--danger]': "color() === 'danger'",
|
|
5575
|
+
'[attr.aria-disabled]': 'disabled() || null',
|
|
5576
|
+
'[attr.tabindex]': 'disabled() ? null : active() ? 0 : -1',
|
|
5577
|
+
'(click)': 'activate()',
|
|
5578
|
+
'(keydown.enter)': 'activate()',
|
|
5579
|
+
'(keydown.space)': 'onSpace($event)'
|
|
5580
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;cursor:pointer;align-items:center;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-menu-item-gap);padding-block:var(--ns-component-menu-item-padding-block);padding-inline:var(--ns-component-menu-item-padding-inline);border-radius:var(--ns-component-menu-item-radius);font-size:var(--ns-component-menu-item-font-size);color:var(--ns-component-menu-item-color);transition-duration:var(--ns-component-menu-transition-duration)}:host:hover,:host:focus-visible{background:var(--ns-component-menu-item-background-hover);color:var(--ns-component-menu-item-color-hover)}:host:focus-visible{box-shadow:var(--ns-component-menu-item-focus-shadow)}:host(.ns-menu-item--neutral){color:var(--ns-component-menu-item-color)}:host(.ns-menu-item--primary){color:var(--ns-component-menu-item-color-primary)}:host(.ns-menu-item--success){color:var(--ns-component-menu-item-color-success)}:host(.ns-menu-item--warning){color:var(--ns-component-menu-item-color-warning)}:host(.ns-menu-item--danger){color:var(--ns-component-menu-item-color-danger)}:host(.ns-menu-item--danger):hover,:host(.ns-menu-item--danger):focus-visible{background:var(--ns-component-menu-item-background-hover-danger);color:var(--ns-component-menu-item-color-danger)}:host(.ns-menu-item--disabled){pointer-events:none;cursor:not-allowed;opacity:60%;color:var(--ns-component-menu-item-disabled-color)}.ns-menu-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-menu-item__icon:empty{display:none}.ns-menu-item__label{min-width:0px;flex:1}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5581
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
|
|
5582
|
+
|
|
5583
|
+
const NAVIGATION_KEYS = [
|
|
5584
|
+
'ArrowDown',
|
|
5585
|
+
'ArrowUp',
|
|
5586
|
+
'Home',
|
|
5587
|
+
'End'
|
|
5588
|
+
];
|
|
5589
|
+
/**
|
|
5590
|
+
* Action menu anchored to an origin element, built on `NsOverlayService`
|
|
5591
|
+
* (the same placement/dismiss/focus-trap mechanism as `ns-popover`). Items
|
|
5592
|
+
* are plain projected content (`ns-menu-item`, optionally grouped inside
|
|
5593
|
+
* `ns-menu-section`), so the menu drives a roving tabindex across them and
|
|
5594
|
+
* closes itself once one is activated.
|
|
5595
|
+
*/
|
|
5596
|
+
class NsMenuComponent {
|
|
5597
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
5598
|
+
origin = input.required(...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
|
|
5599
|
+
placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
5600
|
+
ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
5601
|
+
closed = output();
|
|
5602
|
+
items = contentChildren(NsMenuItemComponent, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
|
|
5603
|
+
element = inject((ElementRef));
|
|
5604
|
+
overlay = inject(NsOverlayService);
|
|
5605
|
+
overlayRef;
|
|
5606
|
+
viewInitialized = false;
|
|
5607
|
+
activeIndex = -1;
|
|
5608
|
+
constructor() {
|
|
5609
|
+
effect(() => {
|
|
5610
|
+
const open = this.open();
|
|
5611
|
+
if (!this.viewInitialized) {
|
|
5612
|
+
return;
|
|
5613
|
+
}
|
|
5614
|
+
open ? this.openOverlay() : this.overlayRef?.close('programmatic');
|
|
5615
|
+
});
|
|
5616
|
+
effect(() => this.syncActiveItem(this.items()));
|
|
5617
|
+
effect((onCleanup) => {
|
|
5618
|
+
const subscriptions = this.items().map((item) => item.activated.subscribe(() => this.handleItemSelect()));
|
|
5619
|
+
onCleanup(() => subscriptions.forEach((subscription) => subscription.unsubscribe()));
|
|
5620
|
+
});
|
|
5621
|
+
}
|
|
5622
|
+
ngAfterViewInit() {
|
|
5623
|
+
this.viewInitialized = true;
|
|
5624
|
+
if (this.open()) {
|
|
5625
|
+
this.openOverlay();
|
|
5626
|
+
}
|
|
5627
|
+
}
|
|
5628
|
+
ngOnDestroy() {
|
|
5629
|
+
this.overlayRef?.close('programmatic');
|
|
5630
|
+
}
|
|
5631
|
+
close() {
|
|
5632
|
+
this.open.set(false);
|
|
5633
|
+
}
|
|
5634
|
+
onKeydown(event) {
|
|
5635
|
+
const items = this.items();
|
|
5636
|
+
if (!items.length || !NAVIGATION_KEYS.includes(event.key)) {
|
|
5637
|
+
return;
|
|
5638
|
+
}
|
|
5639
|
+
const next = getNsNextNavigableIndex(items.map((item) => ({ key: 0, disabled: item.disabled() })), this.activeIndex, event.key, 'vertical');
|
|
5640
|
+
if (next >= 0 && next !== this.activeIndex) {
|
|
5641
|
+
event.preventDefault();
|
|
5642
|
+
this.focusItem(items, next);
|
|
5643
|
+
}
|
|
5644
|
+
}
|
|
5645
|
+
handleItemSelect() {
|
|
5646
|
+
this.open.set(false);
|
|
5647
|
+
}
|
|
5648
|
+
openOverlay() {
|
|
5649
|
+
if (this.overlayRef) {
|
|
5650
|
+
return;
|
|
5651
|
+
}
|
|
5652
|
+
const overlayRef = this.overlay.open({
|
|
5653
|
+
origin: this.origin(),
|
|
5654
|
+
placement: this.placement(),
|
|
5655
|
+
closeOnEscape: true,
|
|
5656
|
+
closeOnOutsidePointer: true,
|
|
5657
|
+
trapFocus: true,
|
|
5658
|
+
restoreFocus: true
|
|
5659
|
+
});
|
|
5660
|
+
overlayRef.attach(this.element.nativeElement);
|
|
5661
|
+
this.overlayRef = overlayRef;
|
|
5662
|
+
overlayRef.onClose((reason) => {
|
|
5663
|
+
if (this.overlayRef !== overlayRef) {
|
|
5664
|
+
return;
|
|
5665
|
+
}
|
|
5666
|
+
this.overlayRef = undefined;
|
|
5667
|
+
if (this.open()) {
|
|
5668
|
+
this.open.set(false);
|
|
5669
|
+
}
|
|
5670
|
+
this.closed.emit(reason);
|
|
5671
|
+
});
|
|
5672
|
+
}
|
|
5673
|
+
syncActiveItem(items) {
|
|
5674
|
+
if (!items.length) {
|
|
5675
|
+
this.activeIndex = -1;
|
|
5676
|
+
return;
|
|
5677
|
+
}
|
|
5678
|
+
if (this.activeIndex < 0 ||
|
|
5679
|
+
this.activeIndex >= items.length ||
|
|
5680
|
+
items[this.activeIndex].disabled()) {
|
|
5681
|
+
this.activeIndex = items.findIndex((item) => !item.disabled());
|
|
5682
|
+
}
|
|
5683
|
+
items.forEach((item, index) => item.active.set(index === this.activeIndex));
|
|
5684
|
+
}
|
|
5685
|
+
focusItem(items, index) {
|
|
5686
|
+
this.activeIndex = index;
|
|
5687
|
+
items.forEach((item, i) => item.active.set(i === index));
|
|
5688
|
+
items[index]?.focus();
|
|
5689
|
+
}
|
|
5690
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5691
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.21", type: NsMenuComponent, isStandalone: true, selector: "ns-menu", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { attributes: { "role": "menu" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class.ns-menu": "true", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "!open()", "attr.data-state": "open() ? 'open' : 'closed'" } }, queries: [{ propertyName: "items", predicate: NsMenuItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5692
|
+
<div class="ns-menu__header"><ng-content select="[menu-header]" /></div>
|
|
5693
|
+
<ng-content />
|
|
5694
|
+
`, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:column;min-width:var(--ns-component-menu-min-width);padding:var(--ns-component-menu-padding);gap:var(--ns-component-menu-gap);border:var(--ns-component-menu-border-width) solid var(--ns-component-menu-border-color);border-radius:var(--ns-component-menu-radius);background:var(--ns-component-menu-background);color:var(--ns-component-menu-color);box-shadow:var(--ns-component-menu-shadow);animation:ns-menu-enter var(--ns-component-menu-enter-duration) var(--ns-component-menu-enter-easing)}:host([data-state=closed]){display:none}.ns-menu__header{display:flex;align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-menu-header-gap);padding-block:var(--ns-component-menu-header-padding-block);padding-inline:var(--ns-component-menu-header-padding-inline);border-color:var(--ns-component-menu-header-border-color)}.ns-menu__header:empty{display:none;--tw-border-style: none;border-style:none;padding:0}@media(prefers-reduced-motion:reduce){:host{animation:none}}@keyframes ns-menu-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5695
|
+
}
|
|
5696
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuComponent, decorators: [{
|
|
5697
|
+
type: Component,
|
|
5698
|
+
args: [{ selector: 'ns-menu', standalone: true, template: `
|
|
5699
|
+
<div class="ns-menu__header"><ng-content select="[menu-header]" /></div>
|
|
5700
|
+
<ng-content />
|
|
5701
|
+
`, host: {
|
|
5702
|
+
role: 'menu',
|
|
5703
|
+
'[class.ns-menu]': 'true',
|
|
5704
|
+
'[attr.aria-label]': 'ariaLabel() || null',
|
|
5705
|
+
'[attr.aria-hidden]': '!open()',
|
|
5706
|
+
'[attr.data-state]': "open() ? 'open' : 'closed'",
|
|
5707
|
+
'(keydown)': 'onKeydown($event)'
|
|
5708
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:flex;flex-direction:column;min-width:var(--ns-component-menu-min-width);padding:var(--ns-component-menu-padding);gap:var(--ns-component-menu-gap);border:var(--ns-component-menu-border-width) solid var(--ns-component-menu-border-color);border-radius:var(--ns-component-menu-radius);background:var(--ns-component-menu-background);color:var(--ns-component-menu-color);box-shadow:var(--ns-component-menu-shadow);animation:ns-menu-enter var(--ns-component-menu-enter-duration) var(--ns-component-menu-enter-easing)}:host([data-state=closed]){display:none}.ns-menu__header{display:flex;align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-menu-header-gap);padding-block:var(--ns-component-menu-header-padding-block);padding-inline:var(--ns-component-menu-header-padding-inline);border-color:var(--ns-component-menu-header-border-color)}.ns-menu__header:empty{display:none;--tw-border-style: none;border-style:none;padding:0}@media(prefers-reduced-motion:reduce){:host{animation:none}}@keyframes ns-menu-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5709
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
5710
|
+
|
|
5711
|
+
/**
|
|
5712
|
+
* Visual separator between `ns-menu-item` groups. Consumers who prefer the
|
|
5713
|
+
* native element can also write `<hr ns-menu-divider>` directly; both forms
|
|
5714
|
+
* resolve to the same host styling.
|
|
5715
|
+
*/
|
|
5716
|
+
class NsMenuDividerComponent {
|
|
5717
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5718
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsMenuDividerComponent, isStandalone: true, selector: "ns-menu-divider, hr[ns-menu-divider]", host: { attributes: { "role": "separator" }, properties: { "class.ns-menu-divider": "true" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;--tw-border-style: none;border-style:none;block-size:var(--ns-component-menu-border-width);background:var(--ns-component-menu-divider-color);margin-block:var(--ns-component-menu-section-label-padding-block)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5719
|
+
}
|
|
5720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuDividerComponent, decorators: [{
|
|
5721
|
+
type: Component,
|
|
5722
|
+
args: [{ selector: 'ns-menu-divider, hr[ns-menu-divider]', standalone: true, template: '', host: {
|
|
5723
|
+
role: 'separator',
|
|
5724
|
+
'[class.ns-menu-divider]': 'true'
|
|
5725
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--tw-border-style: none;border-style:none;block-size:var(--ns-component-menu-border-width);background:var(--ns-component-menu-divider-color);margin-block:var(--ns-component-menu-section-label-padding-block)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5726
|
+
}] });
|
|
5727
|
+
|
|
5728
|
+
class NsMenuSectionComponent {
|
|
5729
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5730
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsMenuSectionComponent, isStandalone: true, selector: "ns-menu-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class.ns-menu-section": "true", "attr.aria-label": "label() || null" } }, ngImport: i0, template: `
|
|
5732
|
+
@if (label()) {
|
|
5733
|
+
<p class="ns-menu-section__label">{{ label() }}</p>
|
|
5734
|
+
}
|
|
5735
|
+
<ng-content />
|
|
5736
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column}.ns-menu-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-menu-section-label-color);font-size:var(--ns-component-menu-section-label-font-size);font-weight:var(--ns-component-menu-section-label-font-weight);padding-block:var(--ns-component-menu-section-label-padding-block);padding-inline:var(--ns-component-menu-section-label-padding-inline)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4816
5737
|
}
|
|
4817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type:
|
|
5738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsMenuSectionComponent, decorators: [{
|
|
4818
5739
|
type: Component,
|
|
4819
|
-
args: [{ selector: 'ns-
|
|
4820
|
-
|
|
4821
|
-
class="ns-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
[rel]="rel() || null"
|
|
4825
|
-
[attr.aria-disabled]="disabled() || null"
|
|
4826
|
-
[attr.tabindex]="disabled() ? -1 : null"
|
|
4827
|
-
(click)="onClick($event)"
|
|
4828
|
-
><ng-content
|
|
4829
|
-
/></a>
|
|
5740
|
+
args: [{ selector: 'ns-menu-section', standalone: true, template: `
|
|
5741
|
+
@if (label()) {
|
|
5742
|
+
<p class="ns-menu-section__label">{{ label() }}</p>
|
|
5743
|
+
}
|
|
5744
|
+
<ng-content />
|
|
4830
5745
|
`, host: {
|
|
4831
|
-
|
|
4832
|
-
'[class.ns-
|
|
4833
|
-
'[
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
'[class.ns-link--warning]': "color() === 'warning'",
|
|
4837
|
-
'[class.ns-link--danger]': "color() === 'danger'"
|
|
4838
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline}.ns-link__anchor{--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-link-radius);color:var(--ns-component-link-color);font-weight:var(--ns-component-link-font-weight);text-decoration:var(--ns-component-link-decoration);text-underline-offset:var(--ns-component-link-underline-offset);transition:color var(--ns-component-link-transition-duration),opacity var(--ns-component-link-transition-duration)}.ns-link__anchor:hover:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:active:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:focus-visible{outline:var(--ns-component-link-focus-outline);outline-offset:var(--ns-component-link-focus-offset)}:host(.ns-link--disabled) .ns-link__anchor{cursor:not-allowed;color:var(--ns-component-link-disabled-color)}:host(.ns-link--success) .ns-link__anchor{color:var(--ns-component-link-success-color)}:host(.ns-link--warning) .ns-link__anchor{color:var(--ns-component-link-warning-color)}:host(.ns-link--danger) .ns-link__anchor{color:var(--ns-component-link-danger-color)}@media(prefers-reduced-motion:reduce){.ns-link__anchor{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4839
|
-
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5746
|
+
role: 'group',
|
|
5747
|
+
'[class.ns-menu-section]': 'true',
|
|
5748
|
+
'[attr.aria-label]': 'label() || null'
|
|
5749
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column}.ns-menu-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-menu-section-label-color);font-size:var(--ns-component-menu-section-label-font-size);font-weight:var(--ns-component-menu-section-label-font-weight);padding-block:var(--ns-component-menu-section-label-padding-block);padding-inline:var(--ns-component-menu-section-label-padding-inline)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5750
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
4840
5751
|
|
|
4841
5752
|
class NsMeterComponent {
|
|
4842
5753
|
value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
@@ -5002,7 +5913,7 @@ class NsModalComponent {
|
|
|
5002
5913
|
<ng-content select="[modal-footer]" />
|
|
5003
5914
|
</footer>
|
|
5004
5915
|
</section>
|
|
5005
|
-
`, isInline: true, styles: ["@layer properties;:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ns-semantic-common-font-body);padding:var(--ns-component-modal-margin)}:host([data-state=closed]){display:none}.ns-modal__backdrop{position:fixed;inset:0;background:var(--ns-component-modal-backdrop);opacity:var(--ns-component-modal-backdrop-opacity)}.ns-modal__dialog{position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden;
|
|
5916
|
+
`, isInline: true, styles: ["@layer properties;:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ns-semantic-common-font-body);padding:var(--ns-component-modal-margin)}:host([data-state=closed]){display:none}.ns-modal__backdrop{position:fixed;inset:0;background:var(--ns-component-modal-backdrop);opacity:var(--ns-component-modal-backdrop-opacity)}.ns-modal__dialog{position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden;max-width:var(--ns-component-modal-width);max-height:calc(100dvh - var(--ns-component-modal-viewport-inset));border:var(--ns-component-modal-border-width) solid var(--ns-component-modal-border-color);border-radius:var(--ns-component-modal-radius);background:var(--ns-component-modal-background);color:var(--ns-component-modal-color);box-shadow:var(--ns-component-modal-shadow);animation:ns-modal-enter var(--ns-component-modal-enter-duration) var(--ns-component-modal-enter-easing)}.ns-modal__dialog--sm{max-width:min(var(--ns-component-modal-width),var(--ns-component-modal-width-sm))}.ns-modal__dialog--lg{max-width:var(--ns-component-modal-width-lg)}.ns-modal__dialog--xl{max-width:var(--ns-component-modal-width-xl)}.ns-modal__header,.ns-modal__footer{display:flex;align-items:center;padding-inline:var(--ns-component-modal-padding)}.ns-modal__header{justify-content:space-between;gap:calc(var(--ns-primitive-space-1) * 4);padding-block:var(--ns-component-modal-header-padding-block-start) var(--ns-component-modal-header-padding-block-end)}.ns-modal__footer{flex-wrap:wrap;justify-content:flex-end;border-top-style:var(--tw-border-style);border-top-width:1px;gap:var(--ns-component-modal-footer-gap);padding-block:var(--ns-component-modal-footer-padding-block);border-color:var(--ns-component-modal-footer-border-color)}.ns-modal__footer:empty{display:none;border:none}.ns-modal__body{min-height:0px;overflow:auto;padding-inline:var(--ns-component-modal-padding);padding-block:var(--ns-component-modal-body-padding-block-start) var(--ns-component-modal-body-padding-block-end)}.ns-modal__title{margin:0;font-size:var(--ns-semantic-common-text-md);font-weight:var(--ns-semantic-common-font-weight-semibold);line-height:var(--ns-semantic-common-line-height-normal)}.ns-modal__heading{min-width:0px}.ns-modal__heading ::ng-deep [modal-description]{margin-top:var(--ns-primitive-space-1);margin-bottom:0;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-modal-description-color);font-size:var(--ns-component-modal-description-font-size)}.ns-modal__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;font-size:1.5rem;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);inline-size:var(--ns-semantic-common-size-control-md);block-size:var(--ns-semantic-common-size-control-md);border-radius:var(--ns-component-modal-close-radius);color:inherit}.ns-modal__close:hover{background:var(--ns-component-modal-close-background-hover)}.ns-modal__close:focus-visible{box-shadow:var(--ns-component-modal-close-focus-shadow)}@keyframes ns-modal-enter{0%{opacity:0;transform:scale(.97) translateY(var(--ns-component-modal-footer-gap))}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.ns-modal__dialog,.ns-modal__close{animation:none;transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5006
5917
|
}
|
|
5007
5918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsModalComponent, decorators: [{
|
|
5008
5919
|
type: Component,
|
|
@@ -5049,7 +5960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5049
5960
|
`, host: {
|
|
5050
5961
|
'[class.ns-modal]': 'true',
|
|
5051
5962
|
'[attr.data-state]': "isOpen() ? 'open' : 'closed'"
|
|
5052
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ns-semantic-common-font-body);padding:var(--ns-component-modal-margin)}:host([data-state=closed]){display:none}.ns-modal__backdrop{position:fixed;inset:0;background:var(--ns-component-modal-backdrop);opacity:var(--ns-component-modal-backdrop-opacity)}.ns-modal__dialog{position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden;
|
|
5963
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ns-semantic-common-font-body);padding:var(--ns-component-modal-margin)}:host([data-state=closed]){display:none}.ns-modal__backdrop{position:fixed;inset:0;background:var(--ns-component-modal-backdrop);opacity:var(--ns-component-modal-backdrop-opacity)}.ns-modal__dialog{position:relative;display:flex;width:100%;flex-direction:column;overflow:hidden;max-width:var(--ns-component-modal-width);max-height:calc(100dvh - var(--ns-component-modal-viewport-inset));border:var(--ns-component-modal-border-width) solid var(--ns-component-modal-border-color);border-radius:var(--ns-component-modal-radius);background:var(--ns-component-modal-background);color:var(--ns-component-modal-color);box-shadow:var(--ns-component-modal-shadow);animation:ns-modal-enter var(--ns-component-modal-enter-duration) var(--ns-component-modal-enter-easing)}.ns-modal__dialog--sm{max-width:min(var(--ns-component-modal-width),var(--ns-component-modal-width-sm))}.ns-modal__dialog--lg{max-width:var(--ns-component-modal-width-lg)}.ns-modal__dialog--xl{max-width:var(--ns-component-modal-width-xl)}.ns-modal__header,.ns-modal__footer{display:flex;align-items:center;padding-inline:var(--ns-component-modal-padding)}.ns-modal__header{justify-content:space-between;gap:calc(var(--ns-primitive-space-1) * 4);padding-block:var(--ns-component-modal-header-padding-block-start) var(--ns-component-modal-header-padding-block-end)}.ns-modal__footer{flex-wrap:wrap;justify-content:flex-end;border-top-style:var(--tw-border-style);border-top-width:1px;gap:var(--ns-component-modal-footer-gap);padding-block:var(--ns-component-modal-footer-padding-block);border-color:var(--ns-component-modal-footer-border-color)}.ns-modal__footer:empty{display:none;border:none}.ns-modal__body{min-height:0px;overflow:auto;padding-inline:var(--ns-component-modal-padding);padding-block:var(--ns-component-modal-body-padding-block-start) var(--ns-component-modal-body-padding-block-end)}.ns-modal__title{margin:0;font-size:var(--ns-semantic-common-text-md);font-weight:var(--ns-semantic-common-font-weight-semibold);line-height:var(--ns-semantic-common-line-height-normal)}.ns-modal__heading{min-width:0px}.ns-modal__heading ::ng-deep [modal-description]{margin-top:var(--ns-primitive-space-1);margin-bottom:0;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-modal-description-color);font-size:var(--ns-component-modal-description-font-size)}.ns-modal__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;font-size:1.5rem;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);inline-size:var(--ns-semantic-common-size-control-md);block-size:var(--ns-semantic-common-size-control-md);border-radius:var(--ns-component-modal-close-radius);color:inherit}.ns-modal__close:hover{background:var(--ns-component-modal-close-background-hover)}.ns-modal__close:focus-visible{box-shadow:var(--ns-component-modal-close-focus-shadow)}@keyframes ns-modal-enter{0%{opacity:0;transform:scale(.97) translateY(var(--ns-component-modal-footer-gap))}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.ns-modal__dialog,.ns-modal__close{animation:none;transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5053
5964
|
}], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], contentComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentComponent", required: false }] }], contentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentInputs", required: false }] }], contentHost: [{
|
|
5054
5965
|
type: ViewChild,
|
|
5055
5966
|
args: ['contentHost', { read: ViewContainerRef }]
|
|
@@ -5100,6 +6011,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5100
6011
|
args: [{ providedIn: 'root' }]
|
|
5101
6012
|
}] });
|
|
5102
6013
|
|
|
6014
|
+
/**
|
|
6015
|
+
* Companion to `ns-pagination` for feeds that grow with a "load more" action
|
|
6016
|
+
* instead of numbered pages. Kept as a separate component because its
|
|
6017
|
+
* template (a status line plus a single button) has nothing in common with
|
|
6018
|
+
* `ns-pagination`'s page-number navigation.
|
|
6019
|
+
*/
|
|
6020
|
+
class NsLoadMoreComponent {
|
|
6021
|
+
shown = input.required(...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
|
|
6022
|
+
total = input.required(...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
6023
|
+
label = input('Mostrando {shown} de {total} resultados', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6024
|
+
loadMoreLabel = input('Cargar más', ...(ngDevMode ? [{ debugName: "loadMoreLabel" }] : /* istanbul ignore next */ []));
|
|
6025
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6026
|
+
loadMore = output();
|
|
6027
|
+
hasMore = computed(() => this.shown() < this.total(), ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
|
|
6028
|
+
statusText = computed(() => this.label()
|
|
6029
|
+
.replace('{shown}', String(this.shown()))
|
|
6030
|
+
.replace('{total}', String(this.total())), ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
|
|
6031
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLoadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6032
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsLoadMoreComponent, isStandalone: true, selector: "ns-load-more", inputs: { shown: { classPropertyName: "shown", publicName: "shown", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore" }, host: { properties: { "class.ns-load-more": "true" } }, ngImport: i0, template: `
|
|
6033
|
+
<p class="ns-load-more__status">{{ statusText() }}</p>
|
|
6034
|
+
@if (hasMore()) {
|
|
6035
|
+
<ns-button
|
|
6036
|
+
class="ns-load-more__action"
|
|
6037
|
+
type="button"
|
|
6038
|
+
variant="secondary"
|
|
6039
|
+
[loading]="loading()"
|
|
6040
|
+
(click)="loadMore.emit()"
|
|
6041
|
+
>
|
|
6042
|
+
{{ loadMoreLabel() }}
|
|
6043
|
+
</ns-button>
|
|
6044
|
+
}
|
|
6045
|
+
`, isInline: true, styles: [":host.ns-load-more{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ns-component-load-more-gap);padding-block:var(--ns-component-load-more-padding-block)}.ns-load-more__status{margin:0;color:var(--ns-component-load-more-color);font-size:var(--ns-component-load-more-font-size)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "ariaLabel", "block", "disabled", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6046
|
+
}
|
|
6047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLoadMoreComponent, decorators: [{
|
|
6048
|
+
type: Component,
|
|
6049
|
+
args: [{ selector: 'ns-load-more', standalone: true, imports: [NsButtonComponent], template: `
|
|
6050
|
+
<p class="ns-load-more__status">{{ statusText() }}</p>
|
|
6051
|
+
@if (hasMore()) {
|
|
6052
|
+
<ns-button
|
|
6053
|
+
class="ns-load-more__action"
|
|
6054
|
+
type="button"
|
|
6055
|
+
variant="secondary"
|
|
6056
|
+
[loading]="loading()"
|
|
6057
|
+
(click)="loadMore.emit()"
|
|
6058
|
+
>
|
|
6059
|
+
{{ loadMoreLabel() }}
|
|
6060
|
+
</ns-button>
|
|
6061
|
+
}
|
|
6062
|
+
`, host: { '[class.ns-load-more]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.ns-load-more{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ns-component-load-more-gap);padding-block:var(--ns-component-load-more-padding-block)}.ns-load-more__status{margin:0;color:var(--ns-component-load-more-color);font-size:var(--ns-component-load-more-font-size)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6063
|
+
}], propDecorators: { shown: [{ type: i0.Input, args: [{ isSignal: true, alias: "shown", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }] } });
|
|
6064
|
+
|
|
5103
6065
|
class NsPaginationComponent {
|
|
5104
6066
|
total = input.required(...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
5105
6067
|
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
@@ -5653,6 +6615,365 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5653
6615
|
args: ['innerHTML']
|
|
5654
6616
|
}] } });
|
|
5655
6617
|
|
|
6618
|
+
/**
|
|
6619
|
+
* Vertical navigation rail. `color="nav"` renders the branded blue rail
|
|
6620
|
+
* (`semantic.color.nav`/`navActive`); `color="success"` renders a neutral
|
|
6621
|
+
* surface where only the active item gets a green highlight. Descendant
|
|
6622
|
+
* `ns-side-nav-item`/`ns-side-nav-section` read the variant through
|
|
6623
|
+
* `:host-context`.
|
|
6624
|
+
*/
|
|
6625
|
+
class NsSideNavComponent {
|
|
6626
|
+
color = input('nav', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
6627
|
+
ariaLabel = input('Navegación principal', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6628
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsSideNavComponent, isStandalone: true, selector: "ns-side-nav", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-side-nav": "true", "class.ns-side-nav--nav": "color() === 'nav'", "class.ns-side-nav--success": "color() === 'success'" } }, ngImport: i0, template: `<nav class="ns-side-nav__list" [attr.aria-label]="ariaLabel()">
|
|
6630
|
+
<ng-content />
|
|
6631
|
+
</nav>`, isInline: true, styles: [":host{display:block}:host(.ns-side-nav--nav){background:var(--ns-component-side-nav-background);color:var(--ns-component-side-nav-color)}:host(.ns-side-nav--success){background:var(--ns-component-side-nav-success-background);color:var(--ns-component-side-nav-success-color)}.ns-side-nav__list{display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}:host(.ns-side-nav-section){display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}.ns-side-nav-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-side-nav-section-label-color);font-size:var(--ns-component-side-nav-section-label-font-size);font-weight:var(--ns-component-side-nav-section-label-font-weight);letter-spacing:var(--ns-component-side-nav-section-label-letter-spacing);padding-block:var(--ns-component-side-nav-section-label-padding-block);padding-inline:var(--ns-component-side-nav-section-label-padding-inline)}:host-context(.ns-side-nav--success) .ns-side-nav-section__label{color:var(--ns-component-side-nav-section-label-success-color)}.ns-side-nav-item__control{display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-align:left;text-decoration-line:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-side-nav-item-gap);padding-block:var(--ns-component-side-nav-item-padding-block);padding-inline:var(--ns-component-side-nav-item-padding-inline);border-radius:var(--ns-component-side-nav-item-radius);font-size:var(--ns-component-side-nav-item-font-size);font-weight:var(--ns-component-side-nav-item-font-weight);color:var(--ns-component-side-nav-item-color);transition-duration:var(--ns-component-side-nav-transition-duration)}.ns-side-nav-item__control:focus-visible{box-shadow:var(--ns-component-side-nav-item-focus-shadow)}:host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-background-active);color:var(--ns-component-side-nav-item-color-active)}:host-context(.ns-side-nav--success) .ns-side-nav-item__control{color:var(--ns-component-side-nav-item-success-color);padding-block:var(--ns-component-side-nav-item-padding-block-success);padding-inline:var(--ns-component-side-nav-item-padding-inline-success);border-radius:var(--ns-component-side-nav-item-radius-success)}:host-context(.ns-side-nav--success):host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-success-background-active);color:var(--ns-component-side-nav-item-success-color-active)}:host(.ns-side-nav-item--disabled) .ns-side-nav-item__control{pointer-events:none;cursor:not-allowed;opacity:60%}.ns-side-nav-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-side-nav-item__icon:empty{display:none}.ns-side-nav-item__body{display:flex;min-width:0px;flex:1;flex-direction:column}.ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-color);font-size:var(--ns-component-side-nav-item-description-font-size)}:host-context(.ns-side-nav--success) .ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-success-color)}.ns-side-nav-item__badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-inline-start:var(--ns-component-side-nav-badge-gap)}.ns-side-nav-item__badge:empty{display:none}@media(prefers-reduced-motion:reduce){.ns-side-nav-item__control{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6632
|
+
}
|
|
6633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSideNavComponent, decorators: [{
|
|
6634
|
+
type: Component,
|
|
6635
|
+
args: [{ selector: 'ns-side-nav', standalone: true, template: `<nav class="ns-side-nav__list" [attr.aria-label]="ariaLabel()">
|
|
6636
|
+
<ng-content />
|
|
6637
|
+
</nav>`, host: {
|
|
6638
|
+
'[class.ns-side-nav]': 'true',
|
|
6639
|
+
'[class.ns-side-nav--nav]': "color() === 'nav'",
|
|
6640
|
+
'[class.ns-side-nav--success]': "color() === 'success'"
|
|
6641
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host(.ns-side-nav--nav){background:var(--ns-component-side-nav-background);color:var(--ns-component-side-nav-color)}:host(.ns-side-nav--success){background:var(--ns-component-side-nav-success-background);color:var(--ns-component-side-nav-success-color)}.ns-side-nav__list{display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}:host(.ns-side-nav-section){display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}.ns-side-nav-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-side-nav-section-label-color);font-size:var(--ns-component-side-nav-section-label-font-size);font-weight:var(--ns-component-side-nav-section-label-font-weight);letter-spacing:var(--ns-component-side-nav-section-label-letter-spacing);padding-block:var(--ns-component-side-nav-section-label-padding-block);padding-inline:var(--ns-component-side-nav-section-label-padding-inline)}:host-context(.ns-side-nav--success) .ns-side-nav-section__label{color:var(--ns-component-side-nav-section-label-success-color)}.ns-side-nav-item__control{display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-align:left;text-decoration-line:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-side-nav-item-gap);padding-block:var(--ns-component-side-nav-item-padding-block);padding-inline:var(--ns-component-side-nav-item-padding-inline);border-radius:var(--ns-component-side-nav-item-radius);font-size:var(--ns-component-side-nav-item-font-size);font-weight:var(--ns-component-side-nav-item-font-weight);color:var(--ns-component-side-nav-item-color);transition-duration:var(--ns-component-side-nav-transition-duration)}.ns-side-nav-item__control:focus-visible{box-shadow:var(--ns-component-side-nav-item-focus-shadow)}:host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-background-active);color:var(--ns-component-side-nav-item-color-active)}:host-context(.ns-side-nav--success) .ns-side-nav-item__control{color:var(--ns-component-side-nav-item-success-color);padding-block:var(--ns-component-side-nav-item-padding-block-success);padding-inline:var(--ns-component-side-nav-item-padding-inline-success);border-radius:var(--ns-component-side-nav-item-radius-success)}:host-context(.ns-side-nav--success):host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-success-background-active);color:var(--ns-component-side-nav-item-success-color-active)}:host(.ns-side-nav-item--disabled) .ns-side-nav-item__control{pointer-events:none;cursor:not-allowed;opacity:60%}.ns-side-nav-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-side-nav-item__icon:empty{display:none}.ns-side-nav-item__body{display:flex;min-width:0px;flex:1;flex-direction:column}.ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-color);font-size:var(--ns-component-side-nav-item-description-font-size)}:host-context(.ns-side-nav--success) .ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-success-color)}.ns-side-nav-item__badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-inline-start:var(--ns-component-side-nav-badge-gap)}.ns-side-nav-item__badge:empty{display:none}@media(prefers-reduced-motion:reduce){.ns-side-nav-item__control{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6642
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
6643
|
+
|
|
6644
|
+
/**
|
|
6645
|
+
* Renders an `<a>` when `link` (routed, via `RouterLink` composition) or
|
|
6646
|
+
* `href` (plain external navigation) is provided, and a `<button>`
|
|
6647
|
+
* otherwise — so a purely programmatic item (e.g. one that opens a panel)
|
|
6648
|
+
* still gets correct semantics and keyboard behavior for free.
|
|
6649
|
+
*/
|
|
6650
|
+
class NsSideNavItemComponent {
|
|
6651
|
+
href = input(undefined, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
6652
|
+
link = input(undefined, ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
|
|
6653
|
+
active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6654
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6655
|
+
description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
6656
|
+
activated = output();
|
|
6657
|
+
onActivate(event) {
|
|
6658
|
+
if (this.disabled()) {
|
|
6659
|
+
event.preventDefault();
|
|
6660
|
+
return;
|
|
6661
|
+
}
|
|
6662
|
+
this.activated.emit();
|
|
6663
|
+
}
|
|
6664
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSideNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6665
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsSideNavItemComponent, isStandalone: true, selector: "ns-side-nav-item", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { properties: { "class.ns-side-nav-item": "true", "class.ns-side-nav-item--active": "active()", "class.ns-side-nav-item--disabled": "disabled()" } }, ngImport: i0, template: `
|
|
6666
|
+
<ng-template #content>
|
|
6667
|
+
<span class="ns-side-nav-item__icon"
|
|
6668
|
+
><ng-content select="[side-nav-item-icon]"
|
|
6669
|
+
/></span>
|
|
6670
|
+
<span class="ns-side-nav-item__body">
|
|
6671
|
+
<span class="ns-side-nav-item__label"><ng-content /></span>
|
|
6672
|
+
@if (description()) {
|
|
6673
|
+
<span class="ns-side-nav-item__description">{{ description() }}</span>
|
|
6674
|
+
}
|
|
6675
|
+
</span>
|
|
6676
|
+
<span class="ns-side-nav-item__badge"
|
|
6677
|
+
><ng-content select="[side-nav-item-badge]"
|
|
6678
|
+
/></span>
|
|
6679
|
+
</ng-template>
|
|
6680
|
+
@if (link()) {
|
|
6681
|
+
<a
|
|
6682
|
+
class="ns-side-nav-item__control"
|
|
6683
|
+
[routerLink]="link()"
|
|
6684
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
6685
|
+
[attr.aria-disabled]="disabled() || null"
|
|
6686
|
+
(click)="onActivate($event)"
|
|
6687
|
+
>
|
|
6688
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6689
|
+
</a>
|
|
6690
|
+
} @else if (href()) {
|
|
6691
|
+
<a
|
|
6692
|
+
class="ns-side-nav-item__control"
|
|
6693
|
+
[href]="href()"
|
|
6694
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
6695
|
+
[attr.aria-disabled]="disabled() || null"
|
|
6696
|
+
(click)="onActivate($event)"
|
|
6697
|
+
>
|
|
6698
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6699
|
+
</a>
|
|
6700
|
+
} @else {
|
|
6701
|
+
<button
|
|
6702
|
+
class="ns-side-nav-item__control"
|
|
6703
|
+
type="button"
|
|
6704
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
6705
|
+
[disabled]="disabled()"
|
|
6706
|
+
(click)="onActivate($event)"
|
|
6707
|
+
>
|
|
6708
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6709
|
+
</button>
|
|
6710
|
+
}
|
|
6711
|
+
`, isInline: true, styles: [":host{display:block}:host(.ns-side-nav--nav){background:var(--ns-component-side-nav-background);color:var(--ns-component-side-nav-color)}:host(.ns-side-nav--success){background:var(--ns-component-side-nav-success-background);color:var(--ns-component-side-nav-success-color)}.ns-side-nav__list{display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}:host(.ns-side-nav-section){display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}.ns-side-nav-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-side-nav-section-label-color);font-size:var(--ns-component-side-nav-section-label-font-size);font-weight:var(--ns-component-side-nav-section-label-font-weight);letter-spacing:var(--ns-component-side-nav-section-label-letter-spacing);padding-block:var(--ns-component-side-nav-section-label-padding-block);padding-inline:var(--ns-component-side-nav-section-label-padding-inline)}:host-context(.ns-side-nav--success) .ns-side-nav-section__label{color:var(--ns-component-side-nav-section-label-success-color)}.ns-side-nav-item__control{display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-align:left;text-decoration-line:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-side-nav-item-gap);padding-block:var(--ns-component-side-nav-item-padding-block);padding-inline:var(--ns-component-side-nav-item-padding-inline);border-radius:var(--ns-component-side-nav-item-radius);font-size:var(--ns-component-side-nav-item-font-size);font-weight:var(--ns-component-side-nav-item-font-weight);color:var(--ns-component-side-nav-item-color);transition-duration:var(--ns-component-side-nav-transition-duration)}.ns-side-nav-item__control:focus-visible{box-shadow:var(--ns-component-side-nav-item-focus-shadow)}:host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-background-active);color:var(--ns-component-side-nav-item-color-active)}:host-context(.ns-side-nav--success) .ns-side-nav-item__control{color:var(--ns-component-side-nav-item-success-color);padding-block:var(--ns-component-side-nav-item-padding-block-success);padding-inline:var(--ns-component-side-nav-item-padding-inline-success);border-radius:var(--ns-component-side-nav-item-radius-success)}:host-context(.ns-side-nav--success):host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-success-background-active);color:var(--ns-component-side-nav-item-success-color-active)}:host(.ns-side-nav-item--disabled) .ns-side-nav-item__control{pointer-events:none;cursor:not-allowed;opacity:60%}.ns-side-nav-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-side-nav-item__icon:empty{display:none}.ns-side-nav-item__body{display:flex;min-width:0px;flex:1;flex-direction:column}.ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-color);font-size:var(--ns-component-side-nav-item-description-font-size)}:host-context(.ns-side-nav--success) .ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-success-color)}.ns-side-nav-item__badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-inline-start:var(--ns-component-side-nav-badge-gap)}.ns-side-nav-item__badge:empty{display:none}@media(prefers-reduced-motion:reduce){.ns-side-nav-item__control{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6712
|
+
}
|
|
6713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSideNavItemComponent, decorators: [{
|
|
6714
|
+
type: Component,
|
|
6715
|
+
args: [{ selector: 'ns-side-nav-item', standalone: true, imports: [RouterLink, NgTemplateOutlet], template: `
|
|
6716
|
+
<ng-template #content>
|
|
6717
|
+
<span class="ns-side-nav-item__icon"
|
|
6718
|
+
><ng-content select="[side-nav-item-icon]"
|
|
6719
|
+
/></span>
|
|
6720
|
+
<span class="ns-side-nav-item__body">
|
|
6721
|
+
<span class="ns-side-nav-item__label"><ng-content /></span>
|
|
6722
|
+
@if (description()) {
|
|
6723
|
+
<span class="ns-side-nav-item__description">{{ description() }}</span>
|
|
6724
|
+
}
|
|
6725
|
+
</span>
|
|
6726
|
+
<span class="ns-side-nav-item__badge"
|
|
6727
|
+
><ng-content select="[side-nav-item-badge]"
|
|
6728
|
+
/></span>
|
|
6729
|
+
</ng-template>
|
|
6730
|
+
@if (link()) {
|
|
6731
|
+
<a
|
|
6732
|
+
class="ns-side-nav-item__control"
|
|
6733
|
+
[routerLink]="link()"
|
|
6734
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
6735
|
+
[attr.aria-disabled]="disabled() || null"
|
|
6736
|
+
(click)="onActivate($event)"
|
|
6737
|
+
>
|
|
6738
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6739
|
+
</a>
|
|
6740
|
+
} @else if (href()) {
|
|
6741
|
+
<a
|
|
6742
|
+
class="ns-side-nav-item__control"
|
|
6743
|
+
[href]="href()"
|
|
6744
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
6745
|
+
[attr.aria-disabled]="disabled() || null"
|
|
6746
|
+
(click)="onActivate($event)"
|
|
6747
|
+
>
|
|
6748
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6749
|
+
</a>
|
|
6750
|
+
} @else {
|
|
6751
|
+
<button
|
|
6752
|
+
class="ns-side-nav-item__control"
|
|
6753
|
+
type="button"
|
|
6754
|
+
[attr.aria-current]="active() ? 'page' : null"
|
|
6755
|
+
[disabled]="disabled()"
|
|
6756
|
+
(click)="onActivate($event)"
|
|
6757
|
+
>
|
|
6758
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6759
|
+
</button>
|
|
6760
|
+
}
|
|
6761
|
+
`, host: {
|
|
6762
|
+
'[class.ns-side-nav-item]': 'true',
|
|
6763
|
+
'[class.ns-side-nav-item--active]': 'active()',
|
|
6764
|
+
'[class.ns-side-nav-item--disabled]': 'disabled()'
|
|
6765
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host(.ns-side-nav--nav){background:var(--ns-component-side-nav-background);color:var(--ns-component-side-nav-color)}:host(.ns-side-nav--success){background:var(--ns-component-side-nav-success-background);color:var(--ns-component-side-nav-success-color)}.ns-side-nav__list{display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}:host(.ns-side-nav-section){display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}.ns-side-nav-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-side-nav-section-label-color);font-size:var(--ns-component-side-nav-section-label-font-size);font-weight:var(--ns-component-side-nav-section-label-font-weight);letter-spacing:var(--ns-component-side-nav-section-label-letter-spacing);padding-block:var(--ns-component-side-nav-section-label-padding-block);padding-inline:var(--ns-component-side-nav-section-label-padding-inline)}:host-context(.ns-side-nav--success) .ns-side-nav-section__label{color:var(--ns-component-side-nav-section-label-success-color)}.ns-side-nav-item__control{display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-align:left;text-decoration-line:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-side-nav-item-gap);padding-block:var(--ns-component-side-nav-item-padding-block);padding-inline:var(--ns-component-side-nav-item-padding-inline);border-radius:var(--ns-component-side-nav-item-radius);font-size:var(--ns-component-side-nav-item-font-size);font-weight:var(--ns-component-side-nav-item-font-weight);color:var(--ns-component-side-nav-item-color);transition-duration:var(--ns-component-side-nav-transition-duration)}.ns-side-nav-item__control:focus-visible{box-shadow:var(--ns-component-side-nav-item-focus-shadow)}:host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-background-active);color:var(--ns-component-side-nav-item-color-active)}:host-context(.ns-side-nav--success) .ns-side-nav-item__control{color:var(--ns-component-side-nav-item-success-color);padding-block:var(--ns-component-side-nav-item-padding-block-success);padding-inline:var(--ns-component-side-nav-item-padding-inline-success);border-radius:var(--ns-component-side-nav-item-radius-success)}:host-context(.ns-side-nav--success):host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-success-background-active);color:var(--ns-component-side-nav-item-success-color-active)}:host(.ns-side-nav-item--disabled) .ns-side-nav-item__control{pointer-events:none;cursor:not-allowed;opacity:60%}.ns-side-nav-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-side-nav-item__icon:empty{display:none}.ns-side-nav-item__body{display:flex;min-width:0px;flex:1;flex-direction:column}.ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-color);font-size:var(--ns-component-side-nav-item-description-font-size)}:host-context(.ns-side-nav--success) .ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-success-color)}.ns-side-nav-item__badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-inline-start:var(--ns-component-side-nav-badge-gap)}.ns-side-nav-item__badge:empty{display:none}@media(prefers-reduced-motion:reduce){.ns-side-nav-item__control{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6766
|
+
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
|
|
6767
|
+
|
|
6768
|
+
class NsSideNavSectionComponent {
|
|
6769
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6770
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSideNavSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsSideNavSectionComponent, isStandalone: true, selector: "ns-side-nav-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-side-nav-section": "true" } }, ngImport: i0, template: `
|
|
6772
|
+
@if (label()) {
|
|
6773
|
+
<p class="ns-side-nav-section__label">{{ label() }}</p>
|
|
6774
|
+
}
|
|
6775
|
+
<ng-content />
|
|
6776
|
+
`, isInline: true, styles: [":host{display:block}:host(.ns-side-nav--nav){background:var(--ns-component-side-nav-background);color:var(--ns-component-side-nav-color)}:host(.ns-side-nav--success){background:var(--ns-component-side-nav-success-background);color:var(--ns-component-side-nav-success-color)}.ns-side-nav__list{display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}:host(.ns-side-nav-section){display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}.ns-side-nav-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-side-nav-section-label-color);font-size:var(--ns-component-side-nav-section-label-font-size);font-weight:var(--ns-component-side-nav-section-label-font-weight);letter-spacing:var(--ns-component-side-nav-section-label-letter-spacing);padding-block:var(--ns-component-side-nav-section-label-padding-block);padding-inline:var(--ns-component-side-nav-section-label-padding-inline)}:host-context(.ns-side-nav--success) .ns-side-nav-section__label{color:var(--ns-component-side-nav-section-label-success-color)}.ns-side-nav-item__control{display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-align:left;text-decoration-line:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-side-nav-item-gap);padding-block:var(--ns-component-side-nav-item-padding-block);padding-inline:var(--ns-component-side-nav-item-padding-inline);border-radius:var(--ns-component-side-nav-item-radius);font-size:var(--ns-component-side-nav-item-font-size);font-weight:var(--ns-component-side-nav-item-font-weight);color:var(--ns-component-side-nav-item-color);transition-duration:var(--ns-component-side-nav-transition-duration)}.ns-side-nav-item__control:focus-visible{box-shadow:var(--ns-component-side-nav-item-focus-shadow)}:host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-background-active);color:var(--ns-component-side-nav-item-color-active)}:host-context(.ns-side-nav--success) .ns-side-nav-item__control{color:var(--ns-component-side-nav-item-success-color);padding-block:var(--ns-component-side-nav-item-padding-block-success);padding-inline:var(--ns-component-side-nav-item-padding-inline-success);border-radius:var(--ns-component-side-nav-item-radius-success)}:host-context(.ns-side-nav--success):host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-success-background-active);color:var(--ns-component-side-nav-item-success-color-active)}:host(.ns-side-nav-item--disabled) .ns-side-nav-item__control{pointer-events:none;cursor:not-allowed;opacity:60%}.ns-side-nav-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-side-nav-item__icon:empty{display:none}.ns-side-nav-item__body{display:flex;min-width:0px;flex:1;flex-direction:column}.ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-color);font-size:var(--ns-component-side-nav-item-description-font-size)}:host-context(.ns-side-nav--success) .ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-success-color)}.ns-side-nav-item__badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-inline-start:var(--ns-component-side-nav-badge-gap)}.ns-side-nav-item__badge:empty{display:none}@media(prefers-reduced-motion:reduce){.ns-side-nav-item__control{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6777
|
+
}
|
|
6778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSideNavSectionComponent, decorators: [{
|
|
6779
|
+
type: Component,
|
|
6780
|
+
args: [{ selector: 'ns-side-nav-section', standalone: true, template: `
|
|
6781
|
+
@if (label()) {
|
|
6782
|
+
<p class="ns-side-nav-section__label">{{ label() }}</p>
|
|
6783
|
+
}
|
|
6784
|
+
<ng-content />
|
|
6785
|
+
`, host: { '[class.ns-side-nav-section]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host(.ns-side-nav--nav){background:var(--ns-component-side-nav-background);color:var(--ns-component-side-nav-color)}:host(.ns-side-nav--success){background:var(--ns-component-side-nav-success-background);color:var(--ns-component-side-nav-success-color)}.ns-side-nav__list{display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}:host(.ns-side-nav-section){display:flex;flex-direction:column;gap:var(--ns-component-side-nav-gap)}.ns-side-nav-section__label{margin:0;text-transform:uppercase;color:var(--ns-component-side-nav-section-label-color);font-size:var(--ns-component-side-nav-section-label-font-size);font-weight:var(--ns-component-side-nav-section-label-font-weight);letter-spacing:var(--ns-component-side-nav-section-label-letter-spacing);padding-block:var(--ns-component-side-nav-section-label-padding-block);padding-inline:var(--ns-component-side-nav-section-label-padding-inline)}:host-context(.ns-side-nav--success) .ns-side-nav-section__label{color:var(--ns-component-side-nav-section-label-success-color)}.ns-side-nav-item__control{display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-align:left;text-decoration-line:none;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;gap:var(--ns-component-side-nav-item-gap);padding-block:var(--ns-component-side-nav-item-padding-block);padding-inline:var(--ns-component-side-nav-item-padding-inline);border-radius:var(--ns-component-side-nav-item-radius);font-size:var(--ns-component-side-nav-item-font-size);font-weight:var(--ns-component-side-nav-item-font-weight);color:var(--ns-component-side-nav-item-color);transition-duration:var(--ns-component-side-nav-transition-duration)}.ns-side-nav-item__control:focus-visible{box-shadow:var(--ns-component-side-nav-item-focus-shadow)}:host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-background-active);color:var(--ns-component-side-nav-item-color-active)}:host-context(.ns-side-nav--success) .ns-side-nav-item__control{color:var(--ns-component-side-nav-item-success-color);padding-block:var(--ns-component-side-nav-item-padding-block-success);padding-inline:var(--ns-component-side-nav-item-padding-inline-success);border-radius:var(--ns-component-side-nav-item-radius-success)}:host-context(.ns-side-nav--success):host(.ns-side-nav-item--active) .ns-side-nav-item__control{background:var(--ns-component-side-nav-item-success-background-active);color:var(--ns-component-side-nav-item-success-color-active)}:host(.ns-side-nav-item--disabled) .ns-side-nav-item__control{pointer-events:none;cursor:not-allowed;opacity:60%}.ns-side-nav-item__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ns-side-nav-item__icon:empty{display:none}.ns-side-nav-item__body{display:flex;min-width:0px;flex:1;flex-direction:column}.ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-color);font-size:var(--ns-component-side-nav-item-description-font-size)}:host-context(.ns-side-nav--success) .ns-side-nav-item__description{color:var(--ns-component-side-nav-item-description-success-color)}.ns-side-nav-item__badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-inline-start:var(--ns-component-side-nav-badge-gap)}.ns-side-nav-item__badge:empty{display:none}@media(prefers-reduced-motion:reduce){.ns-side-nav-item__control{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6786
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
6787
|
+
|
|
6788
|
+
const DELTA_GLYPH = {
|
|
6789
|
+
up: '↗',
|
|
6790
|
+
down: '↘',
|
|
6791
|
+
neutral: '→'
|
|
6792
|
+
};
|
|
6793
|
+
/**
|
|
6794
|
+
* Dashboard metric card: label, formatted value (with an optional muted
|
|
6795
|
+
* suffix), and an optional delta pill (`up` / `down` / `neutral`) with a
|
|
6796
|
+
* caption and a secondary hint. `variant="dark"` renders the emphasis
|
|
6797
|
+
* surface used for headline metrics; `variant="compact"` renders a smaller
|
|
6798
|
+
* card with a smaller value size. Set `interactive` to render the card as a
|
|
6799
|
+
* `<button>` and receive `(activated)` instead of a static `<div>`.
|
|
6800
|
+
*
|
|
6801
|
+
* `valueTone` colors only the headline value with the matching semantic
|
|
6802
|
+
* status color (`success`/`warning`/`danger`/`info`); it is ignored on
|
|
6803
|
+
* `variant="dark"`, where the value stays white.
|
|
6804
|
+
*/
|
|
6805
|
+
class NsStatCardComponent {
|
|
6806
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6807
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6808
|
+
suffix = input(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
6809
|
+
delta = input(undefined, ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
|
|
6810
|
+
deltaTone = input('neutral', ...(ngDevMode ? [{ debugName: "deltaTone" }] : /* istanbul ignore next */ []));
|
|
6811
|
+
deltaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "deltaLabel" }] : /* istanbul ignore next */ []));
|
|
6812
|
+
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
6813
|
+
valueTone = input('default', ...(ngDevMode ? [{ debugName: "valueTone" }] : /* istanbul ignore next */ []));
|
|
6814
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
6815
|
+
interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6816
|
+
activated = output();
|
|
6817
|
+
deltaGlyph() {
|
|
6818
|
+
return DELTA_GLYPH[this.deltaTone()];
|
|
6819
|
+
}
|
|
6820
|
+
onActivate() {
|
|
6821
|
+
this.activated.emit();
|
|
6822
|
+
}
|
|
6823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsStatCardComponent, isStandalone: true, selector: "ns-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaTone: { classPropertyName: "deltaTone", publicName: "deltaTone", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, valueTone: { classPropertyName: "valueTone", publicName: "valueTone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { properties: { "class.ns-stat-card": "true", "class.ns-stat-card--default": "variant() === 'default'", "class.ns-stat-card--dark": "variant() === 'dark'", "class.ns-stat-card--compact": "variant() === 'compact'", "class.ns-stat-card--interactive": "interactive()" } }, ngImport: i0, template: `
|
|
6825
|
+
@if (interactive()) {
|
|
6826
|
+
<button
|
|
6827
|
+
type="button"
|
|
6828
|
+
class="ns-stat-card__surface"
|
|
6829
|
+
(click)="onActivate()"
|
|
6830
|
+
>
|
|
6831
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6832
|
+
</button>
|
|
6833
|
+
} @else {
|
|
6834
|
+
<div class="ns-stat-card__surface">
|
|
6835
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6836
|
+
</div>
|
|
6837
|
+
}
|
|
6838
|
+
<ng-template #content>
|
|
6839
|
+
<div class="ns-stat-card__header">
|
|
6840
|
+
<span class="ns-stat-card__label">
|
|
6841
|
+
<span class="ns-stat-card__icon"
|
|
6842
|
+
><ng-content select="[stat-card-icon]"
|
|
6843
|
+
/></span>
|
|
6844
|
+
{{ label() }}
|
|
6845
|
+
</span>
|
|
6846
|
+
</div>
|
|
6847
|
+
<div
|
|
6848
|
+
class="ns-stat-card__value"
|
|
6849
|
+
[class.ns-stat-card__value--success]="
|
|
6850
|
+
valueTone() === 'success' && variant() !== 'dark'
|
|
6851
|
+
"
|
|
6852
|
+
[class.ns-stat-card__value--warning]="
|
|
6853
|
+
valueTone() === 'warning' && variant() !== 'dark'
|
|
6854
|
+
"
|
|
6855
|
+
[class.ns-stat-card__value--danger]="
|
|
6856
|
+
valueTone() === 'danger' && variant() !== 'dark'
|
|
6857
|
+
"
|
|
6858
|
+
[class.ns-stat-card__value--info]="
|
|
6859
|
+
valueTone() === 'info' && variant() !== 'dark'
|
|
6860
|
+
"
|
|
6861
|
+
>
|
|
6862
|
+
{{ value() }}
|
|
6863
|
+
@if (suffix()) {
|
|
6864
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
6865
|
+
}
|
|
6866
|
+
</div>
|
|
6867
|
+
@if (delta() || hint()) {
|
|
6868
|
+
<div class="ns-stat-card__meta">
|
|
6869
|
+
@if (delta()) {
|
|
6870
|
+
<span
|
|
6871
|
+
class="ns-stat-card__delta"
|
|
6872
|
+
[class.ns-stat-card__delta--up]="deltaTone() === 'up'"
|
|
6873
|
+
[class.ns-stat-card__delta--down]="deltaTone() === 'down'"
|
|
6874
|
+
[class.ns-stat-card__delta--neutral]="deltaTone() === 'neutral'"
|
|
6875
|
+
>
|
|
6876
|
+
<span class="ns-stat-card__delta-icon" aria-hidden="true">{{
|
|
6877
|
+
deltaGlyph()
|
|
6878
|
+
}}</span
|
|
6879
|
+
>{{ delta() }}
|
|
6880
|
+
</span>
|
|
6881
|
+
}
|
|
6882
|
+
@if (deltaLabel()) {
|
|
6883
|
+
<span class="ns-stat-card__delta-label">{{ deltaLabel() }}</span>
|
|
6884
|
+
}
|
|
6885
|
+
@if (hint()) {
|
|
6886
|
+
<span class="ns-stat-card__hint">{{ hint() }}</span>
|
|
6887
|
+
}
|
|
6888
|
+
</div>
|
|
6889
|
+
}
|
|
6890
|
+
<div class="ns-stat-card__footer">
|
|
6891
|
+
<ng-content select="[stat-card-footer]" />
|
|
6892
|
+
</div>
|
|
6893
|
+
</ng-template>
|
|
6894
|
+
`, isInline: true, styles: ["@layer properties;:host{display:block}.ns-stat-card__surface{display:flex;width:100%;flex-direction:column;border-style:var(--tw-border-style);border-width:0px;text-align:left;gap:var(--ns-component-stat-card-gap);padding-block:var(--ns-component-stat-card-padding-block);padding-inline:var(--ns-component-stat-card-padding-inline);border:var(--ns-component-stat-card-border-width) solid var(--ns-component-stat-card-border-color);border-radius:var(--ns-component-stat-card-radius);background:var(--ns-component-stat-card-background);color:var(--ns-component-stat-card-color);box-shadow:var(--ns-component-stat-card-shadow);font-family:inherit;transition:border-color var(--ns-component-stat-card-transition-duration),box-shadow var(--ns-component-stat-card-transition-duration)}button.ns-stat-card__surface{cursor:pointer;appearance:none;--tw-outline-style: none;outline-style:none}button.ns-stat-card__surface:hover{border-color:var(--ns-component-stat-card-border-color-hover)}button.ns-stat-card__surface:focus-visible{box-shadow:var(--ns-component-stat-card-focus-shadow)}:host(.ns-stat-card--compact) .ns-stat-card__surface{padding-block:var(--ns-component-stat-card-padding-block-compact);padding-inline:var(--ns-component-stat-card-padding-inline-compact);border-radius:var(--ns-component-stat-card-radius-compact)}:host(.ns-stat-card--dark) .ns-stat-card__surface{background:var(--ns-component-stat-card-dark-background);color:var(--ns-component-stat-card-dark-color);border-color:transparent}.ns-stat-card__header{display:flex;align-items:center}.ns-stat-card__label{display:flex;align-items:center;gap:var(--ns-component-stat-card-gap);color:var(--ns-component-stat-card-label-color);font-size:var(--ns-component-stat-card-label-font-size);font-weight:var(--ns-component-stat-card-label-font-weight)}:host(.ns-stat-card--dark) .ns-stat-card__label{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;inline-size:var(--ns-component-stat-card-icon-size);block-size:var(--ns-component-stat-card-icon-size);border-radius:var(--ns-component-stat-card-icon-radius);color:var(--ns-component-stat-card-icon-color);background:var(--ns-component-stat-card-icon-color)}@supports (color: color-mix(in lab,red,red)){.ns-stat-card__icon{background:color-mix(in srgb,var(--ns-component-stat-card-icon-color) 12%,transparent)}}.ns-stat-card__icon:empty{display:none}:host(.ns-stat-card--dark) .ns-stat-card__icon{color:var(--ns-component-stat-card-dark-color);background:var(--ns-component-stat-card-dark-color)}@supports (color: color-mix(in lab,red,red)){:host(.ns-stat-card--dark) .ns-stat-card__icon{background:color-mix(in srgb,var(--ns-component-stat-card-dark-color) 18%,transparent)}}.ns-stat-card__value{display:flex;align-items:baseline;font-family:var(--ns-component-stat-card-value-font-family);font-size:var(--ns-component-stat-card-value-font-size);font-weight:var(--ns-component-stat-card-value-font-weight);line-height:var(--ns-component-stat-card-value-line-height);letter-spacing:var(--ns-component-stat-card-value-letter-spacing)}:host(.ns-stat-card--compact) .ns-stat-card__value{font-size:var(--ns-component-stat-card-value-font-size-compact);letter-spacing:var(--ns-component-stat-card-value-letter-spacing-compact)}.ns-stat-card__value--success{color:var(--ns-component-stat-card-value-tone-success-color)}.ns-stat-card__value--warning{color:var(--ns-component-stat-card-value-tone-warning-color)}.ns-stat-card__value--danger{color:var(--ns-component-stat-card-value-tone-danger-color)}.ns-stat-card__value--info{color:var(--ns-component-stat-card-value-tone-info-color)}.ns-stat-card__suffix{margin-left:var(--ns-primitive-space-1);color:var(--ns-component-stat-card-suffix-color);font-size:var(--ns-component-stat-card-suffix-font-size);font-weight:var(--ns-component-stat-card-label-font-weight)}:host(.ns-stat-card--dark) .ns-stat-card__suffix{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ns-component-stat-card-meta-gap)}.ns-stat-card__delta{display:inline-flex;align-items:center;gap:var(--ns-component-stat-card-delta-gap);padding-block:var(--ns-component-stat-card-delta-padding-block);padding-inline:var(--ns-component-stat-card-delta-padding-inline);border-radius:var(--ns-component-stat-card-delta-radius);font-size:var(--ns-component-stat-card-delta-font-size);font-weight:var(--ns-component-stat-card-delta-font-weight)}.ns-stat-card__delta--up{background:var(--ns-component-stat-card-delta-up-background);color:var(--ns-component-stat-card-delta-up-color)}.ns-stat-card__delta--down{background:var(--ns-component-stat-card-delta-down-background);color:var(--ns-component-stat-card-delta-down-color)}.ns-stat-card__delta--neutral{background:var(--ns-component-stat-card-delta-neutral-background);color:var(--ns-component-stat-card-delta-neutral-color)}.ns-stat-card__delta-label{color:var(--ns-component-stat-card-delta-label-color);font-size:var(--ns-component-stat-card-hint-font-size)}:host(.ns-stat-card--dark) .ns-stat-card__delta-label{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__hint{margin-left:auto;color:var(--ns-component-stat-card-hint-color);font-size:var(--ns-component-stat-card-hint-font-size)}:host(.ns-stat-card--dark) .ns-stat-card__hint{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__footer{display:block;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--ns-component-stat-card-footer-border-color);padding-block-start:var(--ns-component-stat-card-footer-padding-block)}.ns-stat-card__footer:empty{display:none;--tw-border-style: none;border-style:none;padding:0}@media(prefers-reduced-motion:reduce){.ns-stat-card__surface{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6895
|
+
}
|
|
6896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsStatCardComponent, decorators: [{
|
|
6897
|
+
type: Component,
|
|
6898
|
+
args: [{ selector: 'ns-stat-card', standalone: true, imports: [NgTemplateOutlet], template: `
|
|
6899
|
+
@if (interactive()) {
|
|
6900
|
+
<button
|
|
6901
|
+
type="button"
|
|
6902
|
+
class="ns-stat-card__surface"
|
|
6903
|
+
(click)="onActivate()"
|
|
6904
|
+
>
|
|
6905
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6906
|
+
</button>
|
|
6907
|
+
} @else {
|
|
6908
|
+
<div class="ns-stat-card__surface">
|
|
6909
|
+
<ng-container [ngTemplateOutlet]="content" />
|
|
6910
|
+
</div>
|
|
6911
|
+
}
|
|
6912
|
+
<ng-template #content>
|
|
6913
|
+
<div class="ns-stat-card__header">
|
|
6914
|
+
<span class="ns-stat-card__label">
|
|
6915
|
+
<span class="ns-stat-card__icon"
|
|
6916
|
+
><ng-content select="[stat-card-icon]"
|
|
6917
|
+
/></span>
|
|
6918
|
+
{{ label() }}
|
|
6919
|
+
</span>
|
|
6920
|
+
</div>
|
|
6921
|
+
<div
|
|
6922
|
+
class="ns-stat-card__value"
|
|
6923
|
+
[class.ns-stat-card__value--success]="
|
|
6924
|
+
valueTone() === 'success' && variant() !== 'dark'
|
|
6925
|
+
"
|
|
6926
|
+
[class.ns-stat-card__value--warning]="
|
|
6927
|
+
valueTone() === 'warning' && variant() !== 'dark'
|
|
6928
|
+
"
|
|
6929
|
+
[class.ns-stat-card__value--danger]="
|
|
6930
|
+
valueTone() === 'danger' && variant() !== 'dark'
|
|
6931
|
+
"
|
|
6932
|
+
[class.ns-stat-card__value--info]="
|
|
6933
|
+
valueTone() === 'info' && variant() !== 'dark'
|
|
6934
|
+
"
|
|
6935
|
+
>
|
|
6936
|
+
{{ value() }}
|
|
6937
|
+
@if (suffix()) {
|
|
6938
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
6939
|
+
}
|
|
6940
|
+
</div>
|
|
6941
|
+
@if (delta() || hint()) {
|
|
6942
|
+
<div class="ns-stat-card__meta">
|
|
6943
|
+
@if (delta()) {
|
|
6944
|
+
<span
|
|
6945
|
+
class="ns-stat-card__delta"
|
|
6946
|
+
[class.ns-stat-card__delta--up]="deltaTone() === 'up'"
|
|
6947
|
+
[class.ns-stat-card__delta--down]="deltaTone() === 'down'"
|
|
6948
|
+
[class.ns-stat-card__delta--neutral]="deltaTone() === 'neutral'"
|
|
6949
|
+
>
|
|
6950
|
+
<span class="ns-stat-card__delta-icon" aria-hidden="true">{{
|
|
6951
|
+
deltaGlyph()
|
|
6952
|
+
}}</span
|
|
6953
|
+
>{{ delta() }}
|
|
6954
|
+
</span>
|
|
6955
|
+
}
|
|
6956
|
+
@if (deltaLabel()) {
|
|
6957
|
+
<span class="ns-stat-card__delta-label">{{ deltaLabel() }}</span>
|
|
6958
|
+
}
|
|
6959
|
+
@if (hint()) {
|
|
6960
|
+
<span class="ns-stat-card__hint">{{ hint() }}</span>
|
|
6961
|
+
}
|
|
6962
|
+
</div>
|
|
6963
|
+
}
|
|
6964
|
+
<div class="ns-stat-card__footer">
|
|
6965
|
+
<ng-content select="[stat-card-footer]" />
|
|
6966
|
+
</div>
|
|
6967
|
+
</ng-template>
|
|
6968
|
+
`, host: {
|
|
6969
|
+
'[class.ns-stat-card]': 'true',
|
|
6970
|
+
'[class.ns-stat-card--default]': "variant() === 'default'",
|
|
6971
|
+
'[class.ns-stat-card--dark]': "variant() === 'dark'",
|
|
6972
|
+
'[class.ns-stat-card--compact]': "variant() === 'compact'",
|
|
6973
|
+
'[class.ns-stat-card--interactive]': 'interactive()'
|
|
6974
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:block}.ns-stat-card__surface{display:flex;width:100%;flex-direction:column;border-style:var(--tw-border-style);border-width:0px;text-align:left;gap:var(--ns-component-stat-card-gap);padding-block:var(--ns-component-stat-card-padding-block);padding-inline:var(--ns-component-stat-card-padding-inline);border:var(--ns-component-stat-card-border-width) solid var(--ns-component-stat-card-border-color);border-radius:var(--ns-component-stat-card-radius);background:var(--ns-component-stat-card-background);color:var(--ns-component-stat-card-color);box-shadow:var(--ns-component-stat-card-shadow);font-family:inherit;transition:border-color var(--ns-component-stat-card-transition-duration),box-shadow var(--ns-component-stat-card-transition-duration)}button.ns-stat-card__surface{cursor:pointer;appearance:none;--tw-outline-style: none;outline-style:none}button.ns-stat-card__surface:hover{border-color:var(--ns-component-stat-card-border-color-hover)}button.ns-stat-card__surface:focus-visible{box-shadow:var(--ns-component-stat-card-focus-shadow)}:host(.ns-stat-card--compact) .ns-stat-card__surface{padding-block:var(--ns-component-stat-card-padding-block-compact);padding-inline:var(--ns-component-stat-card-padding-inline-compact);border-radius:var(--ns-component-stat-card-radius-compact)}:host(.ns-stat-card--dark) .ns-stat-card__surface{background:var(--ns-component-stat-card-dark-background);color:var(--ns-component-stat-card-dark-color);border-color:transparent}.ns-stat-card__header{display:flex;align-items:center}.ns-stat-card__label{display:flex;align-items:center;gap:var(--ns-component-stat-card-gap);color:var(--ns-component-stat-card-label-color);font-size:var(--ns-component-stat-card-label-font-size);font-weight:var(--ns-component-stat-card-label-font-weight)}:host(.ns-stat-card--dark) .ns-stat-card__label{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;inline-size:var(--ns-component-stat-card-icon-size);block-size:var(--ns-component-stat-card-icon-size);border-radius:var(--ns-component-stat-card-icon-radius);color:var(--ns-component-stat-card-icon-color);background:var(--ns-component-stat-card-icon-color)}@supports (color: color-mix(in lab,red,red)){.ns-stat-card__icon{background:color-mix(in srgb,var(--ns-component-stat-card-icon-color) 12%,transparent)}}.ns-stat-card__icon:empty{display:none}:host(.ns-stat-card--dark) .ns-stat-card__icon{color:var(--ns-component-stat-card-dark-color);background:var(--ns-component-stat-card-dark-color)}@supports (color: color-mix(in lab,red,red)){:host(.ns-stat-card--dark) .ns-stat-card__icon{background:color-mix(in srgb,var(--ns-component-stat-card-dark-color) 18%,transparent)}}.ns-stat-card__value{display:flex;align-items:baseline;font-family:var(--ns-component-stat-card-value-font-family);font-size:var(--ns-component-stat-card-value-font-size);font-weight:var(--ns-component-stat-card-value-font-weight);line-height:var(--ns-component-stat-card-value-line-height);letter-spacing:var(--ns-component-stat-card-value-letter-spacing)}:host(.ns-stat-card--compact) .ns-stat-card__value{font-size:var(--ns-component-stat-card-value-font-size-compact);letter-spacing:var(--ns-component-stat-card-value-letter-spacing-compact)}.ns-stat-card__value--success{color:var(--ns-component-stat-card-value-tone-success-color)}.ns-stat-card__value--warning{color:var(--ns-component-stat-card-value-tone-warning-color)}.ns-stat-card__value--danger{color:var(--ns-component-stat-card-value-tone-danger-color)}.ns-stat-card__value--info{color:var(--ns-component-stat-card-value-tone-info-color)}.ns-stat-card__suffix{margin-left:var(--ns-primitive-space-1);color:var(--ns-component-stat-card-suffix-color);font-size:var(--ns-component-stat-card-suffix-font-size);font-weight:var(--ns-component-stat-card-label-font-weight)}:host(.ns-stat-card--dark) .ns-stat-card__suffix{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ns-component-stat-card-meta-gap)}.ns-stat-card__delta{display:inline-flex;align-items:center;gap:var(--ns-component-stat-card-delta-gap);padding-block:var(--ns-component-stat-card-delta-padding-block);padding-inline:var(--ns-component-stat-card-delta-padding-inline);border-radius:var(--ns-component-stat-card-delta-radius);font-size:var(--ns-component-stat-card-delta-font-size);font-weight:var(--ns-component-stat-card-delta-font-weight)}.ns-stat-card__delta--up{background:var(--ns-component-stat-card-delta-up-background);color:var(--ns-component-stat-card-delta-up-color)}.ns-stat-card__delta--down{background:var(--ns-component-stat-card-delta-down-background);color:var(--ns-component-stat-card-delta-down-color)}.ns-stat-card__delta--neutral{background:var(--ns-component-stat-card-delta-neutral-background);color:var(--ns-component-stat-card-delta-neutral-color)}.ns-stat-card__delta-label{color:var(--ns-component-stat-card-delta-label-color);font-size:var(--ns-component-stat-card-hint-font-size)}:host(.ns-stat-card--dark) .ns-stat-card__delta-label{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__hint{margin-left:auto;color:var(--ns-component-stat-card-hint-color);font-size:var(--ns-component-stat-card-hint-font-size)}:host(.ns-stat-card--dark) .ns-stat-card__hint{color:var(--ns-component-stat-card-dark-color)}.ns-stat-card__footer{display:block;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--ns-component-stat-card-footer-border-color);padding-block-start:var(--ns-component-stat-card-footer-padding-block)}.ns-stat-card__footer:empty{display:none;--tw-border-style: none;border-style:none;padding:0}@media(prefers-reduced-motion:reduce){.ns-stat-card__surface{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6975
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaTone", required: false }] }], deltaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], valueTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
|
|
6976
|
+
|
|
5656
6977
|
class TemplateDirective {
|
|
5657
6978
|
name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'nsTemplate' });
|
|
5658
6979
|
styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
@@ -5692,11 +7013,15 @@ const Arvisfy = {
|
|
|
5692
7013
|
0: '#FFFFFF',
|
|
5693
7014
|
50: '#F7F8FA',
|
|
5694
7015
|
100: '#F5F5F4',
|
|
7016
|
+
// Neutral status-pill background (batch 6), distinct from `100`.
|
|
7017
|
+
150: '#F1F2F4',
|
|
5695
7018
|
200: '#E8E8E6',
|
|
5696
7019
|
300: '#E4E4E2',
|
|
5697
7020
|
400: '#A9AAAF',
|
|
5698
7021
|
500: '#8A8C93',
|
|
5699
7022
|
600: '#6E7078',
|
|
7023
|
+
// Inactive pill-tab chrome text (batch 6), distinct from `600`/`700`.
|
|
7024
|
+
650: '#5A5C63',
|
|
5700
7025
|
700: '#4A4F58',
|
|
5701
7026
|
800: '#12182B',
|
|
5702
7027
|
900: '#151C2B',
|
|
@@ -5706,7 +7031,17 @@ const Arvisfy = {
|
|
|
5706
7031
|
50: '#E8F7EC',
|
|
5707
7032
|
500: '#0CAC42',
|
|
5708
7033
|
600: '#0A9138',
|
|
5709
|
-
700: '#087A30'
|
|
7034
|
+
700: '#087A30',
|
|
7035
|
+
// Soft-pair foreground for chip/badge/alert "soft" surfaces (batch 6,
|
|
7036
|
+
// distinct from `700`, which stays the solid-button active shade).
|
|
7037
|
+
softForeground: '#2E7D46',
|
|
7038
|
+
// Selection/interactive tint (filter chips, pill tabs, side-nav,
|
|
7039
|
+
// menu hover, command-palette active row) — batch 6.
|
|
7040
|
+
tint: '#F1FAF4',
|
|
7041
|
+
// Selection-card tint (`ns-option-card`, theme picker cards) — a
|
|
7042
|
+
// paler, distinct green from `tint`, observed at the same prototype
|
|
7043
|
+
// selected-card treatment. Batch 6.
|
|
7044
|
+
cardTint: '#F5FBF8'
|
|
5710
7045
|
},
|
|
5711
7046
|
warning: {
|
|
5712
7047
|
50: '#FDF6E3',
|
|
@@ -5716,9 +7051,20 @@ const Arvisfy = {
|
|
|
5716
7051
|
},
|
|
5717
7052
|
danger: {
|
|
5718
7053
|
50: '#FEF3F2',
|
|
7054
|
+
// Soft-pair background for chip/badge/alert "soft" surfaces (batch
|
|
7055
|
+
// 6). `50` stays reserved for the menu/alert hover-only treatment.
|
|
7056
|
+
100: '#FCEBEA',
|
|
5719
7057
|
500: '#E5514A',
|
|
5720
7058
|
600: '#C0362C',
|
|
5721
|
-
700: '#982B24'
|
|
7059
|
+
700: '#982B24',
|
|
7060
|
+
softForeground: '#C74B41'
|
|
7061
|
+
},
|
|
7062
|
+
info: {
|
|
7063
|
+
foreground: '#3B72D9'
|
|
7064
|
+
},
|
|
7065
|
+
selected: {
|
|
7066
|
+
soft: '#E0EAFF',
|
|
7067
|
+
foreground: '#1B57D6'
|
|
5722
7068
|
},
|
|
5723
7069
|
switch: {
|
|
5724
7070
|
on: '#3CA040',
|
|
@@ -5755,8 +7101,33 @@ const Arvisfy = {
|
|
|
5755
7101
|
backgroundDark: '#1C2536',
|
|
5756
7102
|
foregroundLight: '#12182B',
|
|
5757
7103
|
foregroundDark: '#F5F7FB'
|
|
7104
|
+
},
|
|
7105
|
+
violet: {
|
|
7106
|
+
400: '#8A7FDA',
|
|
7107
|
+
500: '#584AC0'
|
|
7108
|
+
},
|
|
7109
|
+
navRail: {
|
|
7110
|
+
text: 'rgba(255,255,255,.78)',
|
|
7111
|
+
textMuted: 'rgba(255,255,255,.62)',
|
|
7112
|
+
sectionLabel: 'rgba(255,255,255,.48)'
|
|
7113
|
+
},
|
|
7114
|
+
// `ns-command-palette` active-row accents (batch 6): a muted meta text
|
|
7115
|
+
// and an avatar-badge tint, both distinct from the shared success tint.
|
|
7116
|
+
commandPalette: {
|
|
7117
|
+
metaActiveText: '#5FA97B',
|
|
7118
|
+
avatarActiveBackground: '#D7F2E0'
|
|
7119
|
+
},
|
|
7120
|
+
// Local separator observed only under the modal footer (batch 6);
|
|
7121
|
+
// distinct from `neutral.300` (the general control/card border).
|
|
7122
|
+
modal: {
|
|
7123
|
+
footerBorder: '#EFEFEE'
|
|
5758
7124
|
}
|
|
5759
7125
|
},
|
|
7126
|
+
letterSpacing: {
|
|
7127
|
+
wide: '0.08em',
|
|
7128
|
+
tight: '-0.035em',
|
|
7129
|
+
tighter: '-0.04em'
|
|
7130
|
+
},
|
|
5760
7131
|
font: {
|
|
5761
7132
|
family: {
|
|
5762
7133
|
sans: "'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif",
|
|
@@ -5768,10 +7139,18 @@ const Arvisfy = {
|
|
|
5768
7139
|
sm: '0.875rem',
|
|
5769
7140
|
md: '1rem',
|
|
5770
7141
|
lg: '1.125rem',
|
|
5771
|
-
xl: '1.25rem'
|
|
7142
|
+
xl: '1.25rem',
|
|
7143
|
+
navItem: '0.84375rem',
|
|
7144
|
+
navItemDescription: '0.71875rem',
|
|
7145
|
+
navEyebrow: '0.625rem',
|
|
7146
|
+
displaySm: '1.5625rem',
|
|
7147
|
+
displayMd: '1.8125rem',
|
|
7148
|
+
displayLg: '2.25rem',
|
|
7149
|
+
// `ns-modal`'s projected `[modal-description]` subtitle (batch 6).
|
|
7150
|
+
modalDescription: '0.8125rem'
|
|
5772
7151
|
},
|
|
5773
7152
|
weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
|
|
5774
|
-
lineHeight: { compact: 1.25, normal: 1.5 }
|
|
7153
|
+
lineHeight: { compact: 1.25, normal: 1.5, display: 1 }
|
|
5775
7154
|
},
|
|
5776
7155
|
space: {
|
|
5777
7156
|
0: '0',
|
|
@@ -5793,10 +7172,22 @@ const Arvisfy = {
|
|
|
5793
7172
|
lg: '1.125rem',
|
|
5794
7173
|
tab: '0.6875rem',
|
|
5795
7174
|
pill: '0.5rem',
|
|
5796
|
-
full: '9999px'
|
|
7175
|
+
full: '9999px',
|
|
7176
|
+
// Form-field radius (batch 6): `ns-input`/`ns-input-number`'s 10px
|
|
7177
|
+
// corners, distinct from `sm` (12px), which stays the button/control
|
|
7178
|
+
// radius.
|
|
7179
|
+
field: '0.625rem',
|
|
7180
|
+
// Checkbox radius (batch 7): `ns-checkbox`'s 20px box needs a
|
|
7181
|
+
// "squared with a slight round" corner, not the 12px `sm`
|
|
7182
|
+
// (near-circular at that size) nor the 8px `pill` (still too round).
|
|
7183
|
+
// 4px is ~20% of the box side and matches the "rounded" convention
|
|
7184
|
+
// used by other systems (Tailwind's default `rounded`, Radix,
|
|
7185
|
+
// GitHub Primer) for compact 16-20px controls.
|
|
7186
|
+
xs: '0.25rem'
|
|
5797
7187
|
},
|
|
5798
7188
|
border: {
|
|
5799
|
-
thin: '1px'
|
|
7189
|
+
thin: '1px',
|
|
7190
|
+
medium: '1.5px'
|
|
5800
7191
|
},
|
|
5801
7192
|
opacity: {
|
|
5802
7193
|
backdrop: 0.7,
|
|
@@ -5838,6 +7229,29 @@ const Arvisfy = {
|
|
|
5838
7229
|
controlSm: '2.375rem',
|
|
5839
7230
|
controlMd: '2.5rem',
|
|
5840
7231
|
controlLg: '3rem',
|
|
7232
|
+
// Form-field height (batch 6): `ns-input`/`ns-input-number`'s 42px
|
|
7233
|
+
// default, distinct from the 40px `controlMd` shared by buttons and
|
|
7234
|
+
// other controls. `size="sm"` reuses `controlSm` (38px, matching the
|
|
7235
|
+
// toolbar `ns-input-search`).
|
|
7236
|
+
inputMinHeight: '2.625rem',
|
|
7237
|
+
// Horizontal room a text field reserves on one side for a single
|
|
7238
|
+
// icon-sized control: `ns-input`'s leading icon, `ns-password`'s
|
|
7239
|
+
// visibility toggle.
|
|
7240
|
+
iconGutter: '2.25rem',
|
|
7241
|
+
// Rendered size of the icon glyph itself inside a form field —
|
|
7242
|
+
// `ns-input`'s leading icon, `ns-password`'s visibility toggle. Kept
|
|
7243
|
+
// apart from `iconGutter` (the box that reserves room for it): the
|
|
7244
|
+
// default `ns-icon` render is 24px, disproportionate against the
|
|
7245
|
+
// 42px field and 36px reserved gutter, so both fields pin the glyph
|
|
7246
|
+
// to 16px from this single source.
|
|
7247
|
+
fieldIconSize: '1rem',
|
|
7248
|
+
// Checkbox check-glyph dimensions (batch 7): the mark is drawn from a
|
|
7249
|
+
// box rotated -45deg and clipped to its bottom-left border, not a
|
|
7250
|
+
// square — an 8x8 square rotated that way reads as a right-angle
|
|
7251
|
+
// corner, not a checkmark. The 2:1 ratio (8px wide : 4px tall) gives
|
|
7252
|
+
// the short-arm/long-arm asymmetry that reads as a check instead.
|
|
7253
|
+
checkboxCheckWidth: '0.5rem',
|
|
7254
|
+
checkboxCheckHeight: '0.25rem',
|
|
5841
7255
|
buttonMin: '5rem',
|
|
5842
7256
|
meterHeight: '0.5rem',
|
|
5843
7257
|
progressBarHeight: '0.5rem',
|
|
@@ -5847,18 +7261,57 @@ const Arvisfy = {
|
|
|
5847
7261
|
switchThumbSize: '20px',
|
|
5848
7262
|
switchThumbInset: '2px',
|
|
5849
7263
|
switchThumbTranslate: '18px',
|
|
7264
|
+
// `sm` variant: track and translate scaled to 2/3 of the default
|
|
7265
|
+
// (28x16 vs 42x24), thumb/inset chosen so the thumb still sits snug
|
|
7266
|
+
// inside the track (14 + 2*1 = 16 = trackHeightSm) while reading
|
|
7267
|
+
// clearly next to 14px form text (e.g. "Recordarme").
|
|
7268
|
+
switchTrackWidthSm: '28px',
|
|
7269
|
+
switchTrackHeightSm: '16px',
|
|
7270
|
+
switchThumbSizeSm: '14px',
|
|
7271
|
+
switchThumbInsetSm: '1px',
|
|
7272
|
+
switchThumbTranslateSm: '12px',
|
|
7273
|
+
chipPillPaddingBlock: '5px',
|
|
7274
|
+
chipPillPaddingInline: '10px',
|
|
7275
|
+
tabsPillPaddingBlock: '7px',
|
|
7276
|
+
tabsPillPaddingInline: '15px',
|
|
7277
|
+
timelineDot: '9px',
|
|
7278
|
+
timelineDotSm: '7px',
|
|
7279
|
+
sideNavItemPaddingBlock: '9px',
|
|
7280
|
+
sideNavItemPaddingInline: '11px',
|
|
7281
|
+
// `ns-side-nav[color="success"]` item padding (batch 6): the config
|
|
7282
|
+
// sub-nav uses a larger, distinct rhythm from the branded `nav` rail.
|
|
7283
|
+
sideNavItemPaddingBlockSuccess: '11px',
|
|
7284
|
+
sideNavItemPaddingInlineSuccess: '13px',
|
|
5850
7285
|
drawer: '32rem',
|
|
5851
7286
|
datePickerMenu: '18rem',
|
|
5852
7287
|
modalSm: '24rem',
|
|
5853
|
-
|
|
5854
|
-
|
|
7288
|
+
// Filters modal (batch 6): 544px, up from 500px.
|
|
7289
|
+
modalMd: '34rem',
|
|
7290
|
+
// Form modal (batch 6): the prototype markup renders 680px
|
|
7291
|
+
// consistently; the brief's 682px target is honored here (documented
|
|
7292
|
+
// 2px discrepancy — see DESIGN.md).
|
|
7293
|
+
modalLg: '42.625rem',
|
|
5855
7294
|
modalXl: '71.25rem',
|
|
5856
7295
|
modalViewportInset: '2rem',
|
|
7296
|
+
// `ns-modal` header/body/footer padding recipe observed across every
|
|
7297
|
+
// prototype modal instance (batch 6): header/body block padding is
|
|
7298
|
+
// asymmetric (26px start, 4px end; 22px start, 26px end) and the
|
|
7299
|
+
// footer uses 18px.
|
|
7300
|
+
modalPaddingBlockSm: '1.125rem',
|
|
7301
|
+
modalPaddingBlockMd: '1.375rem',
|
|
7302
|
+
modalPaddingBlockLg: '1.625rem',
|
|
5857
7303
|
popover: '12rem',
|
|
5858
7304
|
dropdownMenu: '15rem',
|
|
5859
7305
|
tooltip: '20rem',
|
|
5860
7306
|
toastMaxWidth: '25rem',
|
|
5861
|
-
toastMinHeight: '3.5rem'
|
|
7307
|
+
toastMinHeight: '3.5rem',
|
|
7308
|
+
statCardPaddingBlock: '20px',
|
|
7309
|
+
statCardPaddingInline: '22px',
|
|
7310
|
+
statCardPaddingBlockCompact: '16px',
|
|
7311
|
+
statCardPaddingInlineCompact: '18px',
|
|
7312
|
+
statCardIconSize: '28px',
|
|
7313
|
+
commandPalette: '40rem',
|
|
7314
|
+
commandPaletteItemIcon: '20px'
|
|
5862
7315
|
},
|
|
5863
7316
|
layout: {
|
|
5864
7317
|
scheduleDay: '[index] 3rem [timeline] minmax(0, 1fr)',
|
|
@@ -5878,7 +7331,25 @@ const Arvisfy = {
|
|
|
5878
7331
|
xs: '{primitive.font.size.xs}',
|
|
5879
7332
|
sm: '{primitive.font.size.sm}',
|
|
5880
7333
|
md: '{primitive.font.size.md}',
|
|
5881
|
-
lg: '{primitive.font.size.lg}'
|
|
7334
|
+
lg: '{primitive.font.size.lg}',
|
|
7335
|
+
navItem: '{primitive.font.size.navItem}',
|
|
7336
|
+
navItemDescription: '{primitive.font.size.navItemDescription}',
|
|
7337
|
+
navEyebrow: '{primitive.font.size.navEyebrow}',
|
|
7338
|
+
displaySm: '{primitive.font.size.displaySm}',
|
|
7339
|
+
displayMd: '{primitive.font.size.displayMd}',
|
|
7340
|
+
displayLg: '{primitive.font.size.displayLg}',
|
|
7341
|
+
modalDescription: '{primitive.font.size.modalDescription}'
|
|
7342
|
+
},
|
|
7343
|
+
letterSpacing: {
|
|
7344
|
+
wide: '{primitive.letterSpacing.wide}',
|
|
7345
|
+
tight: '{primitive.letterSpacing.tight}',
|
|
7346
|
+
tighter: '{primitive.letterSpacing.tighter}'
|
|
7347
|
+
},
|
|
7348
|
+
navRail: {
|
|
7349
|
+
text: '{primitive.color.navRail.text}',
|
|
7350
|
+
textMuted: '{primitive.color.navRail.textMuted}',
|
|
7351
|
+
sectionLabel: '{primitive.color.navRail.sectionLabel}',
|
|
7352
|
+
activeText: '{primitive.color.white}'
|
|
5882
7353
|
},
|
|
5883
7354
|
fontWeight: {
|
|
5884
7355
|
regular: '{primitive.font.weight.regular}',
|
|
@@ -5888,7 +7359,8 @@ const Arvisfy = {
|
|
|
5888
7359
|
},
|
|
5889
7360
|
lineHeight: {
|
|
5890
7361
|
compact: '{primitive.font.lineHeight.compact}',
|
|
5891
|
-
normal: '{primitive.font.lineHeight.normal}'
|
|
7362
|
+
normal: '{primitive.font.lineHeight.normal}',
|
|
7363
|
+
display: '{primitive.font.lineHeight.display}'
|
|
5892
7364
|
},
|
|
5893
7365
|
space: {
|
|
5894
7366
|
none: '{primitive.space.0}',
|
|
@@ -5906,10 +7378,15 @@ const Arvisfy = {
|
|
|
5906
7378
|
overlay: '{primitive.radius.md}',
|
|
5907
7379
|
tab: '{primitive.radius.tab}',
|
|
5908
7380
|
pill: '{primitive.radius.pill}',
|
|
5909
|
-
round: '{primitive.radius.full}'
|
|
7381
|
+
round: '{primitive.radius.full}',
|
|
7382
|
+
field: '{primitive.radius.field}',
|
|
7383
|
+
// Dedicated slot for the checkbox box (batch 7): kept separate from
|
|
7384
|
+
// `control` so button/input/menu radii are untouched.
|
|
7385
|
+
checkbox: '{primitive.radius.xs}'
|
|
5910
7386
|
},
|
|
5911
7387
|
border: {
|
|
5912
|
-
thin: '{primitive.border.thin}'
|
|
7388
|
+
thin: '{primitive.border.thin}',
|
|
7389
|
+
medium: '{primitive.border.medium}'
|
|
5913
7390
|
},
|
|
5914
7391
|
opacity: {
|
|
5915
7392
|
backdrop: '{primitive.opacity.backdrop}',
|
|
@@ -5945,6 +7422,11 @@ const Arvisfy = {
|
|
|
5945
7422
|
controlSm: '{primitive.size.controlSm}',
|
|
5946
7423
|
controlMd: '{primitive.size.controlMd}',
|
|
5947
7424
|
controlLg: '{primitive.size.controlLg}',
|
|
7425
|
+
inputMinHeight: '{primitive.size.inputMinHeight}',
|
|
7426
|
+
iconGutter: '{primitive.size.iconGutter}',
|
|
7427
|
+
fieldIconSize: '{primitive.size.fieldIconSize}',
|
|
7428
|
+
checkboxCheckWidth: '{primitive.size.checkboxCheckWidth}',
|
|
7429
|
+
checkboxCheckHeight: '{primitive.size.checkboxCheckHeight}',
|
|
5948
7430
|
buttonMin: '{primitive.size.buttonMin}',
|
|
5949
7431
|
meterHeight: '{primitive.size.meterHeight}',
|
|
5950
7432
|
progressBarHeight: '{primitive.size.progressBarHeight}',
|
|
@@ -5954,6 +7436,21 @@ const Arvisfy = {
|
|
|
5954
7436
|
switchThumbSize: '{primitive.size.switchThumbSize}',
|
|
5955
7437
|
switchThumbInset: '{primitive.size.switchThumbInset}',
|
|
5956
7438
|
switchThumbTranslate: '{primitive.size.switchThumbTranslate}',
|
|
7439
|
+
switchTrackWidthSm: '{primitive.size.switchTrackWidthSm}',
|
|
7440
|
+
switchTrackHeightSm: '{primitive.size.switchTrackHeightSm}',
|
|
7441
|
+
switchThumbSizeSm: '{primitive.size.switchThumbSizeSm}',
|
|
7442
|
+
switchThumbInsetSm: '{primitive.size.switchThumbInsetSm}',
|
|
7443
|
+
switchThumbTranslateSm: '{primitive.size.switchThumbTranslateSm}',
|
|
7444
|
+
chipPillPaddingBlock: '{primitive.size.chipPillPaddingBlock}',
|
|
7445
|
+
chipPillPaddingInline: '{primitive.size.chipPillPaddingInline}',
|
|
7446
|
+
tabsPillPaddingBlock: '{primitive.size.tabsPillPaddingBlock}',
|
|
7447
|
+
tabsPillPaddingInline: '{primitive.size.tabsPillPaddingInline}',
|
|
7448
|
+
timelineDot: '{primitive.size.timelineDot}',
|
|
7449
|
+
timelineDotSm: '{primitive.size.timelineDotSm}',
|
|
7450
|
+
sideNavItemPaddingBlock: '{primitive.size.sideNavItemPaddingBlock}',
|
|
7451
|
+
sideNavItemPaddingInline: '{primitive.size.sideNavItemPaddingInline}',
|
|
7452
|
+
sideNavItemPaddingBlockSuccess: '{primitive.size.sideNavItemPaddingBlockSuccess}',
|
|
7453
|
+
sideNavItemPaddingInlineSuccess: '{primitive.size.sideNavItemPaddingInlineSuccess}',
|
|
5957
7454
|
drawer: '{primitive.size.drawer}',
|
|
5958
7455
|
datePickerMenu: '{primitive.size.datePickerMenu}',
|
|
5959
7456
|
modalSm: '{primitive.size.modalSm}',
|
|
@@ -5961,11 +7458,21 @@ const Arvisfy = {
|
|
|
5961
7458
|
modalLg: '{primitive.size.modalLg}',
|
|
5962
7459
|
modalXl: '{primitive.size.modalXl}',
|
|
5963
7460
|
modalViewportInset: '{primitive.size.modalViewportInset}',
|
|
7461
|
+
modalPaddingBlockSm: '{primitive.size.modalPaddingBlockSm}',
|
|
7462
|
+
modalPaddingBlockMd: '{primitive.size.modalPaddingBlockMd}',
|
|
7463
|
+
modalPaddingBlockLg: '{primitive.size.modalPaddingBlockLg}',
|
|
5964
7464
|
popover: '{primitive.size.popover}',
|
|
5965
7465
|
dropdownMenu: '{primitive.size.dropdownMenu}',
|
|
5966
7466
|
tooltip: '{primitive.size.tooltip}',
|
|
5967
7467
|
toastMaxWidth: '{primitive.size.toastMaxWidth}',
|
|
5968
|
-
toastMinHeight: '{primitive.size.toastMinHeight}'
|
|
7468
|
+
toastMinHeight: '{primitive.size.toastMinHeight}',
|
|
7469
|
+
statCardPaddingBlock: '{primitive.size.statCardPaddingBlock}',
|
|
7470
|
+
statCardPaddingInline: '{primitive.size.statCardPaddingInline}',
|
|
7471
|
+
statCardPaddingBlockCompact: '{primitive.size.statCardPaddingBlockCompact}',
|
|
7472
|
+
statCardPaddingInlineCompact: '{primitive.size.statCardPaddingInlineCompact}',
|
|
7473
|
+
statCardIconSize: '{primitive.size.statCardIconSize}',
|
|
7474
|
+
commandPalette: '{primitive.size.commandPalette}',
|
|
7475
|
+
commandPaletteItemIcon: '{primitive.size.commandPaletteItemIcon}'
|
|
5969
7476
|
},
|
|
5970
7477
|
layer: {
|
|
5971
7478
|
overlay: '{primitive.zIndex.overlay}',
|
|
@@ -5982,11 +7489,20 @@ const Arvisfy = {
|
|
|
5982
7489
|
primarySoft: '{primitive.color.klein.50}',
|
|
5983
7490
|
successSoft: '{primitive.color.success.50}',
|
|
5984
7491
|
warningSoft: '{primitive.color.warning.50}',
|
|
5985
|
-
dangerSoft: '{primitive.color.danger.
|
|
7492
|
+
dangerSoft: '{primitive.color.danger.100}',
|
|
5986
7493
|
primarySoftForeground: '{primitive.color.klein.600}',
|
|
5987
|
-
successSoftForeground: '{primitive.color.success.
|
|
5988
|
-
warningSoftForeground: '{primitive.color.warning.
|
|
5989
|
-
dangerSoftForeground: '{primitive.color.danger.
|
|
7494
|
+
successSoftForeground: '{primitive.color.success.softForeground}',
|
|
7495
|
+
warningSoftForeground: '{primitive.color.warning.500}',
|
|
7496
|
+
dangerSoftForeground: '{primitive.color.danger.softForeground}',
|
|
7497
|
+
// Preserves the pre-batch-6 `dangerSoft` value (`danger.50`) for the
|
|
7498
|
+
// menu/alert hover-only treatment now that `dangerSoft` itself points
|
|
7499
|
+
// at the pill-badge `danger.100` value.
|
|
7500
|
+
dangerSoftHover: '{primitive.color.danger.50}',
|
|
7501
|
+
successTint: '{primitive.color.success.tint}',
|
|
7502
|
+
successTintForeground: '{primitive.color.success.500}',
|
|
7503
|
+
successCardTint: '{primitive.color.success.cardTint}',
|
|
7504
|
+
commandPaletteMetaActive: '{primitive.color.commandPalette.metaActiveText}',
|
|
7505
|
+
commandPaletteAvatarActiveBackground: '{primitive.color.commandPalette.avatarActiveBackground}',
|
|
5990
7506
|
success: '{primitive.color.success.500}',
|
|
5991
7507
|
successHover: '{primitive.color.success.600}',
|
|
5992
7508
|
successActive: '{primitive.color.success.700}',
|
|
@@ -6044,9 +7560,12 @@ const Arvisfy = {
|
|
|
6044
7560
|
toastBackground: '{primitive.color.toast.backgroundLight}',
|
|
6045
7561
|
toastForeground: '{primitive.color.toast.foregroundLight}',
|
|
6046
7562
|
textMuted: '{primitive.color.neutral.500}',
|
|
7563
|
+
textMutedStrong: '{primitive.color.neutral.600}',
|
|
7564
|
+
textInactive: '{primitive.color.neutral.650}',
|
|
6047
7565
|
border: '{primitive.color.neutral.300}',
|
|
6048
7566
|
borderStrong: '{primitive.color.neutral.400}',
|
|
6049
7567
|
separator: '{primitive.color.neutral.100}',
|
|
7568
|
+
modalFooterBorder: '{primitive.color.modal.footerBorder}',
|
|
6050
7569
|
primary: '{primitive.color.klein.500}',
|
|
6051
7570
|
primaryHover: '{primitive.color.klein.600}',
|
|
6052
7571
|
primaryActive: '{primitive.color.klein.700}',
|
|
@@ -6070,11 +7589,21 @@ const Arvisfy = {
|
|
|
6070
7589
|
primarySoft: '{primitive.color.klein.50}',
|
|
6071
7590
|
successSoft: '{primitive.color.success.50}',
|
|
6072
7591
|
warningSoft: '{primitive.color.warning.50}',
|
|
6073
|
-
dangerSoft: '{primitive.color.danger.
|
|
7592
|
+
dangerSoft: '{primitive.color.danger.100}',
|
|
6074
7593
|
primarySoftForeground: '{primitive.color.klein.600}',
|
|
6075
|
-
successSoftForeground: '{primitive.color.success.
|
|
6076
|
-
warningSoftForeground: '{primitive.color.warning.
|
|
6077
|
-
dangerSoftForeground: '{primitive.color.danger.
|
|
7594
|
+
successSoftForeground: '{primitive.color.success.softForeground}',
|
|
7595
|
+
warningSoftForeground: '{primitive.color.warning.500}',
|
|
7596
|
+
dangerSoftForeground: '{primitive.color.danger.softForeground}',
|
|
7597
|
+
dangerSoftHover: '{primitive.color.danger.50}',
|
|
7598
|
+
successTint: '{primitive.color.success.tint}',
|
|
7599
|
+
successTintForeground: '{primitive.color.success.500}',
|
|
7600
|
+
successCardTint: '{primitive.color.success.cardTint}',
|
|
7601
|
+
commandPaletteMetaActive: '{primitive.color.commandPalette.metaActiveText}',
|
|
7602
|
+
commandPaletteAvatarActiveBackground: '{primitive.color.commandPalette.avatarActiveBackground}',
|
|
7603
|
+
infoSoft: '{primitive.color.klein.50}',
|
|
7604
|
+
infoSoftForeground: '{primitive.color.info.foreground}',
|
|
7605
|
+
selectedSoft: '{primitive.color.selected.soft}',
|
|
7606
|
+
selectedSoftForeground: '{primitive.color.selected.foreground}',
|
|
6078
7607
|
success: '{primitive.color.success.500}',
|
|
6079
7608
|
successHover: '{primitive.color.success.600}',
|
|
6080
7609
|
successActive: '{primitive.color.success.700}',
|
|
@@ -6101,13 +7630,16 @@ const Arvisfy = {
|
|
|
6101
7630
|
warningText: '{primitive.color.warning.600}',
|
|
6102
7631
|
dangerBackground: '{primitive.color.danger.50}',
|
|
6103
7632
|
dangerText: '{primitive.color.danger.600}',
|
|
6104
|
-
neutralBackground: '{primitive.color.neutral.
|
|
6105
|
-
neutralText: '{primitive.color.neutral.700}'
|
|
7633
|
+
neutralBackground: '{primitive.color.neutral.150}',
|
|
7634
|
+
neutralText: '{primitive.color.neutral.700}',
|
|
7635
|
+
info: '{primitive.color.info.foreground}',
|
|
7636
|
+
accent: '{primitive.color.violet.500}'
|
|
6106
7637
|
},
|
|
6107
7638
|
shadow: {
|
|
6108
7639
|
subtle: '{primitive.shadow.lightSm}',
|
|
6109
7640
|
overlay: '{primitive.shadow.lightMd}',
|
|
6110
7641
|
modal: '{primitive.shadow.lightMd}',
|
|
7642
|
+
high: '{primitive.shadow.lightLg}',
|
|
6111
7643
|
focus: '{primitive.shadow.lightFocus}',
|
|
6112
7644
|
toast: '{primitive.shadow.toast}'
|
|
6113
7645
|
}
|
|
@@ -6128,9 +7660,21 @@ const Arvisfy = {
|
|
|
6128
7660
|
toastBackground: '{primitive.color.toast.backgroundDark}',
|
|
6129
7661
|
toastForeground: '{primitive.color.toast.foregroundDark}',
|
|
6130
7662
|
textMuted: '{primitive.color.dark.muted}',
|
|
7663
|
+
// No distinct dark equivalent observed for the prototype's
|
|
7664
|
+
// `#6E7078` modal-description shade; reusing the existing muted
|
|
7665
|
+
// dark text keeps the description legible without inventing a new
|
|
7666
|
+
// dark primitive (batch 6, documented in DESIGN.md).
|
|
7667
|
+
textMutedStrong: '{primitive.color.dark.muted}',
|
|
7668
|
+
// No distinct dark equivalent observed for `#5A5C63`; reusing the
|
|
7669
|
+
// existing dark muted text (batch 6, documented).
|
|
7670
|
+
textInactive: '{primitive.color.dark.muted}',
|
|
6131
7671
|
border: '{primitive.color.dark.border}',
|
|
6132
7672
|
borderStrong: '{primitive.color.neutral.600}',
|
|
6133
7673
|
separator: '{primitive.color.dark.separator}',
|
|
7674
|
+
// Reuses the existing dark separator for the modal footer border
|
|
7675
|
+
// (batch 6); the prototype is light-only, so no distinct dark
|
|
7676
|
+
// value is observed.
|
|
7677
|
+
modalFooterBorder: '{primitive.color.dark.separator}',
|
|
6134
7678
|
primary: '{primitive.color.klein.400}',
|
|
6135
7679
|
primaryHover: '{primitive.color.klein.300}',
|
|
6136
7680
|
primaryActive: '{primitive.color.klein.500}',
|
|
@@ -6159,6 +7703,23 @@ const Arvisfy = {
|
|
|
6159
7703
|
successSoftForeground: '{primitive.color.dark.successText}',
|
|
6160
7704
|
warningSoftForeground: '{primitive.color.dark.warningText}',
|
|
6161
7705
|
dangerSoftForeground: '{primitive.color.dark.dangerText}',
|
|
7706
|
+
// Reuses the existing dark danger-soft pair; the light-only
|
|
7707
|
+
// `dangerSoftHover` split (batch 6) has no distinct dark
|
|
7708
|
+
// observation to draw from.
|
|
7709
|
+
dangerSoftHover: '{primitive.color.dark.dangerBackground}',
|
|
7710
|
+
// The prototype provides no dark reference for the new selection
|
|
7711
|
+
// tints; both reuse the existing dark success-soft pair so the
|
|
7712
|
+
// interactive/selected states stay coherent with dark mode's
|
|
7713
|
+
// established success treatment (batch 6, documented).
|
|
7714
|
+
successTint: '{primitive.color.dark.successBackground}',
|
|
7715
|
+
successTintForeground: '{primitive.color.dark.successText}',
|
|
7716
|
+
successCardTint: '{primitive.color.dark.successBackground}',
|
|
7717
|
+
commandPaletteMetaActive: '{primitive.color.dark.successText}',
|
|
7718
|
+
commandPaletteAvatarActiveBackground: '{primitive.color.dark.successBackground}',
|
|
7719
|
+
infoSoft: '{primitive.color.dark.infoBackground}',
|
|
7720
|
+
infoSoftForeground: '{primitive.color.dark.infoText}',
|
|
7721
|
+
selectedSoft: '{primitive.color.dark.infoBackground}',
|
|
7722
|
+
selectedSoftForeground: '{primitive.color.dark.infoText}',
|
|
6162
7723
|
success: '{primitive.color.success.500}',
|
|
6163
7724
|
successHover: '{primitive.color.success.600}',
|
|
6164
7725
|
successActive: '{primitive.color.success.700}',
|
|
@@ -6186,12 +7747,15 @@ const Arvisfy = {
|
|
|
6186
7747
|
dangerBackground: '{primitive.color.dark.dangerBackground}',
|
|
6187
7748
|
dangerText: '{primitive.color.dark.dangerText}',
|
|
6188
7749
|
neutralBackground: '{primitive.color.dark.neutralBackground}',
|
|
6189
|
-
neutralText: '{primitive.color.dark.neutralText}'
|
|
7750
|
+
neutralText: '{primitive.color.dark.neutralText}',
|
|
7751
|
+
info: '{primitive.color.dark.infoText}',
|
|
7752
|
+
accent: '{primitive.color.violet.400}'
|
|
6190
7753
|
},
|
|
6191
7754
|
shadow: {
|
|
6192
7755
|
subtle: '{primitive.shadow.darkSm}',
|
|
6193
7756
|
overlay: '{primitive.shadow.darkMd}',
|
|
6194
7757
|
modal: '{primitive.shadow.darkMd}',
|
|
7758
|
+
high: '{primitive.shadow.darkLg}',
|
|
6195
7759
|
focus: '{primitive.shadow.darkFocus}',
|
|
6196
7760
|
toast: '{primitive.shadow.toast}'
|
|
6197
7761
|
}
|
|
@@ -6229,10 +7793,24 @@ const Arvisfy = {
|
|
|
6229
7793
|
borderColor: '{semantic.color.border}',
|
|
6230
7794
|
borderHoverColor: '{semantic.color.borderStrong}',
|
|
6231
7795
|
borderFocusColor: '{semantic.color.focus}',
|
|
6232
|
-
radius:
|
|
7796
|
+
// Form-field radius (batch 6): 10px, distinct from the 12px button
|
|
7797
|
+
// control radius.
|
|
7798
|
+
radius: '{semantic.radius.field}',
|
|
6233
7799
|
paddingBlock: '{semantic.space.sm}',
|
|
6234
7800
|
paddingInline: '{semantic.space.md}',
|
|
6235
|
-
|
|
7801
|
+
// Control's `padding-inline-start` when a leading `icon` is set,
|
|
7802
|
+
// reserving room for `.ns-input__leading`.
|
|
7803
|
+
iconPaddingInline: '{semantic.size.iconGutter}',
|
|
7804
|
+
// Rendered size of `.ns-input__leading`'s `ns-icon` glyph (24px by
|
|
7805
|
+
// default, disproportionate against the 36px gutter it sits in).
|
|
7806
|
+
iconSize: '{semantic.size.fieldIconSize}',
|
|
7807
|
+
// Default (`md`) height is 42px (batch 6), up from the 40px shared
|
|
7808
|
+
// `controlMd`. `sm`/`lg` reuse the existing control sizes (38px/48px)
|
|
7809
|
+
// so the `size` input — previously a no-op on this component — now
|
|
7810
|
+
// has a visible effect.
|
|
7811
|
+
minHeight: '{semantic.size.inputMinHeight}',
|
|
7812
|
+
minHeightSm: '{semantic.size.controlSm}',
|
|
7813
|
+
minHeightLg: '{semantic.size.controlLg}',
|
|
6236
7814
|
focusShadow: '{semantic.shadow.focus}',
|
|
6237
7815
|
disabledBackground: '{semantic.color.surfaceMuted}',
|
|
6238
7816
|
disabledColor: '{semantic.color.textMuted}',
|
|
@@ -6365,9 +7943,11 @@ const Arvisfy = {
|
|
|
6365
7943
|
gap: '{semantic.space.sm}',
|
|
6366
7944
|
borderColor: '{semantic.color.borderStrong}',
|
|
6367
7945
|
background: '{semantic.color.surface}',
|
|
6368
|
-
radius: '{semantic.radius.
|
|
7946
|
+
radius: '{semantic.radius.checkbox}',
|
|
6369
7947
|
checkBorderWidth: '{semantic.border.thin}',
|
|
6370
7948
|
checkColor: '{semantic.color.primaryForeground}',
|
|
7949
|
+
checkWidth: '{semantic.size.checkboxCheckWidth}',
|
|
7950
|
+
checkHeight: '{semantic.size.checkboxCheckHeight}',
|
|
6371
7951
|
focusShadow: '{semantic.shadow.focus}',
|
|
6372
7952
|
invalidBorderColor: '{semantic.status.danger}',
|
|
6373
7953
|
disabledColor: '{semantic.color.textMuted}',
|
|
@@ -6428,13 +8008,16 @@ const Arvisfy = {
|
|
|
6428
8008
|
dayBackgroundHover: '{semantic.color.surfaceMuted}'
|
|
6429
8009
|
},
|
|
6430
8010
|
inputGroup: {
|
|
6431
|
-
addonBackground: '{semantic.color.surface}',
|
|
6432
|
-
addonColor: '{semantic.color.text}',
|
|
6433
8011
|
borderColor: '{semantic.color.border}',
|
|
6434
|
-
radius:
|
|
8012
|
+
// Aligned to `input.radius` (batch 6 follow-up): the addon must not
|
|
8013
|
+
// have a corner radius of its own, or the group stops reading as one
|
|
8014
|
+
// piece. This value also drives the group's own first/last-child
|
|
8015
|
+
// corner rounding, so both stay in sync from a single source.
|
|
8016
|
+
radius: '{semantic.radius.field}',
|
|
6435
8017
|
paddingBlock: '{semantic.space.sm}',
|
|
6436
8018
|
paddingInline: '{semantic.space.md}',
|
|
6437
8019
|
borderWidth: '{semantic.border.thin}',
|
|
8020
|
+
borderHoverColor: '{semantic.color.borderStrong}',
|
|
6438
8021
|
borderFocusColor: '{semantic.color.focus}'
|
|
6439
8022
|
},
|
|
6440
8023
|
inputNumber: {
|
|
@@ -6445,7 +8028,11 @@ const Arvisfy = {
|
|
|
6445
8028
|
color: '{semantic.color.text}',
|
|
6446
8029
|
borderColor: '{semantic.color.border}',
|
|
6447
8030
|
borderFocusColor: '{semantic.color.focus}',
|
|
6448
|
-
radius:
|
|
8031
|
+
// Form-field radius/height (batch 6): 10px/42px, matching `ns-input`
|
|
8032
|
+
// instead of the 12px/40px shared button-control tokens. Previously
|
|
8033
|
+
// the height was a fixed, untokenized `min-h-10` Tailwind utility.
|
|
8034
|
+
radius: '{semantic.radius.field}',
|
|
8035
|
+
minHeight: '{semantic.size.inputMinHeight}',
|
|
6449
8036
|
paddingBlock: '{semantic.space.sm}',
|
|
6450
8037
|
paddingInline: '{semantic.space.md}',
|
|
6451
8038
|
focusShadow: '{semantic.shadow.focus}',
|
|
@@ -6461,7 +8048,12 @@ const Arvisfy = {
|
|
|
6461
8048
|
borderColor: '{semantic.color.border}',
|
|
6462
8049
|
borderHoverColor: '{semantic.color.borderStrong}',
|
|
6463
8050
|
borderFocusColor: '{semantic.color.focus}',
|
|
6464
|
-
radius:
|
|
8051
|
+
// Toolbar search radius/height (batch 6): 11px/38px, matching the
|
|
8052
|
+
// prototype's search field instead of the 12px/40px shared
|
|
8053
|
+
// button-control tokens. Previously the height was a fixed,
|
|
8054
|
+
// untokenized `min-h-10` Tailwind utility.
|
|
8055
|
+
radius: '{semantic.radius.tab}',
|
|
8056
|
+
minHeight: '{semantic.size.controlSm}',
|
|
6465
8057
|
background: '{semantic.color.surface}',
|
|
6466
8058
|
color: '{semantic.color.text}',
|
|
6467
8059
|
placeholder: '{semantic.color.textMuted}',
|
|
@@ -6500,13 +8092,31 @@ const Arvisfy = {
|
|
|
6500
8092
|
color: '{semantic.color.text}',
|
|
6501
8093
|
borderColor: '{semantic.color.border}',
|
|
6502
8094
|
borderFocusColor: '{semantic.color.focus}',
|
|
6503
|
-
radius:
|
|
8095
|
+
// Aligned to `input.radius` (batch 6 follow-up): a password field must
|
|
8096
|
+
// not carry its own corner radius, or it stops reading as the same
|
|
8097
|
+
// kind of control as `ns-input`.
|
|
8098
|
+
radius: '{semantic.radius.field}',
|
|
6504
8099
|
paddingBlock: '{semantic.space.sm}',
|
|
6505
8100
|
paddingInline: '{semantic.space.md}',
|
|
8101
|
+
// Aligned to `input.minHeight` (batch 6 follow-up): same source as the
|
|
8102
|
+
// 42px `ns-input` default, instead of the 40px Tailwind `min-h-10`
|
|
8103
|
+
// utility this control previously hardcoded.
|
|
8104
|
+
minHeight: '{semantic.size.inputMinHeight}',
|
|
6506
8105
|
focusShadow: '{semantic.shadow.focus}',
|
|
6507
8106
|
borderHoverColor: '{semantic.color.borderStrong}',
|
|
8107
|
+
// Control's `padding-inline-end`, reserving room for the always-on
|
|
8108
|
+
// visibility-toggle button (`.ns-password__append`), now positioned
|
|
8109
|
+
// inside the field instead of appended as its own bordered box.
|
|
8110
|
+
appendGutter: '{semantic.size.iconGutter}',
|
|
8111
|
+
// Rendered size of the `.ns-password__toggle` (eye/eye-off) `ns-icon`
|
|
8112
|
+
// glyph — 24px by default inside a 28px toggle button, leaving next
|
|
8113
|
+
// to no padding.
|
|
8114
|
+
toggleIconSize: '{semantic.size.fieldIconSize}',
|
|
6508
8115
|
appendBackgroundHover: '{semantic.color.surfaceMuted}',
|
|
6509
|
-
appendDisabledColor: '{semantic.color.textMuted}'
|
|
8116
|
+
appendDisabledColor: '{semantic.color.textMuted}',
|
|
8117
|
+
forgotLinkColor: '{semantic.color.actionBackground}',
|
|
8118
|
+
forgotLinkHoverOpacity: '{semantic.opacity.backdrop}',
|
|
8119
|
+
forgotLinkTransitionDuration: '{semantic.motion.fast}'
|
|
6510
8120
|
},
|
|
6511
8121
|
switch: {
|
|
6512
8122
|
background: '{semantic.color.switchOff}',
|
|
@@ -6522,7 +8132,14 @@ const Arvisfy = {
|
|
|
6522
8132
|
trackHeight: '{semantic.size.switchTrackHeight}',
|
|
6523
8133
|
thumbSize: '{semantic.size.switchThumbSize}',
|
|
6524
8134
|
thumbInset: '{semantic.size.switchThumbInset}',
|
|
6525
|
-
thumbTranslate: '{semantic.size.switchThumbTranslate}'
|
|
8135
|
+
thumbTranslate: '{semantic.size.switchThumbTranslate}',
|
|
8136
|
+
trackWidthSm: '{semantic.size.switchTrackWidthSm}',
|
|
8137
|
+
trackHeightSm: '{semantic.size.switchTrackHeightSm}',
|
|
8138
|
+
thumbSizeSm: '{semantic.size.switchThumbSizeSm}',
|
|
8139
|
+
thumbInsetSm: '{semantic.size.switchThumbInsetSm}',
|
|
8140
|
+
thumbTranslateSm: '{semantic.size.switchThumbTranslateSm}',
|
|
8141
|
+
thumbBorderOffset: '{semantic.border.thin}',
|
|
8142
|
+
rowGap: '{semantic.space.lg}'
|
|
6526
8143
|
},
|
|
6527
8144
|
textarea: {
|
|
6528
8145
|
labelColor: '{semantic.color.text}',
|
|
@@ -6601,10 +8218,7 @@ const Arvisfy = {
|
|
|
6601
8218
|
duration: '{semantic.motion.enter}',
|
|
6602
8219
|
exitDuration: '{semantic.motion.exit}',
|
|
6603
8220
|
easing: '{semantic.motion.easing}',
|
|
6604
|
-
hiddenTransform: '{semantic.motion.toastHidden}',
|
|
6605
|
-
visibleTransform: '{semantic.motion.toastVisible}',
|
|
6606
8221
|
gap: '{semantic.space.md}',
|
|
6607
|
-
actionGap: '{semantic.space.sm}',
|
|
6608
8222
|
offset: '{semantic.space.xl}',
|
|
6609
8223
|
mobileOffset: '{semantic.space.lg}',
|
|
6610
8224
|
entryOffset: '{semantic.space.lg}',
|
|
@@ -6709,6 +8323,12 @@ const Arvisfy = {
|
|
|
6709
8323
|
solidBackground: '{semantic.color.primary}',
|
|
6710
8324
|
solidColor: '{semantic.color.primaryForeground}',
|
|
6711
8325
|
outlineColor: '{semantic.color.primary}',
|
|
8326
|
+
// `outline` + `color="neutral"` text (batch 6): the unqualified
|
|
8327
|
+
// `.ns-chip--outline` rule otherwise always shows `outlineColor`
|
|
8328
|
+
// (primary blue) regardless of `color`; a dedicated
|
|
8329
|
+
// `.ns-chip--outline.ns-chip--neutral` rule keeps neutral outline
|
|
8330
|
+
// chips on the neutral text color instead.
|
|
8331
|
+
neutralColor: '{semantic.status.neutralText}',
|
|
6712
8332
|
primaryBackground: '{semantic.color.primary}',
|
|
6713
8333
|
primaryColor: '{semantic.color.primaryForeground}',
|
|
6714
8334
|
successBackground: '{semantic.status.success}',
|
|
@@ -6726,6 +8346,26 @@ const Arvisfy = {
|
|
|
6726
8346
|
softWarningColor: '{semantic.status.warningSoftForeground}',
|
|
6727
8347
|
softDangerBackground: '{semantic.status.dangerSoft}',
|
|
6728
8348
|
softDangerColor: '{semantic.status.dangerSoftForeground}',
|
|
8349
|
+
softInfoBackground: '{semantic.status.infoSoft}',
|
|
8350
|
+
softInfoColor: '{semantic.status.infoSoftForeground}',
|
|
8351
|
+
softSelectedBackground: '{semantic.status.selectedSoft}',
|
|
8352
|
+
softSelectedColor: '{semantic.status.selectedSoftForeground}',
|
|
8353
|
+
// `soft` + `color="neutral"` (batch 6): the prototype's neutral status
|
|
8354
|
+
// pill (`#F1F2F4` / `#4A4F58`), distinct from the base soft treatment
|
|
8355
|
+
// (`surfaceMuted`/`text`) chips otherwise fall back to.
|
|
8356
|
+
softNeutralBackground: '{semantic.status.neutralBackground}',
|
|
8357
|
+
softNeutralColor: '{semantic.status.neutralText}',
|
|
8358
|
+
// New `tint` variant (batch 6): filled with the success selection
|
|
8359
|
+
// tint, bordered and text-colored with the matching foreground. Only
|
|
8360
|
+
// `success` has exact prototype numbers; other colors fall back to
|
|
8361
|
+
// their existing solid hue in the component SCSS.
|
|
8362
|
+
tintSuccessBackground: '{semantic.status.successTint}',
|
|
8363
|
+
tintSuccessColor: '{semantic.status.successTintForeground}',
|
|
8364
|
+
pillRadius: '{semantic.radius.pill}',
|
|
8365
|
+
pillFontSize: '{semantic.text.xs}',
|
|
8366
|
+
pillFontWeight: '{semantic.fontWeight.medium}',
|
|
8367
|
+
pillPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
8368
|
+
pillPaddingInline: '{semantic.size.chipPillPaddingInline}',
|
|
6729
8369
|
transitionDuration: '{semantic.motion.fast}'
|
|
6730
8370
|
},
|
|
6731
8371
|
drawer: {
|
|
@@ -6884,10 +8524,18 @@ const Arvisfy = {
|
|
|
6884
8524
|
padding: '{semantic.space.modal}',
|
|
6885
8525
|
margin: '{semantic.space.lg}',
|
|
6886
8526
|
viewportInset: '{semantic.size.modalViewportInset}',
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
8527
|
+
// Header/body/footer block padding recipe observed consistently
|
|
8528
|
+
// across every prototype modal (batch 6): asymmetric header (26px
|
|
8529
|
+
// start / 4px end) and body (22px start / 26px end), and an 18px
|
|
8530
|
+
// footer with its own top border.
|
|
8531
|
+
headerPaddingBlockStart: '{semantic.size.modalPaddingBlockLg}',
|
|
8532
|
+
headerPaddingBlockEnd: '{semantic.space.xs}',
|
|
8533
|
+
bodyPaddingBlockStart: '{semantic.size.modalPaddingBlockMd}',
|
|
8534
|
+
bodyPaddingBlockEnd: '{semantic.size.modalPaddingBlockLg}',
|
|
8535
|
+
footerPaddingBlock: '{semantic.size.modalPaddingBlockSm}',
|
|
8536
|
+
footerBorderColor: '{semantic.color.modalFooterBorder}',
|
|
8537
|
+
descriptionColor: '{semantic.color.textMutedStrong}',
|
|
8538
|
+
descriptionFontSize: '{semantic.text.modalDescription}',
|
|
6891
8539
|
backdrop: '{semantic.color.background}',
|
|
6892
8540
|
width: '{semantic.size.modalMd}',
|
|
6893
8541
|
widthSm: '{semantic.size.modalSm}',
|
|
@@ -6946,11 +8594,20 @@ const Arvisfy = {
|
|
|
6946
8594
|
tabRadius: '{semantic.radius.tab}',
|
|
6947
8595
|
color: '{semantic.color.text}',
|
|
6948
8596
|
hoverColor: '{semantic.color.primary}',
|
|
6949
|
-
selectedColor: '{semantic.color.primary}',
|
|
6950
8597
|
selectedBackground: '{semantic.color.actionBackground}',
|
|
6951
8598
|
selectedForeground: '{semantic.color.actionForeground}',
|
|
6952
8599
|
selectedShadow: '{semantic.shadow.subtle}',
|
|
6953
|
-
focusShadow: '{semantic.shadow.focus}'
|
|
8600
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
8601
|
+
pillBorderWidth: '{semantic.border.thin}',
|
|
8602
|
+
pillBorderColor: '{semantic.color.border}',
|
|
8603
|
+
// Unselected pill-tab text (batch 6), distinct from the shared
|
|
8604
|
+
// `color` token underline tabs keep using.
|
|
8605
|
+
pillColor: '{semantic.color.textInactive}',
|
|
8606
|
+
pillPaddingBlock: '{semantic.size.tabsPillPaddingBlock}',
|
|
8607
|
+
pillPaddingInline: '{semantic.size.tabsPillPaddingInline}',
|
|
8608
|
+
pillSelectedBackground: '{semantic.status.successTint}',
|
|
8609
|
+
pillSelectedColor: '{semantic.status.successTintForeground}',
|
|
8610
|
+
pillSelectedBorderColor: '{semantic.status.successTintForeground}'
|
|
6954
8611
|
},
|
|
6955
8612
|
tagGroup: {
|
|
6956
8613
|
gap: '{semantic.space.xs}',
|
|
@@ -6976,6 +8633,282 @@ const Arvisfy = {
|
|
|
6976
8633
|
focusBorderWidth: '{semantic.border.thin}',
|
|
6977
8634
|
focusBorderColor: '{semantic.color.focus}',
|
|
6978
8635
|
focusShadow: '{semantic.shadow.focus}'
|
|
8636
|
+
},
|
|
8637
|
+
optionCard: {
|
|
8638
|
+
gap: '{semantic.space.sm}',
|
|
8639
|
+
bodyGap: '{semantic.space.xs}',
|
|
8640
|
+
padding: '{semantic.space.lg}',
|
|
8641
|
+
radius: '{semantic.radius.control}',
|
|
8642
|
+
borderWidth: '{semantic.border.medium}',
|
|
8643
|
+
borderColor: '{semantic.color.border}',
|
|
8644
|
+
background: '{semantic.color.surface}',
|
|
8645
|
+
color: '{semantic.color.text}',
|
|
8646
|
+
fontSize: '{semantic.text.sm}',
|
|
8647
|
+
fontWeight: '{semantic.fontWeight.medium}',
|
|
8648
|
+
descriptionColor: '{semantic.color.textMuted}',
|
|
8649
|
+
descriptionFontSize: '{semantic.text.xs}',
|
|
8650
|
+
indicatorSize: '{semantic.space.md}',
|
|
8651
|
+
indicatorInset: '{semantic.space.xs}',
|
|
8652
|
+
indicatorBorderColor: '{semantic.color.borderStrong}',
|
|
8653
|
+
indicatorBackground: '{semantic.color.surface}',
|
|
8654
|
+
selectedBorderColor: '{semantic.status.success}',
|
|
8655
|
+
// The prototype's selected "Tipo de descuento" card background
|
|
8656
|
+
// (`#F5FBF8`, batch 6) is a paler green than the general chip/badge
|
|
8657
|
+
// soft surface, so it uses the dedicated card tint instead of
|
|
8658
|
+
// `successSoft`.
|
|
8659
|
+
selectedBackground: '{semantic.status.successCardTint}',
|
|
8660
|
+
selectedColor: '{semantic.status.successSoftForeground}',
|
|
8661
|
+
selectedIndicatorBorderColor: '{semantic.status.success}',
|
|
8662
|
+
selectedIndicatorBackground: '{semantic.status.success}',
|
|
8663
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
8664
|
+
transitionDuration: '{semantic.motion.fast}'
|
|
8665
|
+
},
|
|
8666
|
+
loadMore: {
|
|
8667
|
+
gap: '{semantic.space.md}',
|
|
8668
|
+
paddingBlock: '{semantic.space.lg}',
|
|
8669
|
+
color: '{semantic.color.textMuted}',
|
|
8670
|
+
fontSize: '{semantic.text.sm}'
|
|
8671
|
+
},
|
|
8672
|
+
avatarGroup: {
|
|
8673
|
+
size: '{semantic.size.controlMd}',
|
|
8674
|
+
radius: '{semantic.radius.round}',
|
|
8675
|
+
counterBackground: '{semantic.color.surfaceMuted}',
|
|
8676
|
+
counterColor: '{semantic.color.text}',
|
|
8677
|
+
counterBorderColor: '{semantic.color.surface}',
|
|
8678
|
+
counterBorderWidth: '{semantic.border.thin}',
|
|
8679
|
+
counterFontSize: '{semantic.text.xs}',
|
|
8680
|
+
counterFontWeight: '{semantic.fontWeight.semibold}'
|
|
8681
|
+
},
|
|
8682
|
+
emptyState: {
|
|
8683
|
+
gap: '{semantic.space.sm}',
|
|
8684
|
+
paddingBlock: '{semantic.space.xxl}',
|
|
8685
|
+
iconSize: '{semantic.size.controlLg}',
|
|
8686
|
+
iconSizeSm: '{semantic.size.controlMd}',
|
|
8687
|
+
titleColor: '{semantic.color.text}',
|
|
8688
|
+
titleFontSize: '{semantic.text.md}',
|
|
8689
|
+
titleFontSizeSm: '{semantic.text.sm}',
|
|
8690
|
+
titleFontWeight: '{semantic.fontWeight.semibold}',
|
|
8691
|
+
descriptionColor: '{semantic.color.textMuted}',
|
|
8692
|
+
descriptionFontSize: '{semantic.text.sm}',
|
|
8693
|
+
actionsGap: '{semantic.space.sm}'
|
|
8694
|
+
},
|
|
8695
|
+
menu: {
|
|
8696
|
+
minWidth: '{semantic.size.popover}',
|
|
8697
|
+
padding: '{semantic.space.sm}',
|
|
8698
|
+
gap: '{semantic.space.xs}',
|
|
8699
|
+
borderWidth: '{semantic.border.thin}',
|
|
8700
|
+
borderColor: '{semantic.color.border}',
|
|
8701
|
+
radius: '{semantic.radius.overlay}',
|
|
8702
|
+
background: '{semantic.color.surface}',
|
|
8703
|
+
color: '{semantic.color.text}',
|
|
8704
|
+
shadow: '{semantic.shadow.subtle}',
|
|
8705
|
+
enterDuration: '{semantic.motion.enter}',
|
|
8706
|
+
enterEasing: '{semantic.motion.easing}',
|
|
8707
|
+
headerGap: '{semantic.space.sm}',
|
|
8708
|
+
headerPaddingBlock: '{semantic.space.sm}',
|
|
8709
|
+
headerPaddingInline: '{semantic.space.md}',
|
|
8710
|
+
headerBorderColor: '{semantic.color.border}',
|
|
8711
|
+
sectionLabelColor: '{semantic.color.textMuted}',
|
|
8712
|
+
sectionLabelFontSize: '{semantic.text.xs}',
|
|
8713
|
+
sectionLabelFontWeight: '{semantic.fontWeight.semibold}',
|
|
8714
|
+
sectionLabelPaddingBlock: '{semantic.space.xs}',
|
|
8715
|
+
sectionLabelPaddingInline: '{semantic.space.md}',
|
|
8716
|
+
dividerColor: '{semantic.color.border}',
|
|
8717
|
+
itemGap: '{semantic.space.sm}',
|
|
8718
|
+
itemPaddingBlock: '{semantic.space.sm}',
|
|
8719
|
+
itemPaddingInline: '{semantic.space.md}',
|
|
8720
|
+
itemRadius: '{semantic.radius.control}',
|
|
8721
|
+
itemFontSize: '{semantic.text.sm}',
|
|
8722
|
+
itemColor: '{semantic.color.text}',
|
|
8723
|
+
itemColorPrimary: '{semantic.color.primary}',
|
|
8724
|
+
itemColorSuccess: '{semantic.status.success}',
|
|
8725
|
+
itemColorWarning: '{semantic.status.warning}',
|
|
8726
|
+
itemColorDanger: '{semantic.status.danger}',
|
|
8727
|
+
itemDisabledColor: '{semantic.color.textMuted}',
|
|
8728
|
+
itemBackgroundHover: '{semantic.status.successTint}',
|
|
8729
|
+
// Text turns the same success tint green on hover, regardless of the
|
|
8730
|
+
// item's own `color` (batch 6) — except `color="danger"`, which keeps
|
|
8731
|
+
// its own text color and only changes the hover background.
|
|
8732
|
+
itemColorHover: '{semantic.status.successTintForeground}',
|
|
8733
|
+
itemBackgroundHoverDanger: '{semantic.status.dangerSoftHover}',
|
|
8734
|
+
itemFocusShadow: '{semantic.shadow.focus}',
|
|
8735
|
+
transitionDuration: '{semantic.motion.fast}'
|
|
8736
|
+
},
|
|
8737
|
+
timeline: {
|
|
8738
|
+
gap: '{semantic.space.md}',
|
|
8739
|
+
gapSm: '{semantic.space.sm}',
|
|
8740
|
+
connectorColor: '{semantic.color.border}',
|
|
8741
|
+
connectorWidth: '{semantic.border.medium}',
|
|
8742
|
+
dotSize: '{semantic.size.timelineDot}',
|
|
8743
|
+
dotSizeSm: '{semantic.size.timelineDotSm}',
|
|
8744
|
+
dotNeutral: '{semantic.status.neutralText}',
|
|
8745
|
+
dotPrimary: '{semantic.color.primary}',
|
|
8746
|
+
dotSuccess: '{semantic.status.success}',
|
|
8747
|
+
dotInfo: '{semantic.status.info}',
|
|
8748
|
+
dotWarning: '{semantic.status.warning}',
|
|
8749
|
+
dotDanger: '{semantic.status.danger}',
|
|
8750
|
+
dotAccent: '{semantic.status.accent}',
|
|
8751
|
+
markerGap: '{semantic.space.sm}',
|
|
8752
|
+
contentGap: '{semantic.space.xs}',
|
|
8753
|
+
titleColor: '{semantic.color.text}',
|
|
8754
|
+
titleFontSize: '{semantic.text.sm}',
|
|
8755
|
+
titleFontSizeSm: '{semantic.text.xs}',
|
|
8756
|
+
titleFontWeight: '{semantic.fontWeight.medium}',
|
|
8757
|
+
metaColor: '{semantic.color.textMuted}',
|
|
8758
|
+
metaFontSize: '{semantic.text.xs}'
|
|
8759
|
+
},
|
|
8760
|
+
sideNav: {
|
|
8761
|
+
gap: '{semantic.space.xs}',
|
|
8762
|
+
background: '{semantic.color.nav}',
|
|
8763
|
+
color: '{semantic.navRail.text}',
|
|
8764
|
+
successBackground: '{semantic.color.surface}',
|
|
8765
|
+
successColor: '{semantic.color.text}',
|
|
8766
|
+
itemGap: '{semantic.space.sm}',
|
|
8767
|
+
itemPaddingBlock: '{semantic.size.sideNavItemPaddingBlock}',
|
|
8768
|
+
itemPaddingInline: '{semantic.size.sideNavItemPaddingInline}',
|
|
8769
|
+
itemRadius: '{semantic.radius.tab}',
|
|
8770
|
+
// `color="success"` item padding/radius (batch 6): the config sub-nav
|
|
8771
|
+
// uses a larger rhythm and a 12px radius, distinct from the branded
|
|
8772
|
+
// `nav` rail's 9px/11px/11px.
|
|
8773
|
+
itemPaddingBlockSuccess: '{semantic.size.sideNavItemPaddingBlockSuccess}',
|
|
8774
|
+
itemPaddingInlineSuccess: '{semantic.size.sideNavItemPaddingInlineSuccess}',
|
|
8775
|
+
itemRadiusSuccess: '{semantic.radius.control}',
|
|
8776
|
+
itemFontSize: '{semantic.text.navItem}',
|
|
8777
|
+
itemFontWeight: '{semantic.fontWeight.bold}',
|
|
8778
|
+
itemColor: '{semantic.navRail.text}',
|
|
8779
|
+
itemColorActive: '{semantic.navRail.activeText}',
|
|
8780
|
+
itemBackgroundActive: '{semantic.color.navActive}',
|
|
8781
|
+
itemSuccessColor: '{semantic.color.text}',
|
|
8782
|
+
itemSuccessColorActive: '{semantic.status.successTintForeground}',
|
|
8783
|
+
itemSuccessBackgroundActive: '{semantic.status.successTint}',
|
|
8784
|
+
itemDescriptionColor: '{semantic.navRail.textMuted}',
|
|
8785
|
+
itemDescriptionSuccessColor: '{semantic.color.textMuted}',
|
|
8786
|
+
itemDescriptionFontSize: '{semantic.text.navItemDescription}',
|
|
8787
|
+
itemFocusShadow: '{semantic.shadow.focus}',
|
|
8788
|
+
transitionDuration: '{semantic.motion.fast}',
|
|
8789
|
+
badgeGap: '{semantic.space.sm}',
|
|
8790
|
+
sectionLabelColor: '{semantic.navRail.sectionLabel}',
|
|
8791
|
+
sectionLabelSuccessColor: '{semantic.color.textMuted}',
|
|
8792
|
+
sectionLabelFontSize: '{semantic.text.navEyebrow}',
|
|
8793
|
+
sectionLabelFontWeight: '{semantic.fontWeight.semibold}',
|
|
8794
|
+
sectionLabelLetterSpacing: '{semantic.letterSpacing.wide}',
|
|
8795
|
+
sectionLabelPaddingBlock: '{semantic.space.xs}',
|
|
8796
|
+
sectionLabelPaddingInline: '{semantic.size.sideNavItemPaddingInline}'
|
|
8797
|
+
},
|
|
8798
|
+
statCard: {
|
|
8799
|
+
background: '{semantic.color.surface}',
|
|
8800
|
+
color: '{semantic.color.text}',
|
|
8801
|
+
borderColor: '{semantic.color.border}',
|
|
8802
|
+
borderColorHover: '{semantic.color.borderStrong}',
|
|
8803
|
+
borderWidth: '{semantic.border.thin}',
|
|
8804
|
+
radius: '{semantic.radius.surface}',
|
|
8805
|
+
radiusCompact: '{semantic.radius.overlay}',
|
|
8806
|
+
shadow: '{semantic.shadow.subtle}',
|
|
8807
|
+
paddingBlock: '{semantic.size.statCardPaddingBlock}',
|
|
8808
|
+
paddingInline: '{semantic.size.statCardPaddingInline}',
|
|
8809
|
+
paddingBlockCompact: '{semantic.size.statCardPaddingBlockCompact}',
|
|
8810
|
+
paddingInlineCompact: '{semantic.size.statCardPaddingInlineCompact}',
|
|
8811
|
+
gap: '{semantic.space.sm}',
|
|
8812
|
+
labelColor: '{semantic.color.textMuted}',
|
|
8813
|
+
labelFontSize: '{semantic.text.xs}',
|
|
8814
|
+
labelFontWeight: '{semantic.fontWeight.bold}',
|
|
8815
|
+
valueFontFamily: '{semantic.font.display}',
|
|
8816
|
+
valueFontSize: '{semantic.text.displayLg}',
|
|
8817
|
+
valueFontSizeCompact: '{semantic.text.displaySm}',
|
|
8818
|
+
valueFontWeight: '{semantic.fontWeight.bold}',
|
|
8819
|
+
valueLineHeight: '{semantic.lineHeight.display}',
|
|
8820
|
+
valueLetterSpacing: '{semantic.letterSpacing.tighter}',
|
|
8821
|
+
valueLetterSpacingCompact: '{semantic.letterSpacing.tight}',
|
|
8822
|
+
valueToneSuccessColor: '{semantic.status.successSoftForeground}',
|
|
8823
|
+
valueToneWarningColor: '{semantic.status.warningSoftForeground}',
|
|
8824
|
+
valueToneDangerColor: '{semantic.status.dangerSoftForeground}',
|
|
8825
|
+
valueToneInfoColor: '{semantic.status.infoSoftForeground}',
|
|
8826
|
+
suffixColor: '{semantic.color.textMuted}',
|
|
8827
|
+
suffixFontSize: '{semantic.text.lg}',
|
|
8828
|
+
iconSize: '{semantic.size.statCardIconSize}',
|
|
8829
|
+
iconRadius: '{semantic.radius.round}',
|
|
8830
|
+
iconColor: '{semantic.color.textMuted}',
|
|
8831
|
+
deltaFontSize: '{semantic.text.xs}',
|
|
8832
|
+
deltaFontWeight: '{semantic.fontWeight.semibold}',
|
|
8833
|
+
deltaPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
8834
|
+
deltaPaddingInline: '{semantic.size.chipPillPaddingInline}',
|
|
8835
|
+
deltaRadius: '{semantic.radius.pill}',
|
|
8836
|
+
deltaGap: '{semantic.space.xs}',
|
|
8837
|
+
deltaUpBackground: '{semantic.status.successSoft}',
|
|
8838
|
+
deltaUpColor: '{semantic.status.successSoftForeground}',
|
|
8839
|
+
deltaDownBackground: '{semantic.status.warningSoft}',
|
|
8840
|
+
deltaDownColor: '{semantic.status.warningSoftForeground}',
|
|
8841
|
+
deltaNeutralBackground: '{semantic.color.surfaceMuted}',
|
|
8842
|
+
deltaNeutralColor: '{semantic.color.textMuted}',
|
|
8843
|
+
deltaLabelColor: '{semantic.color.textMuted}',
|
|
8844
|
+
hintColor: '{semantic.color.textMuted}',
|
|
8845
|
+
hintFontSize: '{semantic.text.xs}',
|
|
8846
|
+
metaGap: '{semantic.space.sm}',
|
|
8847
|
+
footerBorderColor: '{semantic.color.border}',
|
|
8848
|
+
footerPaddingBlock: '{semantic.space.sm}',
|
|
8849
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
8850
|
+
darkBackground: '{semantic.color.emphasisBackground}',
|
|
8851
|
+
darkColor: '{semantic.color.emphasisForeground}',
|
|
8852
|
+
transitionDuration: '{semantic.motion.fast}'
|
|
8853
|
+
},
|
|
8854
|
+
commandPalette: {
|
|
8855
|
+
backdropColor: '{semantic.color.emphasisBackground}',
|
|
8856
|
+
width: '{semantic.size.commandPalette}',
|
|
8857
|
+
radius: '{semantic.radius.overlay}',
|
|
8858
|
+
background: '{semantic.color.surface}',
|
|
8859
|
+
color: '{semantic.color.text}',
|
|
8860
|
+
borderColor: '{semantic.color.border}',
|
|
8861
|
+
borderWidth: '{semantic.border.thin}',
|
|
8862
|
+
shadow: '{semantic.shadow.high}',
|
|
8863
|
+
layer: '{semantic.layer.modal}',
|
|
8864
|
+
searchBorderColor: '{semantic.color.border}',
|
|
8865
|
+
searchIconColor: '{semantic.color.textMuted}',
|
|
8866
|
+
searchPlaceholderColor: '{semantic.color.textMuted}',
|
|
8867
|
+
searchColor: '{semantic.color.text}',
|
|
8868
|
+
searchFontSize: '{semantic.text.md}',
|
|
8869
|
+
searchPaddingBlock: '{semantic.space.md}',
|
|
8870
|
+
searchPaddingInline: '{semantic.space.lg}',
|
|
8871
|
+
searchGap: '{semantic.space.sm}',
|
|
8872
|
+
groupLabelColor: '{semantic.color.textMuted}',
|
|
8873
|
+
groupLabelFontSize: '{semantic.text.xs}',
|
|
8874
|
+
groupLabelFontWeight: '{semantic.fontWeight.semibold}',
|
|
8875
|
+
groupGap: '{semantic.space.xs}',
|
|
8876
|
+
listPadding: '{semantic.space.sm}',
|
|
8877
|
+
itemGap: '{semantic.space.sm}',
|
|
8878
|
+
itemPaddingBlock: '{semantic.space.sm}',
|
|
8879
|
+
itemPaddingInline: '{semantic.space.md}',
|
|
8880
|
+
itemRadius: '{semantic.radius.control}',
|
|
8881
|
+
itemColor: '{semantic.color.text}',
|
|
8882
|
+
itemIconWidth: '{semantic.size.commandPaletteItemIcon}',
|
|
8883
|
+
itemMetaColor: '{semantic.color.textMuted}',
|
|
8884
|
+
itemMetaColorActive: '{semantic.status.commandPaletteMetaActive}',
|
|
8885
|
+
itemAvatarActiveBackground: '{semantic.status.commandPaletteAvatarActiveBackground}',
|
|
8886
|
+
itemAvatarActiveColor: '{semantic.status.successTintForeground}',
|
|
8887
|
+
itemActiveBackground: '{semantic.status.successTint}',
|
|
8888
|
+
itemActiveColor: '{semantic.status.successTintForeground}',
|
|
8889
|
+
itemDisabledColor: '{semantic.color.textMuted}',
|
|
8890
|
+
kbdBackground: '{semantic.color.surfaceMuted}',
|
|
8891
|
+
kbdColor: '{semantic.color.textMuted}',
|
|
8892
|
+
kbdRadius: '{semantic.radius.tab}',
|
|
8893
|
+
kbdPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
8894
|
+
kbdPaddingInline: '{semantic.size.chipPillPaddingInline}',
|
|
8895
|
+
kbdFontSize: '{semantic.text.xs}',
|
|
8896
|
+
// Opt-in modifier for a projected `<kbd data-active>` (e.g. a
|
|
8897
|
+
// consumer-built search-prefix hint) — batch 6. No interactive
|
|
8898
|
+
// prefix-hint feature is wired into the component itself yet.
|
|
8899
|
+
kbdActiveBorderColor: '{semantic.status.successTintForeground}',
|
|
8900
|
+
kbdActiveColor: '{semantic.status.successTintForeground}',
|
|
8901
|
+
footerBorderColor: '{semantic.color.border}',
|
|
8902
|
+
footerColor: '{semantic.color.textMuted}',
|
|
8903
|
+
footerFontSize: '{semantic.text.xs}',
|
|
8904
|
+
footerPaddingBlock: '{semantic.space.sm}',
|
|
8905
|
+
footerPaddingInline: '{semantic.space.lg}',
|
|
8906
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
8907
|
+
enterDuration: '{semantic.motion.enter}',
|
|
8908
|
+
enterEasing: '{semantic.motion.easing}'
|
|
8909
|
+
},
|
|
8910
|
+
overlay: {
|
|
8911
|
+
layer: '{semantic.layer.overlay}'
|
|
6979
8912
|
}
|
|
6980
8913
|
}
|
|
6981
8914
|
};
|
|
@@ -7235,6 +9168,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
7235
9168
|
args: [{ providedIn: 'root' }]
|
|
7236
9169
|
}], ctorParameters: () => [] });
|
|
7237
9170
|
|
|
9171
|
+
/**
|
|
9172
|
+
* Vertical list of dated events. Renders an actual `<ol>` so screen readers
|
|
9173
|
+
* announce it as a list; `ns-timeline-item` renders the individual `<li>`
|
|
9174
|
+
* rows and reads `size` from this host through `:host-context`.
|
|
9175
|
+
*/
|
|
9176
|
+
class NsTimelineComponent {
|
|
9177
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
9178
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9179
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsTimelineComponent, isStandalone: true, selector: "ns-timeline", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-timeline": "true", "class.ns-timeline--sm": "size() === 'sm'", "class.ns-timeline--md": "size() === 'md'" } }, ngImport: i0, template: `<ol class="ns-timeline__list">
|
|
9180
|
+
<ng-content />
|
|
9181
|
+
</ol>`, isInline: true, styles: [":host{display:block}.ns-timeline__list{margin:0;list-style-type:none;padding:0}.ns-timeline-item__row{display:flex;padding-block-end:var(--ns-component-timeline-gap)}.ns-timeline-item__marker{display:flex;flex-shrink:0;flex-direction:column;align-items:center;margin-inline-end:var(--ns-component-timeline-marker-gap)}.ns-timeline-item__dot{flex-shrink:0;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-timeline-dot-size);block-size:var(--ns-component-timeline-dot-size);background:var(--ns-component-timeline-dot-neutral)}.ns-timeline-item__connector{flex:1;inline-size:var(--ns-component-timeline-connector-width);background:var(--ns-component-timeline-connector-color)}:host(:last-child) .ns-timeline-item__connector{display:none}:host(.ns-timeline-item--primary) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-primary)}:host(.ns-timeline-item--success) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-success)}:host(.ns-timeline-item--info) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-info)}:host(.ns-timeline-item--warning) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-warning)}:host(.ns-timeline-item--danger) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-danger)}:host(.ns-timeline-item--accent) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-accent)}.ns-timeline-item__content{display:flex;min-width:0px;flex:1;flex-direction:column;gap:var(--ns-component-timeline-content-gap)}.ns-timeline-item__title{margin:0;color:var(--ns-component-timeline-title-color);font-size:var(--ns-component-timeline-title-font-size);font-weight:var(--ns-component-timeline-title-font-weight)}.ns-timeline-item__meta{margin:0;color:var(--ns-component-timeline-meta-color);font-size:var(--ns-component-timeline-meta-font-size)}.ns-timeline-item__extra:empty{display:none}:host-context(.ns-timeline--sm) .ns-timeline-item__row{padding-block-end:var(--ns-component-timeline-gap-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__dot{inline-size:var(--ns-component-timeline-dot-size-sm);block-size:var(--ns-component-timeline-dot-size-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__title{font-size:var(--ns-component-timeline-title-font-size-sm)}:host(:last-child) .ns-timeline-item__row{padding-block-end:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9182
|
+
}
|
|
9183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTimelineComponent, decorators: [{
|
|
9184
|
+
type: Component,
|
|
9185
|
+
args: [{ selector: 'ns-timeline', standalone: true, template: `<ol class="ns-timeline__list">
|
|
9186
|
+
<ng-content />
|
|
9187
|
+
</ol>`, host: {
|
|
9188
|
+
'[class.ns-timeline]': 'true',
|
|
9189
|
+
'[class.ns-timeline--sm]': "size() === 'sm'",
|
|
9190
|
+
'[class.ns-timeline--md]': "size() === 'md'"
|
|
9191
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ns-timeline__list{margin:0;list-style-type:none;padding:0}.ns-timeline-item__row{display:flex;padding-block-end:var(--ns-component-timeline-gap)}.ns-timeline-item__marker{display:flex;flex-shrink:0;flex-direction:column;align-items:center;margin-inline-end:var(--ns-component-timeline-marker-gap)}.ns-timeline-item__dot{flex-shrink:0;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-timeline-dot-size);block-size:var(--ns-component-timeline-dot-size);background:var(--ns-component-timeline-dot-neutral)}.ns-timeline-item__connector{flex:1;inline-size:var(--ns-component-timeline-connector-width);background:var(--ns-component-timeline-connector-color)}:host(:last-child) .ns-timeline-item__connector{display:none}:host(.ns-timeline-item--primary) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-primary)}:host(.ns-timeline-item--success) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-success)}:host(.ns-timeline-item--info) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-info)}:host(.ns-timeline-item--warning) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-warning)}:host(.ns-timeline-item--danger) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-danger)}:host(.ns-timeline-item--accent) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-accent)}.ns-timeline-item__content{display:flex;min-width:0px;flex:1;flex-direction:column;gap:var(--ns-component-timeline-content-gap)}.ns-timeline-item__title{margin:0;color:var(--ns-component-timeline-title-color);font-size:var(--ns-component-timeline-title-font-size);font-weight:var(--ns-component-timeline-title-font-weight)}.ns-timeline-item__meta{margin:0;color:var(--ns-component-timeline-meta-color);font-size:var(--ns-component-timeline-meta-font-size)}.ns-timeline-item__extra:empty{display:none}:host-context(.ns-timeline--sm) .ns-timeline-item__row{padding-block-end:var(--ns-component-timeline-gap-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__dot{inline-size:var(--ns-component-timeline-dot-size-sm);block-size:var(--ns-component-timeline-dot-size-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__title{font-size:var(--ns-component-timeline-title-font-size-sm)}:host(:last-child) .ns-timeline-item__row{padding-block-end:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
9192
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
9193
|
+
|
|
9194
|
+
class NsTimelineItemComponent {
|
|
9195
|
+
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
9196
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
9197
|
+
meta = input(undefined, ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
9198
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsTimelineItemComponent, isStandalone: true, selector: "ns-timeline-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-timeline-item": "true", "class.ns-timeline-item--neutral": "color() === 'neutral'", "class.ns-timeline-item--primary": "color() === 'primary'", "class.ns-timeline-item--success": "color() === 'success'", "class.ns-timeline-item--info": "color() === 'info'", "class.ns-timeline-item--warning": "color() === 'warning'", "class.ns-timeline-item--danger": "color() === 'danger'", "class.ns-timeline-item--accent": "color() === 'accent'" } }, ngImport: i0, template: `
|
|
9200
|
+
<li class="ns-timeline-item__row">
|
|
9201
|
+
<span class="ns-timeline-item__marker" aria-hidden="true">
|
|
9202
|
+
<span class="ns-timeline-item__dot"></span>
|
|
9203
|
+
<span class="ns-timeline-item__connector"></span>
|
|
9204
|
+
</span>
|
|
9205
|
+
<div class="ns-timeline-item__content">
|
|
9206
|
+
<p class="ns-timeline-item__title">{{ title() }}</p>
|
|
9207
|
+
@if (meta()) {
|
|
9208
|
+
<p class="ns-timeline-item__meta">{{ meta() }}</p>
|
|
9209
|
+
}
|
|
9210
|
+
<div class="ns-timeline-item__extra"><ng-content /></div>
|
|
9211
|
+
</div>
|
|
9212
|
+
</li>
|
|
9213
|
+
`, isInline: true, styles: [":host{display:block}.ns-timeline__list{margin:0;list-style-type:none;padding:0}.ns-timeline-item__row{display:flex;padding-block-end:var(--ns-component-timeline-gap)}.ns-timeline-item__marker{display:flex;flex-shrink:0;flex-direction:column;align-items:center;margin-inline-end:var(--ns-component-timeline-marker-gap)}.ns-timeline-item__dot{flex-shrink:0;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-timeline-dot-size);block-size:var(--ns-component-timeline-dot-size);background:var(--ns-component-timeline-dot-neutral)}.ns-timeline-item__connector{flex:1;inline-size:var(--ns-component-timeline-connector-width);background:var(--ns-component-timeline-connector-color)}:host(:last-child) .ns-timeline-item__connector{display:none}:host(.ns-timeline-item--primary) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-primary)}:host(.ns-timeline-item--success) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-success)}:host(.ns-timeline-item--info) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-info)}:host(.ns-timeline-item--warning) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-warning)}:host(.ns-timeline-item--danger) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-danger)}:host(.ns-timeline-item--accent) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-accent)}.ns-timeline-item__content{display:flex;min-width:0px;flex:1;flex-direction:column;gap:var(--ns-component-timeline-content-gap)}.ns-timeline-item__title{margin:0;color:var(--ns-component-timeline-title-color);font-size:var(--ns-component-timeline-title-font-size);font-weight:var(--ns-component-timeline-title-font-weight)}.ns-timeline-item__meta{margin:0;color:var(--ns-component-timeline-meta-color);font-size:var(--ns-component-timeline-meta-font-size)}.ns-timeline-item__extra:empty{display:none}:host-context(.ns-timeline--sm) .ns-timeline-item__row{padding-block-end:var(--ns-component-timeline-gap-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__dot{inline-size:var(--ns-component-timeline-dot-size-sm);block-size:var(--ns-component-timeline-dot-size-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__title{font-size:var(--ns-component-timeline-title-font-size-sm)}:host(:last-child) .ns-timeline-item__row{padding-block-end:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9214
|
+
}
|
|
9215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTimelineItemComponent, decorators: [{
|
|
9216
|
+
type: Component,
|
|
9217
|
+
args: [{ selector: 'ns-timeline-item', standalone: true, template: `
|
|
9218
|
+
<li class="ns-timeline-item__row">
|
|
9219
|
+
<span class="ns-timeline-item__marker" aria-hidden="true">
|
|
9220
|
+
<span class="ns-timeline-item__dot"></span>
|
|
9221
|
+
<span class="ns-timeline-item__connector"></span>
|
|
9222
|
+
</span>
|
|
9223
|
+
<div class="ns-timeline-item__content">
|
|
9224
|
+
<p class="ns-timeline-item__title">{{ title() }}</p>
|
|
9225
|
+
@if (meta()) {
|
|
9226
|
+
<p class="ns-timeline-item__meta">{{ meta() }}</p>
|
|
9227
|
+
}
|
|
9228
|
+
<div class="ns-timeline-item__extra"><ng-content /></div>
|
|
9229
|
+
</div>
|
|
9230
|
+
</li>
|
|
9231
|
+
`, host: {
|
|
9232
|
+
'[class.ns-timeline-item]': 'true',
|
|
9233
|
+
'[class.ns-timeline-item--neutral]': "color() === 'neutral'",
|
|
9234
|
+
'[class.ns-timeline-item--primary]': "color() === 'primary'",
|
|
9235
|
+
'[class.ns-timeline-item--success]': "color() === 'success'",
|
|
9236
|
+
'[class.ns-timeline-item--info]': "color() === 'info'",
|
|
9237
|
+
'[class.ns-timeline-item--warning]': "color() === 'warning'",
|
|
9238
|
+
'[class.ns-timeline-item--danger]': "color() === 'danger'",
|
|
9239
|
+
'[class.ns-timeline-item--accent]': "color() === 'accent'"
|
|
9240
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ns-timeline__list{margin:0;list-style-type:none;padding:0}.ns-timeline-item__row{display:flex;padding-block-end:var(--ns-component-timeline-gap)}.ns-timeline-item__marker{display:flex;flex-shrink:0;flex-direction:column;align-items:center;margin-inline-end:var(--ns-component-timeline-marker-gap)}.ns-timeline-item__dot{flex-shrink:0;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-timeline-dot-size);block-size:var(--ns-component-timeline-dot-size);background:var(--ns-component-timeline-dot-neutral)}.ns-timeline-item__connector{flex:1;inline-size:var(--ns-component-timeline-connector-width);background:var(--ns-component-timeline-connector-color)}:host(:last-child) .ns-timeline-item__connector{display:none}:host(.ns-timeline-item--primary) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-primary)}:host(.ns-timeline-item--success) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-success)}:host(.ns-timeline-item--info) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-info)}:host(.ns-timeline-item--warning) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-warning)}:host(.ns-timeline-item--danger) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-danger)}:host(.ns-timeline-item--accent) .ns-timeline-item__dot{background:var(--ns-component-timeline-dot-accent)}.ns-timeline-item__content{display:flex;min-width:0px;flex:1;flex-direction:column;gap:var(--ns-component-timeline-content-gap)}.ns-timeline-item__title{margin:0;color:var(--ns-component-timeline-title-color);font-size:var(--ns-component-timeline-title-font-size);font-weight:var(--ns-component-timeline-title-font-weight)}.ns-timeline-item__meta{margin:0;color:var(--ns-component-timeline-meta-color);font-size:var(--ns-component-timeline-meta-font-size)}.ns-timeline-item__extra:empty{display:none}:host-context(.ns-timeline--sm) .ns-timeline-item__row{padding-block-end:var(--ns-component-timeline-gap-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__dot{inline-size:var(--ns-component-timeline-dot-size-sm);block-size:var(--ns-component-timeline-dot-size-sm)}:host-context(.ns-timeline--sm) .ns-timeline-item__title{font-size:var(--ns-component-timeline-title-font-size-sm)}:host(:last-child) .ns-timeline-item__row{padding-block-end:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
9241
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }] } });
|
|
9242
|
+
|
|
7238
9243
|
class NsToastHandle {
|
|
7239
9244
|
closeToast;
|
|
7240
9245
|
closeReason = signal(undefined, ...(ngDevMode ? [{ debugName: "closeReason" }] : /* istanbul ignore next */ []));
|
|
@@ -7557,7 +9562,7 @@ class NsTabComponent {
|
|
|
7557
9562
|
[hidden]="!selected()"
|
|
7558
9563
|
>
|
|
7559
9564
|
<ng-content />
|
|
7560
|
-
</section>`, isInline: true, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-
|
|
9565
|
+
</section>`, isInline: true, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-component-tabs-list-background)}.ns-tabs__tab{cursor:pointer;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-component-tabs-tab-min-height);padding:var(--ns-component-tabs-padding-block) var(--ns-component-tabs-padding-inline);color:var(--ns-component-tabs-color);border-radius:var(--ns-component-tabs-tab-radius)}.ns-tabs__tab:hover:not(:disabled):not([aria-selected=true]){color:var(--ns-component-tabs-hover-color)}.ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-selected-background);color:var(--ns-component-tabs-selected-foreground);box-shadow:var(--ns-component-tabs-selected-shadow)}.ns-tabs__tab:focus-visible{outline:none;box-shadow:var(--ns-component-tabs-focus-shadow)}.ns-tabs__tab:disabled{cursor:not-allowed;opacity:50%}:host(.ns-tabs--pill) .ns-tabs__list{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0}:host(.ns-tabs--pill) .ns-tabs__tab{border-radius:calc(infinity * 1px);--tw-border-style: solid;border-style:solid;padding:var(--ns-component-tabs-pill-padding-block) var(--ns-component-tabs-pill-padding-inline);border-width:var(--ns-component-tabs-pill-border-width);border-color:var(--ns-component-tabs-pill-border-color);color:var(--ns-component-tabs-pill-color)}:host(.ns-tabs--pill) .ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-pill-selected-background);color:var(--ns-component-tabs-pill-selected-color);border-color:var(--ns-component-tabs-pill-selected-border-color);box-shadow:none}.ns-tab__panel{padding:var(--ns-component-tabs-padding-inline) 0 0}@media(prefers-reduced-motion:reduce){.ns-tabs__tab{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7561
9566
|
}
|
|
7562
9567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTabComponent, decorators: [{
|
|
7563
9568
|
type: Component,
|
|
@@ -7572,10 +9577,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
7572
9577
|
</section>`, host: {
|
|
7573
9578
|
'[class.ns-tab]': 'true',
|
|
7574
9579
|
'[attr.data-state]': "selected() ? 'active' : 'inactive'"
|
|
7575
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-
|
|
9580
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-component-tabs-list-background)}.ns-tabs__tab{cursor:pointer;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-component-tabs-tab-min-height);padding:var(--ns-component-tabs-padding-block) var(--ns-component-tabs-padding-inline);color:var(--ns-component-tabs-color);border-radius:var(--ns-component-tabs-tab-radius)}.ns-tabs__tab:hover:not(:disabled):not([aria-selected=true]){color:var(--ns-component-tabs-hover-color)}.ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-selected-background);color:var(--ns-component-tabs-selected-foreground);box-shadow:var(--ns-component-tabs-selected-shadow)}.ns-tabs__tab:focus-visible{outline:none;box-shadow:var(--ns-component-tabs-focus-shadow)}.ns-tabs__tab:disabled{cursor:not-allowed;opacity:50%}:host(.ns-tabs--pill) .ns-tabs__list{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0}:host(.ns-tabs--pill) .ns-tabs__tab{border-radius:calc(infinity * 1px);--tw-border-style: solid;border-style:solid;padding:var(--ns-component-tabs-pill-padding-block) var(--ns-component-tabs-pill-padding-inline);border-width:var(--ns-component-tabs-pill-border-width);border-color:var(--ns-component-tabs-pill-border-color);color:var(--ns-component-tabs-pill-color)}:host(.ns-tabs--pill) .ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-pill-selected-background);color:var(--ns-component-tabs-pill-selected-color);border-color:var(--ns-component-tabs-pill-selected-border-color);box-shadow:none}.ns-tab__panel{padding:var(--ns-component-tabs-padding-inline) 0 0}@media(prefers-reduced-motion:reduce){.ns-tabs__tab{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
7576
9581
|
}], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
7577
9582
|
class NsTabsComponent {
|
|
7578
9583
|
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
9584
|
+
variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
7579
9585
|
selectedKey = model(undefined, ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
|
|
7580
9586
|
tabs = contentChildren(NsTabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
7581
9587
|
element = inject((ElementRef));
|
|
@@ -7621,7 +9627,7 @@ class NsTabsComponent {
|
|
|
7621
9627
|
}
|
|
7622
9628
|
}
|
|
7623
9629
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7624
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsTabsComponent, isStandalone: true, selector: "ns-tabs", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectedKey: { classPropertyName: "selectedKey", publicName: "selectedKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedKey: "selectedKeyChange" }, host: { properties: { "class.ns-tabs": "true" } }, queries: [{ propertyName: "tabs", predicate: NsTabComponent, isSignal: true }], ngImport: i0, template: `
|
|
9630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsTabsComponent, isStandalone: true, selector: "ns-tabs", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedKey: { classPropertyName: "selectedKey", publicName: "selectedKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedKey: "selectedKeyChange" }, host: { properties: { "class.ns-tabs": "true", "class.ns-tabs--underline": "variant() === 'underline'", "class.ns-tabs--pill": "variant() === 'pill'" } }, queries: [{ propertyName: "tabs", predicate: NsTabComponent, isSignal: true }], ngImport: i0, template: `
|
|
7625
9631
|
<div
|
|
7626
9632
|
class="ns-tabs__list"
|
|
7627
9633
|
role="tablist"
|
|
@@ -7646,7 +9652,7 @@ class NsTabsComponent {
|
|
|
7646
9652
|
}
|
|
7647
9653
|
</div>
|
|
7648
9654
|
<ng-content />
|
|
7649
|
-
`, isInline: true, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-
|
|
9655
|
+
`, isInline: true, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-component-tabs-list-background)}.ns-tabs__tab{cursor:pointer;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-component-tabs-tab-min-height);padding:var(--ns-component-tabs-padding-block) var(--ns-component-tabs-padding-inline);color:var(--ns-component-tabs-color);border-radius:var(--ns-component-tabs-tab-radius)}.ns-tabs__tab:hover:not(:disabled):not([aria-selected=true]){color:var(--ns-component-tabs-hover-color)}.ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-selected-background);color:var(--ns-component-tabs-selected-foreground);box-shadow:var(--ns-component-tabs-selected-shadow)}.ns-tabs__tab:focus-visible{outline:none;box-shadow:var(--ns-component-tabs-focus-shadow)}.ns-tabs__tab:disabled{cursor:not-allowed;opacity:50%}:host(.ns-tabs--pill) .ns-tabs__list{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0}:host(.ns-tabs--pill) .ns-tabs__tab{border-radius:calc(infinity * 1px);--tw-border-style: solid;border-style:solid;padding:var(--ns-component-tabs-pill-padding-block) var(--ns-component-tabs-pill-padding-inline);border-width:var(--ns-component-tabs-pill-border-width);border-color:var(--ns-component-tabs-pill-border-color);color:var(--ns-component-tabs-pill-color)}:host(.ns-tabs--pill) .ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-pill-selected-background);color:var(--ns-component-tabs-pill-selected-color);border-color:var(--ns-component-tabs-pill-selected-border-color);box-shadow:none}.ns-tab__panel{padding:var(--ns-component-tabs-padding-inline) 0 0}@media(prefers-reduced-motion:reduce){.ns-tabs__tab{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7650
9656
|
}
|
|
7651
9657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTabsComponent, decorators: [{
|
|
7652
9658
|
type: Component,
|
|
@@ -7675,8 +9681,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
7675
9681
|
}
|
|
7676
9682
|
</div>
|
|
7677
9683
|
<ng-content />
|
|
7678
|
-
`, host: {
|
|
7679
|
-
|
|
9684
|
+
`, host: {
|
|
9685
|
+
'[class.ns-tabs]': 'true',
|
|
9686
|
+
'[class.ns-tabs--underline]': "variant() === 'underline'",
|
|
9687
|
+
'[class.ns-tabs--pill]': "variant() === 'pill'"
|
|
9688
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host.ns-tabs{display:block}.ns-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-tabs-gap);padding:var(--ns-component-tabs-gap);border-color:var(--ns-component-tabs-border-color);border-radius:var(--ns-component-tabs-list-radius);background:var(--ns-component-tabs-list-background)}.ns-tabs__tab{cursor:pointer;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-component-tabs-tab-min-height);padding:var(--ns-component-tabs-padding-block) var(--ns-component-tabs-padding-inline);color:var(--ns-component-tabs-color);border-radius:var(--ns-component-tabs-tab-radius)}.ns-tabs__tab:hover:not(:disabled):not([aria-selected=true]){color:var(--ns-component-tabs-hover-color)}.ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-selected-background);color:var(--ns-component-tabs-selected-foreground);box-shadow:var(--ns-component-tabs-selected-shadow)}.ns-tabs__tab:focus-visible{outline:none;box-shadow:var(--ns-component-tabs-focus-shadow)}.ns-tabs__tab:disabled{cursor:not-allowed;opacity:50%}:host(.ns-tabs--pill) .ns-tabs__list{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0}:host(.ns-tabs--pill) .ns-tabs__tab{border-radius:calc(infinity * 1px);--tw-border-style: solid;border-style:solid;padding:var(--ns-component-tabs-pill-padding-block) var(--ns-component-tabs-pill-padding-inline);border-width:var(--ns-component-tabs-pill-border-width);border-color:var(--ns-component-tabs-pill-border-color);color:var(--ns-component-tabs-pill-color)}:host(.ns-tabs--pill) .ns-tabs__tab[aria-selected=true]{background:var(--ns-component-tabs-pill-selected-background);color:var(--ns-component-tabs-pill-selected-color);border-color:var(--ns-component-tabs-pill-selected-border-color);box-shadow:none}.ns-tab__panel{padding:var(--ns-component-tabs-padding-inline) 0 0}@media(prefers-reduced-motion:reduce){.ns-tabs__tab{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
9689
|
+
}], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selectedKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKey", required: false }] }, { type: i0.Output, args: ["selectedKeyChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsTabComponent), { isSignal: true }] }] } });
|
|
7680
9690
|
|
|
7681
9691
|
class NsTagComponent {
|
|
7682
9692
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
@@ -7949,5 +9959,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
7949
9959
|
* Generated bundle index. Do not edit.
|
|
7950
9960
|
*/
|
|
7951
9961
|
|
|
7952
|
-
export { Arvisfy, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSkeletonComponent, NsSliderComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
|
|
9962
|
+
export { Arvisfy, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsAvatarGroupComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommandPaletteComponent, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsEmptyStateComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsLoadMoreComponent, NsMenuComponent, NsMenuDividerComponent, NsMenuItemComponent, NsMenuSectionComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOptionCardComponent, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSideNavComponent, NsSideNavItemComponent, NsSideNavSectionComponent, NsSkeletonComponent, NsSliderComponent, NsStatCardComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsTimelineComponent, NsTimelineItemComponent, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
|
|
7953
9963
|
//# sourceMappingURL=ng-solid-design-system.mjs.map
|