@ng-solid/design-system 22.3.0 → 22.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/fesm2022/ng-solid-design-system.mjs +1645 -336
- package/fesm2022/ng-solid-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/themes/README.md +72 -1
- package/themes/tailwind.css +15 -0
- package/types/ng-solid-design-system.d.ts +296 -26
|
@@ -5,7 +5,7 @@ import * as i1$1 from '@angular/common';
|
|
|
5
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
|
-
import { DateFormatter, startOfWeek, startOfMonth, getDayOfWeek, endOfMonth, isToday,
|
|
8
|
+
import { DateFormatter, startOfWeek, startOfMonth, getDayOfWeek, endOfMonth, isToday, getLocalTimeZone, today } from '@internationalized/date';
|
|
9
9
|
import { RouterLink } from '@angular/router';
|
|
10
10
|
import { NsSafeHtmlPipe, NsHumanizePipe, Guid, NS_UPLOAD_CLIENT, NsFile, notEmpty } from '@ng-solid/core';
|
|
11
11
|
import { Subject } from 'rxjs';
|
|
@@ -514,13 +514,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
514
514
|
read: ElementRef
|
|
515
515
|
}, isSignal: true }] }] } });
|
|
516
516
|
|
|
517
|
-
function numberOrUndefined(value) {
|
|
517
|
+
function numberOrUndefined$1(value) {
|
|
518
518
|
return value === undefined || value === null
|
|
519
519
|
? undefined
|
|
520
520
|
: numberAttribute(value);
|
|
521
521
|
}
|
|
522
522
|
class NsBadgeComponent {
|
|
523
|
-
count = input(undefined, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
|
|
523
|
+
count = input(undefined, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: numberOrUndefined$1 });
|
|
524
524
|
mode = input('count', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
525
525
|
ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
526
526
|
normalizedCount = computed(() => {
|
|
@@ -610,12 +610,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
610
610
|
function booleanOrUndefined(value) {
|
|
611
611
|
return value === undefined ? undefined : booleanAttribute(value);
|
|
612
612
|
}
|
|
613
|
+
function numberOrUndefined(value) {
|
|
614
|
+
return value === undefined || value === null || value === ''
|
|
615
|
+
? undefined
|
|
616
|
+
: numberAttribute(value) || undefined;
|
|
617
|
+
}
|
|
613
618
|
class NsButtonComponent {
|
|
614
619
|
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
615
620
|
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
616
621
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
617
622
|
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
618
623
|
iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
624
|
+
/**
|
|
625
|
+
* Explicit `ns-icon` size override. Defaults to 14 for `size="xs"` and 16
|
|
626
|
+
* for every other size when left unset.
|
|
627
|
+
*/
|
|
628
|
+
iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
|
|
629
|
+
/** Resolved `ns-icon` size: `iconSize()` when set, else a per-size default. */
|
|
630
|
+
effectiveIconSize = computed(() => this.iconSize() ?? (this.size() === 'xs' ? 14 : 16), ...(ngDevMode ? [{ debugName: "effectiveIconSize" }] : /* istanbul ignore next */ []));
|
|
619
631
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
620
632
|
block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
621
633
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -639,7 +651,7 @@ class NsButtonComponent {
|
|
|
639
651
|
this.control().nativeElement.focus();
|
|
640
652
|
}
|
|
641
653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: `
|
|
654
|
+
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 }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", 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--xs": "size() === 'xs'", "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'", "class.ns-button--dark": "variant() === 'dark'" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
643
655
|
<button
|
|
644
656
|
#control
|
|
645
657
|
class="ns-button__control"
|
|
@@ -660,13 +672,13 @@ class NsButtonComponent {
|
|
|
660
672
|
<ns-icon
|
|
661
673
|
class="ns-button__icon"
|
|
662
674
|
[name]="icon()"
|
|
663
|
-
size="
|
|
675
|
+
[size]="effectiveIconSize()"
|
|
664
676
|
aria-hidden="true"
|
|
665
677
|
/>
|
|
666
678
|
}
|
|
667
679
|
<ng-content />
|
|
668
680
|
</button>
|
|
669
|
-
`, isInline: true, 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"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
681
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";@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--xs) .ns-button__control{min-block-size:var(--ns-component-button-min-height-xs);border-radius:var(--ns-component-button-radius-xs)}: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--xs.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height-xs)}: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--dark) .ns-button__control{background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background);color:var(--ns-component-button-dark-color)}:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}: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"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
670
682
|
}
|
|
671
683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, decorators: [{
|
|
672
684
|
type: Component,
|
|
@@ -691,7 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
691
703
|
<ns-icon
|
|
692
704
|
class="ns-button__icon"
|
|
693
705
|
[name]="icon()"
|
|
694
|
-
size="
|
|
706
|
+
[size]="effectiveIconSize()"
|
|
695
707
|
aria-hidden="true"
|
|
696
708
|
/>
|
|
697
709
|
}
|
|
@@ -705,6 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
705
717
|
'[class.ns-button--selected]': 'selected() === true',
|
|
706
718
|
'[class.ns-button--unselected]': 'selected() === false',
|
|
707
719
|
'[attr.data-selected]': 'selected() === undefined ? null : selected()',
|
|
720
|
+
'[class.ns-button--xs]': "size() === 'xs'",
|
|
708
721
|
'[class.ns-button--sm]': "size() === 'sm'",
|
|
709
722
|
'[class.ns-button--md]': "size() === 'md'",
|
|
710
723
|
'[class.ns-button--lg]': "size() === 'lg'",
|
|
@@ -712,9 +725,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
712
725
|
'[class.ns-button--secondary]': "variant() === 'secondary'",
|
|
713
726
|
'[class.ns-button--tertiary]': "variant() === 'tertiary'",
|
|
714
727
|
'[class.ns-button--success]': "variant() === 'success'",
|
|
715
|
-
'[class.ns-button--danger]': "variant() === 'danger'"
|
|
716
|
-
|
|
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 }] }] } });
|
|
728
|
+
'[class.ns-button--danger]': "variant() === 'danger'",
|
|
729
|
+
'[class.ns-button--dark]': "variant() === 'dark'"
|
|
730
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";@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--xs) .ns-button__control{min-block-size:var(--ns-component-button-min-height-xs);border-radius:var(--ns-component-button-radius-xs)}: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--xs.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height-xs)}: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--dark) .ns-button__control{background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background);color:var(--ns-component-button-dark-color)}:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}: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"] }]
|
|
731
|
+
}], 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 }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", 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 }] }] } });
|
|
718
732
|
|
|
719
733
|
const NAVIGATION_KEYS$2 = [
|
|
720
734
|
'ArrowDown',
|
|
@@ -795,7 +809,7 @@ class NsCardComponent {
|
|
|
795
809
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
796
810
|
variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
797
811
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
798
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsCardComponent, isStandalone: true, selector: "ns-card", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel() || null", "class.ns-card": "true", "class.ns-card--solid": "variant() === 'solid'", "class.ns-card--soft": "variant() === 'soft'", "class.ns-card--outline": "variant() === 'outline'", "class.ns-card--ghost": "variant() === 'ghost'" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
812
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsCardComponent, isStandalone: true, selector: "ns-card", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel() || null", "class.ns-card": "true", "class.ns-card--solid": "variant() === 'solid'", "class.ns-card--soft": "variant() === 'soft'", "class.ns-card--outline": "variant() === 'outline'", "class.ns-card--ghost": "variant() === 'ghost'" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
799
813
|
}
|
|
800
814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardComponent, decorators: [{
|
|
801
815
|
type: Component,
|
|
@@ -806,31 +820,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
806
820
|
'[class.ns-card--soft]': "variant() === 'soft'",
|
|
807
821
|
'[class.ns-card--outline]': "variant() === 'outline'",
|
|
808
822
|
'[class.ns-card--ghost]': "variant() === 'ghost'"
|
|
809
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
823
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
810
824
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
811
825
|
class NsCardHeaderComponent {
|
|
812
826
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsCardHeaderComponent, isStandalone: true, selector: "ns-card-header", host: { properties: { "class.ns-card__header": "true" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsCardHeaderComponent, isStandalone: true, selector: "ns-card-header", host: { properties: { "class.ns-card__header": "true" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
814
828
|
}
|
|
815
829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardHeaderComponent, decorators: [{
|
|
816
830
|
type: Component,
|
|
817
|
-
args: [{ selector: 'ns-card-header', standalone: true, template: '<ng-content />', host: { '[class.ns-card__header]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
831
|
+
args: [{ selector: 'ns-card-header', standalone: true, template: '<ng-content />', host: { '[class.ns-card__header]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
818
832
|
}] });
|
|
819
833
|
class NsCardBodyComponent {
|
|
820
834
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
821
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsCardBodyComponent, isStandalone: true, selector: "ns-card-body", host: { properties: { "class.ns-card__body": "true" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsCardBodyComponent, isStandalone: true, selector: "ns-card-body", host: { properties: { "class.ns-card__body": "true" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
822
836
|
}
|
|
823
837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardBodyComponent, decorators: [{
|
|
824
838
|
type: Component,
|
|
825
|
-
args: [{ selector: 'ns-card-body', standalone: true, template: '<ng-content />', host: { '[class.ns-card__body]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
839
|
+
args: [{ selector: 'ns-card-body', standalone: true, template: '<ng-content />', host: { '[class.ns-card__body]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
826
840
|
}] });
|
|
827
841
|
class NsCardFooterComponent {
|
|
828
842
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
829
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsCardFooterComponent, isStandalone: true, selector: "ns-card-footer", host: { properties: { "class.ns-card__footer": "true" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
843
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsCardFooterComponent, isStandalone: true, selector: "ns-card-footer", host: { properties: { "class.ns-card__footer": "true" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
830
844
|
}
|
|
831
845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardFooterComponent, decorators: [{
|
|
832
846
|
type: Component,
|
|
833
|
-
args: [{ selector: 'ns-card-footer', standalone: true, template: '<ng-content />', host: { '[class.ns-card__footer]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
847
|
+
args: [{ selector: 'ns-card-footer', standalone: true, template: '<ng-content />', host: { '[class.ns-card__footer]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.ns-card){display:block;overflow:hidden;border:var(--ns-component-card-border-width) solid var(--ns-component-card-border-color);border-radius:var(--ns-component-card-radius);background:var(--ns-component-card-background);color:var(--ns-component-card-color);box-shadow:var(--ns-component-card-shadow);transition:background var(--ns-component-card-transition-duration),box-shadow var(--ns-component-card-transition-duration),border-color var(--ns-component-card-transition-duration)}:host(.ns-card.ns-card--soft){background:var(--ns-component-card-soft-background)}:host(.ns-card.ns-card--outline){border-width:var(--ns-component-card-outline-border-width);box-shadow:none}:host(.ns-card.ns-card--ghost){border-color:transparent;background:transparent;box-shadow:none}:host(.ns-card__header),:host(.ns-card__body),:host(.ns-card__footer){display:block;padding:var(--ns-component-card-padding)}:host(.ns-card__header){border-block-end:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}:host(.ns-card__footer){border-block-start:var(--ns-component-card-divider-width) solid var(--ns-component-card-divider-color)}@media(prefers-reduced-motion:reduce){:host(.ns-card){transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
834
848
|
}] });
|
|
835
849
|
|
|
836
850
|
class NsChipComponent {
|
|
@@ -842,7 +856,7 @@ class NsChipComponent {
|
|
|
842
856
|
dismissLabel = input('Remove', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
|
|
843
857
|
removed = output();
|
|
844
858
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: `
|
|
859
|
+
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'", "class.ns-chip--choice": "size() === 'choice'" } }, ngImport: i0, template: `
|
|
846
860
|
<span class="ns-chip__label"><ng-content /></span>
|
|
847
861
|
@if (dismissible()) {
|
|
848
862
|
<button
|
|
@@ -855,7 +869,7 @@ class NsChipComponent {
|
|
|
855
869
|
×
|
|
856
870
|
</button>
|
|
857
871
|
}
|
|
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 });
|
|
872
|
+
`, 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)}:host(.ns-chip--choice){min-block-size:var(--ns-component-chip-choice-min-height);border-radius:var(--ns-component-chip-choice-radius);padding-inline:var(--ns-component-chip-choice-padding-inline);font-size:var(--ns-component-chip-choice-font-size);font-weight:var(--ns-component-chip-choice-font-weight);cursor:pointer}:host(.ns-chip--choice.ns-chip--disabled){cursor:not-allowed}@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 });
|
|
859
873
|
}
|
|
860
874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsChipComponent, decorators: [{
|
|
861
875
|
type: Component,
|
|
@@ -887,8 +901,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
887
901
|
'[class.ns-chip--info]': "color() === 'info'",
|
|
888
902
|
'[class.ns-chip--selected]': "color() === 'selected'",
|
|
889
903
|
'[class.ns-chip--md]': "size() === 'md'",
|
|
890
|
-
'[class.ns-chip--pill]': "size() === 'pill'"
|
|
891
|
-
|
|
904
|
+
'[class.ns-chip--pill]': "size() === 'pill'",
|
|
905
|
+
'[class.ns-chip--choice]': "size() === 'choice'"
|
|
906
|
+
}, 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)}:host(.ns-chip--choice){min-block-size:var(--ns-component-chip-choice-min-height);border-radius:var(--ns-component-chip-choice-radius);padding-inline:var(--ns-component-chip-choice-padding-inline);font-size:var(--ns-component-chip-choice-font-size);font-weight:var(--ns-component-chip-choice-font-weight);cursor:pointer}:host(.ns-chip--choice.ns-chip--disabled){cursor:not-allowed}@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
907
|
}], 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"] }] } });
|
|
893
908
|
|
|
894
909
|
class NsCollectionController {
|
|
@@ -950,18 +965,20 @@ class NsEmptyStateComponent {
|
|
|
950
965
|
description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
951
966
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
952
967
|
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: `
|
|
968
|
+
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'", "class.ns-empty-state--lg": "size() === 'lg'" } }, ngImport: i0, template: `
|
|
954
969
|
<span class="ns-empty-state__icon"
|
|
955
970
|
><ng-content select="[empty-state-icon]"
|
|
956
971
|
/></span>
|
|
957
|
-
<
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
972
|
+
<div class="ns-empty-state__text">
|
|
973
|
+
<p class="ns-empty-state__title">{{ title() }}</p>
|
|
974
|
+
@if (description()) {
|
|
975
|
+
<p class="ns-empty-state__description">{{ description() }}</p>
|
|
976
|
+
}
|
|
977
|
+
</div>
|
|
961
978
|
<div class="ns-empty-state__actions">
|
|
962
979
|
<ng-content select="[empty-state-actions]" />
|
|
963
980
|
</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-
|
|
981
|
+
`, 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);padding-inline:var(--ns-component-empty-state-padding-inline)}.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);border-radius:50%;background:var(--ns-component-empty-state-icon-background);color:var(--ns-component-empty-state-icon-color)}.ns-empty-state__icon:empty{display:none}.ns-empty-state__icon ::ng-deep svg{inline-size:var(--ns-component-empty-state-glyph-size-md);block-size:var(--ns-component-empty-state-glyph-size-md)}.ns-empty-state__text{display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-empty-state-text-gap)}.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);font-weight:var(--ns-component-empty-state-description-font-weight);max-inline-size:var(--ns-component-empty-state-max-width-md);text-wrap:pretty}.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--lg){padding-block:var(--ns-component-empty-state-padding-block-lg)}:host(.ns-empty-state--lg) .ns-empty-state__icon{inline-size:var(--ns-component-empty-state-icon-size-lg);block-size:var(--ns-component-empty-state-icon-size-lg)}:host(.ns-empty-state--lg) .ns-empty-state__icon ::ng-deep svg{inline-size:var(--ns-component-empty-state-glyph-size-lg);block-size:var(--ns-component-empty-state-glyph-size-lg)}:host(.ns-empty-state--lg) .ns-empty-state__title{font-size:var(--ns-component-empty-state-title-font-size-lg)}:host(.ns-empty-state--lg) .ns-empty-state__description{font-size:var(--ns-component-empty-state-description-font-size-lg);max-inline-size:var(--ns-component-empty-state-max-width-lg)}:host(.ns-empty-state--sm){gap:var(--ns-component-empty-state-gap-sm);padding-block:var(--ns-component-empty-state-padding-block-sm);padding-inline:var(--ns-component-empty-state-padding-inline-sm)}: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__icon ::ng-deep svg{inline-size:var(--ns-component-empty-state-glyph-size-sm);block-size:var(--ns-component-empty-state-glyph-size-sm)}:host(.ns-empty-state--sm) .ns-empty-state__title{font-size:var(--ns-component-empty-state-title-font-size-sm)}:host(.ns-empty-state--sm) .ns-empty-state__description{font-size:var(--ns-component-empty-state-description-font-size-sm);max-inline-size:var(--ns-component-empty-state-max-width-sm)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
965
982
|
}
|
|
966
983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEmptyStateComponent, decorators: [{
|
|
967
984
|
type: Component,
|
|
@@ -969,18 +986,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
969
986
|
<span class="ns-empty-state__icon"
|
|
970
987
|
><ng-content select="[empty-state-icon]"
|
|
971
988
|
/></span>
|
|
972
|
-
<
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
989
|
+
<div class="ns-empty-state__text">
|
|
990
|
+
<p class="ns-empty-state__title">{{ title() }}</p>
|
|
991
|
+
@if (description()) {
|
|
992
|
+
<p class="ns-empty-state__description">{{ description() }}</p>
|
|
993
|
+
}
|
|
994
|
+
</div>
|
|
976
995
|
<div class="ns-empty-state__actions">
|
|
977
996
|
<ng-content select="[empty-state-actions]" />
|
|
978
997
|
</div>
|
|
979
998
|
`, host: {
|
|
980
999
|
'[class.ns-empty-state]': 'true',
|
|
981
1000
|
'[class.ns-empty-state--sm]': "size() === 'sm'",
|
|
982
|
-
'[class.ns-empty-state--md]': "size() === 'md'"
|
|
983
|
-
|
|
1001
|
+
'[class.ns-empty-state--md]': "size() === 'md'",
|
|
1002
|
+
'[class.ns-empty-state--lg]': "size() === 'lg'"
|
|
1003
|
+
}, 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);padding-inline:var(--ns-component-empty-state-padding-inline)}.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);border-radius:50%;background:var(--ns-component-empty-state-icon-background);color:var(--ns-component-empty-state-icon-color)}.ns-empty-state__icon:empty{display:none}.ns-empty-state__icon ::ng-deep svg{inline-size:var(--ns-component-empty-state-glyph-size-md);block-size:var(--ns-component-empty-state-glyph-size-md)}.ns-empty-state__text{display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-empty-state-text-gap)}.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);font-weight:var(--ns-component-empty-state-description-font-weight);max-inline-size:var(--ns-component-empty-state-max-width-md);text-wrap:pretty}.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--lg){padding-block:var(--ns-component-empty-state-padding-block-lg)}:host(.ns-empty-state--lg) .ns-empty-state__icon{inline-size:var(--ns-component-empty-state-icon-size-lg);block-size:var(--ns-component-empty-state-icon-size-lg)}:host(.ns-empty-state--lg) .ns-empty-state__icon ::ng-deep svg{inline-size:var(--ns-component-empty-state-glyph-size-lg);block-size:var(--ns-component-empty-state-glyph-size-lg)}:host(.ns-empty-state--lg) .ns-empty-state__title{font-size:var(--ns-component-empty-state-title-font-size-lg)}:host(.ns-empty-state--lg) .ns-empty-state__description{font-size:var(--ns-component-empty-state-description-font-size-lg);max-inline-size:var(--ns-component-empty-state-max-width-lg)}:host(.ns-empty-state--sm){gap:var(--ns-component-empty-state-gap-sm);padding-block:var(--ns-component-empty-state-padding-block-sm);padding-inline:var(--ns-component-empty-state-padding-inline-sm)}: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__icon ::ng-deep svg{inline-size:var(--ns-component-empty-state-glyph-size-sm);block-size:var(--ns-component-empty-state-glyph-size-sm)}:host(.ns-empty-state--sm) .ns-empty-state__title{font-size:var(--ns-component-empty-state-title-font-size-sm)}:host(.ns-empty-state--sm) .ns-empty-state__description{font-size:var(--ns-component-empty-state-description-font-size-sm);max-inline-size:var(--ns-component-empty-state-max-width-sm)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
984
1004
|
}], 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 }] }] } });
|
|
985
1005
|
|
|
986
1006
|
const VIEWPORT_GUTTER = 8;
|
|
@@ -2035,7 +2055,7 @@ class NsDatePickerCalendarComponent {
|
|
|
2035
2055
|
key: date.toString(),
|
|
2036
2056
|
outside: date.month !== visibleMonth.month || date.year !== visibleMonth.year,
|
|
2037
2057
|
disabled: !this.isAvailable(date),
|
|
2038
|
-
current: isToday(date,
|
|
2058
|
+
current: isToday(date, getLocalTimeZone()),
|
|
2039
2059
|
selected: (!!selected && selected.compare(date) === 0) || isStart || isEnd,
|
|
2040
2060
|
inRange: !!range?.start &&
|
|
2041
2061
|
!!range.end &&
|
|
@@ -2255,10 +2275,10 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2255
2275
|
calendarLabel = 'Date picker';
|
|
2256
2276
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2257
2277
|
focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
|
|
2258
|
-
visibleMonth = signal(today(
|
|
2259
|
-
yearAnchor = signal(today(
|
|
2278
|
+
visibleMonth = signal(today(getLocalTimeZone()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
|
|
2279
|
+
yearAnchor = signal(today(getLocalTimeZone()).year, ...(ngDevMode ? [{ debugName: "yearAnchor" }] : /* istanbul ignore next */ []));
|
|
2260
2280
|
pickerView = signal('calendar', ...(ngDevMode ? [{ debugName: "pickerView" }] : /* istanbul ignore next */ []));
|
|
2261
|
-
yearPageStart = signal(today(
|
|
2281
|
+
yearPageStart = signal(today(getLocalTimeZone()).year, ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
|
|
2262
2282
|
overlay = inject(NsOverlayService);
|
|
2263
2283
|
changeDetector = inject(ChangeDetectorRef);
|
|
2264
2284
|
destroyRef = inject(DestroyRef);
|
|
@@ -2476,7 +2496,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2476
2496
|
this.overlayRef?.close('programmatic');
|
|
2477
2497
|
}
|
|
2478
2498
|
firstSelectableDate() {
|
|
2479
|
-
let candidate = this.minDate() || today(
|
|
2499
|
+
let candidate = this.minDate() || today(getLocalTimeZone());
|
|
2480
2500
|
const maxDate = this.maxDate();
|
|
2481
2501
|
const attempts = maxDate
|
|
2482
2502
|
? Number.POSITIVE_INFINITY
|
|
@@ -2532,7 +2552,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2532
2552
|
return years[start];
|
|
2533
2553
|
}
|
|
2534
2554
|
monthOptionState(date) {
|
|
2535
|
-
const current = today(
|
|
2555
|
+
const current = today(getLocalTimeZone());
|
|
2536
2556
|
const selected = this.value();
|
|
2537
2557
|
const visible = this.visibleMonth();
|
|
2538
2558
|
const focused = this.focusedDate();
|
|
@@ -2544,7 +2564,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2544
2564
|
};
|
|
2545
2565
|
}
|
|
2546
2566
|
yearOptionState(year) {
|
|
2547
|
-
const current = today(
|
|
2567
|
+
const current = today(getLocalTimeZone());
|
|
2548
2568
|
const selected = this.value();
|
|
2549
2569
|
const visible = this.visibleMonth();
|
|
2550
2570
|
const focused = this.focusedDate();
|
|
@@ -2889,7 +2909,7 @@ class NsDateRangePickerComponent extends NsValueAccessor {
|
|
|
2889
2909
|
calendarLabel = 'Date range picker';
|
|
2890
2910
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2891
2911
|
focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
|
|
2892
|
-
visibleMonth = signal(today(
|
|
2912
|
+
visibleMonth = signal(today(getLocalTimeZone()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
|
|
2893
2913
|
overlay = inject(NsOverlayService);
|
|
2894
2914
|
changeDetector = inject(ChangeDetectorRef);
|
|
2895
2915
|
destroyRef = inject(DestroyRef);
|
|
@@ -3012,7 +3032,7 @@ class NsDateRangePickerComponent extends NsValueAccessor {
|
|
|
3012
3032
|
return { start: value.start || null, end: value.end || null };
|
|
3013
3033
|
}
|
|
3014
3034
|
firstSelectableDate() {
|
|
3015
|
-
let candidate = this.minDate() || today(
|
|
3035
|
+
let candidate = this.minDate() || today(getLocalTimeZone());
|
|
3016
3036
|
const maxDate = this.maxDate();
|
|
3017
3037
|
const attempts = maxDate
|
|
3018
3038
|
? Number.POSITIVE_INFINITY
|
|
@@ -3205,8 +3225,9 @@ class NsDropdownItemDirective {
|
|
|
3205
3225
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
3206
3226
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3207
3227
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3228
|
+
dot = input(undefined, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
|
|
3208
3229
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3209
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
3230
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
3210
3231
|
}
|
|
3211
3232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, decorators: [{
|
|
3212
3233
|
type: Directive,
|
|
@@ -3214,7 +3235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3214
3235
|
selector: 'ns-dropdown-item',
|
|
3215
3236
|
standalone: true
|
|
3216
3237
|
}]
|
|
3217
|
-
}], 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 }] }] } });
|
|
3238
|
+
}], 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 }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
|
|
3218
3239
|
|
|
3219
3240
|
class NsSkeletonComponent {
|
|
3220
3241
|
width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -3272,13 +3293,15 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3272
3293
|
return projected.map((item) => ({
|
|
3273
3294
|
key: item.key(),
|
|
3274
3295
|
label: item.label(),
|
|
3275
|
-
disabled: item.disabled()
|
|
3296
|
+
disabled: item.disabled(),
|
|
3297
|
+
dot: item.dot()
|
|
3276
3298
|
}));
|
|
3277
3299
|
}
|
|
3278
3300
|
return this.collection().map((item) => ({
|
|
3279
3301
|
key: item.key,
|
|
3280
3302
|
label: item.label,
|
|
3281
|
-
disabled: item.disabled ?? false
|
|
3303
|
+
disabled: item.disabled ?? false,
|
|
3304
|
+
dot: item.dot
|
|
3282
3305
|
}));
|
|
3283
3306
|
}, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
3284
3307
|
visibleItems = computed(() => {
|
|
@@ -3306,6 +3329,14 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3306
3329
|
.map((item) => item.label)
|
|
3307
3330
|
.join(', ');
|
|
3308
3331
|
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
|
|
3332
|
+
/** Dot of the selected item; the trigger shows it for single selection only. */
|
|
3333
|
+
selectedDot = computed(() => {
|
|
3334
|
+
if (this.selectionMode() !== 'single') {
|
|
3335
|
+
return undefined;
|
|
3336
|
+
}
|
|
3337
|
+
const keys = this.selectedKeys();
|
|
3338
|
+
return this.items().find((item) => keys.has(item.key))?.dot;
|
|
3339
|
+
}, ...(ngDevMode ? [{ debugName: "selectedDot" }] : /* istanbul ignore next */ []));
|
|
3309
3340
|
activeId = computed(() => {
|
|
3310
3341
|
const item = this.visibleItems()[this.activeIndex()];
|
|
3311
3342
|
return item ? `${this.listboxId}-${String(item.key)}` : undefined;
|
|
@@ -3470,7 +3501,7 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3470
3501
|
useExisting: NsDropdownComponent,
|
|
3471
3502
|
multi: true
|
|
3472
3503
|
}
|
|
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 });
|
|
3504
|
+
], 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 >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\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 @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\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);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__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.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 });
|
|
3474
3505
|
}
|
|
3475
3506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
|
|
3476
3507
|
type: Component,
|
|
@@ -3486,7 +3517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3486
3517
|
useExisting: NsDropdownComponent,
|
|
3487
3518
|
multi: true
|
|
3488
3519
|
}
|
|
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"] }]
|
|
3520
|
+
], 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 >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\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 @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\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);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__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.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"] }]
|
|
3490
3521
|
}], 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: [{
|
|
3491
3522
|
type: ViewChild,
|
|
3492
3523
|
args: ['trigger']
|
|
@@ -3617,11 +3648,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3617
3648
|
/** Visual-only composition primitive. Projected controls own their form state. */
|
|
3618
3649
|
class NsInputGroupComponent {
|
|
3619
3650
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-
|
|
3651
|
+
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__field{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 });
|
|
3621
3652
|
}
|
|
3622
3653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, decorators: [{
|
|
3623
3654
|
type: Component,
|
|
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-
|
|
3655
|
+
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__field{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"] }]
|
|
3625
3656
|
}] });
|
|
3626
3657
|
|
|
3627
3658
|
class NsInputGroupAddonComponent {
|
|
@@ -3643,9 +3674,19 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3643
3674
|
currency = input(undefined, ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
|
|
3644
3675
|
format = input({}, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
3645
3676
|
displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
3677
|
+
currencyPrefix = computed(() => {
|
|
3678
|
+
if (!this.currency()) {
|
|
3679
|
+
return undefined;
|
|
3680
|
+
}
|
|
3681
|
+
return this.formatter
|
|
3682
|
+
.formatToParts(0)
|
|
3683
|
+
.find((part) => part.type === 'currency')?.value;
|
|
3684
|
+
}, ...(ngDevMode ? [{ debugName: "currencyPrefix" }] : /* istanbul ignore next */ []));
|
|
3646
3685
|
writeValue(value) {
|
|
3647
3686
|
super.writeValue(value);
|
|
3648
|
-
this.displayValue.set(value === null || value === undefined
|
|
3687
|
+
this.displayValue.set(value === null || value === undefined
|
|
3688
|
+
? ''
|
|
3689
|
+
: this.formatDisplayValue(value));
|
|
3649
3690
|
}
|
|
3650
3691
|
onInput(text) {
|
|
3651
3692
|
this.displayValue.set(text);
|
|
@@ -3661,7 +3702,9 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3661
3702
|
}
|
|
3662
3703
|
formatValue() {
|
|
3663
3704
|
const value = this.value();
|
|
3664
|
-
this.displayValue.set(value === null || value === undefined
|
|
3705
|
+
this.displayValue.set(value === null || value === undefined
|
|
3706
|
+
? ''
|
|
3707
|
+
: this.formatDisplayValue(value));
|
|
3665
3708
|
}
|
|
3666
3709
|
onKeydown(event) {
|
|
3667
3710
|
if (this.disabled() || this.readonly())
|
|
@@ -3700,6 +3743,41 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3700
3743
|
: {})
|
|
3701
3744
|
});
|
|
3702
3745
|
}
|
|
3746
|
+
/**
|
|
3747
|
+
* `format: { style: 'percent' }` deliberately breaks from `Intl.NumberFormat`'s
|
|
3748
|
+
* own convention. `Intl` expects a *fraction* (`format(0.1)` → "10%"); this
|
|
3749
|
+
* component's model is the 0-100 *magnitude* instead (`100` means 100%), so a
|
|
3750
|
+
* model of `10` paints "10%".
|
|
3751
|
+
*
|
|
3752
|
+
* Why: almost every form in this codebase stores a percentage as an integer
|
|
3753
|
+
* 0-100 (discounts, tax rates, commission splits, `min`/`max`/`step` all read
|
|
3754
|
+
* naturally as "0 to 100"). Making the model a 0-1 fraction would just push
|
|
3755
|
+
* the ×100/÷100 conversion onto every consumer instead of doing it once here.
|
|
3756
|
+
*
|
|
3757
|
+
* Do NOT "fix" this back to matching `Intl` — that silently multiplies every
|
|
3758
|
+
* stored percentage by 100 the next time this input round-trips a value.
|
|
3759
|
+
* The bug this comment guards against: `formatDisplayValue` used to hand the
|
|
3760
|
+
* raw 0-100 model straight to `Intl` (which reads it as a fraction, so `0.1`
|
|
3761
|
+
* printed as "10%"), while `parse` read "10%" back as the magnitude `10` — a
|
|
3762
|
+
* value that then painted as "1,000%" on the next blur. `parse` already
|
|
3763
|
+
* returns the 0-100 magnitude and is intentionally left untouched; only the
|
|
3764
|
+
* percent *formatting* path divides by 100 before calling `Intl`.
|
|
3765
|
+
*/
|
|
3766
|
+
isPercentMode() {
|
|
3767
|
+
return !this.currency() && this.format().style === 'percent';
|
|
3768
|
+
}
|
|
3769
|
+
formatDisplayValue(value) {
|
|
3770
|
+
if (!this.currency()) {
|
|
3771
|
+
return this.formatter.format(this.isPercentMode() ? value / 100 : value);
|
|
3772
|
+
}
|
|
3773
|
+
return this.formatter
|
|
3774
|
+
.formatToParts(value)
|
|
3775
|
+
.filter((part) => part.type !== 'currency')
|
|
3776
|
+
.map((part) => part.value)
|
|
3777
|
+
.join('')
|
|
3778
|
+
.trim();
|
|
3779
|
+
}
|
|
3780
|
+
/** Returns the 0-100 magnitude even in percent mode — see `isPercentMode`. */
|
|
3703
3781
|
parse(text) {
|
|
3704
3782
|
const parts = this.formatter.formatToParts(12345.6);
|
|
3705
3783
|
const group = parts.find((part) => part.type === 'group')?.value ?? ',';
|
|
@@ -3732,28 +3810,36 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3732
3810
|
</label>
|
|
3733
3811
|
}
|
|
3734
3812
|
<div class="ns-input-number__group">
|
|
3735
|
-
<input
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3813
|
+
<div class="ns-input-number__field">
|
|
3814
|
+
@if (currencyPrefix(); as prefix) {
|
|
3815
|
+
<span class="ns-input-number__prefix" aria-hidden="true">{{
|
|
3816
|
+
prefix
|
|
3817
|
+
}}</span>
|
|
3818
|
+
}
|
|
3819
|
+
<input
|
|
3820
|
+
class="ns-input-number__control"
|
|
3821
|
+
type="text"
|
|
3822
|
+
inputmode="decimal"
|
|
3823
|
+
role="spinbutton"
|
|
3824
|
+
[id]="controlId()"
|
|
3825
|
+
[name]="name()"
|
|
3826
|
+
[value]="displayValue()"
|
|
3827
|
+
[placeholder]="placeholder()"
|
|
3828
|
+
(input)="onInputEvent($event)"
|
|
3829
|
+
[disabled]="disabled()"
|
|
3830
|
+
[readOnly]="readonly()"
|
|
3831
|
+
[required]="required()"
|
|
3832
|
+
[attr.min]="min()"
|
|
3833
|
+
[attr.max]="max()"
|
|
3834
|
+
[attr.aria-valuemin]="min()"
|
|
3835
|
+
[attr.aria-valuemax]="max()"
|
|
3836
|
+
[attr.aria-valuenow]="value()"
|
|
3837
|
+
[attr.aria-invalid]="invalid() || null"
|
|
3838
|
+
[attr.aria-describedby]="describedBy()"
|
|
3839
|
+
(keydown)="onKeydown($event)"
|
|
3840
|
+
(blur)="formatValue(); onTouched()"
|
|
3841
|
+
/>
|
|
3842
|
+
</div>
|
|
3757
3843
|
<div class="ns-input-number__steppers" aria-hidden="true">
|
|
3758
3844
|
<button
|
|
3759
3845
|
type="button"
|
|
@@ -3781,7 +3867,7 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3781
3867
|
<p class="ns-input-number__error" [id]="errorId" role="alert">
|
|
3782
3868
|
{{ errorMessage() }}
|
|
3783
3869
|
</p>
|
|
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-
|
|
3870
|
+
}`, 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__field{display:flex;min-width:0px;flex:1;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);--tw-outline-style: none;outline-style:none;min-height:var(--ns-component-input-number-min-height);padding-inline: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)}.ns-input-number__prefix{flex-shrink:0;-webkit-user-select:none;user-select:none;padding-inline-end:calc(var(--ns-component-input-number-padding-inline) / 3);color:var(--ns-component-input-number-prefix-color);font:inherit;font-variant-numeric:tabular-nums}.ns-input-number__control{display:block;min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-outline-style: none;outline-style:none;padding-block:var(--ns-component-input-number-padding-block);color:inherit;font:inherit;font-variant-numeric:tabular-nums}.ns-input-number__group:hover:not(:has(.ns-input-number__control:disabled)) .ns-input-number__field,.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__field,.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__field:has(.ns-input-number__control:disabled),.ns-input-number__field:has(.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__field:has(.ns-input-number__control[readonly]):not(:has(.ns-input-number__control:disabled)){cursor:default}.ns-input-number__field:has(.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 });
|
|
3785
3871
|
}
|
|
3786
3872
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputNumberComponent, decorators: [{
|
|
3787
3873
|
type: Component,
|
|
@@ -3794,28 +3880,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3794
3880
|
</label>
|
|
3795
3881
|
}
|
|
3796
3882
|
<div class="ns-input-number__group">
|
|
3797
|
-
<input
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
|
|
3883
|
+
<div class="ns-input-number__field">
|
|
3884
|
+
@if (currencyPrefix(); as prefix) {
|
|
3885
|
+
<span class="ns-input-number__prefix" aria-hidden="true">{{
|
|
3886
|
+
prefix
|
|
3887
|
+
}}</span>
|
|
3888
|
+
}
|
|
3889
|
+
<input
|
|
3890
|
+
class="ns-input-number__control"
|
|
3891
|
+
type="text"
|
|
3892
|
+
inputmode="decimal"
|
|
3893
|
+
role="spinbutton"
|
|
3894
|
+
[id]="controlId()"
|
|
3895
|
+
[name]="name()"
|
|
3896
|
+
[value]="displayValue()"
|
|
3897
|
+
[placeholder]="placeholder()"
|
|
3898
|
+
(input)="onInputEvent($event)"
|
|
3899
|
+
[disabled]="disabled()"
|
|
3900
|
+
[readOnly]="readonly()"
|
|
3901
|
+
[required]="required()"
|
|
3902
|
+
[attr.min]="min()"
|
|
3903
|
+
[attr.max]="max()"
|
|
3904
|
+
[attr.aria-valuemin]="min()"
|
|
3905
|
+
[attr.aria-valuemax]="max()"
|
|
3906
|
+
[attr.aria-valuenow]="value()"
|
|
3907
|
+
[attr.aria-invalid]="invalid() || null"
|
|
3908
|
+
[attr.aria-describedby]="describedBy()"
|
|
3909
|
+
(keydown)="onKeydown($event)"
|
|
3910
|
+
(blur)="formatValue(); onTouched()"
|
|
3911
|
+
/>
|
|
3912
|
+
</div>
|
|
3819
3913
|
<div class="ns-input-number__steppers" aria-hidden="true">
|
|
3820
3914
|
<button
|
|
3821
3915
|
type="button"
|
|
@@ -3849,7 +3943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3849
3943
|
useExisting: forwardRef(() => NsInputNumberComponent),
|
|
3850
3944
|
multi: true
|
|
3851
3945
|
}
|
|
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-
|
|
3946
|
+
], 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__field{display:flex;min-width:0px;flex:1;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);--tw-outline-style: none;outline-style:none;min-height:var(--ns-component-input-number-min-height);padding-inline: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)}.ns-input-number__prefix{flex-shrink:0;-webkit-user-select:none;user-select:none;padding-inline-end:calc(var(--ns-component-input-number-padding-inline) / 3);color:var(--ns-component-input-number-prefix-color);font:inherit;font-variant-numeric:tabular-nums}.ns-input-number__control{display:block;min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-outline-style: none;outline-style:none;padding-block:var(--ns-component-input-number-padding-block);color:inherit;font:inherit;font-variant-numeric:tabular-nums}.ns-input-number__group:hover:not(:has(.ns-input-number__control:disabled)) .ns-input-number__field,.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__field,.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__field:has(.ns-input-number__control:disabled),.ns-input-number__field:has(.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__field:has(.ns-input-number__control[readonly]):not(:has(.ns-input-number__control:disabled)){cursor:default}.ns-input-number__field:has(.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"] }]
|
|
3853
3947
|
}], 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 }] }] } });
|
|
3854
3948
|
|
|
3855
3949
|
class NsInputSearchComponent extends NsValueAccessor {
|
|
@@ -3866,8 +3960,10 @@ class NsInputSearchComponent extends NsValueAccessor {
|
|
|
3866
3960
|
}}</label>
|
|
3867
3961
|
}
|
|
3868
3962
|
<div class="ns-input-search__group">
|
|
3869
|
-
<span aria-hidden="true"
|
|
3870
|
-
|
|
3963
|
+
<span class="ns-input-search__icon" aria-hidden="true">
|
|
3964
|
+
<ns-icon name="search" />
|
|
3965
|
+
</span>
|
|
3966
|
+
<input
|
|
3871
3967
|
class="ns-input-search__control"
|
|
3872
3968
|
type="search"
|
|
3873
3969
|
[id]="controlId()"
|
|
@@ -3897,18 +3993,20 @@ class NsInputSearchComponent extends NsValueAccessor {
|
|
|
3897
3993
|
<p class="ns-input-search__error" [id]="errorId" role="alert">
|
|
3898
3994
|
{{ errorMessage() }}
|
|
3899
3995
|
</p>
|
|
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:
|
|
3996
|
+
}`, 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);gap:var(--ns-component-input-search-gap);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__icon{display:inline-flex;flex:0 0 auto;color:var(--ns-component-input-search-icon-color)}.ns-input-search__icon ::ng-deep svg{width:var(--ns-component-input-search-icon-size);height:var(--ns-component-input-search-icon-size)}.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-size:var(--ns-component-input-search-font-size)}.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"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3901
3997
|
}
|
|
3902
3998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputSearchComponent, decorators: [{
|
|
3903
3999
|
type: Component,
|
|
3904
|
-
args: [{ selector: 'ns-input-search', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (label()) {
|
|
4000
|
+
args: [{ selector: 'ns-input-search', standalone: true, imports: [FormsModule, NsIconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (label()) {
|
|
3905
4001
|
<label class="ns-input-search__label" [for]="controlId()">{{
|
|
3906
4002
|
label()
|
|
3907
4003
|
}}</label>
|
|
3908
4004
|
}
|
|
3909
4005
|
<div class="ns-input-search__group">
|
|
3910
|
-
<span aria-hidden="true"
|
|
3911
|
-
|
|
4006
|
+
<span class="ns-input-search__icon" aria-hidden="true">
|
|
4007
|
+
<ns-icon name="search" />
|
|
4008
|
+
</span>
|
|
4009
|
+
<input
|
|
3912
4010
|
class="ns-input-search__control"
|
|
3913
4011
|
type="search"
|
|
3914
4012
|
[id]="controlId()"
|
|
@@ -3944,7 +4042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3944
4042
|
useExisting: forwardRef(() => NsInputSearchComponent),
|
|
3945
4043
|
multi: true
|
|
3946
4044
|
}
|
|
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:
|
|
4045
|
+
], 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);gap:var(--ns-component-input-search-gap);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__icon{display:inline-flex;flex:0 0 auto;color:var(--ns-component-input-search-icon-color)}.ns-input-search__icon ::ng-deep svg{width:var(--ns-component-input-search-icon-size);height:var(--ns-component-input-search-icon-size)}.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-size:var(--ns-component-input-search-font-size)}.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"] }]
|
|
3948
4046
|
}] });
|
|
3949
4047
|
|
|
3950
4048
|
class NsRadioGroupContext {
|
|
@@ -4598,23 +4696,32 @@ class NsContentEditableComponent extends NsValueAccessor {
|
|
|
4598
4696
|
elementRef = inject(ElementRef);
|
|
4599
4697
|
renderer = inject(Renderer2);
|
|
4600
4698
|
maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), alias: 'maxlength' });
|
|
4699
|
+
/**
|
|
4700
|
+
* Character count of the rendered content, measured the same way the
|
|
4701
|
+
* `maxlength` guard below measures it (`innerText.length`) so a consumer's
|
|
4702
|
+
* counter never drifts from what actually blocks typing.
|
|
4703
|
+
*/
|
|
4704
|
+
length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
|
|
4601
4705
|
enabled = true;
|
|
4602
4706
|
writeValue(value) {
|
|
4603
4707
|
if (typeof value !== 'undefined') {
|
|
4604
4708
|
this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
|
|
4709
|
+
this.updateLength();
|
|
4605
4710
|
}
|
|
4606
4711
|
}
|
|
4607
4712
|
onInput() {
|
|
4608
4713
|
this.onChange(this.elementRef.nativeElement.innerHTML);
|
|
4714
|
+
this.updateLength();
|
|
4715
|
+
}
|
|
4716
|
+
updateLength() {
|
|
4717
|
+
this.length.set(this.elementRef.nativeElement.innerText?.length ?? 0);
|
|
4609
4718
|
}
|
|
4610
4719
|
onBlur() {
|
|
4611
4720
|
this.onTouched();
|
|
4612
4721
|
}
|
|
4613
4722
|
onKeyUp(event) {
|
|
4614
4723
|
const maxLength = this.maxLength();
|
|
4615
|
-
if (maxLength &&
|
|
4616
|
-
this.elementRef.nativeElement.innerText.length >= maxLength &&
|
|
4617
|
-
event.key !== 'Backspace') {
|
|
4724
|
+
if (maxLength && this.length() >= maxLength && event.key !== 'Backspace') {
|
|
4618
4725
|
event.preventDefault();
|
|
4619
4726
|
}
|
|
4620
4727
|
}
|
|
@@ -4629,7 +4736,7 @@ class NsContentEditableComponent extends NsValueAccessor {
|
|
|
4629
4736
|
useExisting: forwardRef(() => NsContentEditableComponent),
|
|
4630
4737
|
multi: true
|
|
4631
4738
|
}
|
|
4632
|
-
], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;display:block;
|
|
4739
|
+
], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;display:block;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);--tw-outline-style: none;outline-style:none;padding:var(--ns-component-content-editable-padding-block) var(--ns-component-content-editable-padding-inline);background:var(--ns-component-content-editable-background);color:var(--ns-component-content-editable-color);font:inherit}:host:focus-visible{box-shadow:inset 0 0 0 var(--ns-component-content-editable-focus-border-width) var(--ns-component-content-editable-focus-border-color),var(--ns-component-content-editable-focus-shadow)}:host.ns-content-editable--disabled{opacity:50%;background:var(--ns-component-content-editable-disabled-background)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
|
|
4633
4740
|
}
|
|
4634
4741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsContentEditableComponent, decorators: [{
|
|
4635
4742
|
type: Component,
|
|
@@ -4642,7 +4749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
4642
4749
|
], host: {
|
|
4643
4750
|
'[class.ns-content-editable]': 'true',
|
|
4644
4751
|
'[class.ns-content-editable--disabled]': 'disabled()'
|
|
4645
|
-
}, styles: [":host{position:relative;display:block;
|
|
4752
|
+
}, styles: [":host{position:relative;display:block;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);--tw-outline-style: none;outline-style:none;padding:var(--ns-component-content-editable-padding-block) var(--ns-component-content-editable-padding-inline);background:var(--ns-component-content-editable-background);color:var(--ns-component-content-editable-color);font:inherit}:host:focus-visible{box-shadow:inset 0 0 0 var(--ns-component-content-editable-focus-border-width) var(--ns-component-content-editable-focus-border-color),var(--ns-component-content-editable-focus-shadow)}:host.ns-content-editable--disabled{opacity:50%;background:var(--ns-component-content-editable-disabled-background)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4646
4753
|
}], propDecorators: { maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], enabled: [{
|
|
4647
4754
|
type: HostBinding,
|
|
4648
4755
|
args: ['attr.contenteditable']
|
|
@@ -5015,7 +5122,12 @@ const LABELS_DEFAULT = {
|
|
|
5015
5122
|
tooltip_link: 'Tooltip',
|
|
5016
5123
|
open_new_window: 'Open link in new window',
|
|
5017
5124
|
submit_link: 'Insert',
|
|
5018
|
-
remove_color: 'Remove'
|
|
5125
|
+
remove_color: 'Remove',
|
|
5126
|
+
insert_image: 'Insert Image',
|
|
5127
|
+
close_image: 'Close image form',
|
|
5128
|
+
image_url: 'Paste the image URL',
|
|
5129
|
+
image_alt: 'Alternative text',
|
|
5130
|
+
submit_image: 'Insert'
|
|
5019
5131
|
};
|
|
5020
5132
|
class Labels {
|
|
5021
5133
|
storage = LABELS_DEFAULT;
|
|
@@ -5028,6 +5140,22 @@ class Labels {
|
|
|
5028
5140
|
}
|
|
5029
5141
|
|
|
5030
5142
|
const NS_EDITOR_SETUP = new InjectionToken('NsEditorSetup');
|
|
5143
|
+
/** Character entities used to neutralize markup when a value is interpolated into HTML. */
|
|
5144
|
+
const HTML_ESCAPES = {
|
|
5145
|
+
'&': '&',
|
|
5146
|
+
'<': '<',
|
|
5147
|
+
'>': '>',
|
|
5148
|
+
'"': '"',
|
|
5149
|
+
"'": '''
|
|
5150
|
+
};
|
|
5151
|
+
/** Matches control characters (including tab/newline) that browsers ignore when resolving a URL scheme. */
|
|
5152
|
+
// eslint-disable-next-line no-control-regex
|
|
5153
|
+
const CONTROL_CHARS_PATTERN = /[\x00-\x1f\x7f]/g;
|
|
5154
|
+
/** Matches a leading `scheme:` on a URL. Absence means the URL is relative or a fragment (`/path`, `./path`, `#anchor`). */
|
|
5155
|
+
const SCHEME_PATTERN = /^([a-zA-Z][a-zA-Z\d+\-.]*):/;
|
|
5156
|
+
const LINK_ALLOWED_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:'];
|
|
5157
|
+
const IMAGE_ALLOWED_SCHEMES = ['http:', 'https:'];
|
|
5158
|
+
const IMAGE_DATA_URL_PATTERN = /^data:image\/[a-z0-9.+-]+[;,]/i;
|
|
5031
5159
|
class NsEditorService {
|
|
5032
5160
|
config = inject(NS_EDITOR_SETUP, { optional: true });
|
|
5033
5161
|
doc = inject(DOCUMENT$1);
|
|
@@ -5067,15 +5195,84 @@ class NsEditorService {
|
|
|
5067
5195
|
}
|
|
5068
5196
|
}
|
|
5069
5197
|
createLink(link) {
|
|
5070
|
-
const
|
|
5198
|
+
const resolvedUrl = this.resolveLinkUrl(link.url);
|
|
5199
|
+
if (resolvedUrl === null) {
|
|
5200
|
+
// Unsupported/unsafe scheme (e.g. `javascript:`): skip silently, the
|
|
5201
|
+
// form already validated that a URL was entered, so no error is thrown here.
|
|
5202
|
+
return;
|
|
5203
|
+
}
|
|
5204
|
+
const href = this.escapeHtml(resolvedUrl);
|
|
5205
|
+
const title = this.escapeHtml(link.tooltip);
|
|
5206
|
+
const text = this.escapeHtml(link.text);
|
|
5207
|
+
const target = link.openNewWindow ? '_blank' : '_self';
|
|
5208
|
+
// `noopener noreferrer` prevents the new tab from reaching back into this
|
|
5209
|
+
// page via window.opener; only meaningful (and only emitted) for _blank.
|
|
5210
|
+
const rel = link.openNewWindow ? ' rel="noopener noreferrer"' : '';
|
|
5211
|
+
const newUrl = `<a href="${href}" title="${title}" target="${target}"${rel}>${text}</a>`;
|
|
5071
5212
|
this.insertHtml(newUrl);
|
|
5072
5213
|
}
|
|
5214
|
+
insertImage(image) {
|
|
5215
|
+
const resolvedUrl = this.resolveImageUrl(image.url);
|
|
5216
|
+
if (resolvedUrl === null) {
|
|
5217
|
+
// Unsupported/unsafe scheme (e.g. `javascript:`, non-image `data:`):
|
|
5218
|
+
// skip silently, mirroring createLink's rejection behaviour.
|
|
5219
|
+
return;
|
|
5220
|
+
}
|
|
5221
|
+
const src = this.escapeHtml(resolvedUrl);
|
|
5222
|
+
const alt = this.escapeHtml(image.alt ?? '');
|
|
5223
|
+
this.insertHtml(`<img src="${src}" alt="${alt}">`);
|
|
5224
|
+
}
|
|
5073
5225
|
insertHtml(html) {
|
|
5074
5226
|
const isHTMLInserted = this.doc.execCommand(Commands.INSERT_HTML, false, html);
|
|
5075
5227
|
if (!isHTMLInserted) {
|
|
5076
5228
|
throw new Error('Unable to perform the operation');
|
|
5077
5229
|
}
|
|
5078
5230
|
}
|
|
5231
|
+
/** Escapes `&`, `<`, `>`, `"` and `'` — safe for both HTML attribute values and text nodes. */
|
|
5232
|
+
escapeHtml(value) {
|
|
5233
|
+
return value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char] ?? char);
|
|
5234
|
+
}
|
|
5235
|
+
/** Strips embedded control characters and surrounding whitespace so a scheme like `java\tscript:` can't be smuggled in. */
|
|
5236
|
+
normalizeUrl(url) {
|
|
5237
|
+
return url.replace(CONTROL_CHARS_PATTERN, '').trim();
|
|
5238
|
+
}
|
|
5239
|
+
/** Returns the lowercased `scheme:` (with trailing colon) or null when the URL is relative/a fragment. */
|
|
5240
|
+
extractScheme(normalizedUrl) {
|
|
5241
|
+
const match = normalizedUrl.match(SCHEME_PATTERN);
|
|
5242
|
+
return match ? `${match[1].toLowerCase()}:` : null;
|
|
5243
|
+
}
|
|
5244
|
+
/**
|
|
5245
|
+
* Normalizes and validates a link URL in one pass. Returns the normalized
|
|
5246
|
+
* URL when its scheme is allowed (or absent), `null` otherwise. Callers
|
|
5247
|
+
* must escape and insert the returned string — never the raw input — so
|
|
5248
|
+
* the value that was validated is always the value that gets inserted.
|
|
5249
|
+
*/
|
|
5250
|
+
resolveLinkUrl(url) {
|
|
5251
|
+
const normalized = this.normalizeUrl(url);
|
|
5252
|
+
const scheme = this.extractScheme(normalized);
|
|
5253
|
+
if (scheme === null) {
|
|
5254
|
+
return normalized;
|
|
5255
|
+
}
|
|
5256
|
+
return LINK_ALLOWED_SCHEMES.includes(scheme) ? normalized : null;
|
|
5257
|
+
}
|
|
5258
|
+
/**
|
|
5259
|
+
* Normalizes and validates an image URL in one pass. Returns the
|
|
5260
|
+
* normalized URL when its scheme is allowed (or absent), `null`
|
|
5261
|
+
* otherwise. Callers must escape and insert the returned string — never
|
|
5262
|
+
* the raw input — so the value that was validated is always the value
|
|
5263
|
+
* that gets inserted.
|
|
5264
|
+
*/
|
|
5265
|
+
resolveImageUrl(url) {
|
|
5266
|
+
const normalized = this.normalizeUrl(url);
|
|
5267
|
+
const scheme = this.extractScheme(normalized);
|
|
5268
|
+
if (scheme === null) {
|
|
5269
|
+
return normalized;
|
|
5270
|
+
}
|
|
5271
|
+
if (scheme === 'data:') {
|
|
5272
|
+
return IMAGE_DATA_URL_PATTERN.test(normalized) ? normalized : null;
|
|
5273
|
+
}
|
|
5274
|
+
return IMAGE_ALLOWED_SCHEMES.includes(scheme) ? normalized : null;
|
|
5275
|
+
}
|
|
5079
5276
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5080
5277
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorService, providedIn: 'root' });
|
|
5081
5278
|
}
|
|
@@ -5105,6 +5302,7 @@ class NsEditorColorPickerComponent {
|
|
|
5105
5302
|
editor = inject(NsEditorService);
|
|
5106
5303
|
presets = input(undefined, ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
|
|
5107
5304
|
type = input('text_color', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
5305
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5108
5306
|
showPopup = false;
|
|
5109
5307
|
activeColor;
|
|
5110
5308
|
isActive;
|
|
@@ -5132,14 +5330,49 @@ class NsEditorColorPickerComponent {
|
|
|
5132
5330
|
}
|
|
5133
5331
|
remove() { }
|
|
5134
5332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorColorPickerComponent, isStandalone: true, selector: "ns-editor-color-picker", inputs: { presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"type() | nsEditorLabel\"\n [attr.aria-expanded]=\"showPopup\"\n (click)=\"toggle()\"\n>\n <span class=\"ns-editor__color-text\">\n <svg
|
|
5333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorColorPickerComponent, isStandalone: true, selector: "ns-editor-color-picker", inputs: { presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"type() | nsEditorLabel\"\n [attr.aria-expanded]=\"showPopup\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n <span class=\"ns-editor__color-text\">\n <svg\n role=\"presentation\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n <span></span>\n </span>\n\n <svg\n role=\"presentation\"\n class=\"ns-editor__toggle\"\n fill=\"currentColor\"\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n</button>\n\n@if (showPopup) {\n <div class=\"ns-editor__popup\">\n @for (colorGroup of presets(); track $index) {\n <div class=\"ns-editor__color-container\">\n @for (color of colorGroup; track $index) {\n <button\n class=\"ns-editor__color\"\n type=\"button\"\n [ngStyle]=\"{ backgroundColor: color, color: getContrastYIQ(color) }\"\n [title]=\"color\"\n [attr.aria-label]=\"color\"\n (click)=\"onColorSelect(color)\"\n ></button>\n }\n </div>\n }\n </div>\n}\n", styles: ["@layer properties;.ns-editor__button{position:relative;display:inline-flex;width:auto;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;min-width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);padding-inline:var(--ns-component-editor-action-padding-inline);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__color-text{position:relative}.ns-editor__toggle{flex-shrink:0;width:var(--ns-component-editor-toggle-icon-size);height:var(--ns-component-editor-toggle-icon-size)}.ns-editor__popup{position:absolute;margin:0;min-width:calc(var(--ns-primitive-space-1) * 40);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__color-container{display:flex;justify-content:space-between;gap:var(--ns-component-editor-gap)}.ns-editor__color-container+.ns-editor__color-container{margin-top:var(--ns-component-editor-gap)}.ns-editor__color{width:calc(var(--ns-primitive-space-1) * 10);height:calc(var(--ns-primitive-space-1) * 10);flex-shrink:0;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;transition-property:transform,translate,scale,rotate;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-editor-border-color);border-radius:var(--ns-component-editor-radius)}.ns-editor__color:hover,.ns-editor__color:focus-visible{transform:scale(1.08)}.ns-editor__color:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5136
5334
|
}
|
|
5137
5335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorColorPickerComponent, decorators: [{
|
|
5138
5336
|
type: Component,
|
|
5139
|
-
args: [{ selector: 'ns-editor-color-picker', imports: [NgStyle, NsEditorLabelPipe], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"type() | nsEditorLabel\"\n [attr.aria-expanded]=\"showPopup\"\n (click)=\"toggle()\"\n>\n <span class=\"ns-editor__color-text\">\n <svg
|
|
5140
|
-
}], propDecorators: { presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
5337
|
+
args: [{ selector: 'ns-editor-color-picker', imports: [NgStyle, NsEditorLabelPipe], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"type() | nsEditorLabel\"\n [attr.aria-expanded]=\"showPopup\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n <span class=\"ns-editor__color-text\">\n <svg\n role=\"presentation\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n <span></span>\n </span>\n\n <svg\n role=\"presentation\"\n class=\"ns-editor__toggle\"\n fill=\"currentColor\"\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n</button>\n\n@if (showPopup) {\n <div class=\"ns-editor__popup\">\n @for (colorGroup of presets(); track $index) {\n <div class=\"ns-editor__color-container\">\n @for (color of colorGroup; track $index) {\n <button\n class=\"ns-editor__color\"\n type=\"button\"\n [ngStyle]=\"{ backgroundColor: color, color: getContrastYIQ(color) }\"\n [title]=\"color\"\n [attr.aria-label]=\"color\"\n (click)=\"onColorSelect(color)\"\n ></button>\n }\n </div>\n }\n </div>\n}\n", styles: ["@layer properties;.ns-editor__button{position:relative;display:inline-flex;width:auto;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;min-width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);padding-inline:var(--ns-component-editor-action-padding-inline);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__color-text{position:relative}.ns-editor__toggle{flex-shrink:0;width:var(--ns-component-editor-toggle-icon-size);height:var(--ns-component-editor-toggle-icon-size)}.ns-editor__popup{position:absolute;margin:0;min-width:calc(var(--ns-primitive-space-1) * 40);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__color-container{display:flex;justify-content:space-between;gap:var(--ns-component-editor-gap)}.ns-editor__color-container+.ns-editor__color-container{margin-top:var(--ns-component-editor-gap)}.ns-editor__color{width:calc(var(--ns-primitive-space-1) * 10);height:calc(var(--ns-primitive-space-1) * 10);flex-shrink:0;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;transition-property:transform,translate,scale,rotate;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-editor-border-color);border-radius:var(--ns-component-editor-radius)}.ns-editor__color:hover,.ns-editor__color:focus-visible{transform:scale(1.08)}.ns-editor__color:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@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"] }]
|
|
5338
|
+
}], propDecorators: { presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5339
|
+
|
|
5340
|
+
class NsEditorImageComponent {
|
|
5341
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5342
|
+
formImage;
|
|
5343
|
+
show;
|
|
5344
|
+
fb = inject(FormBuilder);
|
|
5345
|
+
editor = inject(NsEditorService);
|
|
5346
|
+
ngOnInit() {
|
|
5347
|
+
this.formImage = this.fb.group({
|
|
5348
|
+
url: ['', Validators.required],
|
|
5349
|
+
text: ['']
|
|
5350
|
+
});
|
|
5351
|
+
}
|
|
5352
|
+
insert() {
|
|
5353
|
+
if (this.formImage.valid) {
|
|
5354
|
+
const { url, text } = this.formImage.getRawValue();
|
|
5355
|
+
this.editor.insertImage({ url, alt: text });
|
|
5356
|
+
this.formImage.reset();
|
|
5357
|
+
this.show = false;
|
|
5358
|
+
}
|
|
5359
|
+
}
|
|
5360
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorImageComponent, isStandalone: true, selector: "ns-editor-image", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-image\"\n [attr.aria-label]=\"'insert_image' | nsEditorLabel\"\n [disabled]=\"disabled()\"\n (click)=\"show = true\"\n>\n <svg\n viewBox=\"0 0 24 24\"\n role=\"presentation\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5Zm14 2H5v8.586l3.293-3.293a1 1 0 0 1 1.414 0L12 13.586l3.793-3.793a1 1 0 0 1 1.414 0L19 11.586V6ZM5 18v-2.586l4-4 2.293 2.293a1 1 0 0 0 1.414 0L17 9.414 19 11.414V18H5Z\"\n ></path>\n <circle cx=\"8\" cy=\"9\" r=\"1.5\"></circle>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formImage\"\n class=\"ns-editor__form-image\"\n aria-labelledby=\"ns-editor-image\"\n [ngClass]=\"{ 'ns-editor__form-image--visible': show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_image' | nsEditorLabel }}</label>\n <button\n type=\"button\"\n class=\"ns-editor__close\"\n [attr.aria-label]=\"'close_image' | nsEditorLabel\"\n (click)=\"show = false\"\n ></button>\n </header>\n\n <ns-input\n [formControlName]=\"'url'\"\n [placeholder]=\"'image_url' | nsEditorLabel\"\n />\n <ns-input\n [formControlName]=\"'text'\"\n [placeholder]=\"'image_alt' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\">{{ 'submit_image' | nsEditorLabel }}</ns-button>\n </footer>\n</form>\n", styles: ["@layer properties;.ns-editor__button,.ns-editor__close{position:relative;display:inline-flex;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg,.ns-editor__close svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__form-image{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-image--visible{display:block}.ns-editor__form-image header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-component-editor-gap)}.ns-editor__form-image footer{margin-top:var(--ns-component-editor-gap)}.ns-editor__form-image 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: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5362
|
+
}
|
|
5363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorImageComponent, decorators: [{
|
|
5364
|
+
type: Component,
|
|
5365
|
+
args: [{ selector: 'ns-editor-image', imports: [
|
|
5366
|
+
ReactiveFormsModule,
|
|
5367
|
+
NgClass,
|
|
5368
|
+
NsEditorLabelPipe,
|
|
5369
|
+
NsInputComponent,
|
|
5370
|
+
NsButtonComponent
|
|
5371
|
+
], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-image\"\n [attr.aria-label]=\"'insert_image' | nsEditorLabel\"\n [disabled]=\"disabled()\"\n (click)=\"show = true\"\n>\n <svg\n viewBox=\"0 0 24 24\"\n role=\"presentation\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5Zm14 2H5v8.586l3.293-3.293a1 1 0 0 1 1.414 0L12 13.586l3.793-3.793a1 1 0 0 1 1.414 0L19 11.586V6ZM5 18v-2.586l4-4 2.293 2.293a1 1 0 0 0 1.414 0L17 9.414 19 11.414V18H5Z\"\n ></path>\n <circle cx=\"8\" cy=\"9\" r=\"1.5\"></circle>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formImage\"\n class=\"ns-editor__form-image\"\n aria-labelledby=\"ns-editor-image\"\n [ngClass]=\"{ 'ns-editor__form-image--visible': show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_image' | nsEditorLabel }}</label>\n <button\n type=\"button\"\n class=\"ns-editor__close\"\n [attr.aria-label]=\"'close_image' | nsEditorLabel\"\n (click)=\"show = false\"\n ></button>\n </header>\n\n <ns-input\n [formControlName]=\"'url'\"\n [placeholder]=\"'image_url' | nsEditorLabel\"\n />\n <ns-input\n [formControlName]=\"'text'\"\n [placeholder]=\"'image_alt' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\">{{ 'submit_image' | nsEditorLabel }}</ns-button>\n </footer>\n</form>\n", styles: ["@layer properties;.ns-editor__button,.ns-editor__close{position:relative;display:inline-flex;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg,.ns-editor__close svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__form-image{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-image--visible{display:block}.ns-editor__form-image header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-component-editor-gap)}.ns-editor__form-image footer{margin-top:var(--ns-component-editor-gap)}.ns-editor__form-image 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"] }]
|
|
5372
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5141
5373
|
|
|
5142
5374
|
class NsEditorLinkComponent {
|
|
5375
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5143
5376
|
formLink;
|
|
5144
5377
|
show;
|
|
5145
5378
|
fb = inject(FormBuilder);
|
|
@@ -5160,7 +5393,7 @@ class NsEditorLinkComponent {
|
|
|
5160
5393
|
}
|
|
5161
5394
|
}
|
|
5162
5395
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorLinkComponent, isStandalone: true, selector: "ns-editor-link", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, 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 [disabled]=\"disabled()\"\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;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg,.ns-editor__close svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-hover-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", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5164
5397
|
}
|
|
5165
5398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, decorators: [{
|
|
5166
5399
|
type: Component,
|
|
@@ -5171,26 +5404,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5171
5404
|
NsInputComponent,
|
|
5172
5405
|
NsCheckboxComponent,
|
|
5173
5406
|
NsButtonComponent
|
|
5174
|
-
], 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;
|
|
5175
|
-
}] });
|
|
5407
|
+
], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-link\"\n [attr.aria-label]=\"'insert_link' | nsEditorLabel\"\n [disabled]=\"disabled()\"\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;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg,.ns-editor__close svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-hover-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"] }]
|
|
5408
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5176
5409
|
|
|
5177
5410
|
class NsEditorListComponent {
|
|
5178
5411
|
editor = inject(NsEditorService);
|
|
5412
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5179
5413
|
commands = Commands;
|
|
5180
5414
|
ngOnInit() { }
|
|
5181
5415
|
command(name) {
|
|
5182
5416
|
this.editor.command(name);
|
|
5183
5417
|
}
|
|
5184
5418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5185
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorListComponent, isStandalone: true, selector: "ns-editor-list", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'bullet_list' | nsEditorLabel\"\n (click)=\"command(commands.INSERT_UNORDERED_LIST)\"\n>\n <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M6 8c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'ordered_list' | nsEditorLabel\"\n (click)=\"command(commands.INSERT_ORDERED_LIST)\"\n>\n <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M11 7h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 0h3v1H6v-1zm0 2h3v1H6v-1zm1-9H6V7h2v3H7V8zm-1 3h3v1.333h-.6V13H7.2v-.667H6V11zm0 2h3v1H6v-1zm2 3h2v1H8v-1z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@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: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5186
5420
|
}
|
|
5187
5421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorListComponent, decorators: [{
|
|
5188
5422
|
type: Component,
|
|
5189
|
-
args: [{ selector: 'ns-editor-list', imports: [NsEditorLabelPipe], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"'bullet_list' | nsEditorLabel\"\n (click)=\"command(commands.INSERT_UNORDERED_LIST)\"\n>\n <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M6 8c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"'ordered_list' | nsEditorLabel\"\n (click)=\"command(commands.INSERT_ORDERED_LIST)\"\n>\n <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M11 7h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 0h3v1H6v-1zm0 2h3v1H6v-1zm1-9H6V7h2v3H7V8zm-1 3h3v1.333h-.6V13H7.2v-.667H6V11zm0 2h3v1H6v-1zm2 3h2v1H8v-1z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;
|
|
5190
|
-
}] });
|
|
5423
|
+
args: [{ selector: 'ns-editor-list', imports: [NsEditorLabelPipe], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'bullet_list' | nsEditorLabel\"\n (click)=\"command(commands.INSERT_UNORDERED_LIST)\"\n>\n <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M6 8c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'ordered_list' | nsEditorLabel\"\n (click)=\"command(commands.INSERT_ORDERED_LIST)\"\n>\n <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M11 7h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 0h3v1H6v-1zm0 2h3v1H6v-1zm1-9H6V7h2v3H7V8zm-1 3h3v1.333h-.6V13H7.2v-.667H6V11zm0 2h3v1H6v-1zm2 3h2v1H8v-1z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@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"] }]
|
|
5424
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5191
5425
|
|
|
5192
5426
|
class NsEditorParagraphComponent {
|
|
5193
5427
|
editor = inject(NsEditorService);
|
|
5428
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5194
5429
|
id = Guid.create();
|
|
5195
5430
|
_value = 'p';
|
|
5196
5431
|
get value() {
|
|
@@ -5200,7 +5435,7 @@ class NsEditorParagraphComponent {
|
|
|
5200
5435
|
this.editor.formatBlock(heading);
|
|
5201
5436
|
}
|
|
5202
5437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorParagraphComponent, isStandalone: true, selector: "ns-editor-paragraph", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ns-dropdown [searchable]=\"false\" [disabled]=\"disabled()\" [(ngModel)]=\"value\">\n <ns-dropdown-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\" />\n <ns-dropdown-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\" />\n <ns-dropdown-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\" />\n <ns-dropdown-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\" />\n <ns-dropdown-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\" />\n <ns-dropdown-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\" />\n <ns-dropdown-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\" />\n</ns-dropdown>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["collection", "selectionMode", "loading", "searchable", "searchPlaceholder", "emptyText", "placement", "open"], outputs: ["openChange", "opened", "closed"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["key", "label", "disabled", "dot"] }, { kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5204
5439
|
}
|
|
5205
5440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, decorators: [{
|
|
5206
5441
|
type: Component,
|
|
@@ -5209,23 +5444,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5209
5444
|
NsDropdownItemDirective,
|
|
5210
5445
|
FormsModule,
|
|
5211
5446
|
NsEditorLabelPipe
|
|
5212
|
-
], template: "<ns-dropdown [searchable]=\"false\" [(ngModel)]=\"value\">\n <ns-dropdown-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\" />\n <ns-dropdown-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\" />\n <ns-dropdown-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\" />\n <ns-dropdown-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\" />\n <ns-dropdown-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\" />\n <ns-dropdown-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\" />\n <ns-dropdown-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\" />\n</ns-dropdown>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5213
|
-
}] });
|
|
5447
|
+
], template: "<ns-dropdown [searchable]=\"false\" [disabled]=\"disabled()\" [(ngModel)]=\"value\">\n <ns-dropdown-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\" />\n <ns-dropdown-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\" />\n <ns-dropdown-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\" />\n <ns-dropdown-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\" />\n <ns-dropdown-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\" />\n <ns-dropdown-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\" />\n <ns-dropdown-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\" />\n</ns-dropdown>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5448
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5214
5449
|
|
|
5215
5450
|
class NsEditorToggleCommandComponent {
|
|
5216
5451
|
editor = inject(NsEditorService);
|
|
5452
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5217
5453
|
commands = Commands;
|
|
5218
5454
|
command(name) {
|
|
5219
5455
|
this.editor.command(name);
|
|
5220
5456
|
}
|
|
5221
5457
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorToggleCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5222
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5458
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorToggleCommandComponent, isStandalone: true, selector: "ns-editor-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'bold' | nsEditorLabel\"\n (click)=\"command(commands.BOLD)\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M8 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4.5c2.481 0 4.5-1.165 4.5-4 0-1.698-.724-2.796-1.837-3.405C15.69 10.967 16 10.112 16 9c0-2.835-2.019-4-4.5-4H8Zm1 2v4h3c1.379 0 2-.857 2-2s-.621-2-2-2H9Zm0 6v4h4c1.379 0 2-.857 2-2s-.621-2-2-2H9Z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'italic' | nsEditorLabel\"\n (click)=\"command(commands.ITALIC)\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M9 6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-2.167l-1.666 10H14a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h2.167l1.666-10H10a1 1 0 0 1-1-1Z\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'underline' | nsEditorLabel\"\n (click)=\"command(commands.UNDERLINE)\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M9 5a1 1 0 0 1 1 1v5.5c0 1.343.556 2.5 2 2.5s2-1.157 2-2.5V6a1 1 0 1 1 2 0v5.657C16 13.804 14.469 16 12 16c-2.462 0-4-2.196-4-4.343V6a1 1 0 0 1 1-1ZM6 17a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2H6Z\"\n ></path>\n </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@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: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5223
5459
|
}
|
|
5224
5460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorToggleCommandComponent, decorators: [{
|
|
5225
5461
|
type: Component,
|
|
5226
|
-
args: [{ selector: 'ns-editor-toggle', imports: [NsEditorLabelPipe], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"'bold' | nsEditorLabel\"\n (click)=\"command(commands.BOLD)\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M8 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4.5c2.481 0 4.5-1.165 4.5-4 0-1.698-.724-2.796-1.837-3.405C15.69 10.967 16 10.112 16 9c0-2.835-2.019-4-4.5-4H8Zm1 2v4h3c1.379 0 2-.857 2-2s-.621-2-2-2H9Zm0 6v4h4c1.379 0 2-.857 2-2s-.621-2-2-2H9Z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"'italic' | nsEditorLabel\"\n (click)=\"command(commands.ITALIC)\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M9 6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-2.167l-1.666 10H14a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h2.167l1.666-10H10a1 1 0 0 1-1-1Z\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [attr.aria-label]=\"'underline' | nsEditorLabel\"\n (click)=\"command(commands.UNDERLINE)\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M9 5a1 1 0 0 1 1 1v5.5c0 1.343.556 2.5 2 2.5s2-1.157 2-2.5V6a1 1 0 1 1 2 0v5.657C16 13.804 14.469 16 12 16c-2.462 0-4-2.196-4-4.343V6a1 1 0 0 1 1-1ZM6 17a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2H6Z\"\n ></path>\n </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;
|
|
5227
|
-
}] });
|
|
5462
|
+
args: [{ selector: 'ns-editor-toggle', imports: [NsEditorLabelPipe], template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'bold' | nsEditorLabel\"\n (click)=\"command(commands.BOLD)\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M8 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4.5c2.481 0 4.5-1.165 4.5-4 0-1.698-.724-2.796-1.837-3.405C15.69 10.967 16 10.112 16 9c0-2.835-2.019-4-4.5-4H8Zm1 2v4h3c1.379 0 2-.857 2-2s-.621-2-2-2H9Zm0 6v4h4c1.379 0 2-.857 2-2s-.621-2-2-2H9Z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'italic' | nsEditorLabel\"\n (click)=\"command(commands.ITALIC)\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M9 6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-2.167l-1.666 10H14a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h2.167l1.666-10H10a1 1 0 0 1-1-1Z\"\n ></path>\n </svg>\n</button>\n\n<button\n type=\"button\"\n class=\"ns-editor__button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'underline' | nsEditorLabel\"\n (click)=\"command(commands.UNDERLINE)\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M9 5a1 1 0 0 1 1 1v5.5c0 1.343.556 2.5 2 2.5s2-1.157 2-2.5V6a1 1 0 1 1 2 0v5.657C16 13.804 14.469 16 12 16c-2.462 0-4-2.196-4-4.343V6a1 1 0 0 1 1-1ZM6 17a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2H6Z\"\n ></path>\n </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;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;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@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"] }]
|
|
5463
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5228
5464
|
|
|
5465
|
+
const NS_EDITOR_TOOLS_DEFAULT = [
|
|
5466
|
+
'paragraph',
|
|
5467
|
+
'format',
|
|
5468
|
+
'color',
|
|
5469
|
+
'list',
|
|
5470
|
+
'link'
|
|
5471
|
+
];
|
|
5229
5472
|
const DEFAULT_COLOR_PRESETS = [
|
|
5230
5473
|
'#b60205',
|
|
5231
5474
|
'#d93f0b',
|
|
@@ -5246,10 +5489,14 @@ const DEFAULT_COLOR_PRESETS = [
|
|
|
5246
5489
|
];
|
|
5247
5490
|
class NsEditorComponent extends NsValueAccessor {
|
|
5248
5491
|
editor = inject(NsEditorService);
|
|
5249
|
-
rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
5250
5492
|
maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
5251
5493
|
colorPresets = input(DEFAULT_COLOR_PRESETS, ...(ngDevMode ? [{ debugName: "colorPresets" }] : /* istanbul ignore next */ []));
|
|
5494
|
+
tools = input(NS_EDITOR_TOOLS_DEFAULT, ...(ngDevMode ? [{ debugName: "tools" }] : /* istanbul ignore next */ []));
|
|
5252
5495
|
textArea;
|
|
5496
|
+
contentEditable;
|
|
5497
|
+
/** Mirrors the content-editable's own counter, measured off `innerText`. */
|
|
5498
|
+
length = computed(() => this.contentEditable?.length() ?? 0, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
|
|
5499
|
+
hasFooter = computed(() => Boolean(this.description() || this.maxLength()), ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
5253
5500
|
focused = () => this.textArea.nativeElement.focus();
|
|
5254
5501
|
ngOnInit() { }
|
|
5255
5502
|
get presets() {
|
|
@@ -5270,13 +5517,13 @@ class NsEditorComponent extends NsValueAccessor {
|
|
|
5270
5517
|
}
|
|
5271
5518
|
ngOnDestroy() { }
|
|
5272
5519
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorComponent, isStandalone: true, selector: "ns-editor", inputs: {
|
|
5520
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorComponent, isStandalone: true, selector: "ns-editor", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, colorPresets: { classPropertyName: "colorPresets", publicName: "colorPresets", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "focused()" }, properties: { "class.ns-editor": "true", "class.ns-editor--disabled": "disabled()" } }, providers: [
|
|
5274
5521
|
{
|
|
5275
5522
|
provide: NG_VALUE_ACCESSOR,
|
|
5276
5523
|
useExisting: forwardRef(() => NsEditorComponent),
|
|
5277
5524
|
multi: true
|
|
5278
5525
|
}
|
|
5279
|
-
], viewQueries: [{ propertyName: "textArea", first: true, predicate: NsContentEditableComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-editor__label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n <li class=\"ns-editor__item\">\n
|
|
5526
|
+
], viewQueries: [{ propertyName: "textArea", first: true, predicate: NsContentEditableComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "contentEditable", first: true, predicate: NsContentEditableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-editor__label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n @for (tool of tools(); track $index) {\n @switch (tool) {\n @case ('separator') {\n <li\n class=\"ns-editor__separator\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n ></li>\n }\n @case ('paragraph') {\n <li class=\"ns-editor__item\">\n <ns-editor-paragraph [disabled]=\"disabled()\" />\n </li>\n }\n @case ('format') {\n <li class=\"ns-editor__item\">\n <ns-editor-toggle [disabled]=\"disabled()\" />\n </li>\n }\n @case ('color') {\n <li class=\"ns-editor__item\">\n <ns-editor-color-picker [presets]=\"presets\" [disabled]=\"disabled()\" />\n </li>\n }\n @case ('list') {\n <li class=\"ns-editor__item\">\n <ns-editor-list [disabled]=\"disabled()\" />\n </li>\n }\n @case ('link') {\n <li class=\"ns-editor__item\">\n <ns-editor-link [disabled]=\"disabled()\" />\n </li>\n }\n @case ('image') {\n <li class=\"ns-editor__item\">\n <ns-editor-image [disabled]=\"disabled()\" />\n </li>\n }\n }\n }\n</ul>\n\n<ns-content-editable\n class=\"ns-editor__content\"\n [class.ns-editor__content--footer]=\"hasFooter()\"\n [id]=\"id\"\n (blur)=\"blur()\"\n [maxlength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n/>\n\n@if (hasFooter()) {\n <div class=\"ns-editor__footer\">\n @if (description()) {\n <p class=\"ns-editor__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n }\n @if (maxLength()) {\n <span class=\"ns-editor__counter\" aria-live=\"polite\">\n {{ length() }} / {{ maxLength() }}\n </span>\n }\n </div>\n}\n", styles: ["@layer properties;.ns-editor{display:block;width:100%}.ns-editor__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-editor-gap);color:var(--ns-component-editor-label-color);font-size:var(--ns-component-editor-label-size);font-weight:var(--ns-component-editor-label-weight)}.ns-editor__toolbar{margin:0;display:flex;list-style-type:none;align-items:center;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-editor-toolbar-gap);padding:var(--ns-component-editor-toolbar-padding-block) var(--ns-component-editor-toolbar-padding-inline);border-color:var(--ns-component-editor-border-color);border-block-end-color:var(--ns-component-editor-toolbar-border-color);border-start-start-radius:var(--ns-component-editor-radius);border-start-end-radius:var(--ns-component-editor-radius);background:var(--ns-component-editor-toolbar-background)}.ns-editor__item{display:flex;align-items:center}.ns-editor__separator{flex-shrink:0;width:var(--ns-component-editor-separator-width);height:var(--ns-component-editor-separator-height);margin-inline:var(--ns-component-editor-separator-spacing);background:var(--ns-component-editor-separator-color)}.ns-editor__content{border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;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-editor-content-padding);min-block-size:var(--ns-component-editor-content-min-height);border-color:var(--ns-component-editor-border-color);border-end-start-radius:var(--ns-component-editor-radius);border-end-end-radius:var(--ns-component-editor-radius);background:var(--ns-component-editor-background);color:var(--ns-component-editor-color)}.ns-editor__content textarea{width:100%;resize:vertical;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;--tw-outline-style: none;outline-style:none;color:var(--ns-component-editor-color)}.ns-editor__content:focus-within{position:relative;z-index:1;border-color:var(--ns-component-editor-focus-border-color);box-shadow:var(--ns-component-editor-focus-shadow)}.ns-editor__content--footer{border-bottom-style:var(--tw-border-style);border-bottom-width:0px;border-end-start-radius:0;border-end-end-radius:0}.ns-editor__footer{display:flex;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;gap:var(--ns-component-editor-gap);padding-block:var(--ns-component-editor-footer-padding-block);padding-inline:var(--ns-component-editor-footer-padding-inline);border-color:var(--ns-component-editor-border-color);border-block-start:var(--ns-component-editor-separator-width) solid var(--ns-component-editor-footer-border-color);border-end-start-radius:var(--ns-component-editor-radius);border-end-end-radius:var(--ns-component-editor-radius);background:var(--ns-component-editor-footer-background);font-size:var(--ns-component-editor-footer-font-size);font-weight:var(--ns-component-editor-footer-font-weight);color:var(--ns-component-editor-footer-color)}.ns-editor__description{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-editor__counter{margin:0;flex-shrink:0;margin-inline-start:auto}.ns-editor--disabled{pointer-events:none;opacity:50%}@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: NsEditorParagraphComponent, selector: "ns-editor-paragraph", inputs: ["disabled"] }, { kind: "component", type: NsEditorToggleCommandComponent, selector: "ns-editor-toggle", inputs: ["disabled"] }, { kind: "component", type: NsEditorColorPickerComponent, selector: "ns-editor-color-picker", inputs: ["presets", "type", "disabled"] }, { kind: "component", type: NsEditorListComponent, selector: "ns-editor-list", inputs: ["disabled"] }, { kind: "component", type: NsEditorLinkComponent, selector: "ns-editor-link", inputs: ["disabled"] }, { kind: "component", type: NsEditorImageComponent, selector: "ns-editor-image", inputs: ["disabled"] }, { kind: "component", type: NsContentEditableComponent, selector: "ns-content-editable", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5280
5527
|
}
|
|
5281
5528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorComponent, decorators: [{
|
|
5282
5529
|
type: Component,
|
|
@@ -5295,12 +5542,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5295
5542
|
NsEditorColorPickerComponent,
|
|
5296
5543
|
NsEditorListComponent,
|
|
5297
5544
|
NsEditorLinkComponent,
|
|
5545
|
+
NsEditorImageComponent,
|
|
5298
5546
|
NsContentEditableComponent,
|
|
5299
5547
|
FormsModule
|
|
5300
|
-
], template: "@if (label()) {\n <label class=\"ns-editor__label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n <li class=\"ns-editor__item\">\n
|
|
5301
|
-
}], propDecorators: {
|
|
5548
|
+
], template: "@if (label()) {\n <label class=\"ns-editor__label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n @for (tool of tools(); track $index) {\n @switch (tool) {\n @case ('separator') {\n <li\n class=\"ns-editor__separator\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n ></li>\n }\n @case ('paragraph') {\n <li class=\"ns-editor__item\">\n <ns-editor-paragraph [disabled]=\"disabled()\" />\n </li>\n }\n @case ('format') {\n <li class=\"ns-editor__item\">\n <ns-editor-toggle [disabled]=\"disabled()\" />\n </li>\n }\n @case ('color') {\n <li class=\"ns-editor__item\">\n <ns-editor-color-picker [presets]=\"presets\" [disabled]=\"disabled()\" />\n </li>\n }\n @case ('list') {\n <li class=\"ns-editor__item\">\n <ns-editor-list [disabled]=\"disabled()\" />\n </li>\n }\n @case ('link') {\n <li class=\"ns-editor__item\">\n <ns-editor-link [disabled]=\"disabled()\" />\n </li>\n }\n @case ('image') {\n <li class=\"ns-editor__item\">\n <ns-editor-image [disabled]=\"disabled()\" />\n </li>\n }\n }\n }\n</ul>\n\n<ns-content-editable\n class=\"ns-editor__content\"\n [class.ns-editor__content--footer]=\"hasFooter()\"\n [id]=\"id\"\n (blur)=\"blur()\"\n [maxlength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n/>\n\n@if (hasFooter()) {\n <div class=\"ns-editor__footer\">\n @if (description()) {\n <p class=\"ns-editor__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n }\n @if (maxLength()) {\n <span class=\"ns-editor__counter\" aria-live=\"polite\">\n {{ length() }} / {{ maxLength() }}\n </span>\n }\n </div>\n}\n", styles: ["@layer properties;.ns-editor{display:block;width:100%}.ns-editor__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-editor-gap);color:var(--ns-component-editor-label-color);font-size:var(--ns-component-editor-label-size);font-weight:var(--ns-component-editor-label-weight)}.ns-editor__toolbar{margin:0;display:flex;list-style-type:none;align-items:center;border-style:var(--tw-border-style);border-width:1px;gap:var(--ns-component-editor-toolbar-gap);padding:var(--ns-component-editor-toolbar-padding-block) var(--ns-component-editor-toolbar-padding-inline);border-color:var(--ns-component-editor-border-color);border-block-end-color:var(--ns-component-editor-toolbar-border-color);border-start-start-radius:var(--ns-component-editor-radius);border-start-end-radius:var(--ns-component-editor-radius);background:var(--ns-component-editor-toolbar-background)}.ns-editor__item{display:flex;align-items:center}.ns-editor__separator{flex-shrink:0;width:var(--ns-component-editor-separator-width);height:var(--ns-component-editor-separator-height);margin-inline:var(--ns-component-editor-separator-spacing);background:var(--ns-component-editor-separator-color)}.ns-editor__content{border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;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-editor-content-padding);min-block-size:var(--ns-component-editor-content-min-height);border-color:var(--ns-component-editor-border-color);border-end-start-radius:var(--ns-component-editor-radius);border-end-end-radius:var(--ns-component-editor-radius);background:var(--ns-component-editor-background);color:var(--ns-component-editor-color)}.ns-editor__content textarea{width:100%;resize:vertical;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;--tw-outline-style: none;outline-style:none;color:var(--ns-component-editor-color)}.ns-editor__content:focus-within{position:relative;z-index:1;border-color:var(--ns-component-editor-focus-border-color);box-shadow:var(--ns-component-editor-focus-shadow)}.ns-editor__content--footer{border-bottom-style:var(--tw-border-style);border-bottom-width:0px;border-end-start-radius:0;border-end-end-radius:0}.ns-editor__footer{display:flex;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;gap:var(--ns-component-editor-gap);padding-block:var(--ns-component-editor-footer-padding-block);padding-inline:var(--ns-component-editor-footer-padding-inline);border-color:var(--ns-component-editor-border-color);border-block-start:var(--ns-component-editor-separator-width) solid var(--ns-component-editor-footer-border-color);border-end-start-radius:var(--ns-component-editor-radius);border-end-end-radius:var(--ns-component-editor-radius);background:var(--ns-component-editor-footer-background);font-size:var(--ns-component-editor-footer-font-size);font-weight:var(--ns-component-editor-footer-font-weight);color:var(--ns-component-editor-footer-color)}.ns-editor__description{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-editor__counter{margin:0;flex-shrink:0;margin-inline-start:auto}.ns-editor--disabled{pointer-events:none;opacity:50%}@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"] }]
|
|
5549
|
+
}], propDecorators: { maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], colorPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPresets", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }], textArea: [{
|
|
5302
5550
|
type: ViewChild,
|
|
5303
5551
|
args: [NsContentEditableComponent, { read: ElementRef, static: true }]
|
|
5552
|
+
}], contentEditable: [{
|
|
5553
|
+
type: ViewChild,
|
|
5554
|
+
args: [NsContentEditableComponent, { static: true }]
|
|
5304
5555
|
}], focused: [{
|
|
5305
5556
|
type: HostListener,
|
|
5306
5557
|
args: ['click']
|
|
@@ -5331,29 +5582,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5331
5582
|
}]
|
|
5332
5583
|
}] });
|
|
5333
5584
|
|
|
5585
|
+
/**
|
|
5586
|
+
* `NsFile` (published API, `@ng-solid/core`) has no identity field of its
|
|
5587
|
+
* own. `uid` used to live as a component-local property written directly
|
|
5588
|
+
* onto the object (AVF-15) — that broke the moment a host state library
|
|
5589
|
+
* hands this component a frozen `NsFile`: the console's NGXS store deep-
|
|
5590
|
+
* freezes its slices, so a saved product's images arrive non-extensible and
|
|
5591
|
+
* `image.uid = …` throws `TypeError: Cannot add property uid, object is not
|
|
5592
|
+
* extensible` (AVF-18 corrección de rechazo). A design-system component
|
|
5593
|
+
* cannot assume its inputs are mutable, so `uid` now lives *outside* every
|
|
5594
|
+
* `NsFile`, in the module-level `uidRegistry` below, keyed by object
|
|
5595
|
+
* identity — nothing ever writes to the `NsFile` itself. That also gives
|
|
5596
|
+
* reference-identity preservation for free: `assignUid` never wraps, clones
|
|
5597
|
+
* or copies its argument, so `remove()`'s `img !== image` filter, and every
|
|
5598
|
+
* other place that compares an `NsFile` by `===`, keeps working unchanged.
|
|
5599
|
+
*/
|
|
5600
|
+
const uidRegistry = new WeakMap();
|
|
5601
|
+
/**
|
|
5602
|
+
* Holds the original `File` a pending upload started from, keyed by the same
|
|
5603
|
+
* `NsFile` instance `add()` tracks. `add()`'s own `reader.onload` overwrites
|
|
5604
|
+
* `tracked.data` with the base64 preview string right after kicking off the
|
|
5605
|
+
* *first* upload attempt (see the comment in `add()` below) — necessary so
|
|
5606
|
+
* the gallery has something to render while the request is in flight, but it
|
|
5607
|
+
* means that by the time an upload fails, `tracked.data` is already that
|
|
5608
|
+
* string, not the `File` it started from. `retry()` re-runs `upload()` on
|
|
5609
|
+
* that same tracked object, so without this side registry it would hand the
|
|
5610
|
+
* client a base64 string instead of the file it was supposed to resend
|
|
5611
|
+
* (AVF-18 QA finding: a retry after a transient failure sent a data URI and
|
|
5612
|
+
* the server rejected it with "Upload value invalid").
|
|
5613
|
+
*/
|
|
5614
|
+
const originalDataRegistry = new WeakMap();
|
|
5615
|
+
/**
|
|
5616
|
+
* Module-level monotonic counter backing `uid` for images without a server
|
|
5617
|
+
* `id` yet (pending uploads). Deterministic and trivial to assert in tests,
|
|
5618
|
+
* unlike `crypto.randomUUID()`.
|
|
5619
|
+
*/
|
|
5620
|
+
let uidCounter = 0;
|
|
5621
|
+
/**
|
|
5622
|
+
* Registers `uid` once per image instance in `uidRegistry`: derived from
|
|
5623
|
+
* the server `id` when present (`srv:${id}`, stable across re-`writeValue`
|
|
5624
|
+
* calls even on brand-new instances mapped from GraphQL — a `patchValue`
|
|
5625
|
+
* from the host never remounts the gallery), otherwise the next counter
|
|
5626
|
+
* value. Never overwrites an existing entry, and never touches `image`
|
|
5627
|
+
* itself — safe to call on a frozen, sealed or otherwise non-extensible
|
|
5628
|
+
* `NsFile`.
|
|
5629
|
+
*/
|
|
5630
|
+
function assignUid(image) {
|
|
5631
|
+
if (!uidRegistry.has(image)) {
|
|
5632
|
+
uidRegistry.set(image, image.id ? `srv:${image.id}` : `ns-file-${++uidCounter}`);
|
|
5633
|
+
}
|
|
5634
|
+
return image;
|
|
5635
|
+
}
|
|
5334
5636
|
class NsImageUploadComponent extends NsValueAccessor {
|
|
5335
5637
|
client = inject(NS_UPLOAD_CLIENT, { optional: true });
|
|
5336
5638
|
renderer = inject(Renderer2);
|
|
5639
|
+
cdr = inject(ChangeDetectorRef);
|
|
5337
5640
|
accept = input('.jpg,.jpeg,.png,.webp,.avif,.gif', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
5338
5641
|
multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5339
5642
|
limit = input(5, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
5643
|
+
layout = input('grid', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
5644
|
+
/**
|
|
5645
|
+
* Rows the `__stack` column reserves before it starts scrolling
|
|
5646
|
+
* internally, in `layout="cover"`: at most 3, and never more than
|
|
5647
|
+
* `limit() - 1` (the cover itself takes one slot).
|
|
5648
|
+
*/
|
|
5649
|
+
reservedRows = computed(() => Math.max(0, Math.min(3, this.limit() - 1)), ...(ngDevMode ? [{ debugName: "reservedRows" }] : /* istanbul ignore next */ []));
|
|
5340
5650
|
imgRef;
|
|
5341
|
-
|
|
5651
|
+
status = new Map();
|
|
5652
|
+
/**
|
|
5653
|
+
* Bumped by `setStatus`/`deleteStatus` on every `status` mutation.
|
|
5654
|
+
* `status` itself stays a plain, publicly-mutable `Map` — kept for the
|
|
5655
|
+
* existing per-file bookkeeping and for tests that poll it to synchronise
|
|
5656
|
+
* with an async upload — but a plain `Map.set()`/`.delete()` is invisible
|
|
5657
|
+
* to Angular's change detection: no signal write and no `markForCheck()`,
|
|
5658
|
+
* so nothing tells Angular this control needs checking again. Worse, an
|
|
5659
|
+
* `OnPush` ancestor that wasn't otherwise dirtied (e.g. the "Fotografías"
|
|
5660
|
+
* `<card>` wrapping this control in the product form) can skip this
|
|
5661
|
+
* subtree entirely on the next tick. That is exactly why a failed upload
|
|
5662
|
+
* used to get stuck showing the spinner forever, silently (AVF-18
|
|
5663
|
+
* corrección de rechazo #2): `status.set(uid, 'fallido')` ran, but nothing
|
|
5664
|
+
* ever told Angular to look again — unlike a successful upload, which
|
|
5665
|
+
* reaches the template through `value.set()` (a real signal write) via
|
|
5666
|
+
* `assignValue`/`onChange`. `statusOf()` reads this counter before reading
|
|
5667
|
+
* `status`, giving every render that goes through it a real signal
|
|
5668
|
+
* dependency, and `touchStatus()` also calls `markForCheck()` directly —
|
|
5669
|
+
* belt and braces: the explicit call is the same, long-proven mechanism
|
|
5670
|
+
* Angular has always used to announce a change made from outside its own
|
|
5671
|
+
* detection cycle (an RxJS subscription callback, here), and is what
|
|
5672
|
+
* reliably walks the ancestor chain and clears an `OnPush` skip, the way
|
|
5673
|
+
* a signal read alone was not enough to guarantee in practice.
|
|
5674
|
+
*/
|
|
5675
|
+
statusVersion = signal(0, ...(ngDevMode ? [{ debugName: "statusVersion" }] : /* istanbul ignore next */ []));
|
|
5676
|
+
touchStatus() {
|
|
5677
|
+
this.statusVersion.update((v) => v + 1);
|
|
5678
|
+
this.cdr.markForCheck();
|
|
5679
|
+
}
|
|
5680
|
+
setStatus(uid, value) {
|
|
5681
|
+
this.status.set(uid, value);
|
|
5682
|
+
this.touchStatus();
|
|
5683
|
+
}
|
|
5684
|
+
deleteStatus(uid) {
|
|
5685
|
+
this.status.delete(uid);
|
|
5686
|
+
this.touchStatus();
|
|
5687
|
+
}
|
|
5688
|
+
/**
|
|
5689
|
+
* The only path from `status` + `uid` to the template — and the one every
|
|
5690
|
+
* test should use too (AVF-18 corrección de rechazo #2): reading
|
|
5691
|
+
* `status.get(...)` directly, the way earlier tests did, cannot tell a
|
|
5692
|
+
* status change nobody announced to Angular from one that actually
|
|
5693
|
+
* rendered, which is exactly how the previous regression shipped green —
|
|
5694
|
+
* the map held `'fallido'`, the DOM still showed `'subiendo'`, and the
|
|
5695
|
+
* assertions that read the map straight agreed with the bug.
|
|
5696
|
+
*/
|
|
5697
|
+
statusOf(image) {
|
|
5698
|
+
this.statusVersion();
|
|
5699
|
+
return this.status.get(this.uidOf(image));
|
|
5700
|
+
}
|
|
5701
|
+
/**
|
|
5702
|
+
* Active while a file dragged from outside the browser (desktop, another
|
|
5703
|
+
* app) hovers a drop zone — drives the highlight ring/border (AVF-9,
|
|
5704
|
+
* criteria 3-5). Never set for the internal thumbnail-reorder drag,
|
|
5705
|
+
* distinguished via `isFileDrag`.
|
|
5706
|
+
*/
|
|
5707
|
+
dragActive = signal(false, ...(ngDevMode ? [{ debugName: "dragActive" }] : /* istanbul ignore next */ []));
|
|
5708
|
+
/**
|
|
5709
|
+
* Inline, Spanish, component-owned notice for when a selection/drop
|
|
5710
|
+
* exceeds `limit()` (AVF-16). Deliberately not an `output()`: a consumer
|
|
5711
|
+
* that doesn't wire one up would silently drop files again, which is
|
|
5712
|
+
* exactly the defect this HU removes. Overwritten (never accumulated) on
|
|
5713
|
+
* every enqueue attempt, successful or not.
|
|
5714
|
+
*/
|
|
5715
|
+
limitWarning = signal(null, ...(ngDevMode ? [{ debugName: "limitWarning" }] : /* istanbul ignore next */ []));
|
|
5342
5716
|
_fromIndex;
|
|
5343
5717
|
_toIndex;
|
|
5718
|
+
/**
|
|
5719
|
+
* The only path from `value()` to the template, whatever fed it: a plain
|
|
5720
|
+
* `[value]="misImagenes"` binding — `value` is the public two-way `model()`
|
|
5721
|
+
* from `NsValueAccessor`, so nothing forces a consumer through
|
|
5722
|
+
* `writeValue`/`add` — lands here same as a file picked through the
|
|
5723
|
+
* control itself. `assignUid` is idempotent (never overwrites an existing
|
|
5724
|
+
* registry entry) and never mutates the `NsFile`, so re-running it every
|
|
5725
|
+
* getter call is safe: the `uid` a given instance gets on its first pass
|
|
5726
|
+
* through here is the one it keeps on every later change-detection cycle,
|
|
5727
|
+
* and no signal write happens as a side effect of reading the template
|
|
5728
|
+
* (AVF-15). Works the same whether the array/elements are frozen or not
|
|
5729
|
+
* (AVF-18 corrección de rechazo).
|
|
5730
|
+
*/
|
|
5344
5731
|
get images() {
|
|
5345
5732
|
const value = this.value();
|
|
5346
|
-
return Array.isArray(value)
|
|
5733
|
+
return Array.isArray(value)
|
|
5734
|
+
? value.map((image) => assignUid(image))
|
|
5735
|
+
: [];
|
|
5347
5736
|
}
|
|
5348
5737
|
get image() {
|
|
5349
5738
|
const value = this.value();
|
|
5350
|
-
|
|
5739
|
+
if (Array.isArray(value) || !value) {
|
|
5740
|
+
return null;
|
|
5741
|
+
}
|
|
5742
|
+
return assignUid(value);
|
|
5743
|
+
}
|
|
5744
|
+
/**
|
|
5745
|
+
* Reads the `uid` assigned to `image` — the accessor the `.ts` and the
|
|
5746
|
+
* template both use instead of a `.uid` property on the `NsFile` itself,
|
|
5747
|
+
* which no longer exists (AVF-18 corrección de rechazo: that property
|
|
5748
|
+
* write is exactly what threw on a frozen image). Public so the
|
|
5749
|
+
* template's `track` expressions can call it directly, and so `statusOf`
|
|
5750
|
+
* can resolve the key it looks up. Every `NsFile` reachable from
|
|
5751
|
+
* `images()`/`image()` has already been through `assignUid`, so this only
|
|
5752
|
+
* ever reads — the `assignUid` call here is a safety net for a caller that
|
|
5753
|
+
* hands in an image from outside that path.
|
|
5754
|
+
*/
|
|
5755
|
+
uidOf(image) {
|
|
5756
|
+
assignUid(image);
|
|
5757
|
+
return uidRegistry.get(image);
|
|
5758
|
+
}
|
|
5759
|
+
/**
|
|
5760
|
+
* True while the single (`!multi()`) image's own upload attempt is
|
|
5761
|
+
* `'fallido'` — the one flag the drag-container button needs to swap
|
|
5762
|
+
* "open the file picker" for "retry this upload" (AVF-16, corrección de
|
|
5763
|
+
* rechazo: criterios 5-6 no estaban cubiertos en modo single, solo en
|
|
5764
|
+
* `multi`).
|
|
5765
|
+
*/
|
|
5766
|
+
get singleFailed() {
|
|
5767
|
+
const img = this.image;
|
|
5768
|
+
return !this.multi() && !!img && this.statusOf(img) === 'fallido';
|
|
5351
5769
|
}
|
|
5352
5770
|
writeValue(value) {
|
|
5353
5771
|
if (Array.isArray(value)) {
|
|
5772
|
+
value.forEach((image) => assignUid(image));
|
|
5354
5773
|
this.value.set(value);
|
|
5355
5774
|
}
|
|
5356
5775
|
else {
|
|
5776
|
+
if (value) {
|
|
5777
|
+
assignUid(value);
|
|
5778
|
+
}
|
|
5357
5779
|
this.value.set(this.multi() && !value ? [] : value);
|
|
5358
5780
|
}
|
|
5359
5781
|
}
|
|
@@ -5362,41 +5784,125 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5362
5784
|
this.imgRef.nativeElement.click();
|
|
5363
5785
|
}
|
|
5364
5786
|
}
|
|
5787
|
+
/**
|
|
5788
|
+
* Click handler for the single-mode (`!multi()`) drag-container: it is
|
|
5789
|
+
* both the file picker trigger and, once the image has failed, the
|
|
5790
|
+
* retry control — same dual role the `multi` grid button and the cover
|
|
5791
|
+
* chip already had (AVF-16 corrección de rechazo).
|
|
5792
|
+
*/
|
|
5793
|
+
onDragContainerClick() {
|
|
5794
|
+
if (this.singleFailed) {
|
|
5795
|
+
this.retry(this.image);
|
|
5796
|
+
}
|
|
5797
|
+
else {
|
|
5798
|
+
this.onClick();
|
|
5799
|
+
}
|
|
5800
|
+
}
|
|
5365
5801
|
load() {
|
|
5366
5802
|
const { files } = this.imgRef.nativeElement;
|
|
5367
5803
|
if (files.length) {
|
|
5368
|
-
this.
|
|
5804
|
+
this.enqueueFiles(Array.from(files));
|
|
5369
5805
|
this.imgRef.nativeElement.value = null;
|
|
5370
5806
|
}
|
|
5807
|
+
this.onTouched();
|
|
5371
5808
|
}
|
|
5372
5809
|
add(image) {
|
|
5373
|
-
|
|
5810
|
+
const tracked = assignUid(image);
|
|
5811
|
+
const uid = this.uidOf(tracked);
|
|
5812
|
+
// Stashed before `reader.onload` below overwrites `tracked.data` with
|
|
5813
|
+
// the preview string, so a later `retry()` on this same object still
|
|
5814
|
+
// has the real file to resend (AVF-18 QA finding).
|
|
5815
|
+
originalDataRegistry.set(tracked, tracked.data);
|
|
5816
|
+
this.setStatus(uid, 'subiendo');
|
|
5374
5817
|
const reader = new FileReader();
|
|
5375
|
-
reader.readAsDataURL(
|
|
5818
|
+
reader.readAsDataURL(tracked.data);
|
|
5376
5819
|
reader.onload = () => {
|
|
5377
5820
|
if (this.client) {
|
|
5378
|
-
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
}
|
|
5389
|
-
});
|
|
5390
|
-
image.data = reader.result;
|
|
5391
|
-
this.assignValue(image);
|
|
5821
|
+
// Started before the local-preview mutation below, matching the
|
|
5822
|
+
// pre-AVF-16 ordering: whatever the injected client reads off
|
|
5823
|
+
// `tracked.data` at call time, it reads before it gets overwritten
|
|
5824
|
+
// with the base64 preview string. `tracked` here is always a
|
|
5825
|
+
// freshly `NsFile.parse`d object this component created itself
|
|
5826
|
+
// (never a host-provided, possibly-frozen instance), so mutating
|
|
5827
|
+
// `.data` in place is safe.
|
|
5828
|
+
this.upload(tracked, uid);
|
|
5829
|
+
tracked.data = reader.result;
|
|
5830
|
+
this.assignValue(tracked);
|
|
5392
5831
|
}
|
|
5393
5832
|
else {
|
|
5394
|
-
|
|
5395
|
-
this.
|
|
5396
|
-
this.assignValue(
|
|
5833
|
+
tracked.data = reader.result;
|
|
5834
|
+
this.setStatus(uid, 'ok');
|
|
5835
|
+
this.assignValue(tracked);
|
|
5397
5836
|
}
|
|
5398
5837
|
};
|
|
5399
5838
|
}
|
|
5839
|
+
/**
|
|
5840
|
+
* Re-subscribes to the same upload the failed attempt used — no new
|
|
5841
|
+
* `NsUploadClient` contract needed (AVF-16 evidence: `upload(file):
|
|
5842
|
+
* Observable<file>` is already re-subscribable). Shared by the first
|
|
5843
|
+
* attempt (`add`) and every later retry. `uid` is passed in rather than
|
|
5844
|
+
* re-derived from `image`, since `retry()` needs the *original* uid even
|
|
5845
|
+
* though the `image` it holds may itself be a server response object by
|
|
5846
|
+
* then.
|
|
5847
|
+
*/
|
|
5848
|
+
upload(image, uid) {
|
|
5849
|
+
const client = this.client;
|
|
5850
|
+
if (!client) {
|
|
5851
|
+
return;
|
|
5852
|
+
}
|
|
5853
|
+
this.setStatus(uid, 'subiendo');
|
|
5854
|
+
// On a retry, `image.data` may already be the base64 preview string
|
|
5855
|
+
// (see `originalDataRegistry`'s doc comment) — the original `File`, when
|
|
5856
|
+
// stashed, is what actually goes out over the wire. Cloning (rather than
|
|
5857
|
+
// mutating `image` back) keeps `image`'s own `.data` as the preview the
|
|
5858
|
+
// template renders while this request is in flight.
|
|
5859
|
+
const original = originalDataRegistry.get(image);
|
|
5860
|
+
client
|
|
5861
|
+
.upload(original ? new NsFile({ ...image, data: original }) : image)
|
|
5862
|
+
.subscribe({
|
|
5863
|
+
next: (data) => {
|
|
5864
|
+
// Preserves identity through the preview → server swap: registers
|
|
5865
|
+
// the same `uid` for the new server-response object rather than
|
|
5866
|
+
// mutating it, so the gallery doesn't remount the image and
|
|
5867
|
+
// AVF-16's per-file state isn't lost right as the upload finishes.
|
|
5868
|
+
uidRegistry.set(data, uid);
|
|
5869
|
+
this.setStatus(uid, 'ok');
|
|
5870
|
+
if (this.multi()) {
|
|
5871
|
+
// Replaces the preview in place, by uid, rather than filtering it
|
|
5872
|
+
// out and pushing the server response at the end: with several
|
|
5873
|
+
// uploads resolving concurrently, each `next` reads `this.images`
|
|
5874
|
+
// fresh at its own callback, and an in-place-by-uid update can
|
|
5875
|
+
// never clobber or reorder an entry a sibling upload already
|
|
5876
|
+
// committed (AVF-16 — verified by the 3-concurrent-uploads spec).
|
|
5877
|
+
this.value.set(this.images.map((img) => (this.uidOf(img) === uid ? data : img)));
|
|
5878
|
+
this.onChange(this.value());
|
|
5879
|
+
}
|
|
5880
|
+
else {
|
|
5881
|
+
this.assignValue(data);
|
|
5882
|
+
}
|
|
5883
|
+
},
|
|
5884
|
+
error: () => {
|
|
5885
|
+
// `setStatus` (not a raw `status.set`) is what makes this reach the
|
|
5886
|
+
// screen at all: a failed upload is the one outcome that never
|
|
5887
|
+
// touches `value`, so without the signal write inside `setStatus`,
|
|
5888
|
+
// nothing tells Angular this control needs checking again — the
|
|
5889
|
+
// thumbnail stays stuck showing "subiendo" forever (AVF-18
|
|
5890
|
+
// corrección de rechazo #2).
|
|
5891
|
+
this.setStatus(uid, 'fallido');
|
|
5892
|
+
}
|
|
5893
|
+
});
|
|
5894
|
+
}
|
|
5895
|
+
/**
|
|
5896
|
+
* Retries a failed upload in place: same `uid`, same position in the
|
|
5897
|
+
* gallery, no re-read from disk (the preview already holds the file's
|
|
5898
|
+
* data).
|
|
5899
|
+
*/
|
|
5900
|
+
retry(image) {
|
|
5901
|
+
if (!this.client || this.statusOf(image) !== 'fallido') {
|
|
5902
|
+
return;
|
|
5903
|
+
}
|
|
5904
|
+
this.upload(image, this.uidOf(image));
|
|
5905
|
+
}
|
|
5400
5906
|
assignValue(image) {
|
|
5401
5907
|
if (this.multi()) {
|
|
5402
5908
|
this.value.set([...this.images, image]);
|
|
@@ -5406,26 +5912,33 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5406
5912
|
}
|
|
5407
5913
|
this.onChange(this.value());
|
|
5408
5914
|
}
|
|
5409
|
-
compareWith(from, to) {
|
|
5410
|
-
return from.id === to.id || from.name === to.name;
|
|
5411
|
-
}
|
|
5412
5915
|
remove(image) {
|
|
5413
|
-
this.
|
|
5916
|
+
const uid = this.uidOf(image);
|
|
5917
|
+
const previousStatus = this.statusOf(image);
|
|
5918
|
+
this.setStatus(uid, 'subiendo');
|
|
5414
5919
|
if (this.client && !!image.id) {
|
|
5415
5920
|
this.client.remove(image.id).subscribe({
|
|
5416
5921
|
next: () => {
|
|
5417
5922
|
this.value.set(this.multi() ? this.images.filter((img) => img !== image) : null);
|
|
5418
|
-
this.
|
|
5923
|
+
this.deleteStatus(uid);
|
|
5419
5924
|
this.onChange(this.value());
|
|
5420
5925
|
},
|
|
5421
5926
|
error: () => {
|
|
5422
|
-
|
|
5927
|
+
// Removal failed: restore whatever status the image had before
|
|
5928
|
+
// (normally 'ok' or 'fallido'), rather than leaving it stuck on
|
|
5929
|
+
// 'subiendo' with no way out.
|
|
5930
|
+
if (previousStatus) {
|
|
5931
|
+
this.setStatus(uid, previousStatus);
|
|
5932
|
+
}
|
|
5933
|
+
else {
|
|
5934
|
+
this.deleteStatus(uid);
|
|
5935
|
+
}
|
|
5423
5936
|
}
|
|
5424
5937
|
});
|
|
5425
5938
|
}
|
|
5426
5939
|
else {
|
|
5427
5940
|
this.value.set(this.multi() ? this.images.filter((img) => img !== image) : null);
|
|
5428
|
-
this.
|
|
5941
|
+
this.deleteStatus(uid);
|
|
5429
5942
|
this.onChange(this.value());
|
|
5430
5943
|
}
|
|
5431
5944
|
}
|
|
@@ -5434,17 +5947,40 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5434
5947
|
event.dataTransfer.dropEffect = 'move';
|
|
5435
5948
|
this._fromIndex = index;
|
|
5436
5949
|
}
|
|
5950
|
+
/**
|
|
5951
|
+
* Shared by every drop target (thumbnails, the `cover` node — index 0 —
|
|
5952
|
+
* and the plain drop zones). `event.dataTransfer.types` never carries
|
|
5953
|
+
* `'Files'` for the internal reorder drag (it writes nothing to the
|
|
5954
|
+
* clipboard today), so that check alone tells the external-file drop and
|
|
5955
|
+
* the reorder drag apart without a separate state flag.
|
|
5956
|
+
*/
|
|
5437
5957
|
dragover(event, index) {
|
|
5438
5958
|
event.preventDefault();
|
|
5959
|
+
if (this.isFileDrag(event)) {
|
|
5960
|
+
this.dragActive.set(true);
|
|
5961
|
+
return;
|
|
5962
|
+
}
|
|
5439
5963
|
this._toIndex = index;
|
|
5440
5964
|
}
|
|
5965
|
+
dragleave(event) {
|
|
5966
|
+
if (this.isFileDrag(event)) {
|
|
5967
|
+
this.dragActive.set(false);
|
|
5968
|
+
}
|
|
5969
|
+
}
|
|
5441
5970
|
dragend(event) {
|
|
5442
5971
|
this.renderer.setStyle(event.target, 'opacity', 1);
|
|
5443
5972
|
}
|
|
5444
5973
|
drop(event) {
|
|
5445
5974
|
event.stopPropagation();
|
|
5975
|
+
if (this.isFileDrag(event)) {
|
|
5976
|
+
event.preventDefault();
|
|
5977
|
+
this.dragActive.set(false);
|
|
5978
|
+
this.addDroppedFile(event.dataTransfer.files);
|
|
5979
|
+
return;
|
|
5980
|
+
}
|
|
5981
|
+
this.dragActive.set(false);
|
|
5446
5982
|
if (this._fromIndex !== this._toIndex) {
|
|
5447
|
-
const images = this.images;
|
|
5983
|
+
const images = [...this.images];
|
|
5448
5984
|
const element = images[this._fromIndex];
|
|
5449
5985
|
images.splice(this._fromIndex, 1);
|
|
5450
5986
|
images.splice(this._toIndex, 0, element);
|
|
@@ -5452,28 +5988,105 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5452
5988
|
this.onChange(this.value());
|
|
5453
5989
|
}
|
|
5454
5990
|
}
|
|
5991
|
+
isFileDrag(event) {
|
|
5992
|
+
return !!event.dataTransfer?.types?.includes('Files');
|
|
5993
|
+
}
|
|
5994
|
+
isAcceptedFile(file) {
|
|
5995
|
+
const patterns = this.accept()
|
|
5996
|
+
.split(',')
|
|
5997
|
+
.map((pattern) => pattern.trim().toLowerCase())
|
|
5998
|
+
.filter(Boolean);
|
|
5999
|
+
if (!patterns.length) {
|
|
6000
|
+
return true;
|
|
6001
|
+
}
|
|
6002
|
+
const name = file.name.toLowerCase();
|
|
6003
|
+
const type = file.type.toLowerCase();
|
|
6004
|
+
return patterns.some((pattern) => {
|
|
6005
|
+
if (pattern.startsWith('.')) {
|
|
6006
|
+
return name.endsWith(pattern);
|
|
6007
|
+
}
|
|
6008
|
+
if (pattern.endsWith('/*')) {
|
|
6009
|
+
return type.startsWith(pattern.slice(0, -1));
|
|
6010
|
+
}
|
|
6011
|
+
return type === pattern;
|
|
6012
|
+
});
|
|
6013
|
+
}
|
|
6014
|
+
addDroppedFile(files) {
|
|
6015
|
+
if (!this.multi()) {
|
|
6016
|
+
// Kept byte-for-byte identical to the pre-AVF-16 single-file check:
|
|
6017
|
+
// only the raw first dropped file is ever considered, exactly as
|
|
6018
|
+
// before. The multi-file/limit pipeline below is new behaviour and
|
|
6019
|
+
// must not change this path (AVF-16, criterio "sin regresión").
|
|
6020
|
+
const file = files?.item(0);
|
|
6021
|
+
if (!file || !this.isAcceptedFile(file)) {
|
|
6022
|
+
return;
|
|
6023
|
+
}
|
|
6024
|
+
this.add(NsFile.parse(file));
|
|
6025
|
+
this.onTouched();
|
|
6026
|
+
return;
|
|
6027
|
+
}
|
|
6028
|
+
const accepted = Array.from(files ?? []).filter((file) => this.isAcceptedFile(file));
|
|
6029
|
+
if (this.enqueueFiles(accepted) > 0) {
|
|
6030
|
+
this.onTouched();
|
|
6031
|
+
}
|
|
6032
|
+
}
|
|
6033
|
+
/**
|
|
6034
|
+
* Accepts as many of `files` as fit under `limit()`, all at once, and
|
|
6035
|
+
* reports the rest inline. `limit()` is evaluated once here, against
|
|
6036
|
+
* `this.images.length` as it stands *before* any of this batch's
|
|
6037
|
+
* `add()` calls run — never inside a per-file callback, where it would
|
|
6038
|
+
* lag behind sibling files whose `FileReader`/upload hasn't resolved yet
|
|
6039
|
+
* and let more through than actually fit (AVF-16).
|
|
6040
|
+
*
|
|
6041
|
+
* Returns how many files were actually enqueued, so callers can decide
|
|
6042
|
+
* whether to mark the control touched.
|
|
6043
|
+
*/
|
|
6044
|
+
enqueueFiles(files) {
|
|
6045
|
+
if (!files.length) {
|
|
6046
|
+
return 0;
|
|
6047
|
+
}
|
|
6048
|
+
if (!this.multi()) {
|
|
6049
|
+
this.limitWarning.set(null);
|
|
6050
|
+
this.add(NsFile.parse(files[0]));
|
|
6051
|
+
return 1;
|
|
6052
|
+
}
|
|
6053
|
+
const room = Math.max(0, this.limit() - this.images.length);
|
|
6054
|
+
const accepted = files.slice(0, room);
|
|
6055
|
+
const rejected = files.length - accepted.length;
|
|
6056
|
+
this.limitWarning.set(rejected > 0 ? this.buildLimitWarning(room, rejected) : null);
|
|
6057
|
+
accepted.forEach((file) => this.add(NsFile.parse(file)));
|
|
6058
|
+
return accepted.length;
|
|
6059
|
+
}
|
|
6060
|
+
buildLimitWarning(room, rejected) {
|
|
6061
|
+
const rejectedPhrase = rejected === 1 ? '1 no se añadió' : `${rejected} no se añadieron`;
|
|
6062
|
+
if (room <= 0) {
|
|
6063
|
+
return `Ya alcanzaste el límite de fotos; ${rejectedPhrase}`;
|
|
6064
|
+
}
|
|
6065
|
+
const roomPhrase = room === 1 ? 'cabe 1 foto' : `caben ${room} fotos`;
|
|
6066
|
+
return `Solo ${roomPhrase}; ${rejectedPhrase}`;
|
|
6067
|
+
}
|
|
5455
6068
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsImageUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5456
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsImageUploadComponent, isStandalone: true, selector: "ns-image-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-image--loaded": "!multi() && !!value()", "class.ns-image--disabled": "disabled()" } }, providers: [
|
|
6069
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsImageUploadComponent, isStandalone: true, selector: "ns-image-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-image-upload--loaded": "!multi() && !!value()", "class.ns-image-upload--disabled": "disabled()" } }, providers: [
|
|
5457
6070
|
{
|
|
5458
6071
|
provide: NG_VALUE_ACCESSOR,
|
|
5459
6072
|
useExisting: forwardRef(() => NsImageUploadComponent),
|
|
5460
6073
|
multi: true
|
|
5461
6074
|
}
|
|
5462
|
-
], viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ns-image__wrap\"\n [ngClass]=\"{ 'ns-image__wrap--multiple': multi() && images.length }\"\n>\n @if (multi()) {\n @for (image of images; let i = $index; track i) {\n <div\n class=\"ns-image__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image__button ns-image__button--upload\"\n (click)=\"onClick()\"\n [ngClass]=\"{ 'ns-image__button--loading': loading.has(image.name) }\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n >\n <img\n class=\"ns-image__preview\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image__preload\" name=\"loader-circle\" />\n\n <div class=\"ns-image__overlay\">\n <ns-icon class=\"ns-image__drag\" name=\"grip\" />\n </div>\n </button>\n <button\n type=\"button\"\n class=\"ns-image__remove\"\n [disabled]=\"disabled() || loading.has(image.name)\"\n [attr.aria-label]=\"'Remove ' + image.name\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"trash-2\" />\n </button>\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image__drag-container\"\n (click)=\"onClick()\"\n [ngClass]=\"{\n 'ns-image__drag-container--loading':\n image && !multi() && loading.has(image.name)\n }\"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (image && !multi()) {\n <img\n class=\"ns-image__fluid\"\n [attr.src]=\"image | nsImageUrl\"\n [ngClass]=\"{ 'ns-image__fluid--disabled': disabled() }\"\n alt\n />\n }\n\n @if (!image || multi()) {\n <div class=\"ns-image__empty\">\n <ns-icon name=\"image\" />\n <span>{{ label() }}</span>\n </div>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n</div>\n", styles: ["@layer properties;:host{position:relative;display:block;width:100%}.ns-image__wrap{width:100%}.ns-image__wrap--multiple{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ns-component-image-upload-gap)}.ns-image__drag-container,.ns-image__button{position:relative;display:flex;width:100%;height:100%;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-image-upload-padding);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);box-shadow:var(--ns-component-image-upload-control-shadow);transition:border-color var(--ns-component-image-upload-transition-duration),box-shadow var(--ns-component-image-upload-transition-duration),background var(--ns-component-image-upload-transition-duration)}.ns-image__drag-container:hover:not(:disabled),.ns-image__button:hover:not(:disabled){border-color:var(--ns-component-image-upload-border-hover-color)}.ns-image__drag-container{min-height:calc(var(--ns-primitive-space-1) * 40);--tw-border-style: dashed;border-style:dashed}.ns-image__thumbnail{position:relative;min-height:calc(var(--ns-primitive-space-1) * 32);cursor:move;overflow:hidden;border-radius:var(--ns-component-image-upload-thumbnail-radius);box-shadow:var(--ns-component-image-upload-thumbnail-shadow)}.ns-image__preview,.ns-image__fluid{width:100%;height:100%;object-fit:cover}.ns-image__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);background:var(--ns-component-image-upload-overlay-color)}.ns-image__button:hover .ns-image__overlay,.ns-image__drag-container:hover .ns-image__overlay,:host(.ns-image--loaded) .ns-image__overlay{opacity:70%}.ns-image__empty{z-index:10;display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-image-upload-gap)}.ns-image__remove,.ns-image__drag{position:absolute;z-index:10;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ns-image__remove{inset-inline-end:calc(var(--ns-primitive-space-1) * 2);top:calc(var(--ns-primitive-space-1) * 2);cursor:pointer;color:var(--ns-component-image-upload-danger-color)}.ns-image__drag{inset-inline-start:calc(var(--ns-primitive-space-1) * 2);top:calc(var(--ns-primitive-space-1) * 2)}.ns-image__preload{position:relative;z-index:10;display:none}.ns-image__button--loading .ns-image__preload,.ns-image__drag-container--loading .ns-image__preload{display:block}.ns-image__button--loading .ns-image__preview,.ns-image__drag-container--loading .ns-image__fluid,.ns-image__fluid--disabled,:host(.ns-image--disabled){pointer-events:none;opacity:50%}@media(prefers-reduced-motion:reduce){.ns-image__drag-container,.ns-image__button,.ns-image__overlay{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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "pipe", type: NsImageUrlPipe, name: "nsImageUrl" }] });
|
|
6075
|
+
], viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (layout() === 'cover') {\n <div class=\"ns-image-upload__wrap ns-image-upload__wrap--cover\">\n @if (!images.length) {\n <div\n class=\"ns-image-upload__cover-empty\"\n [class.ns-image-upload__cover-empty--dragging]=\"dragActive()\"\n (dragover)=\"dragover($event, 0)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <div class=\"ns-image-upload__cover-empty-icon\">\n <ns-icon name=\"image\" />\n </div>\n <p class=\"ns-image-upload__cover-empty-title\">\n Arrastra tus fotos aqu\u00ED\n </p>\n <p class=\"ns-image-upload__cover-empty-subtitle\">\n PNG o JPG, hasta 10MB cada una\n </p>\n <ns-button\n type=\"button\"\n variant=\"dark\"\n size=\"sm\"\n [disabled]=\"disabled()\"\n (click)=\"onClick()\"\n >\n Subir fotos\n </ns-button>\n </div>\n } @else {\n <div\n class=\"ns-image-upload__cover-grid\"\n [style.--ns-image-upload-rows]=\"reservedRows()\"\n >\n <div\n class=\"ns-image-upload__cover\"\n tabindex=\"0\"\n [attr.aria-label]=\"'Esta imagen es la portada del producto'\"\n [class.ns-image-upload__cover--dragging]=\"dragActive()\"\n [class.ns-image-upload__cover--loading]=\"\n statusOf(images[0]) === 'subiendo'\n \"\n [class.ns-image-upload__cover--failed]=\"\n statusOf(images[0]) === 'fallido'\n \"\n (dragover)=\"dragover($event, 0)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <img\n class=\"ns-image-upload__cover-image\"\n [attr.src]=\"images[0] | nsImageUrl\"\n [attr.alt]=\"images[0].name\"\n />\n @if (statusOf(images[0]) === 'subiendo') {\n <div class=\"ns-image-upload__status-overlay\">\n <ns-icon name=\"loader-circle\" />\n </div>\n } @else if (statusOf(images[0]) === 'fallido') {\n <button\n type=\"button\"\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Reintentar subir la portada'\"\n (click)=\"retry(images[0]); $event.stopPropagation()\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </button>\n }\n <span class=\"ns-image-upload__badge\">Portada</span>\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__cover-remove\"\n [disabled]=\"disabled() || statusOf(images[0]) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar portada'\"\n (click)=\"remove(images[0]); $event.stopPropagation()\"\n >\n <ns-icon name=\"x\" size=\"14\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div class=\"ns-image-upload__stack\">\n @for (image of images.slice(1); track uidOf(image); let i = $index) {\n <div\n class=\"ns-image-upload__thumbnail\"\n tabindex=\"0\"\n [draggable]=\"!disabled() && images.length > 1\"\n [class.ns-image-upload__thumbnail--loading]=\"\n statusOf(image) === 'subiendo'\n \"\n [class.ns-image-upload__thumbnail--failed]=\"\n statusOf(image) === 'fallido'\n \"\n (dragstart)=\"dragstart($event, i + 1)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i + 1)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <img\n class=\"ns-image-upload__thumbnail-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n @if (statusOf(image) === 'subiendo') {\n <div class=\"ns-image-upload__status-overlay\">\n <ns-icon name=\"loader-circle\" />\n </div>\n } @else if (statusOf(image) === 'fallido') {\n <button\n type=\"button\"\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Reintentar subir imagen ' + (i + 2)\"\n (click)=\"retry(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </button>\n }\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__thumbnail-remove\"\n [disabled]=\"disabled() || statusOf(image) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar imagen ' + (i + 2)\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"x\" size=\"14\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n }\n @if (images.length < limit()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__add\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Explorar archivos para a\u00F1adir m\u00E1s fotos'\"\n (click)=\"onClick()\"\n >\n <ns-icon name=\"image-plus\" />\n <span class=\"ns-image-upload__add-title\">A\u00F1adir m\u00E1s</span>\n <span class=\"ns-image-upload__add-subtitle\"\n >o explora tus archivos</span\n >\n </button>\n }\n </div>\n </div>\n }\n\n @if (limitWarning(); as warning) {\n <p class=\"ns-image-upload__limit-warning\" role=\"status\">{{ warning }}</p>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </div>\n} @else {\n <div\n class=\"ns-image-upload__wrap\"\n [ngClass]=\"{ 'ns-image-upload__wrap--multiple': multi() && images.length }\"\n >\n @if (multi()) {\n @for (image of images; let i = $index; track uidOf(image)) {\n <div\n class=\"ns-image-upload__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image-upload__button ns-image-upload__button--upload\"\n (click)=\"statusOf(image) === 'fallido' ? retry(image) : onClick()\"\n [ngClass]=\"{\n 'ns-image-upload__button--loading':\n statusOf(image) === 'subiendo',\n 'ns-image-upload__button--failed': statusOf(image) === 'fallido'\n }\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"\n statusOf(image) === 'fallido'\n ? 'Reintentar subir ' + image.name\n : label()\n \"\n >\n <img\n class=\"ns-image-upload__preview\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image-upload__preload\" name=\"loader-circle\" />\n\n @if (statusOf(image) === 'fallido') {\n <div\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </div>\n }\n\n <div class=\"ns-image-upload__overlay\">\n <ns-icon class=\"ns-image-upload__drag\" name=\"grip\" />\n </div>\n </button>\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__remove\"\n [disabled]=\"disabled() || statusOf(image) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar imagen: ' + image.name\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"trash-2\" />\n </button>\n }\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image-upload__drag-container\"\n (click)=\"onDragContainerClick()\"\n (dragover)=\"dragover($event, images.length)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{\n 'ns-image-upload__drag-container--loading':\n image && !multi() && statusOf(image) === 'subiendo',\n 'ns-image-upload__drag-container--dragging': dragActive()\n }\"\n [attr.aria-label]=\"\n singleFailed ? 'Reintentar subir ' + image?.name : null\n \"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (!multi() && image; as img) {\n <img\n class=\"ns-image-upload__fluid\"\n [attr.src]=\"img | nsImageUrl\"\n [ngClass]=\"{ 'ns-image-upload__fluid--disabled': disabled() }\"\n alt\n />\n @if (statusOf(img) === 'fallido') {\n <div\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\">Reintentar</span>\n </div>\n }\n }\n\n @if (!image || multi()) {\n <div class=\"ns-image-upload__empty\">\n <ns-icon name=\"image\" />\n <span>{{ label() }}</span>\n </div>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n\n @if (limitWarning(); as warning) {\n <p class=\"ns-image-upload__limit-warning\" role=\"status\">{{ warning }}</p>\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";@layer properties;:host{position:relative;display:block;width:100%}.ns-image-upload__add:focus-visible,.ns-image-upload__stack .ns-image-upload__thumbnail:focus-visible,.ns-image-upload__stack .ns-image-upload__thumbnail-remove:focus-visible,.ns-image-upload__cover-remove:focus-visible,.ns-image-upload__cover:focus-visible,.ns-image-upload__status-overlay:focus-visible{box-shadow:var(--ns-component-image-upload-focus-shadow)}.ns-image-upload__add:disabled,.ns-image-upload__stack .ns-image-upload__thumbnail-remove:disabled,.ns-image-upload__cover-remove:disabled,.ns-image-upload__status-overlay:disabled{pointer-events:none;opacity:50%}.ns-image-upload__add:hover:not(:disabled),.ns-image-upload__cover-empty:hover:not(:disabled),.ns-image-upload__drag-container:hover:not(:disabled),.ns-image-upload__button:hover:not(:disabled){border-color:var(--ns-component-image-upload-border-hover-color)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove:hover:not(:disabled),.ns-image-upload__cover-remove:hover:not(:disabled){background:var(--ns-component-image-upload-chip-background-hover)}.ns-image-upload__wrap{width:100%}.ns-image-upload__wrap--multiple{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ns-component-image-upload-gap)}.ns-image-upload__drag-container,.ns-image-upload__button{position:relative;display:flex;width:100%;height:100%;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-image-upload-padding);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);box-shadow:var(--ns-component-image-upload-control-shadow);transition:border-color var(--ns-component-image-upload-transition-duration),box-shadow var(--ns-component-image-upload-transition-duration),background var(--ns-component-image-upload-transition-duration)}.ns-image-upload__drag-container{min-height:calc(var(--ns-primitive-space-1) * 40);--tw-border-style: dashed;border-style:dashed}.ns-image-upload__drag-container--dragging,.ns-image-upload__cover-empty--dragging,.ns-image-upload__cover--dragging{border-color:var(--ns-component-image-upload-border-hover-color);box-shadow:var(--ns-component-image-upload-focus-shadow)}.ns-image-upload__wrap--multiple .ns-image-upload__thumbnail{min-height:calc(var(--ns-primitive-space-1) * 32);cursor:move}.ns-image-upload__thumbnail{position:relative;overflow:hidden;border-radius:var(--ns-component-image-upload-thumbnail-radius);box-shadow:var(--ns-component-image-upload-thumbnail-shadow)}.ns-image-upload__preview,.ns-image-upload__fluid,.ns-image-upload__thumbnail-image{width:100%;height:100%;object-fit:cover}.ns-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);background:var(--ns-component-image-upload-overlay-color)}.ns-image-upload__button:hover .ns-image-upload__overlay,.ns-image-upload__drag-container:hover .ns-image-upload__overlay,:host(.ns-image-upload--loaded) .ns-image-upload__overlay{opacity:70%}.ns-image-upload__empty{z-index:10;display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-image-upload-gap)}.ns-image-upload__remove,.ns-image-upload__drag{position:absolute;top:calc(var(--ns-primitive-space-1) * 2);z-index:10;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ns-image-upload__remove{inset-inline-end:calc(var(--ns-primitive-space-1) * 2);cursor:pointer;color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__drag{inset-inline-start:calc(var(--ns-primitive-space-1) * 2)}.ns-image-upload__preload{position:relative;z-index:10;display:none}.ns-image-upload__button--loading .ns-image-upload__preload,.ns-image-upload__drag-container--loading .ns-image-upload__preload{display:block}.ns-image-upload__button--loading .ns-image-upload__preview,.ns-image-upload__drag-container--loading .ns-image-upload__fluid,.ns-image-upload__fluid--disabled,:host(.ns-image-upload--disabled){pointer-events:none;opacity:50%}.ns-image-upload__status-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ns-component-image-upload-gap);background:var(--ns-component-image-upload-overlay-color);border:0;cursor:pointer}.ns-image-upload__status-overlay--failed{color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__wrap--cover{display:flex;flex-direction:column}.ns-image-upload__cover-empty{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;text-align:center;box-sizing:border-box;min-block-size:var(--ns-component-image-upload-empty-min-height);gap:var(--ns-component-image-upload-empty-gap);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);transition:border-color var(--ns-component-image-upload-transition-duration)}.ns-image-upload__cover-empty-icon{display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-image-upload-empty-icon-circle-size);block-size:var(--ns-component-image-upload-empty-icon-circle-size);background:var(--ns-component-image-upload-empty-icon-circle-background)}.ns-image-upload__cover-empty-icon ::ng-deep svg{inline-size:var(--ns-component-image-upload-empty-icon-size);block-size:var(--ns-component-image-upload-empty-icon-size)}.ns-image-upload__cover-empty-title{margin:0;color:var(--ns-component-image-upload-empty-title-color);font-size:var(--ns-component-image-upload-empty-title-font-size);font-weight:var(--ns-component-image-upload-empty-title-font-weight)}.ns-image-upload__cover-empty-subtitle{margin:0;color:var(--ns-component-image-upload-empty-subtitle-color);font-size:var(--ns-component-image-upload-empty-subtitle-font-size)}.ns-image-upload__cover-grid{display:grid;width:100%;align-items:flex-start;grid-template-columns:2fr 1fr;column-gap:var(--ns-component-image-upload-column-gap)}.ns-image-upload__cover,.ns-image-upload__stack{block-size:var(--ns-component-image-upload-empty-min-height)}.ns-image-upload__cover{position:relative;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none;box-sizing:border-box;border-radius:var(--ns-component-image-upload-thumbnail-radius);background:var(--ns-component-image-upload-cover-background)}.ns-image-upload__cover--failed{border-color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__cover-image{width:100%;height:100%;object-fit:contain}.ns-image-upload__badge{position:absolute;display:inline-flex;align-items:center;border-style:var(--tw-border-style);border-width:0px;border-radius:var(--ns-component-image-upload-chip-radius);background:var(--ns-component-image-upload-chip-background);color:var(--ns-component-image-upload-chip-color);padding-block:var(--ns-component-image-upload-chip-padding-block);padding-inline:var(--ns-component-image-upload-chip-padding-inline);font-size:var(--ns-component-image-upload-chip-font-size);font-weight:var(--ns-component-image-upload-chip-font-weight);top:var(--ns-component-image-upload-chip-offset);inset-inline-start:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove,.ns-image-upload__cover-remove{position:absolute;display:flex;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;--tw-outline-style: none;outline-style:none;background:var(--ns-component-image-upload-chip-background);color:var(--ns-component-image-upload-chip-color);inset-inline-end:var(--ns-component-image-upload-chip-offset);opacity:0;pointer-events:none;transition:background var(--ns-component-image-upload-transition-duration),opacity var(--ns-component-image-upload-transition-duration)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove:focus-visible,.ns-image-upload__cover-remove:focus-visible{opacity:1;pointer-events:auto}.ns-image-upload__cover-remove{z-index:11;bottom:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__stack{display:grid;align-content:flex-start;overflow-y:auto;grid-auto-rows:calc((var(--ns-component-image-upload-empty-min-height) - (var(--ns-image-upload-rows) - 1) * var(--ns-component-image-upload-stack-gap)) / var(--ns-image-upload-rows));row-gap:var(--ns-component-image-upload-stack-gap)}.ns-image-upload__stack .ns-image-upload__thumbnail{width:100%;--tw-outline-style: none;outline-style:none}.ns-image-upload__stack .ns-image-upload__thumbnail--failed{border:var(--ns-component-image-upload-thumbnail-border-width) solid var(--ns-component-image-upload-danger-color);box-sizing:border-box}.ns-image-upload__stack .ns-image-upload__thumbnail-remove{z-index:11;top:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__cover:hover .ns-image-upload__cover-remove,.ns-image-upload__cover:focus-within .ns-image-upload__cover-remove,.ns-image-upload__stack .ns-image-upload__thumbnail:hover .ns-image-upload__thumbnail-remove,.ns-image-upload__stack .ns-image-upload__thumbnail:focus-within .ns-image-upload__thumbnail-remove{opacity:1;pointer-events:auto}.ns-image-upload__add{display:flex;width:100%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;text-align:center;--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-thumbnail-radius);background:var(--ns-component-image-upload-control-background);gap:var(--ns-component-image-upload-gap);transition:border-color var(--ns-component-image-upload-transition-duration)}.ns-image-upload__add ::ng-deep svg{inline-size:var(--ns-component-image-upload-add-icon-size);block-size:var(--ns-component-image-upload-add-icon-size)}.ns-image-upload__add-title{margin:0;color:var(--ns-component-image-upload-add-title-color);font-size:var(--ns-component-image-upload-add-title-font-size)}.ns-image-upload__add-subtitle{margin:0;color:var(--ns-component-image-upload-add-subtitle-color);font-size:var(--ns-component-image-upload-add-subtitle-font-size)}.ns-image-upload__limit-warning{margin:0;grid-column:1/-1;margin-top:var(--ns-component-image-upload-gap);color:var(--ns-component-image-upload-warning-text-color);font-size:var(--ns-component-image-upload-add-subtitle-font-size)}@media(prefers-reduced-motion:reduce){.ns-image-upload__drag-container,.ns-image-upload__button,.ns-image-upload__overlay,.ns-image-upload__cover-empty,.ns-image-upload__add,.ns-image-upload__cover-remove,.ns-image-upload__stack .ns-image-upload__thumbnail-remove{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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsImageUrlPipe, name: "nsImageUrl" }] });
|
|
5463
6076
|
}
|
|
5464
6077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsImageUploadComponent, decorators: [{
|
|
5465
6078
|
type: Component,
|
|
5466
|
-
args: [{ selector: 'ns-image-upload', imports: [CommonModule, NsImageUrlPipe, NsIconsComponent], standalone: true, host: {
|
|
5467
|
-
'[class.ns-image--loaded]': '!multi() && !!value()',
|
|
5468
|
-
'[class.ns-image--disabled]': 'disabled()'
|
|
6079
|
+
args: [{ selector: 'ns-image-upload', imports: [CommonModule, NsImageUrlPipe, NsIconsComponent, NsButtonComponent], standalone: true, host: {
|
|
6080
|
+
'[class.ns-image-upload--loaded]': '!multi() && !!value()',
|
|
6081
|
+
'[class.ns-image-upload--disabled]': 'disabled()'
|
|
5469
6082
|
}, providers: [
|
|
5470
6083
|
{
|
|
5471
6084
|
provide: NG_VALUE_ACCESSOR,
|
|
5472
6085
|
useExisting: forwardRef(() => NsImageUploadComponent),
|
|
5473
6086
|
multi: true
|
|
5474
6087
|
}
|
|
5475
|
-
], template: "<div\n class=\"ns-image__wrap\"\n [ngClass]=\"{ 'ns-image__wrap--multiple': multi() && images.length }\"\n>\n @if (multi()) {\n @for (image of images; let i = $index; track i) {\n <div\n class=\"ns-image__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image__button ns-image__button--upload\"\n (click)=\"onClick()\"\n [ngClass]=\"{ 'ns-image__button--loading': loading.has(image.name) }\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n >\n <img\n class=\"ns-image__preview\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image__preload\" name=\"loader-circle\" />\n\n <div class=\"ns-image__overlay\">\n <ns-icon class=\"ns-image__drag\" name=\"grip\" />\n </div>\n </button>\n <button\n type=\"button\"\n class=\"ns-image__remove\"\n [disabled]=\"disabled() || loading.has(image.name)\"\n [attr.aria-label]=\"'Remove ' + image.name\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"trash-2\" />\n </button>\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image__drag-container\"\n (click)=\"onClick()\"\n [ngClass]=\"{\n 'ns-image__drag-container--loading':\n image && !multi() && loading.has(image.name)\n }\"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (image && !multi()) {\n <img\n class=\"ns-image__fluid\"\n [attr.src]=\"image | nsImageUrl\"\n [ngClass]=\"{ 'ns-image__fluid--disabled': disabled() }\"\n alt\n />\n }\n\n @if (!image || multi()) {\n <div class=\"ns-image__empty\">\n <ns-icon name=\"image\" />\n <span>{{ label() }}</span>\n </div>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n</div>\n", styles: ["@layer properties;:host{position:relative;display:block;width:100%}.ns-image__wrap{width:100%}.ns-image__wrap--multiple{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ns-component-image-upload-gap)}.ns-image__drag-container,.ns-image__button{position:relative;display:flex;width:100%;height:100%;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-image-upload-padding);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);box-shadow:var(--ns-component-image-upload-control-shadow);transition:border-color var(--ns-component-image-upload-transition-duration),box-shadow var(--ns-component-image-upload-transition-duration),background var(--ns-component-image-upload-transition-duration)}.ns-image__drag-container:hover:not(:disabled),.ns-image__button:hover:not(:disabled){border-color:var(--ns-component-image-upload-border-hover-color)}.ns-image__drag-container{min-height:calc(var(--ns-primitive-space-1) * 40);--tw-border-style: dashed;border-style:dashed}.ns-image__thumbnail{position:relative;min-height:calc(var(--ns-primitive-space-1) * 32);cursor:move;overflow:hidden;border-radius:var(--ns-component-image-upload-thumbnail-radius);box-shadow:var(--ns-component-image-upload-thumbnail-shadow)}.ns-image__preview,.ns-image__fluid{width:100%;height:100%;object-fit:cover}.ns-image__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);background:var(--ns-component-image-upload-overlay-color)}.ns-image__button:hover .ns-image__overlay,.ns-image__drag-container:hover .ns-image__overlay,:host(.ns-image--loaded) .ns-image__overlay{opacity:70%}.ns-image__empty{z-index:10;display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-image-upload-gap)}.ns-image__remove,.ns-image__drag{position:absolute;z-index:10;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ns-image__remove{inset-inline-end:calc(var(--ns-primitive-space-1) * 2);top:calc(var(--ns-primitive-space-1) * 2);cursor:pointer;color:var(--ns-component-image-upload-danger-color)}.ns-image__drag{inset-inline-start:calc(var(--ns-primitive-space-1) * 2);top:calc(var(--ns-primitive-space-1) * 2)}.ns-image__preload{position:relative;z-index:10;display:none}.ns-image__button--loading .ns-image__preload,.ns-image__drag-container--loading .ns-image__preload{display:block}.ns-image__button--loading .ns-image__preview,.ns-image__drag-container--loading .ns-image__fluid,.ns-image__fluid--disabled,:host(.ns-image--disabled){pointer-events:none;opacity:50%}@media(prefers-reduced-motion:reduce){.ns-image__drag-container,.ns-image__button,.ns-image__overlay{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"] }]
|
|
5476
|
-
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], imgRef: [{
|
|
6088
|
+
], template: "@if (layout() === 'cover') {\n <div class=\"ns-image-upload__wrap ns-image-upload__wrap--cover\">\n @if (!images.length) {\n <div\n class=\"ns-image-upload__cover-empty\"\n [class.ns-image-upload__cover-empty--dragging]=\"dragActive()\"\n (dragover)=\"dragover($event, 0)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <div class=\"ns-image-upload__cover-empty-icon\">\n <ns-icon name=\"image\" />\n </div>\n <p class=\"ns-image-upload__cover-empty-title\">\n Arrastra tus fotos aqu\u00ED\n </p>\n <p class=\"ns-image-upload__cover-empty-subtitle\">\n PNG o JPG, hasta 10MB cada una\n </p>\n <ns-button\n type=\"button\"\n variant=\"dark\"\n size=\"sm\"\n [disabled]=\"disabled()\"\n (click)=\"onClick()\"\n >\n Subir fotos\n </ns-button>\n </div>\n } @else {\n <div\n class=\"ns-image-upload__cover-grid\"\n [style.--ns-image-upload-rows]=\"reservedRows()\"\n >\n <div\n class=\"ns-image-upload__cover\"\n tabindex=\"0\"\n [attr.aria-label]=\"'Esta imagen es la portada del producto'\"\n [class.ns-image-upload__cover--dragging]=\"dragActive()\"\n [class.ns-image-upload__cover--loading]=\"\n statusOf(images[0]) === 'subiendo'\n \"\n [class.ns-image-upload__cover--failed]=\"\n statusOf(images[0]) === 'fallido'\n \"\n (dragover)=\"dragover($event, 0)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <img\n class=\"ns-image-upload__cover-image\"\n [attr.src]=\"images[0] | nsImageUrl\"\n [attr.alt]=\"images[0].name\"\n />\n @if (statusOf(images[0]) === 'subiendo') {\n <div class=\"ns-image-upload__status-overlay\">\n <ns-icon name=\"loader-circle\" />\n </div>\n } @else if (statusOf(images[0]) === 'fallido') {\n <button\n type=\"button\"\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Reintentar subir la portada'\"\n (click)=\"retry(images[0]); $event.stopPropagation()\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </button>\n }\n <span class=\"ns-image-upload__badge\">Portada</span>\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__cover-remove\"\n [disabled]=\"disabled() || statusOf(images[0]) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar portada'\"\n (click)=\"remove(images[0]); $event.stopPropagation()\"\n >\n <ns-icon name=\"x\" size=\"14\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div class=\"ns-image-upload__stack\">\n @for (image of images.slice(1); track uidOf(image); let i = $index) {\n <div\n class=\"ns-image-upload__thumbnail\"\n tabindex=\"0\"\n [draggable]=\"!disabled() && images.length > 1\"\n [class.ns-image-upload__thumbnail--loading]=\"\n statusOf(image) === 'subiendo'\n \"\n [class.ns-image-upload__thumbnail--failed]=\"\n statusOf(image) === 'fallido'\n \"\n (dragstart)=\"dragstart($event, i + 1)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i + 1)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <img\n class=\"ns-image-upload__thumbnail-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n @if (statusOf(image) === 'subiendo') {\n <div class=\"ns-image-upload__status-overlay\">\n <ns-icon name=\"loader-circle\" />\n </div>\n } @else if (statusOf(image) === 'fallido') {\n <button\n type=\"button\"\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Reintentar subir imagen ' + (i + 2)\"\n (click)=\"retry(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </button>\n }\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__thumbnail-remove\"\n [disabled]=\"disabled() || statusOf(image) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar imagen ' + (i + 2)\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"x\" size=\"14\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n }\n @if (images.length < limit()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__add\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Explorar archivos para a\u00F1adir m\u00E1s fotos'\"\n (click)=\"onClick()\"\n >\n <ns-icon name=\"image-plus\" />\n <span class=\"ns-image-upload__add-title\">A\u00F1adir m\u00E1s</span>\n <span class=\"ns-image-upload__add-subtitle\"\n >o explora tus archivos</span\n >\n </button>\n }\n </div>\n </div>\n }\n\n @if (limitWarning(); as warning) {\n <p class=\"ns-image-upload__limit-warning\" role=\"status\">{{ warning }}</p>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </div>\n} @else {\n <div\n class=\"ns-image-upload__wrap\"\n [ngClass]=\"{ 'ns-image-upload__wrap--multiple': multi() && images.length }\"\n >\n @if (multi()) {\n @for (image of images; let i = $index; track uidOf(image)) {\n <div\n class=\"ns-image-upload__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image-upload__button ns-image-upload__button--upload\"\n (click)=\"statusOf(image) === 'fallido' ? retry(image) : onClick()\"\n [ngClass]=\"{\n 'ns-image-upload__button--loading':\n statusOf(image) === 'subiendo',\n 'ns-image-upload__button--failed': statusOf(image) === 'fallido'\n }\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"\n statusOf(image) === 'fallido'\n ? 'Reintentar subir ' + image.name\n : label()\n \"\n >\n <img\n class=\"ns-image-upload__preview\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image-upload__preload\" name=\"loader-circle\" />\n\n @if (statusOf(image) === 'fallido') {\n <div\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </div>\n }\n\n <div class=\"ns-image-upload__overlay\">\n <ns-icon class=\"ns-image-upload__drag\" name=\"grip\" />\n </div>\n </button>\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__remove\"\n [disabled]=\"disabled() || statusOf(image) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar imagen: ' + image.name\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"trash-2\" />\n </button>\n }\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image-upload__drag-container\"\n (click)=\"onDragContainerClick()\"\n (dragover)=\"dragover($event, images.length)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{\n 'ns-image-upload__drag-container--loading':\n image && !multi() && statusOf(image) === 'subiendo',\n 'ns-image-upload__drag-container--dragging': dragActive()\n }\"\n [attr.aria-label]=\"\n singleFailed ? 'Reintentar subir ' + image?.name : null\n \"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (!multi() && image; as img) {\n <img\n class=\"ns-image-upload__fluid\"\n [attr.src]=\"img | nsImageUrl\"\n [ngClass]=\"{ 'ns-image-upload__fluid--disabled': disabled() }\"\n alt\n />\n @if (statusOf(img) === 'fallido') {\n <div\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\">Reintentar</span>\n </div>\n }\n }\n\n @if (!image || multi()) {\n <div class=\"ns-image-upload__empty\">\n <ns-icon name=\"image\" />\n <span>{{ label() }}</span>\n </div>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n\n @if (limitWarning(); as warning) {\n <p class=\"ns-image-upload__limit-warning\" role=\"status\">{{ warning }}</p>\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";@layer properties;:host{position:relative;display:block;width:100%}.ns-image-upload__add:focus-visible,.ns-image-upload__stack .ns-image-upload__thumbnail:focus-visible,.ns-image-upload__stack .ns-image-upload__thumbnail-remove:focus-visible,.ns-image-upload__cover-remove:focus-visible,.ns-image-upload__cover:focus-visible,.ns-image-upload__status-overlay:focus-visible{box-shadow:var(--ns-component-image-upload-focus-shadow)}.ns-image-upload__add:disabled,.ns-image-upload__stack .ns-image-upload__thumbnail-remove:disabled,.ns-image-upload__cover-remove:disabled,.ns-image-upload__status-overlay:disabled{pointer-events:none;opacity:50%}.ns-image-upload__add:hover:not(:disabled),.ns-image-upload__cover-empty:hover:not(:disabled),.ns-image-upload__drag-container:hover:not(:disabled),.ns-image-upload__button:hover:not(:disabled){border-color:var(--ns-component-image-upload-border-hover-color)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove:hover:not(:disabled),.ns-image-upload__cover-remove:hover:not(:disabled){background:var(--ns-component-image-upload-chip-background-hover)}.ns-image-upload__wrap{width:100%}.ns-image-upload__wrap--multiple{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ns-component-image-upload-gap)}.ns-image-upload__drag-container,.ns-image-upload__button{position:relative;display:flex;width:100%;height:100%;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-image-upload-padding);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);box-shadow:var(--ns-component-image-upload-control-shadow);transition:border-color var(--ns-component-image-upload-transition-duration),box-shadow var(--ns-component-image-upload-transition-duration),background var(--ns-component-image-upload-transition-duration)}.ns-image-upload__drag-container{min-height:calc(var(--ns-primitive-space-1) * 40);--tw-border-style: dashed;border-style:dashed}.ns-image-upload__drag-container--dragging,.ns-image-upload__cover-empty--dragging,.ns-image-upload__cover--dragging{border-color:var(--ns-component-image-upload-border-hover-color);box-shadow:var(--ns-component-image-upload-focus-shadow)}.ns-image-upload__wrap--multiple .ns-image-upload__thumbnail{min-height:calc(var(--ns-primitive-space-1) * 32);cursor:move}.ns-image-upload__thumbnail{position:relative;overflow:hidden;border-radius:var(--ns-component-image-upload-thumbnail-radius);box-shadow:var(--ns-component-image-upload-thumbnail-shadow)}.ns-image-upload__preview,.ns-image-upload__fluid,.ns-image-upload__thumbnail-image{width:100%;height:100%;object-fit:cover}.ns-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);background:var(--ns-component-image-upload-overlay-color)}.ns-image-upload__button:hover .ns-image-upload__overlay,.ns-image-upload__drag-container:hover .ns-image-upload__overlay,:host(.ns-image-upload--loaded) .ns-image-upload__overlay{opacity:70%}.ns-image-upload__empty{z-index:10;display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-image-upload-gap)}.ns-image-upload__remove,.ns-image-upload__drag{position:absolute;top:calc(var(--ns-primitive-space-1) * 2);z-index:10;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ns-image-upload__remove{inset-inline-end:calc(var(--ns-primitive-space-1) * 2);cursor:pointer;color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__drag{inset-inline-start:calc(var(--ns-primitive-space-1) * 2)}.ns-image-upload__preload{position:relative;z-index:10;display:none}.ns-image-upload__button--loading .ns-image-upload__preload,.ns-image-upload__drag-container--loading .ns-image-upload__preload{display:block}.ns-image-upload__button--loading .ns-image-upload__preview,.ns-image-upload__drag-container--loading .ns-image-upload__fluid,.ns-image-upload__fluid--disabled,:host(.ns-image-upload--disabled){pointer-events:none;opacity:50%}.ns-image-upload__status-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ns-component-image-upload-gap);background:var(--ns-component-image-upload-overlay-color);border:0;cursor:pointer}.ns-image-upload__status-overlay--failed{color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__wrap--cover{display:flex;flex-direction:column}.ns-image-upload__cover-empty{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;text-align:center;box-sizing:border-box;min-block-size:var(--ns-component-image-upload-empty-min-height);gap:var(--ns-component-image-upload-empty-gap);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);transition:border-color var(--ns-component-image-upload-transition-duration)}.ns-image-upload__cover-empty-icon{display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-image-upload-empty-icon-circle-size);block-size:var(--ns-component-image-upload-empty-icon-circle-size);background:var(--ns-component-image-upload-empty-icon-circle-background)}.ns-image-upload__cover-empty-icon ::ng-deep svg{inline-size:var(--ns-component-image-upload-empty-icon-size);block-size:var(--ns-component-image-upload-empty-icon-size)}.ns-image-upload__cover-empty-title{margin:0;color:var(--ns-component-image-upload-empty-title-color);font-size:var(--ns-component-image-upload-empty-title-font-size);font-weight:var(--ns-component-image-upload-empty-title-font-weight)}.ns-image-upload__cover-empty-subtitle{margin:0;color:var(--ns-component-image-upload-empty-subtitle-color);font-size:var(--ns-component-image-upload-empty-subtitle-font-size)}.ns-image-upload__cover-grid{display:grid;width:100%;align-items:flex-start;grid-template-columns:2fr 1fr;column-gap:var(--ns-component-image-upload-column-gap)}.ns-image-upload__cover,.ns-image-upload__stack{block-size:var(--ns-component-image-upload-empty-min-height)}.ns-image-upload__cover{position:relative;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none;box-sizing:border-box;border-radius:var(--ns-component-image-upload-thumbnail-radius);background:var(--ns-component-image-upload-cover-background)}.ns-image-upload__cover--failed{border-color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__cover-image{width:100%;height:100%;object-fit:contain}.ns-image-upload__badge{position:absolute;display:inline-flex;align-items:center;border-style:var(--tw-border-style);border-width:0px;border-radius:var(--ns-component-image-upload-chip-radius);background:var(--ns-component-image-upload-chip-background);color:var(--ns-component-image-upload-chip-color);padding-block:var(--ns-component-image-upload-chip-padding-block);padding-inline:var(--ns-component-image-upload-chip-padding-inline);font-size:var(--ns-component-image-upload-chip-font-size);font-weight:var(--ns-component-image-upload-chip-font-weight);top:var(--ns-component-image-upload-chip-offset);inset-inline-start:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove,.ns-image-upload__cover-remove{position:absolute;display:flex;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;--tw-outline-style: none;outline-style:none;background:var(--ns-component-image-upload-chip-background);color:var(--ns-component-image-upload-chip-color);inset-inline-end:var(--ns-component-image-upload-chip-offset);opacity:0;pointer-events:none;transition:background var(--ns-component-image-upload-transition-duration),opacity var(--ns-component-image-upload-transition-duration)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove:focus-visible,.ns-image-upload__cover-remove:focus-visible{opacity:1;pointer-events:auto}.ns-image-upload__cover-remove{z-index:11;bottom:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__stack{display:grid;align-content:flex-start;overflow-y:auto;grid-auto-rows:calc((var(--ns-component-image-upload-empty-min-height) - (var(--ns-image-upload-rows) - 1) * var(--ns-component-image-upload-stack-gap)) / var(--ns-image-upload-rows));row-gap:var(--ns-component-image-upload-stack-gap)}.ns-image-upload__stack .ns-image-upload__thumbnail{width:100%;--tw-outline-style: none;outline-style:none}.ns-image-upload__stack .ns-image-upload__thumbnail--failed{border:var(--ns-component-image-upload-thumbnail-border-width) solid var(--ns-component-image-upload-danger-color);box-sizing:border-box}.ns-image-upload__stack .ns-image-upload__thumbnail-remove{z-index:11;top:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__cover:hover .ns-image-upload__cover-remove,.ns-image-upload__cover:focus-within .ns-image-upload__cover-remove,.ns-image-upload__stack .ns-image-upload__thumbnail:hover .ns-image-upload__thumbnail-remove,.ns-image-upload__stack .ns-image-upload__thumbnail:focus-within .ns-image-upload__thumbnail-remove{opacity:1;pointer-events:auto}.ns-image-upload__add{display:flex;width:100%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;text-align:center;--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-thumbnail-radius);background:var(--ns-component-image-upload-control-background);gap:var(--ns-component-image-upload-gap);transition:border-color var(--ns-component-image-upload-transition-duration)}.ns-image-upload__add ::ng-deep svg{inline-size:var(--ns-component-image-upload-add-icon-size);block-size:var(--ns-component-image-upload-add-icon-size)}.ns-image-upload__add-title{margin:0;color:var(--ns-component-image-upload-add-title-color);font-size:var(--ns-component-image-upload-add-title-font-size)}.ns-image-upload__add-subtitle{margin:0;color:var(--ns-component-image-upload-add-subtitle-color);font-size:var(--ns-component-image-upload-add-subtitle-font-size)}.ns-image-upload__limit-warning{margin:0;grid-column:1/-1;margin-top:var(--ns-component-image-upload-gap);color:var(--ns-component-image-upload-warning-text-color);font-size:var(--ns-component-image-upload-add-subtitle-font-size)}@media(prefers-reduced-motion:reduce){.ns-image-upload__drag-container,.ns-image-upload__button,.ns-image-upload__overlay,.ns-image-upload__cover-empty,.ns-image-upload__add,.ns-image-upload__cover-remove,.ns-image-upload__stack .ns-image-upload__thumbnail-remove{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"] }]
|
|
6089
|
+
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], imgRef: [{
|
|
5477
6090
|
type: ViewChild,
|
|
5478
6091
|
args: ['input', { static: false, read: ElementRef }]
|
|
5479
6092
|
}] } });
|
|
@@ -6042,7 +6655,7 @@ class NsLoadMoreComponent {
|
|
|
6042
6655
|
{{ loadMoreLabel() }}
|
|
6043
6656
|
</ns-button>
|
|
6044
6657
|
}
|
|
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 });
|
|
6658
|
+
`, 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", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6046
6659
|
}
|
|
6047
6660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLoadMoreComponent, decorators: [{
|
|
6048
6661
|
type: Component,
|
|
@@ -6384,11 +6997,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6384
6997
|
}]
|
|
6385
6998
|
}] });
|
|
6386
6999
|
|
|
7000
|
+
// Fallback for `--ns-component-schedule-slot-height` (mirrors the
|
|
7001
|
+
// `min-height` of `.ns-schedule__timeline-day`): used when the token is
|
|
7002
|
+
// missing, e.g. in tests or SSR where `provideNsTheme` never ran and the
|
|
7003
|
+
// custom property resolves empty.
|
|
7004
|
+
const SLOT_CONTENT_HEIGHT_PX = 96;
|
|
7005
|
+
// Shared border between consecutive timeline rows — comes from the
|
|
7006
|
+
// `@apply border` on `.ns-schedule__timeline-day` (Tailwind's default border
|
|
7007
|
+
// width), not from a theme token.
|
|
7008
|
+
const SLOT_SEAM_PX = 1;
|
|
6387
7009
|
class NsScheduleEventComponent {
|
|
6388
7010
|
schedule = input(undefined, ...(ngDevMode ? [{ debugName: "schedule" }] : /* istanbul ignore next */ []));
|
|
6389
7011
|
timeline = input(undefined, ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
|
|
6390
7012
|
height;
|
|
6391
7013
|
service = inject(NsScheduleService);
|
|
7014
|
+
elementRef = inject((ElementRef));
|
|
6392
7015
|
get matchHour() {
|
|
6393
7016
|
const schedule = this.schedule();
|
|
6394
7017
|
return (!!schedule && new Date(schedule.startTime).getHours() === this.timeline());
|
|
@@ -6399,7 +7022,9 @@ class NsScheduleEventComponent {
|
|
|
6399
7022
|
const startTime = new Date(schedule.startTime);
|
|
6400
7023
|
const endTime = new Date(schedule.endTime);
|
|
6401
7024
|
const hours = Math.abs(startTime.getTime() - endTime.getTime()) / 36e5;
|
|
6402
|
-
|
|
7025
|
+
const slot = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--ns-component-schedule-slot-height'));
|
|
7026
|
+
const slotHeight = Number.isNaN(slot) || slot <= 0 ? SLOT_CONTENT_HEIGHT_PX : slot;
|
|
7027
|
+
this.height = Math.max(slotHeight * hours + SLOT_SEAM_PX * (hours - 1), slotHeight / 2);
|
|
6403
7028
|
}
|
|
6404
7029
|
}
|
|
6405
7030
|
onClick(event) {
|
|
@@ -6410,7 +7035,7 @@ class NsScheduleEventComponent {
|
|
|
6410
7035
|
}
|
|
6411
7036
|
}
|
|
6412
7037
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6413
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleEventComponent, isStandalone: true, selector: "ns-schedule-event", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.ns-schedule__event": "true", "class.ns-schedule__event--show": "schedule() && matchHour", "style.height.px": "height" } }, ngImport: i0, template: "@if (schedule(); as currentSchedule) {\n <span class=\"ns-schedule__event-subject\">{{ currentSchedule.subject }}</span>\n <div class=\"ns-schedule__event-body\" [innerHtml]=\"currentSchedule.body\"></div>\n}\n", styles: ["@layer properties
|
|
7038
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleEventComponent, isStandalone: true, selector: "ns-schedule-event", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.ns-schedule__event": "true", "class.ns-schedule__event--show": "schedule() && matchHour", "style.height.px": "height" } }, ngImport: i0, template: "@if (schedule(); as currentSchedule) {\n <span class=\"ns-schedule__event-subject\">{{ currentSchedule.subject }}</span>\n <div class=\"ns-schedule__event-body\" [innerHtml]=\"currentSchedule.body\"></div>\n}\n", styles: ["@layer properties;.ns-schedule__event{position:absolute;inset-inline:0px;display:none;cursor:pointer;overflow:hidden;border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;text-align:start;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);box-sizing:border-box;padding:var(--ns-component-schedule-event-padding);z-index:var(--ns-component-schedule-event-layer);border-color:var(--ns-component-schedule-event-border-color);border-radius:var(--ns-component-schedule-event-radius);background:var(--ns-component-schedule-event-background);color:var(--ns-component-schedule-event-color)}.ns-schedule__event.ns-schedule__event--show{display:block}.ns-schedule__event-subject{--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold)}.ns-schedule__event-body{overflow:hidden;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.ns-schedule__event{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
6414
7039
|
}
|
|
6415
7040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleEventComponent, decorators: [{
|
|
6416
7041
|
type: Component,
|
|
@@ -6418,7 +7043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6418
7043
|
'[class.ns-schedule__event]': 'true',
|
|
6419
7044
|
'[class.ns-schedule__event--show]': 'schedule() && matchHour',
|
|
6420
7045
|
'[style.height.px]': 'height'
|
|
6421
|
-
}, encapsulation: ViewEncapsulation.None, template: "@if (schedule(); as currentSchedule) {\n <span class=\"ns-schedule__event-subject\">{{ currentSchedule.subject }}</span>\n <div class=\"ns-schedule__event-body\" [innerHtml]=\"currentSchedule.body\"></div>\n}\n", styles: ["@layer properties
|
|
7046
|
+
}, encapsulation: ViewEncapsulation.None, template: "@if (schedule(); as currentSchedule) {\n <span class=\"ns-schedule__event-subject\">{{ currentSchedule.subject }}</span>\n <div class=\"ns-schedule__event-body\" [innerHtml]=\"currentSchedule.body\"></div>\n}\n", styles: ["@layer properties;.ns-schedule__event{position:absolute;inset-inline:0px;display:none;cursor:pointer;overflow:hidden;border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;text-align:start;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);box-sizing:border-box;padding:var(--ns-component-schedule-event-padding);z-index:var(--ns-component-schedule-event-layer);border-color:var(--ns-component-schedule-event-border-color);border-radius:var(--ns-component-schedule-event-radius);background:var(--ns-component-schedule-event-background);color:var(--ns-component-schedule-event-color)}.ns-schedule__event.ns-schedule__event--show{display:block}.ns-schedule__event-subject{--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold)}.ns-schedule__event-body{overflow:hidden;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.ns-schedule__event{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6422
7047
|
}], propDecorators: { schedule: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedule", required: false }] }], timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }], onClick: [{
|
|
6423
7048
|
type: HostListener,
|
|
6424
7049
|
args: ['click', ['$event']]
|
|
@@ -6450,7 +7075,7 @@ class DayComponent {
|
|
|
6450
7075
|
.map((x, y) => x + y);
|
|
6451
7076
|
}
|
|
6452
7077
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6453
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: DayComponent, isStandalone: true, selector: "ns-schedule-day", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-day-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
|
|
7078
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: DayComponent, isStandalone: true, selector: "ns-schedule-day", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-y:auto}.ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-day-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
|
|
6454
7079
|
}
|
|
6455
7080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DayComponent, decorators: [{
|
|
6456
7081
|
type: Component,
|
|
@@ -6459,7 +7084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6459
7084
|
WeekDayPipe,
|
|
6460
7085
|
FilterByDayPipe,
|
|
6461
7086
|
NsScheduleEventComponent
|
|
6462
|
-
], template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-day-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
7087
|
+
], template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-y:auto}.ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-day-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6463
7088
|
}], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
|
|
6464
7089
|
|
|
6465
7090
|
class WeekComponent {
|
|
@@ -6494,7 +7119,7 @@ class WeekComponent {
|
|
|
6494
7119
|
.map((x, y) => x + y);
|
|
6495
7120
|
}
|
|
6496
7121
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6497
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: WeekComponent, isStandalone: true, selector: "ns-schedule-week", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-week-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
|
|
7122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: WeekComponent, isStandalone: true, selector: "ns-schedule-week", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-y:auto}.ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-week-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
|
|
6498
7123
|
}
|
|
6499
7124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: WeekComponent, decorators: [{
|
|
6500
7125
|
type: Component,
|
|
@@ -6504,7 +7129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6504
7129
|
NsScheduleCellComponent,
|
|
6505
7130
|
FilterByDayPipe,
|
|
6506
7131
|
NsScheduleEventComponent
|
|
6507
|
-
], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-week-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
7132
|
+
], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-y:auto}.ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-week-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6508
7133
|
}], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
|
|
6509
7134
|
|
|
6510
7135
|
class NsWorkweekComponent {
|
|
@@ -6542,7 +7167,7 @@ class NsWorkweekComponent {
|
|
|
6542
7167
|
.map((x, y) => x + y);
|
|
6543
7168
|
}
|
|
6544
7169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsWorkweekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsWorkweekComponent, isStandalone: true, selector: "ns-schedule-workweek", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules() | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-workweek-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
|
|
7170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsWorkweekComponent, isStandalone: true, selector: "ns-schedule-workweek", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules() | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-y:auto}.ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-workweek-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
|
|
6546
7171
|
}
|
|
6547
7172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsWorkweekComponent, decorators: [{
|
|
6548
7173
|
type: Component,
|
|
@@ -6552,7 +7177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6552
7177
|
NsScheduleCellComponent,
|
|
6553
7178
|
NsScheduleEventComponent,
|
|
6554
7179
|
FilterByDayPipe
|
|
6555
|
-
], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules() | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-workweek-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
7180
|
+
], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules() | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-y:auto}.ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:var(--ns-component-schedule-workweek-columns)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6556
7181
|
}], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
|
|
6557
7182
|
|
|
6558
7183
|
class NsScheduleComponent {
|
|
@@ -6573,7 +7198,7 @@ class NsScheduleComponent {
|
|
|
6573
7198
|
this.selected.set(new Date(date.year, date.month - 1, date.day));
|
|
6574
7199
|
}
|
|
6575
7200
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selected: "selectedChange", selectedDay: "selectedDayChange", onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n <ns-date-picker\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"selectDate($event)\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [searchable]=\"false\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" key=\"day\" />\n <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n <ns-dropdown-item label=\"Week\" key=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: ["@layer properties
|
|
7201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selected: "selectedChange", selectedDay: "selectedDayChange", onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n <ns-date-picker\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"selectDate($event)\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [searchable]=\"false\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" key=\"day\" />\n <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n <ns-dropdown-item label=\"Week\" key=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: ["@layer properties;.ns-schedule{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;min-height:var(--ns-component-schedule-slot-height);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;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)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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-font-weight: initial}}}\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", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "ngmodule", type: FormsModule }, { 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: DayComponent, selector: "ns-schedule-day", inputs: ["schedules", "currentDate"] }, { kind: "component", type: WeekComponent, selector: "ns-schedule-week", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsWorkweekComponent, selector: "ns-schedule-workweek", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsDatePickerComponent, selector: "ns-date-picker", inputs: ["minDate", "maxDate", "unavailableDates", "firstDayOfWeek"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["collection", "selectionMode", "loading", "searchable", "searchPlaceholder", "emptyText", "placement", "open"], outputs: ["openChange", "opened", "closed"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["key", "label", "disabled", "dot"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
6577
7202
|
}
|
|
6578
7203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, decorators: [{
|
|
6579
7204
|
type: Component,
|
|
@@ -6588,7 +7213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6588
7213
|
NsDropdownItemDirective
|
|
6589
7214
|
], encapsulation: ViewEncapsulation.None, host: {
|
|
6590
7215
|
'[class.ns-schedule]': 'true'
|
|
6591
|
-
}, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n <ns-date-picker\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"selectDate($event)\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [searchable]=\"false\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" key=\"day\" />\n <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n <ns-dropdown-item label=\"Week\" key=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: ["@layer properties
|
|
7216
|
+
}, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n <ns-date-picker\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"selectDate($event)\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [searchable]=\"false\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" key=\"day\" />\n <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n <ns-dropdown-item label=\"Week\" key=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: ["@layer properties;.ns-schedule{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;min-height:var(--ns-component-schedule-slot-height);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;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)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
6592
7217
|
}], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectedDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDay", required: false }] }, { type: i0.Output, args: ["selectedDayChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
|
|
6593
7218
|
|
|
6594
7219
|
class NsSchemaMarkupComponent {
|
|
@@ -6795,12 +7420,24 @@ const DELTA_GLYPH = {
|
|
|
6795
7420
|
* suffix), and an optional delta pill (`up` / `down` / `neutral`) with a
|
|
6796
7421
|
* caption and a secondary hint. `variant="dark"` renders the emphasis
|
|
6797
7422
|
* surface used for headline metrics; `variant="compact"` renders a smaller
|
|
6798
|
-
* card with a smaller value size
|
|
6799
|
-
*
|
|
7423
|
+
* card with a smaller value size; `variant="tile"` renders a compact KPI
|
|
7424
|
+
* tile (icon circle beside a label/value/delta column, delta as plain
|
|
7425
|
+
* colored text instead of a pill). Set `interactive` to render the card as
|
|
7426
|
+
* a `<button>` and receive `(activated)` instead of a static `<div>`.
|
|
6800
7427
|
*
|
|
6801
7428
|
* `valueTone` colors only the headline value with the matching semantic
|
|
6802
7429
|
* status color (`success`/`warning`/`danger`/`info`); it is ignored on
|
|
6803
|
-
* `variant="dark"`, where the value stays white.
|
|
7430
|
+
* `variant="dark"`, where the value stays white. `hintTone` colors only the
|
|
7431
|
+
* hint with the same semantic scale, independently of `valueTone`; like
|
|
7432
|
+
* `valueTone`, it is ignored on `variant="dark"`, where the hint keeps the
|
|
7433
|
+
* emphasis-surface foreground color instead of a status color. `iconTone`
|
|
7434
|
+
* colors the icon wrapper background/foreground and applies to every
|
|
7435
|
+
* variant.
|
|
7436
|
+
*
|
|
7437
|
+
* The hint's own `margin-inline-start: auto` (pushing it to the opposite
|
|
7438
|
+
* edge from the value) only applies when it shares the meta row with a
|
|
7439
|
+
* `delta` and/or `deltaLabel` — something to separate from. A lone hint
|
|
7440
|
+
* (no delta, no deltaLabel) aligns to the start, under the value.
|
|
6804
7441
|
*/
|
|
6805
7442
|
class NsStatCardComponent {
|
|
6806
7443
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -6811,6 +7448,8 @@ class NsStatCardComponent {
|
|
|
6811
7448
|
deltaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "deltaLabel" }] : /* istanbul ignore next */ []));
|
|
6812
7449
|
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
6813
7450
|
valueTone = input('default', ...(ngDevMode ? [{ debugName: "valueTone" }] : /* istanbul ignore next */ []));
|
|
7451
|
+
hintTone = input('default', ...(ngDevMode ? [{ debugName: "hintTone" }] : /* istanbul ignore next */ []));
|
|
7452
|
+
iconTone = input('neutral', ...(ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []));
|
|
6814
7453
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
6815
7454
|
interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6816
7455
|
activated = output();
|
|
@@ -6821,7 +7460,7 @@ class NsStatCardComponent {
|
|
|
6821
7460
|
this.activated.emit();
|
|
6822
7461
|
}
|
|
6823
7462
|
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: `
|
|
7463
|
+
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 }, hintTone: { classPropertyName: "hintTone", publicName: "hintTone", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", 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--tile": "variant() === 'tile'", "class.ns-stat-card--interactive": "interactive()" } }, ngImport: i0, template: `
|
|
6825
7464
|
@if (interactive()) {
|
|
6826
7465
|
<button
|
|
6827
7466
|
type="button"
|
|
@@ -6835,63 +7474,127 @@ class NsStatCardComponent {
|
|
|
6835
7474
|
<ng-container [ngTemplateOutlet]="content" />
|
|
6836
7475
|
</div>
|
|
6837
7476
|
}
|
|
6838
|
-
<ng-template #
|
|
6839
|
-
<
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
7477
|
+
<ng-template #iconWrapper>
|
|
7478
|
+
<span
|
|
7479
|
+
class="ns-stat-card__icon"
|
|
7480
|
+
[class.ns-stat-card__icon--info]="iconTone() === 'info'"
|
|
7481
|
+
[class.ns-stat-card__icon--success]="iconTone() === 'success'"
|
|
7482
|
+
[class.ns-stat-card__icon--warning]="iconTone() === 'warning'"
|
|
7483
|
+
[class.ns-stat-card__icon--danger]="iconTone() === 'danger'"
|
|
7484
|
+
[class.ns-stat-card__icon--neutral]="iconTone() === 'neutral'"
|
|
7485
|
+
><ng-content select="[stat-card-icon]"
|
|
7486
|
+
/></span>
|
|
7487
|
+
</ng-template>
|
|
7488
|
+
<ng-template #footerSlot>
|
|
7489
|
+
<div class="ns-stat-card__footer">
|
|
7490
|
+
<ng-content select="[stat-card-footer]" />
|
|
6846
7491
|
</div>
|
|
6847
|
-
|
|
6848
|
-
|
|
6849
|
-
|
|
6850
|
-
|
|
7492
|
+
</ng-template>
|
|
7493
|
+
<ng-template #deltaBadge>
|
|
7494
|
+
<span
|
|
7495
|
+
class="ns-stat-card__delta"
|
|
7496
|
+
[class.ns-stat-card__delta--up]="deltaTone() === 'up'"
|
|
7497
|
+
[class.ns-stat-card__delta--down]="deltaTone() === 'down'"
|
|
7498
|
+
[class.ns-stat-card__delta--neutral]="deltaTone() === 'neutral'"
|
|
7499
|
+
>
|
|
7500
|
+
<span class="ns-stat-card__delta-icon" aria-hidden="true">{{
|
|
7501
|
+
deltaGlyph()
|
|
7502
|
+
}}</span
|
|
7503
|
+
>{{ delta() }}
|
|
7504
|
+
</span>
|
|
7505
|
+
</ng-template>
|
|
7506
|
+
<ng-template #hintText>
|
|
7507
|
+
<span
|
|
7508
|
+
class="ns-stat-card__hint"
|
|
7509
|
+
[class.ns-stat-card__hint--success]="
|
|
7510
|
+
hintTone() === 'success' && variant() !== 'dark'
|
|
6851
7511
|
"
|
|
6852
|
-
[class.ns-stat-
|
|
6853
|
-
|
|
7512
|
+
[class.ns-stat-card__hint--warning]="
|
|
7513
|
+
hintTone() === 'warning' && variant() !== 'dark'
|
|
6854
7514
|
"
|
|
6855
|
-
[class.ns-stat-
|
|
6856
|
-
|
|
7515
|
+
[class.ns-stat-card__hint--danger]="
|
|
7516
|
+
hintTone() === 'danger' && variant() !== 'dark'
|
|
6857
7517
|
"
|
|
6858
|
-
[class.ns-stat-
|
|
6859
|
-
|
|
7518
|
+
[class.ns-stat-card__hint--info]="
|
|
7519
|
+
hintTone() === 'info' && variant() !== 'dark'
|
|
6860
7520
|
"
|
|
7521
|
+
>{{ hint() }}</span
|
|
6861
7522
|
>
|
|
6862
|
-
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
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() }}
|
|
7523
|
+
</ng-template>
|
|
7524
|
+
<ng-template #content>
|
|
7525
|
+
@if (variant() === 'tile') {
|
|
7526
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7527
|
+
<div class="ns-stat-card__column">
|
|
7528
|
+
<span class="ns-stat-card__label">{{ label() }}</span>
|
|
7529
|
+
<div class="ns-stat-card__value-row">
|
|
7530
|
+
<span class="ns-stat-card__value">
|
|
7531
|
+
{{ value() }}
|
|
7532
|
+
@if (suffix()) {
|
|
7533
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
7534
|
+
}
|
|
6880
7535
|
</span>
|
|
7536
|
+
@if (delta()) {
|
|
7537
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7538
|
+
}
|
|
7539
|
+
</div>
|
|
7540
|
+
@if (deltaLabel() || hint()) {
|
|
7541
|
+
<div class="ns-stat-card__meta">
|
|
7542
|
+
@if (deltaLabel()) {
|
|
7543
|
+
<span class="ns-stat-card__delta-label">{{
|
|
7544
|
+
deltaLabel()
|
|
7545
|
+
}}</span>
|
|
7546
|
+
}
|
|
7547
|
+
@if (hint()) {
|
|
7548
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7549
|
+
}
|
|
7550
|
+
</div>
|
|
6881
7551
|
}
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
7552
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
7553
|
+
</div>
|
|
7554
|
+
} @else {
|
|
7555
|
+
<div class="ns-stat-card__header">
|
|
7556
|
+
<span class="ns-stat-card__label">
|
|
7557
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7558
|
+
{{ label() }}
|
|
7559
|
+
</span>
|
|
7560
|
+
</div>
|
|
7561
|
+
<div
|
|
7562
|
+
class="ns-stat-card__value"
|
|
7563
|
+
[class.ns-stat-card__value--success]="
|
|
7564
|
+
valueTone() === 'success' && variant() !== 'dark'
|
|
7565
|
+
"
|
|
7566
|
+
[class.ns-stat-card__value--warning]="
|
|
7567
|
+
valueTone() === 'warning' && variant() !== 'dark'
|
|
7568
|
+
"
|
|
7569
|
+
[class.ns-stat-card__value--danger]="
|
|
7570
|
+
valueTone() === 'danger' && variant() !== 'dark'
|
|
7571
|
+
"
|
|
7572
|
+
[class.ns-stat-card__value--info]="
|
|
7573
|
+
valueTone() === 'info' && variant() !== 'dark'
|
|
7574
|
+
"
|
|
7575
|
+
>
|
|
7576
|
+
{{ value() }}
|
|
7577
|
+
@if (suffix()) {
|
|
7578
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
6887
7579
|
}
|
|
6888
7580
|
</div>
|
|
7581
|
+
@if (delta() || hint()) {
|
|
7582
|
+
<div class="ns-stat-card__meta">
|
|
7583
|
+
@if (delta()) {
|
|
7584
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7585
|
+
}
|
|
7586
|
+
@if (deltaLabel()) {
|
|
7587
|
+
<span class="ns-stat-card__delta-label">{{ deltaLabel() }}</span>
|
|
7588
|
+
}
|
|
7589
|
+
@if (hint()) {
|
|
7590
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7591
|
+
}
|
|
7592
|
+
</div>
|
|
7593
|
+
}
|
|
7594
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
6889
7595
|
}
|
|
6890
|
-
<div class="ns-stat-card__footer">
|
|
6891
|
-
<ng-content select="[stat-card-footer]" />
|
|
6892
|
-
</div>
|
|
6893
7596
|
</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);
|
|
7597
|
+
`, 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}:host(.ns-stat-card--tile) .ns-stat-card__surface{flex-direction:row;align-items:center;gap:var(--ns-component-stat-card-gap-tile);padding-block:var(--ns-component-stat-card-padding-block-tile);padding-inline:var(--ns-component-stat-card-padding-inline-tile);border-radius:var(--ns-component-stat-card-radius-tile)}.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)}:host(.ns-stat-card--tile) .ns-stat-card__label{color:var(--ns-component-stat-card-label-color-tile);font-size:var(--ns-component-stat-card-label-font-size-tile);font-weight:var(--ns-component-stat-card-label-font-weight-tile);white-space:nowrap}.ns-stat-card__column{display:flex;flex-direction:column;gap:var(--ns-component-stat-card-column-gap-tile);min-inline-size:0}.ns-stat-card__value-row{display:flex;align-items:baseline;gap:var(--ns-component-stat-card-meta-gap)}.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)}.ns-stat-card__icon ::ng-deep svg{inline-size:var(--ns-component-stat-card-icon-glyph-size);block-size:var(--ns-component-stat-card-icon-glyph-size)}.ns-stat-card__icon:empty{display:none}.ns-stat-card__icon--info{background:var(--ns-component-stat-card-icon-info-background);color:var(--ns-component-stat-card-icon-info-color)}.ns-stat-card__icon--success{background:var(--ns-component-stat-card-icon-success-background);color:var(--ns-component-stat-card-icon-success-color)}.ns-stat-card__icon--warning{background:var(--ns-component-stat-card-icon-warning-background);color:var(--ns-component-stat-card-icon-warning-color)}.ns-stat-card__icon--danger{background:var(--ns-component-stat-card-icon-danger-background);color:var(--ns-component-stat-card-icon-danger-color)}.ns-stat-card__icon--neutral{background:var(--ns-component-stat-card-icon-neutral-background);color:var(--ns-component-stat-card-icon-neutral-color)}: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)}}:host(.ns-stat-card--tile) .ns-stat-card__icon{inline-size:var(--ns-component-stat-card-icon-size-tile);block-size:var(--ns-component-stat-card-icon-size-tile);border-radius:var(--ns-component-stat-card-icon-radius-tile)}.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)}:host(.ns-stat-card--tile) .ns-stat-card__value{font-family:var(--ns-component-stat-card-value-font-family-tile);font-size:var(--ns-component-stat-card-value-font-size-tile);letter-spacing:var(--ns-component-stat-card-value-letter-spacing-tile)}.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)}:host(.ns-stat-card--tile) .ns-stat-card__delta{background:none;padding-block:0;padding-inline:0;border-radius:0;font-size:var(--ns-component-stat-card-delta-font-size-tile);font-weight:var(--ns-component-stat-card-delta-font-weight-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta--up{color:var(--ns-component-stat-card-delta-up-color-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta--down{color:var(--ns-component-stat-card-delta-down-color-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta--neutral{color:var(--ns-component-stat-card-delta-neutral-color-tile)}.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{color:var(--ns-component-stat-card-hint-color);font-size:var(--ns-component-stat-card-hint-font-size)}.ns-stat-card__meta>.ns-stat-card__hint:not(:first-child){margin-left:auto}.ns-stat-card__hint--success{color:var(--ns-component-stat-card-hint-tone-success-color)}.ns-stat-card__hint--warning{color:var(--ns-component-stat-card-hint-tone-warning-color)}.ns-stat-card__hint--danger{color:var(--ns-component-stat-card-hint-tone-danger-color)}.ns-stat-card__hint--info{color:var(--ns-component-stat-card-hint-tone-info-color)}:host(.ns-stat-card--dark) .ns-stat-card__hint{color:var(--ns-component-stat-card-dark-color)}:host(.ns-stat-card--tile) .ns-stat-card__delta-label,:host(.ns-stat-card--tile) .ns-stat-card__hint{font-size:var(--ns-component-stat-card-hint-font-size-tile);font-weight:var(--ns-component-stat-card-hint-font-weight-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta-label{color:var(--ns-component-stat-card-hint-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
7598
|
}
|
|
6896
7599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsStatCardComponent, decorators: [{
|
|
6897
7600
|
type: Component,
|
|
@@ -6909,70 +7612,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6909
7612
|
<ng-container [ngTemplateOutlet]="content" />
|
|
6910
7613
|
</div>
|
|
6911
7614
|
}
|
|
6912
|
-
<ng-template #
|
|
6913
|
-
<
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
7615
|
+
<ng-template #iconWrapper>
|
|
7616
|
+
<span
|
|
7617
|
+
class="ns-stat-card__icon"
|
|
7618
|
+
[class.ns-stat-card__icon--info]="iconTone() === 'info'"
|
|
7619
|
+
[class.ns-stat-card__icon--success]="iconTone() === 'success'"
|
|
7620
|
+
[class.ns-stat-card__icon--warning]="iconTone() === 'warning'"
|
|
7621
|
+
[class.ns-stat-card__icon--danger]="iconTone() === 'danger'"
|
|
7622
|
+
[class.ns-stat-card__icon--neutral]="iconTone() === 'neutral'"
|
|
7623
|
+
><ng-content select="[stat-card-icon]"
|
|
7624
|
+
/></span>
|
|
7625
|
+
</ng-template>
|
|
7626
|
+
<ng-template #footerSlot>
|
|
7627
|
+
<div class="ns-stat-card__footer">
|
|
7628
|
+
<ng-content select="[stat-card-footer]" />
|
|
6920
7629
|
</div>
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
|
|
7630
|
+
</ng-template>
|
|
7631
|
+
<ng-template #deltaBadge>
|
|
7632
|
+
<span
|
|
7633
|
+
class="ns-stat-card__delta"
|
|
7634
|
+
[class.ns-stat-card__delta--up]="deltaTone() === 'up'"
|
|
7635
|
+
[class.ns-stat-card__delta--down]="deltaTone() === 'down'"
|
|
7636
|
+
[class.ns-stat-card__delta--neutral]="deltaTone() === 'neutral'"
|
|
7637
|
+
>
|
|
7638
|
+
<span class="ns-stat-card__delta-icon" aria-hidden="true">{{
|
|
7639
|
+
deltaGlyph()
|
|
7640
|
+
}}</span
|
|
7641
|
+
>{{ delta() }}
|
|
7642
|
+
</span>
|
|
7643
|
+
</ng-template>
|
|
7644
|
+
<ng-template #hintText>
|
|
7645
|
+
<span
|
|
7646
|
+
class="ns-stat-card__hint"
|
|
7647
|
+
[class.ns-stat-card__hint--success]="
|
|
7648
|
+
hintTone() === 'success' && variant() !== 'dark'
|
|
6925
7649
|
"
|
|
6926
|
-
[class.ns-stat-
|
|
6927
|
-
|
|
7650
|
+
[class.ns-stat-card__hint--warning]="
|
|
7651
|
+
hintTone() === 'warning' && variant() !== 'dark'
|
|
6928
7652
|
"
|
|
6929
|
-
[class.ns-stat-
|
|
6930
|
-
|
|
7653
|
+
[class.ns-stat-card__hint--danger]="
|
|
7654
|
+
hintTone() === 'danger' && variant() !== 'dark'
|
|
6931
7655
|
"
|
|
6932
|
-
[class.ns-stat-
|
|
6933
|
-
|
|
7656
|
+
[class.ns-stat-card__hint--info]="
|
|
7657
|
+
hintTone() === 'info' && variant() !== 'dark'
|
|
6934
7658
|
"
|
|
7659
|
+
>{{ hint() }}</span
|
|
6935
7660
|
>
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6940
|
-
|
|
6941
|
-
|
|
6942
|
-
|
|
6943
|
-
|
|
6944
|
-
|
|
6945
|
-
|
|
6946
|
-
|
|
6947
|
-
|
|
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() }}
|
|
7661
|
+
</ng-template>
|
|
7662
|
+
<ng-template #content>
|
|
7663
|
+
@if (variant() === 'tile') {
|
|
7664
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7665
|
+
<div class="ns-stat-card__column">
|
|
7666
|
+
<span class="ns-stat-card__label">{{ label() }}</span>
|
|
7667
|
+
<div class="ns-stat-card__value-row">
|
|
7668
|
+
<span class="ns-stat-card__value">
|
|
7669
|
+
{{ value() }}
|
|
7670
|
+
@if (suffix()) {
|
|
7671
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
7672
|
+
}
|
|
6954
7673
|
</span>
|
|
7674
|
+
@if (delta()) {
|
|
7675
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7676
|
+
}
|
|
7677
|
+
</div>
|
|
7678
|
+
@if (deltaLabel() || hint()) {
|
|
7679
|
+
<div class="ns-stat-card__meta">
|
|
7680
|
+
@if (deltaLabel()) {
|
|
7681
|
+
<span class="ns-stat-card__delta-label">{{
|
|
7682
|
+
deltaLabel()
|
|
7683
|
+
}}</span>
|
|
7684
|
+
}
|
|
7685
|
+
@if (hint()) {
|
|
7686
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7687
|
+
}
|
|
7688
|
+
</div>
|
|
6955
7689
|
}
|
|
6956
|
-
|
|
6957
|
-
|
|
6958
|
-
|
|
6959
|
-
|
|
6960
|
-
|
|
7690
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
7691
|
+
</div>
|
|
7692
|
+
} @else {
|
|
7693
|
+
<div class="ns-stat-card__header">
|
|
7694
|
+
<span class="ns-stat-card__label">
|
|
7695
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7696
|
+
{{ label() }}
|
|
7697
|
+
</span>
|
|
7698
|
+
</div>
|
|
7699
|
+
<div
|
|
7700
|
+
class="ns-stat-card__value"
|
|
7701
|
+
[class.ns-stat-card__value--success]="
|
|
7702
|
+
valueTone() === 'success' && variant() !== 'dark'
|
|
7703
|
+
"
|
|
7704
|
+
[class.ns-stat-card__value--warning]="
|
|
7705
|
+
valueTone() === 'warning' && variant() !== 'dark'
|
|
7706
|
+
"
|
|
7707
|
+
[class.ns-stat-card__value--danger]="
|
|
7708
|
+
valueTone() === 'danger' && variant() !== 'dark'
|
|
7709
|
+
"
|
|
7710
|
+
[class.ns-stat-card__value--info]="
|
|
7711
|
+
valueTone() === 'info' && variant() !== 'dark'
|
|
7712
|
+
"
|
|
7713
|
+
>
|
|
7714
|
+
{{ value() }}
|
|
7715
|
+
@if (suffix()) {
|
|
7716
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
6961
7717
|
}
|
|
6962
7718
|
</div>
|
|
7719
|
+
@if (delta() || hint()) {
|
|
7720
|
+
<div class="ns-stat-card__meta">
|
|
7721
|
+
@if (delta()) {
|
|
7722
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7723
|
+
}
|
|
7724
|
+
@if (deltaLabel()) {
|
|
7725
|
+
<span class="ns-stat-card__delta-label">{{ deltaLabel() }}</span>
|
|
7726
|
+
}
|
|
7727
|
+
@if (hint()) {
|
|
7728
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7729
|
+
}
|
|
7730
|
+
</div>
|
|
7731
|
+
}
|
|
7732
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
6963
7733
|
}
|
|
6964
|
-
<div class="ns-stat-card__footer">
|
|
6965
|
-
<ng-content select="[stat-card-footer]" />
|
|
6966
|
-
</div>
|
|
6967
7734
|
</ng-template>
|
|
6968
7735
|
`, host: {
|
|
6969
7736
|
'[class.ns-stat-card]': 'true',
|
|
6970
7737
|
'[class.ns-stat-card--default]': "variant() === 'default'",
|
|
6971
7738
|
'[class.ns-stat-card--dark]': "variant() === 'dark'",
|
|
6972
7739
|
'[class.ns-stat-card--compact]': "variant() === 'compact'",
|
|
7740
|
+
'[class.ns-stat-card--tile]': "variant() === 'tile'",
|
|
6973
7741
|
'[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);
|
|
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"] }] } });
|
|
7742
|
+
}, 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}:host(.ns-stat-card--tile) .ns-stat-card__surface{flex-direction:row;align-items:center;gap:var(--ns-component-stat-card-gap-tile);padding-block:var(--ns-component-stat-card-padding-block-tile);padding-inline:var(--ns-component-stat-card-padding-inline-tile);border-radius:var(--ns-component-stat-card-radius-tile)}.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)}:host(.ns-stat-card--tile) .ns-stat-card__label{color:var(--ns-component-stat-card-label-color-tile);font-size:var(--ns-component-stat-card-label-font-size-tile);font-weight:var(--ns-component-stat-card-label-font-weight-tile);white-space:nowrap}.ns-stat-card__column{display:flex;flex-direction:column;gap:var(--ns-component-stat-card-column-gap-tile);min-inline-size:0}.ns-stat-card__value-row{display:flex;align-items:baseline;gap:var(--ns-component-stat-card-meta-gap)}.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)}.ns-stat-card__icon ::ng-deep svg{inline-size:var(--ns-component-stat-card-icon-glyph-size);block-size:var(--ns-component-stat-card-icon-glyph-size)}.ns-stat-card__icon:empty{display:none}.ns-stat-card__icon--info{background:var(--ns-component-stat-card-icon-info-background);color:var(--ns-component-stat-card-icon-info-color)}.ns-stat-card__icon--success{background:var(--ns-component-stat-card-icon-success-background);color:var(--ns-component-stat-card-icon-success-color)}.ns-stat-card__icon--warning{background:var(--ns-component-stat-card-icon-warning-background);color:var(--ns-component-stat-card-icon-warning-color)}.ns-stat-card__icon--danger{background:var(--ns-component-stat-card-icon-danger-background);color:var(--ns-component-stat-card-icon-danger-color)}.ns-stat-card__icon--neutral{background:var(--ns-component-stat-card-icon-neutral-background);color:var(--ns-component-stat-card-icon-neutral-color)}: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)}}:host(.ns-stat-card--tile) .ns-stat-card__icon{inline-size:var(--ns-component-stat-card-icon-size-tile);block-size:var(--ns-component-stat-card-icon-size-tile);border-radius:var(--ns-component-stat-card-icon-radius-tile)}.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)}:host(.ns-stat-card--tile) .ns-stat-card__value{font-family:var(--ns-component-stat-card-value-font-family-tile);font-size:var(--ns-component-stat-card-value-font-size-tile);letter-spacing:var(--ns-component-stat-card-value-letter-spacing-tile)}.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)}:host(.ns-stat-card--tile) .ns-stat-card__delta{background:none;padding-block:0;padding-inline:0;border-radius:0;font-size:var(--ns-component-stat-card-delta-font-size-tile);font-weight:var(--ns-component-stat-card-delta-font-weight-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta--up{color:var(--ns-component-stat-card-delta-up-color-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta--down{color:var(--ns-component-stat-card-delta-down-color-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta--neutral{color:var(--ns-component-stat-card-delta-neutral-color-tile)}.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{color:var(--ns-component-stat-card-hint-color);font-size:var(--ns-component-stat-card-hint-font-size)}.ns-stat-card__meta>.ns-stat-card__hint:not(:first-child){margin-left:auto}.ns-stat-card__hint--success{color:var(--ns-component-stat-card-hint-tone-success-color)}.ns-stat-card__hint--warning{color:var(--ns-component-stat-card-hint-tone-warning-color)}.ns-stat-card__hint--danger{color:var(--ns-component-stat-card-hint-tone-danger-color)}.ns-stat-card__hint--info{color:var(--ns-component-stat-card-hint-tone-info-color)}:host(.ns-stat-card--dark) .ns-stat-card__hint{color:var(--ns-component-stat-card-dark-color)}:host(.ns-stat-card--tile) .ns-stat-card__delta-label,:host(.ns-stat-card--tile) .ns-stat-card__hint{font-size:var(--ns-component-stat-card-hint-font-size-tile);font-weight:var(--ns-component-stat-card-hint-font-weight-tile)}:host(.ns-stat-card--tile) .ns-stat-card__delta-label{color:var(--ns-component-stat-card-hint-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"] }]
|
|
7743
|
+
}], 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 }] }], hintTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTone", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", 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
7744
|
|
|
6977
7745
|
class TemplateDirective {
|
|
6978
7746
|
name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'nsTemplate' });
|
|
@@ -7011,13 +7779,25 @@ const Arvisfy = {
|
|
|
7011
7779
|
},
|
|
7012
7780
|
neutral: {
|
|
7013
7781
|
0: '#FFFFFF',
|
|
7782
|
+
// Editor footer background (batch 10), proto 2732.
|
|
7783
|
+
15: '#FCFCFB',
|
|
7784
|
+
// Editor toolbar background (batch 9): warmer and lighter than `50`,
|
|
7785
|
+
// matches the literal previously kept as its own
|
|
7786
|
+
// `editor.toolbarBackground` primitive.
|
|
7787
|
+
25: '#FAFAF9',
|
|
7788
|
+
// Toolbar search-field background (batch 10), proto 1121.
|
|
7789
|
+
35: '#F8F8F7',
|
|
7014
7790
|
50: '#F7F8FA',
|
|
7015
7791
|
100: '#F5F5F4',
|
|
7792
|
+
// Empty-state icon circle background (batch 10), proto 1172.
|
|
7793
|
+
125: '#F4F5F7',
|
|
7016
7794
|
// Neutral status-pill background (batch 6), distinct from `100`.
|
|
7017
7795
|
150: '#F1F2F4',
|
|
7018
7796
|
200: '#E8E8E6',
|
|
7019
7797
|
300: '#E4E4E2',
|
|
7020
7798
|
400: '#A9AAAF',
|
|
7799
|
+
// Empty-state icon glyph color (batch 10), proto 1173.
|
|
7800
|
+
450: '#9EA1A8',
|
|
7021
7801
|
500: '#8A8C93',
|
|
7022
7802
|
600: '#6E7078',
|
|
7023
7803
|
// Inactive pill-tab chrome text (batch 6), distinct from `600`/`700`.
|
|
@@ -7075,6 +7855,16 @@ const Arvisfy = {
|
|
|
7075
7855
|
secondaryForeground: '#13182A',
|
|
7076
7856
|
tertiaryForeground: '#13182A'
|
|
7077
7857
|
},
|
|
7858
|
+
// `ns-image-upload[layout="cover"]` badge/action chips (AVF-8):
|
|
7859
|
+
// translucent dark overlay over the cover photo — decided as a
|
|
7860
|
+
// literal rgba pair rather than a theme color, since it must read at
|
|
7861
|
+
// ~11.2:1 contrast against any photo, not a themed surface. Reused
|
|
7862
|
+
// as-is for dark mode: it is already a fixed dark overlay, not a
|
|
7863
|
+
// theme-relative surface.
|
|
7864
|
+
imageUpload: {
|
|
7865
|
+
chipBackground: 'rgba(18, 24, 43, .82)',
|
|
7866
|
+
chipBackgroundHover: 'rgba(18, 24, 43, .64)'
|
|
7867
|
+
},
|
|
7078
7868
|
dark: {
|
|
7079
7869
|
canvas: '#0C1220',
|
|
7080
7870
|
surface: '#151C2B',
|
|
@@ -7121,12 +7911,39 @@ const Arvisfy = {
|
|
|
7121
7911
|
// distinct from `neutral.300` (the general control/card border).
|
|
7122
7912
|
modal: {
|
|
7123
7913
|
footerBorder: '#EFEFEE'
|
|
7914
|
+
},
|
|
7915
|
+
// `ns-editor` toolbar chrome (batch 8), measured on the prototype's
|
|
7916
|
+
// rich-text toolbar. The toolbar background moved into the shared
|
|
7917
|
+
// `neutral.25` scale step (batch 9); only the border stays a
|
|
7918
|
+
// component-local primitive.
|
|
7919
|
+
editor: {
|
|
7920
|
+
// Hairline under the toolbar and the action-button hover wash;
|
|
7921
|
+
// lighter than `neutral.200`/`300`. Same value as
|
|
7922
|
+
// `modal.footerBorder`, kept as its own primitive so the two can
|
|
7923
|
+
// diverge independently.
|
|
7924
|
+
toolbarBorder: '#EFEFEE'
|
|
7925
|
+
},
|
|
7926
|
+
// `ns-stat-tile` icon tones (batch 10), measured on the prototype's KPI
|
|
7927
|
+
// tile row (proto 1069-1113). `successForeground` is not duplicated
|
|
7928
|
+
// here: it reuses the existing `success.600` primitive.
|
|
7929
|
+
tile: {
|
|
7930
|
+
infoBackground: '#E7EEFF',
|
|
7931
|
+
infoForeground: '#3D6BE0',
|
|
7932
|
+
successBackground: '#E9F7EF',
|
|
7933
|
+
warningBackground: '#FEF3E1',
|
|
7934
|
+
warningForeground: '#B9791A',
|
|
7935
|
+
dangerBackground: '#FBE9E9',
|
|
7936
|
+
dangerForeground: '#D64545'
|
|
7124
7937
|
}
|
|
7125
7938
|
},
|
|
7126
7939
|
letterSpacing: {
|
|
7127
7940
|
wide: '0.08em',
|
|
7128
7941
|
tight: '-0.035em',
|
|
7129
|
-
tighter: '-0.04em'
|
|
7942
|
+
tighter: '-0.04em',
|
|
7943
|
+
// `ns-stat-tile` value letter-spacing (batch 10): the tile's KPI value
|
|
7944
|
+
// reads at the default tracking, distinct from the tighter `stat-card`
|
|
7945
|
+
// display figures.
|
|
7946
|
+
normal: '0'
|
|
7130
7947
|
},
|
|
7131
7948
|
font: {
|
|
7132
7949
|
family: {
|
|
@@ -7147,7 +7964,23 @@ const Arvisfy = {
|
|
|
7147
7964
|
displayMd: '1.8125rem',
|
|
7148
7965
|
displayLg: '2.25rem',
|
|
7149
7966
|
// `ns-modal`'s projected `[modal-description]` subtitle (batch 6).
|
|
7150
|
-
modalDescription: '0.8125rem'
|
|
7967
|
+
modalDescription: '0.8125rem',
|
|
7968
|
+
// Form-field label size (batch 9): 12.5px, measured on the
|
|
7969
|
+
// prototype's field labels — distinct from the 14px `sm` used
|
|
7970
|
+
// elsewhere for body copy.
|
|
7971
|
+
label: '0.78125rem',
|
|
7972
|
+
// Button label size (batch 9): 13px, measured on the prototype's
|
|
7973
|
+
// buttons.
|
|
7974
|
+
control: '0.8125rem',
|
|
7975
|
+
// `ns-editor` footer caption (batch 10): 11.5px, proto 2732 (shared
|
|
7976
|
+
// with the stat-tile hint text, proto 1080).
|
|
7977
|
+
caption: '0.71875rem',
|
|
7978
|
+
// `ns-empty-state[size="sm"]` title (batch 10): 13.5px, proto 1594.
|
|
7979
|
+
headingXs: '0.84375rem',
|
|
7980
|
+
// `ns-empty-state[size="md"]` title (batch 10): 14.5px, proto 1035.
|
|
7981
|
+
headingSm: '0.90625rem',
|
|
7982
|
+
// `ns-empty-state[size="lg"]` title (batch 10): 15px, proto 1176.
|
|
7983
|
+
headingMd: '0.9375rem'
|
|
7151
7984
|
},
|
|
7152
7985
|
weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
|
|
7153
7986
|
lineHeight: { compact: 1.25, normal: 1.5, display: 1 }
|
|
@@ -7183,11 +8016,21 @@ const Arvisfy = {
|
|
|
7183
8016
|
// 4px is ~20% of the box side and matches the "rounded" convention
|
|
7184
8017
|
// used by other systems (Tailwind's default `rounded`, Radix,
|
|
7185
8018
|
// GitHub Primer) for compact 16-20px controls.
|
|
7186
|
-
xs: '0.25rem'
|
|
8019
|
+
xs: '0.25rem',
|
|
8020
|
+
// `ns-editor` toolbar action-button corner (batch 8): 7px. Neither
|
|
8021
|
+
// `pill` (8px) nor `sm` (12px) matches the prototype's tighter,
|
|
8022
|
+
// 28px-square toolbar buttons — both read too round at that size.
|
|
8023
|
+
editorAction: '0.4375rem',
|
|
8024
|
+
// `ns-stat-tile` corner radius (batch 10): 14px, proto 1069.
|
|
8025
|
+
tile: '0.875rem'
|
|
7187
8026
|
},
|
|
7188
8027
|
border: {
|
|
7189
8028
|
thin: '1px',
|
|
7190
|
-
medium: '1.5px'
|
|
8029
|
+
medium: '1.5px',
|
|
8030
|
+
// `ns-card[borderless]`/`ns-stat-tile` (batch 10): a tile/card without
|
|
8031
|
+
// a visible border still needs a slot in the border scale so its
|
|
8032
|
+
// `borderWidth` can reference the tier-3 primitive/semantic chain.
|
|
8033
|
+
none: '0'
|
|
7191
8034
|
},
|
|
7192
8035
|
opacity: {
|
|
7193
8036
|
backdrop: 0.7,
|
|
@@ -7226,6 +8069,9 @@ const Arvisfy = {
|
|
|
7226
8069
|
},
|
|
7227
8070
|
easing: { standard: 'cubic-bezier(0.2, 0, 0, 1)' },
|
|
7228
8071
|
size: {
|
|
8072
|
+
// Extra-small control height (batch AVF button `xs` size): 28px, half
|
|
8073
|
+
// way between the icon-only glyph and `controlSm` (38px).
|
|
8074
|
+
controlXs: '1.75rem',
|
|
7229
8075
|
controlSm: '2.375rem',
|
|
7230
8076
|
controlMd: '2.5rem',
|
|
7231
8077
|
controlLg: '3rem',
|
|
@@ -7272,6 +8118,11 @@ const Arvisfy = {
|
|
|
7272
8118
|
switchThumbTranslateSm: '12px',
|
|
7273
8119
|
chipPillPaddingBlock: '5px',
|
|
7274
8120
|
chipPillPaddingInline: '10px',
|
|
8121
|
+
// `ns-chip[size="choice"]` (batch 9): a rectangular selection chip
|
|
8122
|
+
// measured on the prototype's sales-channel picker, distinct from the
|
|
8123
|
+
// `md` default's pill/round family above.
|
|
8124
|
+
chipChoiceMinHeight: '34px',
|
|
8125
|
+
chipChoicePaddingInline: '13px',
|
|
7275
8126
|
tabsPillPaddingBlock: '7px',
|
|
7276
8127
|
tabsPillPaddingInline: '15px',
|
|
7277
8128
|
timelineDot: '9px',
|
|
@@ -7309,14 +8160,81 @@ const Arvisfy = {
|
|
|
7309
8160
|
statCardPaddingInline: '22px',
|
|
7310
8161
|
statCardPaddingBlockCompact: '16px',
|
|
7311
8162
|
statCardPaddingInlineCompact: '18px',
|
|
7312
|
-
|
|
8163
|
+
// Batch 10: 34px, up from 28px, proto 770 — the icon badge grew to
|
|
8164
|
+
// match the redesigned KPI icon treatment.
|
|
8165
|
+
statCardIconSize: '34px',
|
|
8166
|
+
// `ns-stat-card` icon glyph (batch 10), proto 771.
|
|
8167
|
+
statCardIconGlyphSize: '16px',
|
|
8168
|
+
// `ns-stat-card[variant="tile"]` (batch 10), proto 1069-1113.
|
|
8169
|
+
statTileIconSize: '36px',
|
|
8170
|
+
statTileGap: '12px',
|
|
8171
|
+
statTileColumnGap: '6px',
|
|
8172
|
+
statTilePaddingBlock: '14px',
|
|
8173
|
+
statTilePaddingInline: '16px',
|
|
8174
|
+
// `ns-empty-state` icon circle sizes (batch 10), proto 1171-1177 (lg),
|
|
8175
|
+
// 1030-1036 (md), 1593-1599 (sm).
|
|
8176
|
+
emptyStateIconLg: '72px',
|
|
8177
|
+
emptyStateIconMd: '64px',
|
|
8178
|
+
emptyStateIconSm: '52px',
|
|
8179
|
+
emptyStateGlyphLg: '28px',
|
|
8180
|
+
emptyStateGlyphMd: '26px',
|
|
8181
|
+
emptyStateGlyphSm: '22px',
|
|
8182
|
+
emptyStateMaxWidthLg: '320px',
|
|
8183
|
+
emptyStateMaxWidthMd: '280px',
|
|
8184
|
+
emptyStateMaxWidthSm: '220px',
|
|
8185
|
+
emptyStateGap: '14px',
|
|
8186
|
+
emptyStatePaddingBlockLg: '64px',
|
|
8187
|
+
emptyStatePaddingBlockMd: '56px',
|
|
8188
|
+
emptyStatePaddingBlockSm: '36px',
|
|
8189
|
+
// `ns-input-search` leading glyph (batch 10), proto 1120.
|
|
8190
|
+
searchIconSize: '15px',
|
|
8191
|
+
// `ns-editor` footer chrome (batch 10), proto 2729-2732.
|
|
8192
|
+
editorContentMinHeight: '118px',
|
|
8193
|
+
editorContentPadding: '14px',
|
|
8194
|
+
editorFooterPaddingInline: '14px',
|
|
7313
8195
|
commandPalette: '40rem',
|
|
7314
|
-
commandPaletteItemIcon: '20px'
|
|
8196
|
+
commandPaletteItemIcon: '20px',
|
|
8197
|
+
// `ns-editor` toolbar chrome (batch 8), measured on the prototype's
|
|
8198
|
+
// rich-text toolbar.
|
|
8199
|
+
editorToolButton: '28px',
|
|
8200
|
+
editorToolIcon: '16px',
|
|
8201
|
+
editorToolbarPaddingBlock: '6px',
|
|
8202
|
+
editorSeparatorHeight: '18px',
|
|
8203
|
+
editorSeparatorSpacing: '6px',
|
|
8204
|
+
editorToolbarGap: '2px',
|
|
8205
|
+
// The color-picker's chevron indicator is smaller than the other
|
|
8206
|
+
// toolbar glyphs; a dedicated size keeps `.ns-editor__toggle` out of
|
|
8207
|
+
// the generic per-button `svg` sizing rule.
|
|
8208
|
+
editorToggleIconSize: '12px',
|
|
8209
|
+
// `ns-image-upload[layout="cover"]` (AVF-19, was 30rem in AVF-8):
|
|
8210
|
+
// empty-state dropzone minimum height. Also the single source of
|
|
8211
|
+
// truth for the filled state's height since AVF-29 — the component's
|
|
8212
|
+
// stylesheet reuses this exact token (never a fixed per-row size) for
|
|
8213
|
+
// `.ns-image-upload__cover`/`.ns-image-upload__stack`, so both states
|
|
8214
|
+
// move together whatever this resolves to, and `grid-auto-rows` there
|
|
8215
|
+
// divides it among the reserved rows instead of the rows driving the
|
|
8216
|
+
// height. See `imageUpload.stackGap` below for why it no longer
|
|
8217
|
+
// participates in that arithmetic. The per-row size token this used
|
|
8218
|
+
// to share that arithmetic with, `thumbnailSize`, has been retired —
|
|
8219
|
+
// it no longer has any effect, and the retired-token registry warns
|
|
8220
|
+
// anyone who still overrides it.
|
|
8221
|
+
emptyMinHeight: '17.5rem',
|
|
8222
|
+
// Empty-state icon circle (AVF-8): distinct from `emptyStateIconLg`
|
|
8223
|
+
// (72px) — this is the larger cover-dropzone treatment, not the
|
|
8224
|
+
// generic `ns-empty-state` component.
|
|
8225
|
+
emptyIconCircleSize: '6.875rem',
|
|
8226
|
+
emptyIconSize: '2.5rem',
|
|
8227
|
+
addIconSize: '1.75rem'
|
|
7315
8228
|
},
|
|
7316
8229
|
layout: {
|
|
7317
8230
|
scheduleDay: '[index] 3rem [timeline] minmax(0, 1fr)',
|
|
7318
8231
|
scheduleWeek: '[index] 3rem repeat(7, minmax(0, 1fr))',
|
|
7319
|
-
scheduleWorkweek: '[index] 3rem repeat(5, minmax(0, 1fr))'
|
|
8232
|
+
scheduleWorkweek: '[index] 3rem repeat(5, minmax(0, 1fr))',
|
|
8233
|
+
// Timeline row height for a single hour slot (`.ns-schedule__timeline-day`).
|
|
8234
|
+
// Must be `px`, not `rem`: `event.component.ts` reads this custom
|
|
8235
|
+
// property back with `getComputedStyle` at runtime, which returns the
|
|
8236
|
+
// value as written rather than resolving it to pixels.
|
|
8237
|
+
scheduleSlotHeight: '96px'
|
|
7320
8238
|
},
|
|
7321
8239
|
zIndex: { overlay: 1000, backdrop: 1050, modal: 1060, toast: 1080 }
|
|
7322
8240
|
},
|
|
@@ -7325,25 +8243,40 @@ const Arvisfy = {
|
|
|
7325
8243
|
font: {
|
|
7326
8244
|
body: '{primitive.font.family.sans}',
|
|
7327
8245
|
display: '{primitive.font.family.display}',
|
|
7328
|
-
code: '{primitive.font.family.mono}'
|
|
8246
|
+
code: '{primitive.font.family.mono}',
|
|
8247
|
+
// `ns-stat-tile` value typeface (batch 10): no dedicated semantic
|
|
8248
|
+
// name existed for the sans family — `body` already resolves to the
|
|
8249
|
+
// same primitive but under a name that doesn't read as a font-family
|
|
8250
|
+
// token at the tile's call site.
|
|
8251
|
+
sans: '{primitive.font.family.sans}'
|
|
7329
8252
|
},
|
|
7330
8253
|
text: {
|
|
7331
8254
|
xs: '{primitive.font.size.xs}',
|
|
7332
8255
|
sm: '{primitive.font.size.sm}',
|
|
7333
8256
|
md: '{primitive.font.size.md}',
|
|
7334
8257
|
lg: '{primitive.font.size.lg}',
|
|
8258
|
+
// `ns-stat-tile` value size (batch 10): the `xl` step existed as a
|
|
8259
|
+
// primitive but had no semantic mirror yet.
|
|
8260
|
+
xl: '{primitive.font.size.xl}',
|
|
7335
8261
|
navItem: '{primitive.font.size.navItem}',
|
|
7336
8262
|
navItemDescription: '{primitive.font.size.navItemDescription}',
|
|
7337
8263
|
navEyebrow: '{primitive.font.size.navEyebrow}',
|
|
7338
8264
|
displaySm: '{primitive.font.size.displaySm}',
|
|
7339
8265
|
displayMd: '{primitive.font.size.displayMd}',
|
|
7340
8266
|
displayLg: '{primitive.font.size.displayLg}',
|
|
7341
|
-
modalDescription: '{primitive.font.size.modalDescription}'
|
|
8267
|
+
modalDescription: '{primitive.font.size.modalDescription}',
|
|
8268
|
+
label: '{primitive.font.size.label}',
|
|
8269
|
+
control: '{primitive.font.size.control}',
|
|
8270
|
+
caption: '{primitive.font.size.caption}',
|
|
8271
|
+
headingXs: '{primitive.font.size.headingXs}',
|
|
8272
|
+
headingSm: '{primitive.font.size.headingSm}',
|
|
8273
|
+
headingMd: '{primitive.font.size.headingMd}'
|
|
7342
8274
|
},
|
|
7343
8275
|
letterSpacing: {
|
|
7344
8276
|
wide: '{primitive.letterSpacing.wide}',
|
|
7345
8277
|
tight: '{primitive.letterSpacing.tight}',
|
|
7346
|
-
tighter: '{primitive.letterSpacing.tighter}'
|
|
8278
|
+
tighter: '{primitive.letterSpacing.tighter}',
|
|
8279
|
+
normal: '{primitive.letterSpacing.normal}'
|
|
7347
8280
|
},
|
|
7348
8281
|
navRail: {
|
|
7349
8282
|
text: '{primitive.color.navRail.text}',
|
|
@@ -7382,11 +8315,14 @@ const Arvisfy = {
|
|
|
7382
8315
|
field: '{primitive.radius.field}',
|
|
7383
8316
|
// Dedicated slot for the checkbox box (batch 7): kept separate from
|
|
7384
8317
|
// `control` so button/input/menu radii are untouched.
|
|
7385
|
-
checkbox: '{primitive.radius.xs}'
|
|
8318
|
+
checkbox: '{primitive.radius.xs}',
|
|
8319
|
+
editorAction: '{primitive.radius.editorAction}',
|
|
8320
|
+
tile: '{primitive.radius.tile}'
|
|
7386
8321
|
},
|
|
7387
8322
|
border: {
|
|
7388
8323
|
thin: '{primitive.border.thin}',
|
|
7389
|
-
medium: '{primitive.border.medium}'
|
|
8324
|
+
medium: '{primitive.border.medium}',
|
|
8325
|
+
none: '{primitive.border.none}'
|
|
7390
8326
|
},
|
|
7391
8327
|
opacity: {
|
|
7392
8328
|
backdrop: '{primitive.opacity.backdrop}',
|
|
@@ -7419,6 +8355,7 @@ const Arvisfy = {
|
|
|
7419
8355
|
link: '{primitive.offset.link}'
|
|
7420
8356
|
},
|
|
7421
8357
|
size: {
|
|
8358
|
+
controlXs: '{primitive.size.controlXs}',
|
|
7422
8359
|
controlSm: '{primitive.size.controlSm}',
|
|
7423
8360
|
controlMd: '{primitive.size.controlMd}',
|
|
7424
8361
|
controlLg: '{primitive.size.controlLg}',
|
|
@@ -7443,6 +8380,8 @@ const Arvisfy = {
|
|
|
7443
8380
|
switchThumbTranslateSm: '{primitive.size.switchThumbTranslateSm}',
|
|
7444
8381
|
chipPillPaddingBlock: '{primitive.size.chipPillPaddingBlock}',
|
|
7445
8382
|
chipPillPaddingInline: '{primitive.size.chipPillPaddingInline}',
|
|
8383
|
+
chipChoiceMinHeight: '{primitive.size.chipChoiceMinHeight}',
|
|
8384
|
+
chipChoicePaddingInline: '{primitive.size.chipChoicePaddingInline}',
|
|
7446
8385
|
tabsPillPaddingBlock: '{primitive.size.tabsPillPaddingBlock}',
|
|
7447
8386
|
tabsPillPaddingInline: '{primitive.size.tabsPillPaddingInline}',
|
|
7448
8387
|
timelineDot: '{primitive.size.timelineDot}',
|
|
@@ -7471,8 +8410,42 @@ const Arvisfy = {
|
|
|
7471
8410
|
statCardPaddingBlockCompact: '{primitive.size.statCardPaddingBlockCompact}',
|
|
7472
8411
|
statCardPaddingInlineCompact: '{primitive.size.statCardPaddingInlineCompact}',
|
|
7473
8412
|
statCardIconSize: '{primitive.size.statCardIconSize}',
|
|
8413
|
+
statCardIconGlyphSize: '{primitive.size.statCardIconGlyphSize}',
|
|
8414
|
+
statTileIconSize: '{primitive.size.statTileIconSize}',
|
|
8415
|
+
statTileGap: '{primitive.size.statTileGap}',
|
|
8416
|
+
statTileColumnGap: '{primitive.size.statTileColumnGap}',
|
|
8417
|
+
statTilePaddingBlock: '{primitive.size.statTilePaddingBlock}',
|
|
8418
|
+
statTilePaddingInline: '{primitive.size.statTilePaddingInline}',
|
|
8419
|
+
emptyStateIconLg: '{primitive.size.emptyStateIconLg}',
|
|
8420
|
+
emptyStateIconMd: '{primitive.size.emptyStateIconMd}',
|
|
8421
|
+
emptyStateIconSm: '{primitive.size.emptyStateIconSm}',
|
|
8422
|
+
emptyStateGlyphLg: '{primitive.size.emptyStateGlyphLg}',
|
|
8423
|
+
emptyStateGlyphMd: '{primitive.size.emptyStateGlyphMd}',
|
|
8424
|
+
emptyStateGlyphSm: '{primitive.size.emptyStateGlyphSm}',
|
|
8425
|
+
emptyStateMaxWidthLg: '{primitive.size.emptyStateMaxWidthLg}',
|
|
8426
|
+
emptyStateMaxWidthMd: '{primitive.size.emptyStateMaxWidthMd}',
|
|
8427
|
+
emptyStateMaxWidthSm: '{primitive.size.emptyStateMaxWidthSm}',
|
|
8428
|
+
emptyStateGap: '{primitive.size.emptyStateGap}',
|
|
8429
|
+
emptyStatePaddingBlockLg: '{primitive.size.emptyStatePaddingBlockLg}',
|
|
8430
|
+
emptyStatePaddingBlockMd: '{primitive.size.emptyStatePaddingBlockMd}',
|
|
8431
|
+
emptyStatePaddingBlockSm: '{primitive.size.emptyStatePaddingBlockSm}',
|
|
8432
|
+
searchIconSize: '{primitive.size.searchIconSize}',
|
|
8433
|
+
editorContentMinHeight: '{primitive.size.editorContentMinHeight}',
|
|
8434
|
+
editorContentPadding: '{primitive.size.editorContentPadding}',
|
|
8435
|
+
editorFooterPaddingInline: '{primitive.size.editorFooterPaddingInline}',
|
|
7474
8436
|
commandPalette: '{primitive.size.commandPalette}',
|
|
7475
|
-
commandPaletteItemIcon: '{primitive.size.commandPaletteItemIcon}'
|
|
8437
|
+
commandPaletteItemIcon: '{primitive.size.commandPaletteItemIcon}',
|
|
8438
|
+
editorToolButton: '{primitive.size.editorToolButton}',
|
|
8439
|
+
editorToolIcon: '{primitive.size.editorToolIcon}',
|
|
8440
|
+
editorToolbarPaddingBlock: '{primitive.size.editorToolbarPaddingBlock}',
|
|
8441
|
+
editorSeparatorHeight: '{primitive.size.editorSeparatorHeight}',
|
|
8442
|
+
editorSeparatorSpacing: '{primitive.size.editorSeparatorSpacing}',
|
|
8443
|
+
editorToolbarGap: '{primitive.size.editorToolbarGap}',
|
|
8444
|
+
editorToggleIconSize: '{primitive.size.editorToggleIconSize}',
|
|
8445
|
+
emptyMinHeight: '{primitive.size.emptyMinHeight}',
|
|
8446
|
+
emptyIconCircleSize: '{primitive.size.emptyIconCircleSize}',
|
|
8447
|
+
emptyIconSize: '{primitive.size.emptyIconSize}',
|
|
8448
|
+
addIconSize: '{primitive.size.addIconSize}'
|
|
7476
8449
|
},
|
|
7477
8450
|
layer: {
|
|
7478
8451
|
overlay: '{primitive.zIndex.overlay}',
|
|
@@ -7483,7 +8456,8 @@ const Arvisfy = {
|
|
|
7483
8456
|
layout: {
|
|
7484
8457
|
scheduleDay: '{primitive.layout.scheduleDay}',
|
|
7485
8458
|
scheduleWeek: '{primitive.layout.scheduleWeek}',
|
|
7486
|
-
scheduleWorkweek: '{primitive.layout.scheduleWorkweek}'
|
|
8459
|
+
scheduleWorkweek: '{primitive.layout.scheduleWorkweek}',
|
|
8460
|
+
scheduleSlotHeight: '{primitive.layout.scheduleSlotHeight}'
|
|
7487
8461
|
},
|
|
7488
8462
|
status: {
|
|
7489
8463
|
primarySoft: '{primitive.color.klein.50}',
|
|
@@ -7525,7 +8499,9 @@ const Arvisfy = {
|
|
|
7525
8499
|
},
|
|
7526
8500
|
color: {
|
|
7527
8501
|
switchOn: '{primitive.color.switch.on}',
|
|
7528
|
-
switchOff: '{primitive.color.switch.off}'
|
|
8502
|
+
switchOff: '{primitive.color.switch.off}',
|
|
8503
|
+
chipBackground: '{primitive.color.imageUpload.chipBackground}',
|
|
8504
|
+
chipBackgroundHover: '{primitive.color.imageUpload.chipBackgroundHover}'
|
|
7529
8505
|
},
|
|
7530
8506
|
button: {
|
|
7531
8507
|
solidForeground: '{primitive.color.white}',
|
|
@@ -7557,6 +8533,10 @@ const Arvisfy = {
|
|
|
7557
8533
|
emphasisBackground: '{primitive.color.neutral.800}',
|
|
7558
8534
|
emphasisForeground: '{primitive.color.white}',
|
|
7559
8535
|
text: '{primitive.color.neutral.800}',
|
|
8536
|
+
// Typed/entered field text (batch 9): `ns-input` and friends'
|
|
8537
|
+
// value text, measured slightly lighter than the general `text`
|
|
8538
|
+
// token on the prototype.
|
|
8539
|
+
textSecondary: '{primitive.color.neutral.700}',
|
|
7560
8540
|
toastBackground: '{primitive.color.toast.backgroundLight}',
|
|
7561
8541
|
toastForeground: '{primitive.color.toast.foregroundLight}',
|
|
7562
8542
|
textMuted: '{primitive.color.neutral.500}',
|
|
@@ -7566,6 +8546,24 @@ const Arvisfy = {
|
|
|
7566
8546
|
borderStrong: '{primitive.color.neutral.400}',
|
|
7567
8547
|
separator: '{primitive.color.neutral.100}',
|
|
7568
8548
|
modalFooterBorder: '{primitive.color.modal.footerBorder}',
|
|
8549
|
+
// `ns-editor` toolbar chrome (batch 8): the prototype is
|
|
8550
|
+
// light-only, so these have no dark counterpart to observe from.
|
|
8551
|
+
editorToolbarBackground: '{primitive.color.neutral.25}',
|
|
8552
|
+
editorToolbarBorder: '{primitive.color.editor.toolbarBorder}',
|
|
8553
|
+
editorActionColor: '{primitive.color.neutral.700}',
|
|
8554
|
+
editorActionHoverBackground: '{primitive.color.editor.toolbarBorder}',
|
|
8555
|
+
// Batch 10: `ns-input-search`/`ns-editor` placeholder text, proto
|
|
8556
|
+
// 1121/2732.
|
|
8557
|
+
textPlaceholder: '{primitive.color.neutral.400}',
|
|
8558
|
+
// `ns-empty-state` icon circle (batch 10), proto 1171-1177.
|
|
8559
|
+
emptyStateIconBackground: '{primitive.color.neutral.125}',
|
|
8560
|
+
emptyStateIconColor: '{primitive.color.neutral.450}',
|
|
8561
|
+
// `ns-input-search` toolbar field background (batch 10), proto
|
|
8562
|
+
// 1121.
|
|
8563
|
+
searchFieldBackground: '{primitive.color.neutral.35}',
|
|
8564
|
+
// `ns-editor` footer chrome (batch 10), proto 2732.
|
|
8565
|
+
editorFooterBackground: '{primitive.color.neutral.15}',
|
|
8566
|
+
editorFooterBorder: '{primitive.color.neutral.100}',
|
|
7569
8567
|
primary: '{primitive.color.klein.500}',
|
|
7570
8568
|
primaryHover: '{primitive.color.klein.600}',
|
|
7571
8569
|
primaryActive: '{primitive.color.klein.700}',
|
|
@@ -7602,6 +8600,20 @@ const Arvisfy = {
|
|
|
7602
8600
|
commandPaletteAvatarActiveBackground: '{primitive.color.commandPalette.avatarActiveBackground}',
|
|
7603
8601
|
infoSoft: '{primitive.color.klein.50}',
|
|
7604
8602
|
infoSoftForeground: '{primitive.color.info.foreground}',
|
|
8603
|
+
// `ns-stat-card[variant="tile"]` icon/delta tones (batch 10),
|
|
8604
|
+
// proto 1069-1113. Named `*TileTint` rather than the brief's plain
|
|
8605
|
+
// `*Tint` because `successTint`/`successTintForeground` already
|
|
8606
|
+
// exist above as the unrelated selection/interactive tint consumed
|
|
8607
|
+
// by `chip`, `menu`, `sideNav` and `commandPalette` — reusing that
|
|
8608
|
+
// name here would have silently changed those components' colors.
|
|
8609
|
+
infoTileTint: '{primitive.color.tile.infoBackground}',
|
|
8610
|
+
infoTileTintForeground: '{primitive.color.tile.infoForeground}',
|
|
8611
|
+
successTileTint: '{primitive.color.tile.successBackground}',
|
|
8612
|
+
successTileTintForeground: '{primitive.color.success.600}',
|
|
8613
|
+
warningTileTint: '{primitive.color.tile.warningBackground}',
|
|
8614
|
+
warningTileTintForeground: '{primitive.color.tile.warningForeground}',
|
|
8615
|
+
dangerTileTint: '{primitive.color.tile.dangerBackground}',
|
|
8616
|
+
dangerTileTintForeground: '{primitive.color.tile.dangerForeground}',
|
|
7605
8617
|
selectedSoft: '{primitive.color.selected.soft}',
|
|
7606
8618
|
selectedSoftForeground: '{primitive.color.selected.foreground}',
|
|
7607
8619
|
success: '{primitive.color.success.500}',
|
|
@@ -7657,6 +8669,10 @@ const Arvisfy = {
|
|
|
7657
8669
|
emphasisBackground: '{primitive.color.dark.surfaceRaised}',
|
|
7658
8670
|
emphasisForeground: '{primitive.color.dark.text}',
|
|
7659
8671
|
text: '{primitive.color.dark.text}',
|
|
8672
|
+
// Typed/entered field text (batch 9): no distinct dark primitive
|
|
8673
|
+
// was observed for this secondary shade, so dark mode keeps full
|
|
8674
|
+
// contrast instead of introducing an unobserved intermediate tone.
|
|
8675
|
+
textSecondary: '{primitive.color.dark.text}',
|
|
7660
8676
|
toastBackground: '{primitive.color.toast.backgroundDark}',
|
|
7661
8677
|
toastForeground: '{primitive.color.toast.foregroundDark}',
|
|
7662
8678
|
textMuted: '{primitive.color.dark.muted}',
|
|
@@ -7675,6 +8691,24 @@ const Arvisfy = {
|
|
|
7675
8691
|
// (batch 6); the prototype is light-only, so no distinct dark
|
|
7676
8692
|
// value is observed.
|
|
7677
8693
|
modalFooterBorder: '{primitive.color.dark.separator}',
|
|
8694
|
+
// `ns-editor` toolbar chrome (batch 8): the prototype is
|
|
8695
|
+
// light-only, so these reuse the existing dark surface/muted
|
|
8696
|
+
// tokens that already carry this exact legibility today
|
|
8697
|
+
// (`surfaceMuted` in dark already resolves to `dark.surfaceRaised`)
|
|
8698
|
+
// — the dark scheme is not degraded by this addition.
|
|
8699
|
+
editorToolbarBackground: '{primitive.color.dark.surfaceRaised}',
|
|
8700
|
+
editorToolbarBorder: '{primitive.color.dark.border}',
|
|
8701
|
+
editorActionColor: '{primitive.color.dark.muted}',
|
|
8702
|
+
editorActionHoverBackground: '{primitive.color.dark.separator}',
|
|
8703
|
+
// Batch 10: no distinct dark primitives were observed for these
|
|
8704
|
+
// light-only prototype surfaces, so dark mode reuses the existing
|
|
8705
|
+
// muted/raised-surface tokens that already carry the same role.
|
|
8706
|
+
textPlaceholder: '{primitive.color.dark.muted}',
|
|
8707
|
+
emptyStateIconBackground: '{primitive.color.dark.surfaceRaised}',
|
|
8708
|
+
emptyStateIconColor: '{primitive.color.dark.muted}',
|
|
8709
|
+
searchFieldBackground: '{primitive.color.dark.surface}',
|
|
8710
|
+
editorFooterBackground: '{primitive.color.dark.surfaceRaised}',
|
|
8711
|
+
editorFooterBorder: '{primitive.color.dark.separator}',
|
|
7678
8712
|
primary: '{primitive.color.klein.400}',
|
|
7679
8713
|
primaryHover: '{primitive.color.klein.300}',
|
|
7680
8714
|
primaryActive: '{primitive.color.klein.500}',
|
|
@@ -7718,6 +8752,17 @@ const Arvisfy = {
|
|
|
7718
8752
|
commandPaletteAvatarActiveBackground: '{primitive.color.dark.successBackground}',
|
|
7719
8753
|
infoSoft: '{primitive.color.dark.infoBackground}',
|
|
7720
8754
|
infoSoftForeground: '{primitive.color.dark.infoText}',
|
|
8755
|
+
// `ns-stat-card[variant="tile"]` icon/delta tones (batch 10): see
|
|
8756
|
+
// the light-scheme comment above for the `*TileTint` naming
|
|
8757
|
+
// rationale.
|
|
8758
|
+
infoTileTint: '{primitive.color.dark.infoBackground}',
|
|
8759
|
+
infoTileTintForeground: '{primitive.color.dark.infoText}',
|
|
8760
|
+
successTileTint: '{primitive.color.dark.successBackground}',
|
|
8761
|
+
successTileTintForeground: '{primitive.color.dark.successText}',
|
|
8762
|
+
warningTileTint: '{primitive.color.dark.warningBackground}',
|
|
8763
|
+
warningTileTintForeground: '{primitive.color.dark.warningText}',
|
|
8764
|
+
dangerTileTint: '{primitive.color.dark.dangerBackground}',
|
|
8765
|
+
dangerTileTintForeground: '{primitive.color.dark.dangerText}',
|
|
7721
8766
|
selectedSoft: '{primitive.color.dark.infoBackground}',
|
|
7722
8767
|
selectedSoftForeground: '{primitive.color.dark.infoText}',
|
|
7723
8768
|
success: '{primitive.color.success.500}',
|
|
@@ -7785,10 +8830,10 @@ const Arvisfy = {
|
|
|
7785
8830
|
},
|
|
7786
8831
|
input: {
|
|
7787
8832
|
labelColor: '{semantic.color.text}',
|
|
7788
|
-
labelSize: '{semantic.text.
|
|
7789
|
-
labelWeight: '{semantic.fontWeight.
|
|
8833
|
+
labelSize: '{semantic.text.label}',
|
|
8834
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
7790
8835
|
background: '{semantic.color.surface}',
|
|
7791
|
-
color: '{semantic.color.
|
|
8836
|
+
color: '{semantic.color.textSecondary}',
|
|
7792
8837
|
placeholder: '{semantic.color.textMuted}',
|
|
7793
8838
|
borderColor: '{semantic.color.border}',
|
|
7794
8839
|
borderHoverColor: '{semantic.color.borderStrong}',
|
|
@@ -7828,8 +8873,8 @@ const Arvisfy = {
|
|
|
7828
8873
|
paddingInline: '{semantic.space.lg}',
|
|
7829
8874
|
minWidth: '{semantic.size.buttonMin}',
|
|
7830
8875
|
minHeight: '{semantic.size.controlMd}',
|
|
7831
|
-
fontSize: '{semantic.text.
|
|
7832
|
-
fontWeight: '{semantic.fontWeight.
|
|
8876
|
+
fontSize: '{semantic.text.control}',
|
|
8877
|
+
fontWeight: '{semantic.fontWeight.bold}',
|
|
7833
8878
|
gap: '{semantic.space.sm}',
|
|
7834
8879
|
focusShadow: '{semantic.shadow.focus}',
|
|
7835
8880
|
successBackground: '{semantic.button.successBackground}',
|
|
@@ -7853,7 +8898,10 @@ const Arvisfy = {
|
|
|
7853
8898
|
tertiaryBackgroundHover: '{semantic.color.content2}',
|
|
7854
8899
|
tertiaryBackgroundActive: '{semantic.color.content3}',
|
|
7855
8900
|
selectedShadow: '{semantic.shadow.subtle}',
|
|
7856
|
-
|
|
8901
|
+
// Kept equal to `fontWeight` (batch 9): a lighter selected weight would
|
|
8902
|
+
// read as less emphasized than the resting state now that the base
|
|
8903
|
+
// button label is bold.
|
|
8904
|
+
selectedFontWeight: '{semantic.fontWeight.bold}',
|
|
7857
8905
|
secondarySelectedBackground: '{semantic.color.surface}',
|
|
7858
8906
|
secondarySelectedBorderColor: '{semantic.color.surface}',
|
|
7859
8907
|
secondarySelectedColor: '{semantic.button.secondaryColor}',
|
|
@@ -7869,11 +8917,28 @@ const Arvisfy = {
|
|
|
7869
8917
|
tertiarySelectedBackgroundActive: '{semantic.color.content4}',
|
|
7870
8918
|
tertiarySelectedBorderColorActive: '{semantic.color.content4}',
|
|
7871
8919
|
iconPaddingInline: '{semantic.space.sm}',
|
|
8920
|
+
minHeightXs: '{semantic.size.controlXs}',
|
|
8921
|
+
// `size="xs"` (28px) reads too round at the 12px default `control`
|
|
8922
|
+
// radius, so it borrows `semantic.radius.pill` (8px) the same way
|
|
8923
|
+
// `ns-button-group`'s segment radius borrows a dedicated semantic
|
|
8924
|
+
// radius rather than a raw value.
|
|
8925
|
+
radiusXs: '{semantic.radius.pill}',
|
|
7872
8926
|
minHeightSm: '{semantic.size.controlSm}',
|
|
7873
8927
|
minHeightLg: '{semantic.size.controlLg}',
|
|
7874
8928
|
loadingDuration: '{semantic.motion.buttonLoading}',
|
|
7875
8929
|
spinnerSize: '{semantic.text.md}',
|
|
7876
|
-
transitionDuration: '{semantic.motion.fast}'
|
|
8930
|
+
transitionDuration: '{semantic.motion.fast}',
|
|
8931
|
+
// `variant="dark"` (AVF-20): the same emphasis pair `ns-stat-card`
|
|
8932
|
+
// already uses for its `dark` icon badge (`stat-card.darkBackground`/
|
|
8933
|
+
// `darkColor` above) — `emphasisBackground` resolves to `neutral.800`
|
|
8934
|
+
// (`#12182B`) in light mode and `dark.surfaceRaised` in dark mode, so
|
|
8935
|
+
// this needs no new primitive or semantic token. No `darkBackgroundHover`/
|
|
8936
|
+
// `darkBackgroundActive` entry here: `button.component.scss` derives
|
|
8937
|
+
// those with `color-mix()` off this single token instead — see the
|
|
8938
|
+
// comment there for why (no ready `semantic.status.*Hover/Active` pair
|
|
8939
|
+
// exists for an emphasis background the way it does for success/danger).
|
|
8940
|
+
darkBackground: '{semantic.color.emphasisBackground}',
|
|
8941
|
+
darkColor: '{semantic.color.emphasisForeground}'
|
|
7877
8942
|
},
|
|
7878
8943
|
avatar: {
|
|
7879
8944
|
background: '{semantic.color.surfaceEmphasis}',
|
|
@@ -7920,13 +8985,16 @@ const Arvisfy = {
|
|
|
7920
8985
|
},
|
|
7921
8986
|
editor: {
|
|
7922
8987
|
labelColor: '{semantic.color.text}',
|
|
7923
|
-
labelSize: '{semantic.text.
|
|
7924
|
-
labelWeight: '{semantic.fontWeight.
|
|
8988
|
+
labelSize: '{semantic.text.label}',
|
|
8989
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
7925
8990
|
background: '{semantic.color.surface}',
|
|
7926
|
-
toolbarBackground: '{semantic.color.
|
|
8991
|
+
toolbarBackground: '{semantic.color.editorToolbarBackground}',
|
|
7927
8992
|
color: '{semantic.color.text}',
|
|
7928
8993
|
borderColor: '{semantic.color.border}',
|
|
7929
|
-
radius: '
|
|
8994
|
+
// Wrapper corner radius (batch 8): 10px, matching the prototype's
|
|
8995
|
+
// envelope. Toolbar action buttons no longer read this — see
|
|
8996
|
+
// `actionRadius` below.
|
|
8997
|
+
radius: '{semantic.radius.field}',
|
|
7930
8998
|
overlayRadius: '{semantic.radius.overlay}',
|
|
7931
8999
|
overlayShadow: '{semantic.shadow.overlay}',
|
|
7932
9000
|
padding: '{semantic.space.sm}',
|
|
@@ -7935,7 +9003,39 @@ const Arvisfy = {
|
|
|
7935
9003
|
focusBorderColor: '{semantic.color.focus}',
|
|
7936
9004
|
focusShadow: '{semantic.shadow.focus}',
|
|
7937
9005
|
actionBackground: '{semantic.color.surfaceEmphasis}',
|
|
7938
|
-
actionFocusShadow: '{semantic.shadow.focus}'
|
|
9006
|
+
actionFocusShadow: '{semantic.shadow.focus}',
|
|
9007
|
+
// Toolbar chrome (batch 8), measured on the prototype's rich-text
|
|
9008
|
+
// toolbar.
|
|
9009
|
+
toolbarBorderColor: '{semantic.color.editorToolbarBorder}',
|
|
9010
|
+
toolbarPaddingBlock: '{semantic.size.editorToolbarPaddingBlock}',
|
|
9011
|
+
toolbarPaddingInline: '{semantic.space.sm}',
|
|
9012
|
+
toolbarGap: '{semantic.size.editorToolbarGap}',
|
|
9013
|
+
// Toolbar action-button sizing/color (batch 8): a dedicated 28px/7px
|
|
9014
|
+
// family distinct from the wrapper's `radius`/`background`.
|
|
9015
|
+
actionSize: '{semantic.size.editorToolButton}',
|
|
9016
|
+
actionRadius: '{semantic.radius.editorAction}',
|
|
9017
|
+
actionColor: '{semantic.color.editorActionColor}',
|
|
9018
|
+
actionHoverBackground: '{semantic.color.editorActionHoverBackground}',
|
|
9019
|
+
// Only the color-picker button needs this: it hosts two glyphs (the
|
|
9020
|
+
// color swatch letter plus the chevron) that don't fit the fixed
|
|
9021
|
+
// 28px action width.
|
|
9022
|
+
actionPaddingInline: '{semantic.space.xs}',
|
|
9023
|
+
iconSize: '{semantic.size.editorToolIcon}',
|
|
9024
|
+
separatorColor: '{semantic.color.border}',
|
|
9025
|
+
separatorWidth: '{semantic.border.thin}',
|
|
9026
|
+
separatorHeight: '{semantic.size.editorSeparatorHeight}',
|
|
9027
|
+
separatorSpacing: '{semantic.size.editorSeparatorSpacing}',
|
|
9028
|
+
toggleIconSize: '{semantic.size.editorToggleIconSize}',
|
|
9029
|
+
// Content area + footer chrome (batch 10), proto 2729-2732.
|
|
9030
|
+
contentMinHeight: '{semantic.size.editorContentMinHeight}',
|
|
9031
|
+
contentPadding: '{semantic.size.editorContentPadding}',
|
|
9032
|
+
footerPaddingBlock: '{semantic.space.sm}',
|
|
9033
|
+
footerPaddingInline: '{semantic.size.editorFooterPaddingInline}',
|
|
9034
|
+
footerBorderColor: '{semantic.color.editorFooterBorder}',
|
|
9035
|
+
footerBackground: '{semantic.color.editorFooterBackground}',
|
|
9036
|
+
footerFontSize: '{semantic.text.caption}',
|
|
9037
|
+
footerFontWeight: '{semantic.fontWeight.medium}',
|
|
9038
|
+
footerColor: '{semantic.color.textPlaceholder}'
|
|
7939
9039
|
},
|
|
7940
9040
|
checkbox: {
|
|
7941
9041
|
color: '{semantic.color.text}',
|
|
@@ -7958,8 +9058,8 @@ const Arvisfy = {
|
|
|
7958
9058
|
},
|
|
7959
9059
|
datePicker: {
|
|
7960
9060
|
labelColor: '{semantic.color.text}',
|
|
7961
|
-
labelSize: '{semantic.text.
|
|
7962
|
-
labelWeight: '{semantic.fontWeight.
|
|
9061
|
+
labelSize: '{semantic.text.label}',
|
|
9062
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
7963
9063
|
bodyFontFamily: '{semantic.font.body}',
|
|
7964
9064
|
titleFontFamily: '{semantic.font.display}',
|
|
7965
9065
|
titleSize: '{semantic.text.lg}',
|
|
@@ -8022,10 +9122,10 @@ const Arvisfy = {
|
|
|
8022
9122
|
},
|
|
8023
9123
|
inputNumber: {
|
|
8024
9124
|
labelColor: '{semantic.color.text}',
|
|
8025
|
-
labelSize: '{semantic.text.
|
|
8026
|
-
labelWeight: '{semantic.fontWeight.
|
|
9125
|
+
labelSize: '{semantic.text.label}',
|
|
9126
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8027
9127
|
background: '{semantic.color.surface}',
|
|
8028
|
-
color: '{semantic.color.
|
|
9128
|
+
color: '{semantic.color.textSecondary}',
|
|
8029
9129
|
borderColor: '{semantic.color.border}',
|
|
8030
9130
|
borderFocusColor: '{semantic.color.focus}',
|
|
8031
9131
|
// Form-field radius/height (batch 6): 10px/42px, matching `ns-input`
|
|
@@ -8040,6 +9140,7 @@ const Arvisfy = {
|
|
|
8040
9140
|
stepperBorderWidth: '{semantic.border.thin}',
|
|
8041
9141
|
stepperBackgroundHover: '{semantic.color.surfaceMuted}',
|
|
8042
9142
|
stepperMutedColor: '{semantic.color.textMuted}',
|
|
9143
|
+
prefixColor: '{semantic.color.textMuted}',
|
|
8043
9144
|
descriptionColor: '{semantic.color.textMuted}',
|
|
8044
9145
|
errorColor: '{semantic.status.danger}'
|
|
8045
9146
|
},
|
|
@@ -8054,15 +9155,23 @@ const Arvisfy = {
|
|
|
8054
9155
|
// untokenized `min-h-10` Tailwind utility.
|
|
8055
9156
|
radius: '{semantic.radius.tab}',
|
|
8056
9157
|
minHeight: '{semantic.size.controlSm}',
|
|
8057
|
-
|
|
9158
|
+
// Batch 10: the toolbar search field carries its own warm-gray fill
|
|
9159
|
+
// and placeholder tone (proto 1121), distinct from the plain-surface
|
|
9160
|
+
// `ns-input`.
|
|
9161
|
+
background: '{semantic.color.searchFieldBackground}',
|
|
8058
9162
|
color: '{semantic.color.text}',
|
|
8059
|
-
placeholder: '{semantic.color.
|
|
9163
|
+
placeholder: '{semantic.color.textPlaceholder}',
|
|
8060
9164
|
paddingInline: '{semantic.space.md}',
|
|
8061
9165
|
focusShadow: '{semantic.shadow.focus}',
|
|
8062
9166
|
actionColor: '{semantic.color.textMuted}',
|
|
8063
9167
|
actionBackgroundHover: '{semantic.color.surfaceMuted}',
|
|
8064
9168
|
descriptionColor: '{semantic.color.textMuted}',
|
|
8065
|
-
errorColor: '{semantic.status.danger}'
|
|
9169
|
+
errorColor: '{semantic.status.danger}',
|
|
9170
|
+
// Leading magnifier glyph (batch 10), proto 1120.
|
|
9171
|
+
fontSize: '{semantic.text.control}',
|
|
9172
|
+
iconSize: '{semantic.size.searchIconSize}',
|
|
9173
|
+
iconColor: '{semantic.color.textMuted}',
|
|
9174
|
+
gap: '{semantic.space.sm}'
|
|
8066
9175
|
},
|
|
8067
9176
|
inputCode: {
|
|
8068
9177
|
labelColor: '{semantic.color.text}',
|
|
@@ -8086,10 +9195,10 @@ const Arvisfy = {
|
|
|
8086
9195
|
},
|
|
8087
9196
|
password: {
|
|
8088
9197
|
labelColor: '{semantic.color.text}',
|
|
8089
|
-
labelSize: '{semantic.text.
|
|
8090
|
-
labelWeight: '{semantic.fontWeight.
|
|
9198
|
+
labelSize: '{semantic.text.label}',
|
|
9199
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8091
9200
|
background: '{semantic.color.surface}',
|
|
8092
|
-
color: '{semantic.color.
|
|
9201
|
+
color: '{semantic.color.textSecondary}',
|
|
8093
9202
|
borderColor: '{semantic.color.border}',
|
|
8094
9203
|
borderFocusColor: '{semantic.color.focus}',
|
|
8095
9204
|
// Aligned to `input.radius` (batch 6 follow-up): a password field must
|
|
@@ -8143,10 +9252,10 @@ const Arvisfy = {
|
|
|
8143
9252
|
},
|
|
8144
9253
|
textarea: {
|
|
8145
9254
|
labelColor: '{semantic.color.text}',
|
|
8146
|
-
labelSize: '{semantic.text.
|
|
8147
|
-
labelWeight: '{semantic.fontWeight.
|
|
9255
|
+
labelSize: '{semantic.text.label}',
|
|
9256
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8148
9257
|
background: '{semantic.color.surface}',
|
|
8149
|
-
color: '{semantic.color.
|
|
9258
|
+
color: '{semantic.color.textSecondary}',
|
|
8150
9259
|
placeholder: '{semantic.color.textMuted}',
|
|
8151
9260
|
borderColor: '{semantic.color.border}',
|
|
8152
9261
|
borderFocusColor: '{semantic.color.focus}',
|
|
@@ -8197,8 +9306,57 @@ const Arvisfy = {
|
|
|
8197
9306
|
controlShadow: '{semantic.shadow.subtle}',
|
|
8198
9307
|
thumbnailRadius: '{semantic.radius.surface}',
|
|
8199
9308
|
thumbnailShadow: '{semantic.shadow.overlay}',
|
|
9309
|
+
thumbnailBorderWidth: '{semantic.border.thin}',
|
|
8200
9310
|
overlayColor: '{semantic.color.surface}',
|
|
8201
|
-
transitionDuration: '{semantic.motion.fast}'
|
|
9311
|
+
transitionDuration: '{semantic.motion.fast}',
|
|
9312
|
+
// --- layout="cover" (AVF-8) ---
|
|
9313
|
+
columnGap: '{semantic.space.xxl}',
|
|
9314
|
+
// AVF-19 (was `semantic.space.lg`/16px): dropped to `md` (12px). Still
|
|
9315
|
+
// the gap `grid-auto-rows` in the component's stylesheet subtracts
|
|
9316
|
+
// between reserved rows (AVF-29: each row's height is
|
|
9317
|
+
// `(emptyMinHeight - (rows - 1) * stackGap) / rows`), not a value
|
|
9318
|
+
// chosen to hit a fixed pixel target the way it used to be — the
|
|
9319
|
+
// 280px arithmetic this comment previously cited (the old
|
|
9320
|
+
// `thumbnailSize` token, since retired) no longer holds now that the
|
|
9321
|
+
// filled state's total height is pinned to `emptyMinHeight` directly
|
|
9322
|
+
// instead of being computed from a per-row thumbnail size and this
|
|
9323
|
+
// gap. 10px (the prototype's gap) still doesn't exist in
|
|
9324
|
+
// `primitive.space` (see the scale above), so `md` remains the
|
|
9325
|
+
// closest available step.
|
|
9326
|
+
stackGap: '{semantic.space.md}',
|
|
9327
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
9328
|
+
coverBackground: '{semantic.color.surfaceMuted}',
|
|
9329
|
+
emptyMinHeight: '{semantic.size.emptyMinHeight}',
|
|
9330
|
+
emptyGap: '{semantic.space.lg}',
|
|
9331
|
+
emptyIconCircleBackground: '{semantic.color.surfaceMuted}',
|
|
9332
|
+
emptyIconCircleSize: '{semantic.size.emptyIconCircleSize}',
|
|
9333
|
+
emptyIconSize: '{semantic.size.emptyIconSize}',
|
|
9334
|
+
emptyTitleColor: '{semantic.color.text}',
|
|
9335
|
+
emptyTitleFontSize: '{semantic.text.headingSm}',
|
|
9336
|
+
emptyTitleFontWeight: '{semantic.fontWeight.bold}',
|
|
9337
|
+
emptySubtitleColor: '{semantic.color.textMuted}',
|
|
9338
|
+
emptySubtitleFontSize: '{semantic.text.label}',
|
|
9339
|
+
addIconSize: '{semantic.size.addIconSize}',
|
|
9340
|
+
addTitleColor: '{semantic.color.text}',
|
|
9341
|
+
addTitleFontSize: '{semantic.text.label}',
|
|
9342
|
+
addSubtitleColor: '{semantic.color.textMuted}',
|
|
9343
|
+
addSubtitleFontSize: '{semantic.text.xs}',
|
|
9344
|
+
chipBackground: '{semantic.color.chipBackground}',
|
|
9345
|
+
chipBackgroundHover: '{semantic.color.chipBackgroundHover}',
|
|
9346
|
+
chipColor: '{semantic.color.emphasisForeground}',
|
|
9347
|
+
chipRadius: '{semantic.radius.pill}',
|
|
9348
|
+
chipPaddingBlock: '{semantic.space.sm}',
|
|
9349
|
+
chipPaddingInline: '{semantic.space.lg}',
|
|
9350
|
+
chipFontSize: '{semantic.text.label}',
|
|
9351
|
+
chipFontWeight: '{semantic.fontWeight.medium}',
|
|
9352
|
+
chipOffset: '{semantic.space.md}',
|
|
9353
|
+
// Limit-exceeded inline notice (AVF-16). Reuses the pre-existing
|
|
9354
|
+
// `status.warningText` pair (defined in both color schemes but,
|
|
9355
|
+
// before this, consumed by no component) rather than
|
|
9356
|
+
// `warningSoftForeground` — that one is tuned for an icon on a soft
|
|
9357
|
+
// background (~3:1), not plain text on `surface`, where it falls
|
|
9358
|
+
// short of the 4.5:1 AA text minimum.
|
|
9359
|
+
warningTextColor: '{semantic.status.warningText}'
|
|
8202
9360
|
},
|
|
8203
9361
|
scheduleEvent: {
|
|
8204
9362
|
background: '{semantic.color.surfaceEmphasis}',
|
|
@@ -8301,7 +9459,12 @@ const Arvisfy = {
|
|
|
8301
9459
|
softBackground: '{semantic.color.surfaceMuted}',
|
|
8302
9460
|
color: '{semantic.color.text}',
|
|
8303
9461
|
borderColor: '{semantic.color.border}',
|
|
8304
|
-
|
|
9462
|
+
// Batch 10: the default card relies on `shadow` for separation, not a
|
|
9463
|
+
// visible border — matching the prototype's borderless card shell.
|
|
9464
|
+
// Callers that still want a hairline (e.g. an `outline` variant) use
|
|
9465
|
+
// `outlineBorderWidth` below.
|
|
9466
|
+
borderWidth: '{semantic.border.none}',
|
|
9467
|
+
outlineBorderWidth: '{semantic.border.thin}',
|
|
8305
9468
|
dividerColor: '{semantic.color.border}',
|
|
8306
9469
|
dividerWidth: '{semantic.border.thin}',
|
|
8307
9470
|
radius: '{semantic.radius.surface}',
|
|
@@ -8366,6 +9529,16 @@ const Arvisfy = {
|
|
|
8366
9529
|
pillFontWeight: '{semantic.fontWeight.medium}',
|
|
8367
9530
|
pillPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
8368
9531
|
pillPaddingInline: '{semantic.size.chipPillPaddingInline}',
|
|
9532
|
+
// `size="choice"` (batch 9): a rectangular selection chip measured on
|
|
9533
|
+
// the prototype's sales-channel picker (e.g. "Tienda online",
|
|
9534
|
+
// "WhatsApp Business"). The `md` default stays the pill/round shape
|
|
9535
|
+
// above — this is an additional size, not a replacement. Colors are
|
|
9536
|
+
// unchanged; only shape/typography tokens are added.
|
|
9537
|
+
choiceRadius: '{semantic.radius.field}',
|
|
9538
|
+
choiceMinHeight: '{semantic.size.chipChoiceMinHeight}',
|
|
9539
|
+
choicePaddingInline: '{semantic.size.chipChoicePaddingInline}',
|
|
9540
|
+
choiceFontSize: '{semantic.text.label}',
|
|
9541
|
+
choiceFontWeight: '{semantic.fontWeight.bold}',
|
|
8369
9542
|
transitionDuration: '{semantic.motion.fast}'
|
|
8370
9543
|
},
|
|
8371
9544
|
drawer: {
|
|
@@ -8439,8 +9612,8 @@ const Arvisfy = {
|
|
|
8439
9612
|
dropdown: {
|
|
8440
9613
|
labelGap: '{semantic.space.sm}',
|
|
8441
9614
|
labelColor: '{semantic.color.text}',
|
|
8442
|
-
labelSize: '{semantic.text.
|
|
8443
|
-
labelWeight: '{semantic.fontWeight.
|
|
9615
|
+
labelSize: '{semantic.text.label}',
|
|
9616
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8444
9617
|
triggerMinHeight: '{semantic.size.controlMd}',
|
|
8445
9618
|
triggerPaddingBlock: '{semantic.space.sm}',
|
|
8446
9619
|
triggerPaddingInline: '{semantic.space.md}',
|
|
@@ -8451,7 +9624,10 @@ const Arvisfy = {
|
|
|
8451
9624
|
triggerBorderFocusColor: '{semantic.color.focus}',
|
|
8452
9625
|
triggerRadius: '{semantic.radius.control}',
|
|
8453
9626
|
triggerBackground: '{semantic.color.surface}',
|
|
8454
|
-
|
|
9627
|
+
// Selected-value text (batch 9), the dropdown's equivalent of an
|
|
9628
|
+
// input's typed text — distinct from `menuColor`/`searchColor`, which
|
|
9629
|
+
// stay on `semantic.color.text`.
|
|
9630
|
+
triggerColor: '{semantic.color.textSecondary}',
|
|
8455
9631
|
triggerPlaceholderColor: '{semantic.color.textMuted}',
|
|
8456
9632
|
triggerFocusShadow: '{semantic.shadow.focus}',
|
|
8457
9633
|
triggerDisabledBackground: '{semantic.color.surfaceMuted}',
|
|
@@ -8491,6 +9667,12 @@ const Arvisfy = {
|
|
|
8491
9667
|
optionSelectedBackground: '{semantic.color.surfaceMuted}',
|
|
8492
9668
|
optionSelectedColor: '{semantic.color.primary}',
|
|
8493
9669
|
optionSelectedWeight: '{semantic.fontWeight.semibold}',
|
|
9670
|
+
dotSize: '{semantic.size.timelineDot}',
|
|
9671
|
+
dotNeutral: '{semantic.status.neutralText}',
|
|
9672
|
+
dotPrimary: '{semantic.color.primary}',
|
|
9673
|
+
dotSuccess: '{semantic.status.success}',
|
|
9674
|
+
dotWarning: '{semantic.status.warning}',
|
|
9675
|
+
dotDanger: '{semantic.status.danger}',
|
|
8494
9676
|
emptyPadding: '{semantic.space.md}',
|
|
8495
9677
|
emptyColor: '{semantic.color.textMuted}',
|
|
8496
9678
|
emptySize: '{semantic.text.sm}',
|
|
@@ -8581,7 +9763,8 @@ const Arvisfy = {
|
|
|
8581
9763
|
gap: '{semantic.space.sm}',
|
|
8582
9764
|
dayColumns: '{semantic.layout.scheduleDay}',
|
|
8583
9765
|
weekColumns: '{semantic.layout.scheduleWeek}',
|
|
8584
|
-
workweekColumns: '{semantic.layout.scheduleWorkweek}'
|
|
9766
|
+
workweekColumns: '{semantic.layout.scheduleWorkweek}',
|
|
9767
|
+
slotHeight: '{semantic.layout.scheduleSlotHeight}'
|
|
8585
9768
|
},
|
|
8586
9769
|
tabs: {
|
|
8587
9770
|
gap: '{semantic.space.sm}',
|
|
@@ -8680,16 +9863,37 @@ const Arvisfy = {
|
|
|
8680
9863
|
counterFontWeight: '{semantic.fontWeight.semibold}'
|
|
8681
9864
|
},
|
|
8682
9865
|
emptyState: {
|
|
8683
|
-
|
|
8684
|
-
|
|
8685
|
-
|
|
8686
|
-
|
|
9866
|
+
// Batch 10: `lg`/`md`/`sm` sizes with an icon circle, proto 1171-1177
|
|
9867
|
+
// (lg), 1030-1036 (md), 1593-1599 (sm).
|
|
9868
|
+
gap: '{semantic.size.emptyStateGap}',
|
|
9869
|
+
gapSm: '{semantic.space.md}',
|
|
9870
|
+
textGap: '{semantic.space.xs}',
|
|
9871
|
+
paddingBlock: '{semantic.size.emptyStatePaddingBlockMd}',
|
|
9872
|
+
paddingBlockLg: '{semantic.size.emptyStatePaddingBlockLg}',
|
|
9873
|
+
paddingBlockSm: '{semantic.size.emptyStatePaddingBlockSm}',
|
|
9874
|
+
paddingInline: '{semantic.space.xl}',
|
|
9875
|
+
paddingInlineSm: '{semantic.space.md}',
|
|
9876
|
+
iconSize: '{semantic.size.emptyStateIconMd}',
|
|
9877
|
+
iconSizeLg: '{semantic.size.emptyStateIconLg}',
|
|
9878
|
+
iconSizeSm: '{semantic.size.emptyStateIconSm}',
|
|
9879
|
+
iconBackground: '{semantic.color.emptyStateIconBackground}',
|
|
9880
|
+
iconColor: '{semantic.color.emptyStateIconColor}',
|
|
9881
|
+
glyphSizeLg: '{semantic.size.emptyStateGlyphLg}',
|
|
9882
|
+
glyphSizeMd: '{semantic.size.emptyStateGlyphMd}',
|
|
9883
|
+
glyphSizeSm: '{semantic.size.emptyStateGlyphSm}',
|
|
9884
|
+
maxWidthLg: '{semantic.size.emptyStateMaxWidthLg}',
|
|
9885
|
+
maxWidthMd: '{semantic.size.emptyStateMaxWidthMd}',
|
|
9886
|
+
maxWidthSm: '{semantic.size.emptyStateMaxWidthSm}',
|
|
8687
9887
|
titleColor: '{semantic.color.text}',
|
|
8688
|
-
titleFontSize: '{semantic.text.
|
|
8689
|
-
|
|
8690
|
-
|
|
9888
|
+
titleFontSize: '{semantic.text.headingSm}',
|
|
9889
|
+
titleFontSizeLg: '{semantic.text.headingMd}',
|
|
9890
|
+
titleFontSizeSm: '{semantic.text.headingXs}',
|
|
9891
|
+
titleFontWeight: '{semantic.fontWeight.bold}',
|
|
8691
9892
|
descriptionColor: '{semantic.color.textMuted}',
|
|
8692
|
-
descriptionFontSize: '{semantic.text.
|
|
9893
|
+
descriptionFontSize: '{semantic.text.label}',
|
|
9894
|
+
descriptionFontSizeLg: '{semantic.text.control}',
|
|
9895
|
+
descriptionFontSizeSm: '{semantic.text.xs}',
|
|
9896
|
+
descriptionFontWeight: '{semantic.fontWeight.regular}',
|
|
8693
9897
|
actionsGap: '{semantic.space.sm}'
|
|
8694
9898
|
},
|
|
8695
9899
|
menu: {
|
|
@@ -8800,7 +10004,9 @@ const Arvisfy = {
|
|
|
8800
10004
|
color: '{semantic.color.text}',
|
|
8801
10005
|
borderColor: '{semantic.color.border}',
|
|
8802
10006
|
borderColorHover: '{semantic.color.borderStrong}',
|
|
8803
|
-
|
|
10007
|
+
// Batch 10: borderless by default, matching the redesigned card shell
|
|
10008
|
+
// — see `card.borderWidth` above.
|
|
10009
|
+
borderWidth: '{semantic.border.none}',
|
|
8804
10010
|
radius: '{semantic.radius.surface}',
|
|
8805
10011
|
radiusCompact: '{semantic.radius.overlay}',
|
|
8806
10012
|
shadow: '{semantic.shadow.subtle}',
|
|
@@ -8826,8 +10032,46 @@ const Arvisfy = {
|
|
|
8826
10032
|
suffixColor: '{semantic.color.textMuted}',
|
|
8827
10033
|
suffixFontSize: '{semantic.text.lg}',
|
|
8828
10034
|
iconSize: '{semantic.size.statCardIconSize}',
|
|
8829
|
-
|
|
10035
|
+
// Batch 10: the icon badge moved from a circle to the shared field
|
|
10036
|
+
// radius (10px) — the tile variant below keeps its own circular
|
|
10037
|
+
// `iconRadiusTile`.
|
|
10038
|
+
iconRadius: '{semantic.radius.field}',
|
|
8830
10039
|
iconColor: '{semantic.color.textMuted}',
|
|
10040
|
+
iconGlyphSize: '{semantic.size.statCardIconGlyphSize}',
|
|
10041
|
+
// `variant="tile"` (batch 10), proto 1069-1113: a compact KPI tile
|
|
10042
|
+
// layout with its own padding/gap/icon/value/delta/hint scale.
|
|
10043
|
+
radiusTile: '{semantic.radius.tile}',
|
|
10044
|
+
paddingBlockTile: '{semantic.size.statTilePaddingBlock}',
|
|
10045
|
+
paddingInlineTile: '{semantic.size.statTilePaddingInline}',
|
|
10046
|
+
gapTile: '{semantic.size.statTileGap}',
|
|
10047
|
+
columnGapTile: '{semantic.size.statTileColumnGap}',
|
|
10048
|
+
iconSizeTile: '{semantic.size.statTileIconSize}',
|
|
10049
|
+
iconRadiusTile: '{semantic.radius.round}',
|
|
10050
|
+
labelColorTile: '{semantic.color.textMutedStrong}',
|
|
10051
|
+
labelFontSizeTile: '{semantic.text.label}',
|
|
10052
|
+
labelFontWeightTile: '{semantic.fontWeight.medium}',
|
|
10053
|
+
valueFontFamilyTile: '{semantic.font.sans}',
|
|
10054
|
+
valueFontSizeTile: '{semantic.text.xl}',
|
|
10055
|
+
valueLetterSpacingTile: '{semantic.letterSpacing.normal}',
|
|
10056
|
+
deltaFontSizeTile: '{semantic.text.xs}',
|
|
10057
|
+
deltaFontWeightTile: '{semantic.fontWeight.bold}',
|
|
10058
|
+
// `*Tile` delta/icon tones reference the `*TileTint` status family
|
|
10059
|
+
// added above, kept distinct from the base card's `*Soft` tones.
|
|
10060
|
+
deltaUpColorTile: '{semantic.status.successTileTintForeground}',
|
|
10061
|
+
deltaDownColorTile: '{semantic.status.dangerTileTintForeground}',
|
|
10062
|
+
deltaNeutralColorTile: '{semantic.color.textMuted}',
|
|
10063
|
+
hintFontSizeTile: '{semantic.text.caption}',
|
|
10064
|
+
hintFontWeightTile: '{semantic.fontWeight.medium}',
|
|
10065
|
+
iconInfoBackground: '{semantic.status.infoTileTint}',
|
|
10066
|
+
iconInfoColor: '{semantic.status.infoTileTintForeground}',
|
|
10067
|
+
iconSuccessBackground: '{semantic.status.successTileTint}',
|
|
10068
|
+
iconSuccessColor: '{semantic.status.successTileTintForeground}',
|
|
10069
|
+
iconWarningBackground: '{semantic.status.warningTileTint}',
|
|
10070
|
+
iconWarningColor: '{semantic.status.warningTileTintForeground}',
|
|
10071
|
+
iconDangerBackground: '{semantic.status.dangerTileTint}',
|
|
10072
|
+
iconDangerColor: '{semantic.status.dangerTileTintForeground}',
|
|
10073
|
+
iconNeutralBackground: '{semantic.color.surfaceMuted}',
|
|
10074
|
+
iconNeutralColor: '{semantic.color.textMuted}',
|
|
8831
10075
|
deltaFontSize: '{semantic.text.xs}',
|
|
8832
10076
|
deltaFontWeight: '{semantic.fontWeight.semibold}',
|
|
8833
10077
|
deltaPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
@@ -8843,6 +10087,12 @@ const Arvisfy = {
|
|
|
8843
10087
|
deltaLabelColor: '{semantic.color.textMuted}',
|
|
8844
10088
|
hintColor: '{semantic.color.textMuted}',
|
|
8845
10089
|
hintFontSize: '{semantic.text.xs}',
|
|
10090
|
+
// `hintTone`: colors the hint independently of the delta pill, reusing
|
|
10091
|
+
// the same status-soft-foreground family as `valueTone`.
|
|
10092
|
+
hintToneSuccessColor: '{semantic.status.successSoftForeground}',
|
|
10093
|
+
hintToneWarningColor: '{semantic.status.warningSoftForeground}',
|
|
10094
|
+
hintToneDangerColor: '{semantic.status.dangerSoftForeground}',
|
|
10095
|
+
hintToneInfoColor: '{semantic.status.infoSoftForeground}',
|
|
8846
10096
|
metaGap: '{semantic.space.sm}',
|
|
8847
10097
|
footerBorderColor: '{semantic.color.border}',
|
|
8848
10098
|
footerPaddingBlock: '{semantic.space.sm}',
|
|
@@ -8947,7 +10197,46 @@ function provideNsTheme(options = {}) {
|
|
|
8947
10197
|
]);
|
|
8948
10198
|
}
|
|
8949
10199
|
|
|
10200
|
+
/**
|
|
10201
|
+
* Registry of theme tokens that used to be part of the Arvisfy preset and no
|
|
10202
|
+
* longer have any effect on rendering. `NsTokenTree` has an open index
|
|
10203
|
+
* signature and `mergeObjects` (below) merges unknown keys in without
|
|
10204
|
+
* complaint, so a consumer overriding a retired token gets no type error and
|
|
10205
|
+
* no `validateNsPreset` error -- the override is silently inert.
|
|
10206
|
+
* `validateNsPreset` walks this map against the resolved preset and emits a
|
|
10207
|
+
* `console.warn` for every retired path still present, so the override at
|
|
10208
|
+
* least surfaces instead of doing nothing invisibly.
|
|
10209
|
+
*
|
|
10210
|
+
* Keys are full token paths, one of:
|
|
10211
|
+
* - `primitive.<path>`
|
|
10212
|
+
* - `semantic.common.<path>`
|
|
10213
|
+
* - `semantic.colorScheme.<light|dark>.<path>`
|
|
10214
|
+
* - `components.<path>`
|
|
10215
|
+
*
|
|
10216
|
+
* Values are the exact message logged for that path. Do not include a
|
|
10217
|
+
* version number in a message: the published package version and this
|
|
10218
|
+
* source's `package.json` version can diverge, so a hardcoded version would
|
|
10219
|
+
* go stale.
|
|
10220
|
+
*
|
|
10221
|
+
* This lives here rather than in its own file: `packages/mcp` transpiles
|
|
10222
|
+
* this module in isolation (`extract-tokens.mjs`'s `assertNoValueImports`)
|
|
10223
|
+
* and cannot resolve a relative value import from a sibling module at that
|
|
10224
|
+
* point, so a second file imported here for its data would break
|
|
10225
|
+
* `nx run mcp:build-data`.
|
|
10226
|
+
*/
|
|
10227
|
+
const NS_RETIRED_TOKENS = {
|
|
10228
|
+
'components.imageUpload.thumbnailSize': '[@ng-solid/design-system] Theme token `components.imageUpload.thumbnailSize` is retired and no longer has any effect. `components.imageUpload.emptyMinHeight` now sizes `ns-image-upload[layout="cover"]` in both its empty and filled states. Remove this override.'
|
|
10229
|
+
};
|
|
8950
10230
|
const TOKEN_KEY = /^(?:[a-z][a-zA-Z0-9]*|[0-9]+)$/;
|
|
10231
|
+
// Longest prefix first: `semantic.colorScheme.light.` must win over a naive
|
|
10232
|
+
// `semantic.` match before `semantic.common.` gets a chance.
|
|
10233
|
+
const RETIRED_TOKEN_TIERS = [
|
|
10234
|
+
['semantic.colorScheme.light.', 'semanticLight'],
|
|
10235
|
+
['semantic.colorScheme.dark.', 'semanticDark'],
|
|
10236
|
+
['semantic.common.', 'semanticCommon'],
|
|
10237
|
+
['components.', 'components'],
|
|
10238
|
+
['primitive.', 'primitive']
|
|
10239
|
+
];
|
|
8951
10240
|
const UNSAFE_CSS_VALUE = /[;{}]/;
|
|
8952
10241
|
const PRIMITIVE_REFERENCE = /^\{primitive\.([a-zA-Z0-9.]+)\}$/;
|
|
8953
10242
|
const SEMANTIC_REFERENCE = /^\{semantic\.([a-zA-Z0-9.]+)\}$/;
|
|
@@ -8989,6 +10278,26 @@ function validateNsPreset(preset) {
|
|
|
8989
10278
|
throw new Error(`Component token components.${path} must reference a common semantic token or one available in both color schemes`);
|
|
8990
10279
|
}
|
|
8991
10280
|
}
|
|
10281
|
+
warnRetiredTokens({
|
|
10282
|
+
primitive: primitives,
|
|
10283
|
+
semanticCommon,
|
|
10284
|
+
semanticLight,
|
|
10285
|
+
semanticDark,
|
|
10286
|
+
components
|
|
10287
|
+
});
|
|
10288
|
+
}
|
|
10289
|
+
function warnRetiredTokens(tokensByTier) {
|
|
10290
|
+
for (const [retiredPath, message] of Object.entries(NS_RETIRED_TOKENS)) {
|
|
10291
|
+
const match = RETIRED_TOKEN_TIERS.find(([prefix]) => retiredPath.startsWith(prefix));
|
|
10292
|
+
if (!match) {
|
|
10293
|
+
continue;
|
|
10294
|
+
}
|
|
10295
|
+
const [prefix, tier] = match;
|
|
10296
|
+
const relativePath = retiredPath.slice(prefix.length);
|
|
10297
|
+
if (tokensByTier[tier].has(relativePath)) {
|
|
10298
|
+
console.warn(message);
|
|
10299
|
+
}
|
|
10300
|
+
}
|
|
8992
10301
|
}
|
|
8993
10302
|
function flattenTokens(tree) {
|
|
8994
10303
|
const tokens = new Map();
|
|
@@ -9959,5 +11268,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
9959
11268
|
* Generated bundle index. Do not edit.
|
|
9960
11269
|
*/
|
|
9961
11270
|
|
|
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 };
|
|
11271
|
+
export { Arvisfy, NS_EDITOR_TOOLS_DEFAULT, NS_RETIRED_TOKENS, 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, NsEditorImageComponent, 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 };
|
|
9963
11272
|
//# sourceMappingURL=ng-solid-design-system.mjs.map
|