@ng-solid/design-system 22.3.0 → 22.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/fesm2022/ng-solid-design-system.mjs +1561 -316
- 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 +257 -23
|
@@ -639,7 +639,7 @@ class NsButtonComponent {
|
|
|
639
639
|
this.control().nativeElement.focus();
|
|
640
640
|
}
|
|
641
641
|
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: `
|
|
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'", "class.ns-button--dark": "variant() === 'dark'" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
643
643
|
<button
|
|
644
644
|
#control
|
|
645
645
|
class="ns-button__control"
|
|
@@ -666,7 +666,7 @@ class NsButtonComponent {
|
|
|
666
666
|
}
|
|
667
667
|
<ng-content />
|
|
668
668
|
</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 });
|
|
669
|
+
`, 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--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--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
670
|
}
|
|
671
671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, decorators: [{
|
|
672
672
|
type: Component,
|
|
@@ -712,8 +712,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
712
712
|
'[class.ns-button--secondary]': "variant() === 'secondary'",
|
|
713
713
|
'[class.ns-button--tertiary]': "variant() === 'tertiary'",
|
|
714
714
|
'[class.ns-button--success]': "variant() === 'success'",
|
|
715
|
-
'[class.ns-button--danger]': "variant() === 'danger'"
|
|
716
|
-
|
|
715
|
+
'[class.ns-button--danger]': "variant() === 'danger'",
|
|
716
|
+
'[class.ns-button--dark]': "variant() === 'dark'"
|
|
717
|
+
}, 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--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--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"] }]
|
|
717
718
|
}], 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 }] }] } });
|
|
718
719
|
|
|
719
720
|
const NAVIGATION_KEYS$2 = [
|
|
@@ -795,7 +796,7 @@ class NsCardComponent {
|
|
|
795
796
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
796
797
|
variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
797
798
|
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 });
|
|
799
|
+
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
800
|
}
|
|
800
801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardComponent, decorators: [{
|
|
801
802
|
type: Component,
|
|
@@ -806,31 +807,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
806
807
|
'[class.ns-card--soft]': "variant() === 'soft'",
|
|
807
808
|
'[class.ns-card--outline]': "variant() === 'outline'",
|
|
808
809
|
'[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"] }]
|
|
810
|
+
}, 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
811
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
811
812
|
class NsCardHeaderComponent {
|
|
812
813
|
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 });
|
|
814
|
+
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
815
|
}
|
|
815
816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardHeaderComponent, decorators: [{
|
|
816
817
|
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"] }]
|
|
818
|
+
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
819
|
}] });
|
|
819
820
|
class NsCardBodyComponent {
|
|
820
821
|
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 });
|
|
822
|
+
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
823
|
}
|
|
823
824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardBodyComponent, decorators: [{
|
|
824
825
|
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"] }]
|
|
826
|
+
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
827
|
}] });
|
|
827
828
|
class NsCardFooterComponent {
|
|
828
829
|
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 });
|
|
830
|
+
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
831
|
}
|
|
831
832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCardFooterComponent, decorators: [{
|
|
832
833
|
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"] }]
|
|
834
|
+
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
835
|
}] });
|
|
835
836
|
|
|
836
837
|
class NsChipComponent {
|
|
@@ -842,7 +843,7 @@ class NsChipComponent {
|
|
|
842
843
|
dismissLabel = input('Remove', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
|
|
843
844
|
removed = output();
|
|
844
845
|
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: `
|
|
846
|
+
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
847
|
<span class="ns-chip__label"><ng-content /></span>
|
|
847
848
|
@if (dismissible()) {
|
|
848
849
|
<button
|
|
@@ -855,7 +856,7 @@ class NsChipComponent {
|
|
|
855
856
|
×
|
|
856
857
|
</button>
|
|
857
858
|
}
|
|
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 });
|
|
859
|
+
`, 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
860
|
}
|
|
860
861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsChipComponent, decorators: [{
|
|
861
862
|
type: Component,
|
|
@@ -887,8 +888,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
887
888
|
'[class.ns-chip--info]': "color() === 'info'",
|
|
888
889
|
'[class.ns-chip--selected]': "color() === 'selected'",
|
|
889
890
|
'[class.ns-chip--md]': "size() === 'md'",
|
|
890
|
-
'[class.ns-chip--pill]': "size() === 'pill'"
|
|
891
|
-
|
|
891
|
+
'[class.ns-chip--pill]': "size() === 'pill'",
|
|
892
|
+
'[class.ns-chip--choice]': "size() === 'choice'"
|
|
893
|
+
}, 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
894
|
}], 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
895
|
|
|
894
896
|
class NsCollectionController {
|
|
@@ -950,18 +952,20 @@ class NsEmptyStateComponent {
|
|
|
950
952
|
description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
951
953
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
952
954
|
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: `
|
|
955
|
+
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
956
|
<span class="ns-empty-state__icon"
|
|
955
957
|
><ng-content select="[empty-state-icon]"
|
|
956
958
|
/></span>
|
|
957
|
-
<
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
959
|
+
<div class="ns-empty-state__text">
|
|
960
|
+
<p class="ns-empty-state__title">{{ title() }}</p>
|
|
961
|
+
@if (description()) {
|
|
962
|
+
<p class="ns-empty-state__description">{{ description() }}</p>
|
|
963
|
+
}
|
|
964
|
+
</div>
|
|
961
965
|
<div class="ns-empty-state__actions">
|
|
962
966
|
<ng-content select="[empty-state-actions]" />
|
|
963
967
|
</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-
|
|
968
|
+
`, 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
969
|
}
|
|
966
970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEmptyStateComponent, decorators: [{
|
|
967
971
|
type: Component,
|
|
@@ -969,18 +973,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
969
973
|
<span class="ns-empty-state__icon"
|
|
970
974
|
><ng-content select="[empty-state-icon]"
|
|
971
975
|
/></span>
|
|
972
|
-
<
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
+
<div class="ns-empty-state__text">
|
|
977
|
+
<p class="ns-empty-state__title">{{ title() }}</p>
|
|
978
|
+
@if (description()) {
|
|
979
|
+
<p class="ns-empty-state__description">{{ description() }}</p>
|
|
980
|
+
}
|
|
981
|
+
</div>
|
|
976
982
|
<div class="ns-empty-state__actions">
|
|
977
983
|
<ng-content select="[empty-state-actions]" />
|
|
978
984
|
</div>
|
|
979
985
|
`, host: {
|
|
980
986
|
'[class.ns-empty-state]': 'true',
|
|
981
987
|
'[class.ns-empty-state--sm]': "size() === 'sm'",
|
|
982
|
-
'[class.ns-empty-state--md]': "size() === 'md'"
|
|
983
|
-
|
|
988
|
+
'[class.ns-empty-state--md]': "size() === 'md'",
|
|
989
|
+
'[class.ns-empty-state--lg]': "size() === 'lg'"
|
|
990
|
+
}, 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
991
|
}], 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
992
|
|
|
986
993
|
const VIEWPORT_GUTTER = 8;
|
|
@@ -3470,7 +3477,7 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3470
3477
|
useExisting: NsDropdownComponent,
|
|
3471
3478
|
multi: true
|
|
3472
3479
|
}
|
|
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 });
|
|
3480
|
+
], 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);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 });
|
|
3474
3481
|
}
|
|
3475
3482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
|
|
3476
3483
|
type: Component,
|
|
@@ -3486,7 +3493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3486
3493
|
useExisting: NsDropdownComponent,
|
|
3487
3494
|
multi: true
|
|
3488
3495
|
}
|
|
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"] }]
|
|
3496
|
+
], 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);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"] }]
|
|
3490
3497
|
}], 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
3498
|
type: ViewChild,
|
|
3492
3499
|
args: ['trigger']
|
|
@@ -3617,11 +3624,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3617
3624
|
/** Visual-only composition primitive. Projected controls own their form state. */
|
|
3618
3625
|
class NsInputGroupComponent {
|
|
3619
3626
|
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-
|
|
3627
|
+
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
3628
|
}
|
|
3622
3629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, decorators: [{
|
|
3623
3630
|
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-
|
|
3631
|
+
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
3632
|
}] });
|
|
3626
3633
|
|
|
3627
3634
|
class NsInputGroupAddonComponent {
|
|
@@ -3643,9 +3650,19 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3643
3650
|
currency = input(undefined, ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
|
|
3644
3651
|
format = input({}, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
3645
3652
|
displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
3653
|
+
currencyPrefix = computed(() => {
|
|
3654
|
+
if (!this.currency()) {
|
|
3655
|
+
return undefined;
|
|
3656
|
+
}
|
|
3657
|
+
return this.formatter
|
|
3658
|
+
.formatToParts(0)
|
|
3659
|
+
.find((part) => part.type === 'currency')?.value;
|
|
3660
|
+
}, ...(ngDevMode ? [{ debugName: "currencyPrefix" }] : /* istanbul ignore next */ []));
|
|
3646
3661
|
writeValue(value) {
|
|
3647
3662
|
super.writeValue(value);
|
|
3648
|
-
this.displayValue.set(value === null || value === undefined
|
|
3663
|
+
this.displayValue.set(value === null || value === undefined
|
|
3664
|
+
? ''
|
|
3665
|
+
: this.formatDisplayValue(value));
|
|
3649
3666
|
}
|
|
3650
3667
|
onInput(text) {
|
|
3651
3668
|
this.displayValue.set(text);
|
|
@@ -3661,7 +3678,9 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3661
3678
|
}
|
|
3662
3679
|
formatValue() {
|
|
3663
3680
|
const value = this.value();
|
|
3664
|
-
this.displayValue.set(value === null || value === undefined
|
|
3681
|
+
this.displayValue.set(value === null || value === undefined
|
|
3682
|
+
? ''
|
|
3683
|
+
: this.formatDisplayValue(value));
|
|
3665
3684
|
}
|
|
3666
3685
|
onKeydown(event) {
|
|
3667
3686
|
if (this.disabled() || this.readonly())
|
|
@@ -3700,6 +3719,17 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3700
3719
|
: {})
|
|
3701
3720
|
});
|
|
3702
3721
|
}
|
|
3722
|
+
formatDisplayValue(value) {
|
|
3723
|
+
if (!this.currency()) {
|
|
3724
|
+
return this.formatter.format(value);
|
|
3725
|
+
}
|
|
3726
|
+
return this.formatter
|
|
3727
|
+
.formatToParts(value)
|
|
3728
|
+
.filter((part) => part.type !== 'currency')
|
|
3729
|
+
.map((part) => part.value)
|
|
3730
|
+
.join('')
|
|
3731
|
+
.trim();
|
|
3732
|
+
}
|
|
3703
3733
|
parse(text) {
|
|
3704
3734
|
const parts = this.formatter.formatToParts(12345.6);
|
|
3705
3735
|
const group = parts.find((part) => part.type === 'group')?.value ?? ',';
|
|
@@ -3732,28 +3762,36 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3732
3762
|
</label>
|
|
3733
3763
|
}
|
|
3734
3764
|
<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
|
-
|
|
3765
|
+
<div class="ns-input-number__field">
|
|
3766
|
+
@if (currencyPrefix(); as prefix) {
|
|
3767
|
+
<span class="ns-input-number__prefix" aria-hidden="true">{{
|
|
3768
|
+
prefix
|
|
3769
|
+
}}</span>
|
|
3770
|
+
}
|
|
3771
|
+
<input
|
|
3772
|
+
class="ns-input-number__control"
|
|
3773
|
+
type="text"
|
|
3774
|
+
inputmode="decimal"
|
|
3775
|
+
role="spinbutton"
|
|
3776
|
+
[id]="controlId()"
|
|
3777
|
+
[name]="name()"
|
|
3778
|
+
[value]="displayValue()"
|
|
3779
|
+
[placeholder]="placeholder()"
|
|
3780
|
+
(input)="onInputEvent($event)"
|
|
3781
|
+
[disabled]="disabled()"
|
|
3782
|
+
[readOnly]="readonly()"
|
|
3783
|
+
[required]="required()"
|
|
3784
|
+
[attr.min]="min()"
|
|
3785
|
+
[attr.max]="max()"
|
|
3786
|
+
[attr.aria-valuemin]="min()"
|
|
3787
|
+
[attr.aria-valuemax]="max()"
|
|
3788
|
+
[attr.aria-valuenow]="value()"
|
|
3789
|
+
[attr.aria-invalid]="invalid() || null"
|
|
3790
|
+
[attr.aria-describedby]="describedBy()"
|
|
3791
|
+
(keydown)="onKeydown($event)"
|
|
3792
|
+
(blur)="formatValue(); onTouched()"
|
|
3793
|
+
/>
|
|
3794
|
+
</div>
|
|
3757
3795
|
<div class="ns-input-number__steppers" aria-hidden="true">
|
|
3758
3796
|
<button
|
|
3759
3797
|
type="button"
|
|
@@ -3781,7 +3819,7 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3781
3819
|
<p class="ns-input-number__error" [id]="errorId" role="alert">
|
|
3782
3820
|
{{ errorMessage() }}
|
|
3783
3821
|
</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-
|
|
3822
|
+
}`, 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
3823
|
}
|
|
3786
3824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputNumberComponent, decorators: [{
|
|
3787
3825
|
type: Component,
|
|
@@ -3794,28 +3832,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3794
3832
|
</label>
|
|
3795
3833
|
}
|
|
3796
3834
|
<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
|
-
|
|
3835
|
+
<div class="ns-input-number__field">
|
|
3836
|
+
@if (currencyPrefix(); as prefix) {
|
|
3837
|
+
<span class="ns-input-number__prefix" aria-hidden="true">{{
|
|
3838
|
+
prefix
|
|
3839
|
+
}}</span>
|
|
3840
|
+
}
|
|
3841
|
+
<input
|
|
3842
|
+
class="ns-input-number__control"
|
|
3843
|
+
type="text"
|
|
3844
|
+
inputmode="decimal"
|
|
3845
|
+
role="spinbutton"
|
|
3846
|
+
[id]="controlId()"
|
|
3847
|
+
[name]="name()"
|
|
3848
|
+
[value]="displayValue()"
|
|
3849
|
+
[placeholder]="placeholder()"
|
|
3850
|
+
(input)="onInputEvent($event)"
|
|
3851
|
+
[disabled]="disabled()"
|
|
3852
|
+
[readOnly]="readonly()"
|
|
3853
|
+
[required]="required()"
|
|
3854
|
+
[attr.min]="min()"
|
|
3855
|
+
[attr.max]="max()"
|
|
3856
|
+
[attr.aria-valuemin]="min()"
|
|
3857
|
+
[attr.aria-valuemax]="max()"
|
|
3858
|
+
[attr.aria-valuenow]="value()"
|
|
3859
|
+
[attr.aria-invalid]="invalid() || null"
|
|
3860
|
+
[attr.aria-describedby]="describedBy()"
|
|
3861
|
+
(keydown)="onKeydown($event)"
|
|
3862
|
+
(blur)="formatValue(); onTouched()"
|
|
3863
|
+
/>
|
|
3864
|
+
</div>
|
|
3819
3865
|
<div class="ns-input-number__steppers" aria-hidden="true">
|
|
3820
3866
|
<button
|
|
3821
3867
|
type="button"
|
|
@@ -3849,7 +3895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3849
3895
|
useExisting: forwardRef(() => NsInputNumberComponent),
|
|
3850
3896
|
multi: true
|
|
3851
3897
|
}
|
|
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-
|
|
3898
|
+
], 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
3899
|
}], 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
3900
|
|
|
3855
3901
|
class NsInputSearchComponent extends NsValueAccessor {
|
|
@@ -3866,8 +3912,10 @@ class NsInputSearchComponent extends NsValueAccessor {
|
|
|
3866
3912
|
}}</label>
|
|
3867
3913
|
}
|
|
3868
3914
|
<div class="ns-input-search__group">
|
|
3869
|
-
<span aria-hidden="true"
|
|
3870
|
-
|
|
3915
|
+
<span class="ns-input-search__icon" aria-hidden="true">
|
|
3916
|
+
<ns-icon name="search" />
|
|
3917
|
+
</span>
|
|
3918
|
+
<input
|
|
3871
3919
|
class="ns-input-search__control"
|
|
3872
3920
|
type="search"
|
|
3873
3921
|
[id]="controlId()"
|
|
@@ -3897,18 +3945,20 @@ class NsInputSearchComponent extends NsValueAccessor {
|
|
|
3897
3945
|
<p class="ns-input-search__error" [id]="errorId" role="alert">
|
|
3898
3946
|
{{ errorMessage() }}
|
|
3899
3947
|
</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:
|
|
3948
|
+
}`, 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
3949
|
}
|
|
3902
3950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputSearchComponent, decorators: [{
|
|
3903
3951
|
type: Component,
|
|
3904
|
-
args: [{ selector: 'ns-input-search', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (label()) {
|
|
3952
|
+
args: [{ selector: 'ns-input-search', standalone: true, imports: [FormsModule, NsIconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (label()) {
|
|
3905
3953
|
<label class="ns-input-search__label" [for]="controlId()">{{
|
|
3906
3954
|
label()
|
|
3907
3955
|
}}</label>
|
|
3908
3956
|
}
|
|
3909
3957
|
<div class="ns-input-search__group">
|
|
3910
|
-
<span aria-hidden="true"
|
|
3911
|
-
|
|
3958
|
+
<span class="ns-input-search__icon" aria-hidden="true">
|
|
3959
|
+
<ns-icon name="search" />
|
|
3960
|
+
</span>
|
|
3961
|
+
<input
|
|
3912
3962
|
class="ns-input-search__control"
|
|
3913
3963
|
type="search"
|
|
3914
3964
|
[id]="controlId()"
|
|
@@ -3944,7 +3994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3944
3994
|
useExisting: forwardRef(() => NsInputSearchComponent),
|
|
3945
3995
|
multi: true
|
|
3946
3996
|
}
|
|
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:
|
|
3997
|
+
], 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
3998
|
}] });
|
|
3949
3999
|
|
|
3950
4000
|
class NsRadioGroupContext {
|
|
@@ -4598,23 +4648,32 @@ class NsContentEditableComponent extends NsValueAccessor {
|
|
|
4598
4648
|
elementRef = inject(ElementRef);
|
|
4599
4649
|
renderer = inject(Renderer2);
|
|
4600
4650
|
maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), alias: 'maxlength' });
|
|
4651
|
+
/**
|
|
4652
|
+
* Character count of the rendered content, measured the same way the
|
|
4653
|
+
* `maxlength` guard below measures it (`innerText.length`) so a consumer's
|
|
4654
|
+
* counter never drifts from what actually blocks typing.
|
|
4655
|
+
*/
|
|
4656
|
+
length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
|
|
4601
4657
|
enabled = true;
|
|
4602
4658
|
writeValue(value) {
|
|
4603
4659
|
if (typeof value !== 'undefined') {
|
|
4604
4660
|
this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
|
|
4661
|
+
this.updateLength();
|
|
4605
4662
|
}
|
|
4606
4663
|
}
|
|
4607
4664
|
onInput() {
|
|
4608
4665
|
this.onChange(this.elementRef.nativeElement.innerHTML);
|
|
4666
|
+
this.updateLength();
|
|
4667
|
+
}
|
|
4668
|
+
updateLength() {
|
|
4669
|
+
this.length.set(this.elementRef.nativeElement.innerText?.length ?? 0);
|
|
4609
4670
|
}
|
|
4610
4671
|
onBlur() {
|
|
4611
4672
|
this.onTouched();
|
|
4612
4673
|
}
|
|
4613
4674
|
onKeyUp(event) {
|
|
4614
4675
|
const maxLength = this.maxLength();
|
|
4615
|
-
if (maxLength &&
|
|
4616
|
-
this.elementRef.nativeElement.innerText.length >= maxLength &&
|
|
4617
|
-
event.key !== 'Backspace') {
|
|
4676
|
+
if (maxLength && this.length() >= maxLength && event.key !== 'Backspace') {
|
|
4618
4677
|
event.preventDefault();
|
|
4619
4678
|
}
|
|
4620
4679
|
}
|
|
@@ -4629,7 +4688,7 @@ class NsContentEditableComponent extends NsValueAccessor {
|
|
|
4629
4688
|
useExisting: forwardRef(() => NsContentEditableComponent),
|
|
4630
4689
|
multi: true
|
|
4631
4690
|
}
|
|
4632
|
-
], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;display:block;
|
|
4691
|
+
], 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
4692
|
}
|
|
4634
4693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsContentEditableComponent, decorators: [{
|
|
4635
4694
|
type: Component,
|
|
@@ -4642,7 +4701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
4642
4701
|
], host: {
|
|
4643
4702
|
'[class.ns-content-editable]': 'true',
|
|
4644
4703
|
'[class.ns-content-editable--disabled]': 'disabled()'
|
|
4645
|
-
}, styles: [":host{position:relative;display:block;
|
|
4704
|
+
}, 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
4705
|
}], propDecorators: { maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], enabled: [{
|
|
4647
4706
|
type: HostBinding,
|
|
4648
4707
|
args: ['attr.contenteditable']
|
|
@@ -5015,7 +5074,12 @@ const LABELS_DEFAULT = {
|
|
|
5015
5074
|
tooltip_link: 'Tooltip',
|
|
5016
5075
|
open_new_window: 'Open link in new window',
|
|
5017
5076
|
submit_link: 'Insert',
|
|
5018
|
-
remove_color: 'Remove'
|
|
5077
|
+
remove_color: 'Remove',
|
|
5078
|
+
insert_image: 'Insert Image',
|
|
5079
|
+
close_image: 'Close image form',
|
|
5080
|
+
image_url: 'Paste the image URL',
|
|
5081
|
+
image_alt: 'Alternative text',
|
|
5082
|
+
submit_image: 'Insert'
|
|
5019
5083
|
};
|
|
5020
5084
|
class Labels {
|
|
5021
5085
|
storage = LABELS_DEFAULT;
|
|
@@ -5028,6 +5092,22 @@ class Labels {
|
|
|
5028
5092
|
}
|
|
5029
5093
|
|
|
5030
5094
|
const NS_EDITOR_SETUP = new InjectionToken('NsEditorSetup');
|
|
5095
|
+
/** Character entities used to neutralize markup when a value is interpolated into HTML. */
|
|
5096
|
+
const HTML_ESCAPES = {
|
|
5097
|
+
'&': '&',
|
|
5098
|
+
'<': '<',
|
|
5099
|
+
'>': '>',
|
|
5100
|
+
'"': '"',
|
|
5101
|
+
"'": '''
|
|
5102
|
+
};
|
|
5103
|
+
/** Matches control characters (including tab/newline) that browsers ignore when resolving a URL scheme. */
|
|
5104
|
+
// eslint-disable-next-line no-control-regex
|
|
5105
|
+
const CONTROL_CHARS_PATTERN = /[\x00-\x1f\x7f]/g;
|
|
5106
|
+
/** Matches a leading `scheme:` on a URL. Absence means the URL is relative or a fragment (`/path`, `./path`, `#anchor`). */
|
|
5107
|
+
const SCHEME_PATTERN = /^([a-zA-Z][a-zA-Z\d+\-.]*):/;
|
|
5108
|
+
const LINK_ALLOWED_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:'];
|
|
5109
|
+
const IMAGE_ALLOWED_SCHEMES = ['http:', 'https:'];
|
|
5110
|
+
const IMAGE_DATA_URL_PATTERN = /^data:image\/[a-z0-9.+-]+[;,]/i;
|
|
5031
5111
|
class NsEditorService {
|
|
5032
5112
|
config = inject(NS_EDITOR_SETUP, { optional: true });
|
|
5033
5113
|
doc = inject(DOCUMENT$1);
|
|
@@ -5067,15 +5147,84 @@ class NsEditorService {
|
|
|
5067
5147
|
}
|
|
5068
5148
|
}
|
|
5069
5149
|
createLink(link) {
|
|
5070
|
-
const
|
|
5150
|
+
const resolvedUrl = this.resolveLinkUrl(link.url);
|
|
5151
|
+
if (resolvedUrl === null) {
|
|
5152
|
+
// Unsupported/unsafe scheme (e.g. `javascript:`): skip silently, the
|
|
5153
|
+
// form already validated that a URL was entered, so no error is thrown here.
|
|
5154
|
+
return;
|
|
5155
|
+
}
|
|
5156
|
+
const href = this.escapeHtml(resolvedUrl);
|
|
5157
|
+
const title = this.escapeHtml(link.tooltip);
|
|
5158
|
+
const text = this.escapeHtml(link.text);
|
|
5159
|
+
const target = link.openNewWindow ? '_blank' : '_self';
|
|
5160
|
+
// `noopener noreferrer` prevents the new tab from reaching back into this
|
|
5161
|
+
// page via window.opener; only meaningful (and only emitted) for _blank.
|
|
5162
|
+
const rel = link.openNewWindow ? ' rel="noopener noreferrer"' : '';
|
|
5163
|
+
const newUrl = `<a href="${href}" title="${title}" target="${target}"${rel}>${text}</a>`;
|
|
5071
5164
|
this.insertHtml(newUrl);
|
|
5072
5165
|
}
|
|
5166
|
+
insertImage(image) {
|
|
5167
|
+
const resolvedUrl = this.resolveImageUrl(image.url);
|
|
5168
|
+
if (resolvedUrl === null) {
|
|
5169
|
+
// Unsupported/unsafe scheme (e.g. `javascript:`, non-image `data:`):
|
|
5170
|
+
// skip silently, mirroring createLink's rejection behaviour.
|
|
5171
|
+
return;
|
|
5172
|
+
}
|
|
5173
|
+
const src = this.escapeHtml(resolvedUrl);
|
|
5174
|
+
const alt = this.escapeHtml(image.alt ?? '');
|
|
5175
|
+
this.insertHtml(`<img src="${src}" alt="${alt}">`);
|
|
5176
|
+
}
|
|
5073
5177
|
insertHtml(html) {
|
|
5074
5178
|
const isHTMLInserted = this.doc.execCommand(Commands.INSERT_HTML, false, html);
|
|
5075
5179
|
if (!isHTMLInserted) {
|
|
5076
5180
|
throw new Error('Unable to perform the operation');
|
|
5077
5181
|
}
|
|
5078
5182
|
}
|
|
5183
|
+
/** Escapes `&`, `<`, `>`, `"` and `'` — safe for both HTML attribute values and text nodes. */
|
|
5184
|
+
escapeHtml(value) {
|
|
5185
|
+
return value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char] ?? char);
|
|
5186
|
+
}
|
|
5187
|
+
/** Strips embedded control characters and surrounding whitespace so a scheme like `java\tscript:` can't be smuggled in. */
|
|
5188
|
+
normalizeUrl(url) {
|
|
5189
|
+
return url.replace(CONTROL_CHARS_PATTERN, '').trim();
|
|
5190
|
+
}
|
|
5191
|
+
/** Returns the lowercased `scheme:` (with trailing colon) or null when the URL is relative/a fragment. */
|
|
5192
|
+
extractScheme(normalizedUrl) {
|
|
5193
|
+
const match = normalizedUrl.match(SCHEME_PATTERN);
|
|
5194
|
+
return match ? `${match[1].toLowerCase()}:` : null;
|
|
5195
|
+
}
|
|
5196
|
+
/**
|
|
5197
|
+
* Normalizes and validates a link URL in one pass. Returns the normalized
|
|
5198
|
+
* URL when its scheme is allowed (or absent), `null` otherwise. Callers
|
|
5199
|
+
* must escape and insert the returned string — never the raw input — so
|
|
5200
|
+
* the value that was validated is always the value that gets inserted.
|
|
5201
|
+
*/
|
|
5202
|
+
resolveLinkUrl(url) {
|
|
5203
|
+
const normalized = this.normalizeUrl(url);
|
|
5204
|
+
const scheme = this.extractScheme(normalized);
|
|
5205
|
+
if (scheme === null) {
|
|
5206
|
+
return normalized;
|
|
5207
|
+
}
|
|
5208
|
+
return LINK_ALLOWED_SCHEMES.includes(scheme) ? normalized : null;
|
|
5209
|
+
}
|
|
5210
|
+
/**
|
|
5211
|
+
* Normalizes and validates an image URL in one pass. Returns the
|
|
5212
|
+
* normalized URL when its scheme is allowed (or absent), `null`
|
|
5213
|
+
* otherwise. Callers must escape and insert the returned string — never
|
|
5214
|
+
* the raw input — so the value that was validated is always the value
|
|
5215
|
+
* that gets inserted.
|
|
5216
|
+
*/
|
|
5217
|
+
resolveImageUrl(url) {
|
|
5218
|
+
const normalized = this.normalizeUrl(url);
|
|
5219
|
+
const scheme = this.extractScheme(normalized);
|
|
5220
|
+
if (scheme === null) {
|
|
5221
|
+
return normalized;
|
|
5222
|
+
}
|
|
5223
|
+
if (scheme === 'data:') {
|
|
5224
|
+
return IMAGE_DATA_URL_PATTERN.test(normalized) ? normalized : null;
|
|
5225
|
+
}
|
|
5226
|
+
return IMAGE_ALLOWED_SCHEMES.includes(scheme) ? normalized : null;
|
|
5227
|
+
}
|
|
5079
5228
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5080
5229
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorService, providedIn: 'root' });
|
|
5081
5230
|
}
|
|
@@ -5105,6 +5254,7 @@ class NsEditorColorPickerComponent {
|
|
|
5105
5254
|
editor = inject(NsEditorService);
|
|
5106
5255
|
presets = input(undefined, ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
|
|
5107
5256
|
type = input('text_color', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
5257
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5108
5258
|
showPopup = false;
|
|
5109
5259
|
activeColor;
|
|
5110
5260
|
isActive;
|
|
@@ -5132,14 +5282,49 @@ class NsEditorColorPickerComponent {
|
|
|
5132
5282
|
}
|
|
5133
5283
|
remove() { }
|
|
5134
5284
|
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
|
|
5285
|
+
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
5286
|
}
|
|
5137
5287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorColorPickerComponent, decorators: [{
|
|
5138
5288
|
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 }] }] } });
|
|
5289
|
+
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"] }]
|
|
5290
|
+
}], 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 }] }] } });
|
|
5291
|
+
|
|
5292
|
+
class NsEditorImageComponent {
|
|
5293
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5294
|
+
formImage;
|
|
5295
|
+
show;
|
|
5296
|
+
fb = inject(FormBuilder);
|
|
5297
|
+
editor = inject(NsEditorService);
|
|
5298
|
+
ngOnInit() {
|
|
5299
|
+
this.formImage = this.fb.group({
|
|
5300
|
+
url: ['', Validators.required],
|
|
5301
|
+
text: ['']
|
|
5302
|
+
});
|
|
5303
|
+
}
|
|
5304
|
+
insert() {
|
|
5305
|
+
if (this.formImage.valid) {
|
|
5306
|
+
const { url, text } = this.formImage.getRawValue();
|
|
5307
|
+
this.editor.insertImage({ url, alt: text });
|
|
5308
|
+
this.formImage.reset();
|
|
5309
|
+
this.show = false;
|
|
5310
|
+
}
|
|
5311
|
+
}
|
|
5312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5313
|
+
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", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5314
|
+
}
|
|
5315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorImageComponent, decorators: [{
|
|
5316
|
+
type: Component,
|
|
5317
|
+
args: [{ selector: 'ns-editor-image', imports: [
|
|
5318
|
+
ReactiveFormsModule,
|
|
5319
|
+
NgClass,
|
|
5320
|
+
NsEditorLabelPipe,
|
|
5321
|
+
NsInputComponent,
|
|
5322
|
+
NsButtonComponent
|
|
5323
|
+
], 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"] }]
|
|
5324
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5141
5325
|
|
|
5142
5326
|
class NsEditorLinkComponent {
|
|
5327
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5143
5328
|
formLink;
|
|
5144
5329
|
show;
|
|
5145
5330
|
fb = inject(FormBuilder);
|
|
@@ -5160,7 +5345,7 @@ class NsEditorLinkComponent {
|
|
|
5160
5345
|
}
|
|
5161
5346
|
}
|
|
5162
5347
|
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: "
|
|
5348
|
+
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", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5164
5349
|
}
|
|
5165
5350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, decorators: [{
|
|
5166
5351
|
type: Component,
|
|
@@ -5171,26 +5356,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5171
5356
|
NsInputComponent,
|
|
5172
5357
|
NsCheckboxComponent,
|
|
5173
5358
|
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
|
-
}] });
|
|
5359
|
+
], 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"] }]
|
|
5360
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5176
5361
|
|
|
5177
5362
|
class NsEditorListComponent {
|
|
5178
5363
|
editor = inject(NsEditorService);
|
|
5364
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5179
5365
|
commands = Commands;
|
|
5180
5366
|
ngOnInit() { }
|
|
5181
5367
|
command(name) {
|
|
5182
5368
|
this.editor.command(name);
|
|
5183
5369
|
}
|
|
5184
5370
|
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: "
|
|
5371
|
+
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
5372
|
}
|
|
5187
5373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorListComponent, decorators: [{
|
|
5188
5374
|
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
|
-
}] });
|
|
5375
|
+
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"] }]
|
|
5376
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5191
5377
|
|
|
5192
5378
|
class NsEditorParagraphComponent {
|
|
5193
5379
|
editor = inject(NsEditorService);
|
|
5380
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5194
5381
|
id = Guid.create();
|
|
5195
5382
|
_value = 'p';
|
|
5196
5383
|
get value() {
|
|
@@ -5200,7 +5387,7 @@ class NsEditorParagraphComponent {
|
|
|
5200
5387
|
this.editor.formatBlock(heading);
|
|
5201
5388
|
}
|
|
5202
5389
|
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: "
|
|
5390
|
+
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"] }, { 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
5391
|
}
|
|
5205
5392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, decorators: [{
|
|
5206
5393
|
type: Component,
|
|
@@ -5209,23 +5396,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5209
5396
|
NsDropdownItemDirective,
|
|
5210
5397
|
FormsModule,
|
|
5211
5398
|
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
|
-
}] });
|
|
5399
|
+
], 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"] }]
|
|
5400
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5214
5401
|
|
|
5215
5402
|
class NsEditorToggleCommandComponent {
|
|
5216
5403
|
editor = inject(NsEditorService);
|
|
5404
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5217
5405
|
commands = Commands;
|
|
5218
5406
|
command(name) {
|
|
5219
5407
|
this.editor.command(name);
|
|
5220
5408
|
}
|
|
5221
5409
|
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: "
|
|
5410
|
+
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
5411
|
}
|
|
5224
5412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorToggleCommandComponent, decorators: [{
|
|
5225
5413
|
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
|
-
}] });
|
|
5414
|
+
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"] }]
|
|
5415
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5228
5416
|
|
|
5417
|
+
const NS_EDITOR_TOOLS_DEFAULT = [
|
|
5418
|
+
'paragraph',
|
|
5419
|
+
'format',
|
|
5420
|
+
'color',
|
|
5421
|
+
'list',
|
|
5422
|
+
'link'
|
|
5423
|
+
];
|
|
5229
5424
|
const DEFAULT_COLOR_PRESETS = [
|
|
5230
5425
|
'#b60205',
|
|
5231
5426
|
'#d93f0b',
|
|
@@ -5246,10 +5441,14 @@ const DEFAULT_COLOR_PRESETS = [
|
|
|
5246
5441
|
];
|
|
5247
5442
|
class NsEditorComponent extends NsValueAccessor {
|
|
5248
5443
|
editor = inject(NsEditorService);
|
|
5249
|
-
rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
5250
5444
|
maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
5251
5445
|
colorPresets = input(DEFAULT_COLOR_PRESETS, ...(ngDevMode ? [{ debugName: "colorPresets" }] : /* istanbul ignore next */ []));
|
|
5446
|
+
tools = input(NS_EDITOR_TOOLS_DEFAULT, ...(ngDevMode ? [{ debugName: "tools" }] : /* istanbul ignore next */ []));
|
|
5252
5447
|
textArea;
|
|
5448
|
+
contentEditable;
|
|
5449
|
+
/** Mirrors the content-editable's own counter, measured off `innerText`. */
|
|
5450
|
+
length = computed(() => this.contentEditable?.length() ?? 0, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
|
|
5451
|
+
hasFooter = computed(() => Boolean(this.description() || this.maxLength()), ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
5253
5452
|
focused = () => this.textArea.nativeElement.focus();
|
|
5254
5453
|
ngOnInit() { }
|
|
5255
5454
|
get presets() {
|
|
@@ -5270,13 +5469,13 @@ class NsEditorComponent extends NsValueAccessor {
|
|
|
5270
5469
|
}
|
|
5271
5470
|
ngOnDestroy() { }
|
|
5272
5471
|
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: {
|
|
5472
|
+
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
5473
|
{
|
|
5275
5474
|
provide: NG_VALUE_ACCESSOR,
|
|
5276
5475
|
useExisting: forwardRef(() => NsEditorComponent),
|
|
5277
5476
|
multi: true
|
|
5278
5477
|
}
|
|
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
|
|
5478
|
+
], 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
5479
|
}
|
|
5281
5480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorComponent, decorators: [{
|
|
5282
5481
|
type: Component,
|
|
@@ -5295,12 +5494,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5295
5494
|
NsEditorColorPickerComponent,
|
|
5296
5495
|
NsEditorListComponent,
|
|
5297
5496
|
NsEditorLinkComponent,
|
|
5497
|
+
NsEditorImageComponent,
|
|
5298
5498
|
NsContentEditableComponent,
|
|
5299
5499
|
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: {
|
|
5500
|
+
], 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"] }]
|
|
5501
|
+
}], 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
5502
|
type: ViewChild,
|
|
5303
5503
|
args: [NsContentEditableComponent, { read: ElementRef, static: true }]
|
|
5504
|
+
}], contentEditable: [{
|
|
5505
|
+
type: ViewChild,
|
|
5506
|
+
args: [NsContentEditableComponent, { static: true }]
|
|
5304
5507
|
}], focused: [{
|
|
5305
5508
|
type: HostListener,
|
|
5306
5509
|
args: ['click']
|
|
@@ -5331,29 +5534,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
5331
5534
|
}]
|
|
5332
5535
|
}] });
|
|
5333
5536
|
|
|
5537
|
+
/**
|
|
5538
|
+
* `NsFile` (published API, `@ng-solid/core`) has no identity field of its
|
|
5539
|
+
* own. `uid` used to live as a component-local property written directly
|
|
5540
|
+
* onto the object (AVF-15) — that broke the moment a host state library
|
|
5541
|
+
* hands this component a frozen `NsFile`: the console's NGXS store deep-
|
|
5542
|
+
* freezes its slices, so a saved product's images arrive non-extensible and
|
|
5543
|
+
* `image.uid = …` throws `TypeError: Cannot add property uid, object is not
|
|
5544
|
+
* extensible` (AVF-18 corrección de rechazo). A design-system component
|
|
5545
|
+
* cannot assume its inputs are mutable, so `uid` now lives *outside* every
|
|
5546
|
+
* `NsFile`, in the module-level `uidRegistry` below, keyed by object
|
|
5547
|
+
* identity — nothing ever writes to the `NsFile` itself. That also gives
|
|
5548
|
+
* reference-identity preservation for free: `assignUid` never wraps, clones
|
|
5549
|
+
* or copies its argument, so `remove()`'s `img !== image` filter, and every
|
|
5550
|
+
* other place that compares an `NsFile` by `===`, keeps working unchanged.
|
|
5551
|
+
*/
|
|
5552
|
+
const uidRegistry = new WeakMap();
|
|
5553
|
+
/**
|
|
5554
|
+
* Holds the original `File` a pending upload started from, keyed by the same
|
|
5555
|
+
* `NsFile` instance `add()` tracks. `add()`'s own `reader.onload` overwrites
|
|
5556
|
+
* `tracked.data` with the base64 preview string right after kicking off the
|
|
5557
|
+
* *first* upload attempt (see the comment in `add()` below) — necessary so
|
|
5558
|
+
* the gallery has something to render while the request is in flight, but it
|
|
5559
|
+
* means that by the time an upload fails, `tracked.data` is already that
|
|
5560
|
+
* string, not the `File` it started from. `retry()` re-runs `upload()` on
|
|
5561
|
+
* that same tracked object, so without this side registry it would hand the
|
|
5562
|
+
* client a base64 string instead of the file it was supposed to resend
|
|
5563
|
+
* (AVF-18 QA finding: a retry after a transient failure sent a data URI and
|
|
5564
|
+
* the server rejected it with "Upload value invalid").
|
|
5565
|
+
*/
|
|
5566
|
+
const originalDataRegistry = new WeakMap();
|
|
5567
|
+
/**
|
|
5568
|
+
* Module-level monotonic counter backing `uid` for images without a server
|
|
5569
|
+
* `id` yet (pending uploads). Deterministic and trivial to assert in tests,
|
|
5570
|
+
* unlike `crypto.randomUUID()`.
|
|
5571
|
+
*/
|
|
5572
|
+
let uidCounter = 0;
|
|
5573
|
+
/**
|
|
5574
|
+
* Registers `uid` once per image instance in `uidRegistry`: derived from
|
|
5575
|
+
* the server `id` when present (`srv:${id}`, stable across re-`writeValue`
|
|
5576
|
+
* calls even on brand-new instances mapped from GraphQL — a `patchValue`
|
|
5577
|
+
* from the host never remounts the gallery), otherwise the next counter
|
|
5578
|
+
* value. Never overwrites an existing entry, and never touches `image`
|
|
5579
|
+
* itself — safe to call on a frozen, sealed or otherwise non-extensible
|
|
5580
|
+
* `NsFile`.
|
|
5581
|
+
*/
|
|
5582
|
+
function assignUid(image) {
|
|
5583
|
+
if (!uidRegistry.has(image)) {
|
|
5584
|
+
uidRegistry.set(image, image.id ? `srv:${image.id}` : `ns-file-${++uidCounter}`);
|
|
5585
|
+
}
|
|
5586
|
+
return image;
|
|
5587
|
+
}
|
|
5334
5588
|
class NsImageUploadComponent extends NsValueAccessor {
|
|
5335
5589
|
client = inject(NS_UPLOAD_CLIENT, { optional: true });
|
|
5336
5590
|
renderer = inject(Renderer2);
|
|
5591
|
+
cdr = inject(ChangeDetectorRef);
|
|
5337
5592
|
accept = input('.jpg,.jpeg,.png,.webp,.avif,.gif', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
5338
5593
|
multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5339
5594
|
limit = input(5, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
5595
|
+
layout = input('grid', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
5596
|
+
/**
|
|
5597
|
+
* Rows the `__stack` column reserves before it starts scrolling
|
|
5598
|
+
* internally, in `layout="cover"`: at most 3, and never more than
|
|
5599
|
+
* `limit() - 1` (the cover itself takes one slot).
|
|
5600
|
+
*/
|
|
5601
|
+
reservedRows = computed(() => Math.max(0, Math.min(3, this.limit() - 1)), ...(ngDevMode ? [{ debugName: "reservedRows" }] : /* istanbul ignore next */ []));
|
|
5340
5602
|
imgRef;
|
|
5341
|
-
|
|
5603
|
+
status = new Map();
|
|
5604
|
+
/**
|
|
5605
|
+
* Bumped by `setStatus`/`deleteStatus` on every `status` mutation.
|
|
5606
|
+
* `status` itself stays a plain, publicly-mutable `Map` — kept for the
|
|
5607
|
+
* existing per-file bookkeeping and for tests that poll it to synchronise
|
|
5608
|
+
* with an async upload — but a plain `Map.set()`/`.delete()` is invisible
|
|
5609
|
+
* to Angular's change detection: no signal write and no `markForCheck()`,
|
|
5610
|
+
* so nothing tells Angular this control needs checking again. Worse, an
|
|
5611
|
+
* `OnPush` ancestor that wasn't otherwise dirtied (e.g. the "Fotografías"
|
|
5612
|
+
* `<card>` wrapping this control in the product form) can skip this
|
|
5613
|
+
* subtree entirely on the next tick. That is exactly why a failed upload
|
|
5614
|
+
* used to get stuck showing the spinner forever, silently (AVF-18
|
|
5615
|
+
* corrección de rechazo #2): `status.set(uid, 'fallido')` ran, but nothing
|
|
5616
|
+
* ever told Angular to look again — unlike a successful upload, which
|
|
5617
|
+
* reaches the template through `value.set()` (a real signal write) via
|
|
5618
|
+
* `assignValue`/`onChange`. `statusOf()` reads this counter before reading
|
|
5619
|
+
* `status`, giving every render that goes through it a real signal
|
|
5620
|
+
* dependency, and `touchStatus()` also calls `markForCheck()` directly —
|
|
5621
|
+
* belt and braces: the explicit call is the same, long-proven mechanism
|
|
5622
|
+
* Angular has always used to announce a change made from outside its own
|
|
5623
|
+
* detection cycle (an RxJS subscription callback, here), and is what
|
|
5624
|
+
* reliably walks the ancestor chain and clears an `OnPush` skip, the way
|
|
5625
|
+
* a signal read alone was not enough to guarantee in practice.
|
|
5626
|
+
*/
|
|
5627
|
+
statusVersion = signal(0, ...(ngDevMode ? [{ debugName: "statusVersion" }] : /* istanbul ignore next */ []));
|
|
5628
|
+
touchStatus() {
|
|
5629
|
+
this.statusVersion.update((v) => v + 1);
|
|
5630
|
+
this.cdr.markForCheck();
|
|
5631
|
+
}
|
|
5632
|
+
setStatus(uid, value) {
|
|
5633
|
+
this.status.set(uid, value);
|
|
5634
|
+
this.touchStatus();
|
|
5635
|
+
}
|
|
5636
|
+
deleteStatus(uid) {
|
|
5637
|
+
this.status.delete(uid);
|
|
5638
|
+
this.touchStatus();
|
|
5639
|
+
}
|
|
5640
|
+
/**
|
|
5641
|
+
* The only path from `status` + `uid` to the template — and the one every
|
|
5642
|
+
* test should use too (AVF-18 corrección de rechazo #2): reading
|
|
5643
|
+
* `status.get(...)` directly, the way earlier tests did, cannot tell a
|
|
5644
|
+
* status change nobody announced to Angular from one that actually
|
|
5645
|
+
* rendered, which is exactly how the previous regression shipped green —
|
|
5646
|
+
* the map held `'fallido'`, the DOM still showed `'subiendo'`, and the
|
|
5647
|
+
* assertions that read the map straight agreed with the bug.
|
|
5648
|
+
*/
|
|
5649
|
+
statusOf(image) {
|
|
5650
|
+
this.statusVersion();
|
|
5651
|
+
return this.status.get(this.uidOf(image));
|
|
5652
|
+
}
|
|
5653
|
+
/**
|
|
5654
|
+
* Active while a file dragged from outside the browser (desktop, another
|
|
5655
|
+
* app) hovers a drop zone — drives the highlight ring/border (AVF-9,
|
|
5656
|
+
* criteria 3-5). Never set for the internal thumbnail-reorder drag,
|
|
5657
|
+
* distinguished via `isFileDrag`.
|
|
5658
|
+
*/
|
|
5659
|
+
dragActive = signal(false, ...(ngDevMode ? [{ debugName: "dragActive" }] : /* istanbul ignore next */ []));
|
|
5660
|
+
/**
|
|
5661
|
+
* Inline, Spanish, component-owned notice for when a selection/drop
|
|
5662
|
+
* exceeds `limit()` (AVF-16). Deliberately not an `output()`: a consumer
|
|
5663
|
+
* that doesn't wire one up would silently drop files again, which is
|
|
5664
|
+
* exactly the defect this HU removes. Overwritten (never accumulated) on
|
|
5665
|
+
* every enqueue attempt, successful or not.
|
|
5666
|
+
*/
|
|
5667
|
+
limitWarning = signal(null, ...(ngDevMode ? [{ debugName: "limitWarning" }] : /* istanbul ignore next */ []));
|
|
5342
5668
|
_fromIndex;
|
|
5343
5669
|
_toIndex;
|
|
5670
|
+
/**
|
|
5671
|
+
* The only path from `value()` to the template, whatever fed it: a plain
|
|
5672
|
+
* `[value]="misImagenes"` binding — `value` is the public two-way `model()`
|
|
5673
|
+
* from `NsValueAccessor`, so nothing forces a consumer through
|
|
5674
|
+
* `writeValue`/`add` — lands here same as a file picked through the
|
|
5675
|
+
* control itself. `assignUid` is idempotent (never overwrites an existing
|
|
5676
|
+
* registry entry) and never mutates the `NsFile`, so re-running it every
|
|
5677
|
+
* getter call is safe: the `uid` a given instance gets on its first pass
|
|
5678
|
+
* through here is the one it keeps on every later change-detection cycle,
|
|
5679
|
+
* and no signal write happens as a side effect of reading the template
|
|
5680
|
+
* (AVF-15). Works the same whether the array/elements are frozen or not
|
|
5681
|
+
* (AVF-18 corrección de rechazo).
|
|
5682
|
+
*/
|
|
5344
5683
|
get images() {
|
|
5345
5684
|
const value = this.value();
|
|
5346
|
-
return Array.isArray(value)
|
|
5685
|
+
return Array.isArray(value)
|
|
5686
|
+
? value.map((image) => assignUid(image))
|
|
5687
|
+
: [];
|
|
5347
5688
|
}
|
|
5348
5689
|
get image() {
|
|
5349
5690
|
const value = this.value();
|
|
5350
|
-
|
|
5691
|
+
if (Array.isArray(value) || !value) {
|
|
5692
|
+
return null;
|
|
5693
|
+
}
|
|
5694
|
+
return assignUid(value);
|
|
5695
|
+
}
|
|
5696
|
+
/**
|
|
5697
|
+
* Reads the `uid` assigned to `image` — the accessor the `.ts` and the
|
|
5698
|
+
* template both use instead of a `.uid` property on the `NsFile` itself,
|
|
5699
|
+
* which no longer exists (AVF-18 corrección de rechazo: that property
|
|
5700
|
+
* write is exactly what threw on a frozen image). Public so the
|
|
5701
|
+
* template's `track` expressions can call it directly, and so `statusOf`
|
|
5702
|
+
* can resolve the key it looks up. Every `NsFile` reachable from
|
|
5703
|
+
* `images()`/`image()` has already been through `assignUid`, so this only
|
|
5704
|
+
* ever reads — the `assignUid` call here is a safety net for a caller that
|
|
5705
|
+
* hands in an image from outside that path.
|
|
5706
|
+
*/
|
|
5707
|
+
uidOf(image) {
|
|
5708
|
+
assignUid(image);
|
|
5709
|
+
return uidRegistry.get(image);
|
|
5710
|
+
}
|
|
5711
|
+
/**
|
|
5712
|
+
* True while the single (`!multi()`) image's own upload attempt is
|
|
5713
|
+
* `'fallido'` — the one flag the drag-container button needs to swap
|
|
5714
|
+
* "open the file picker" for "retry this upload" (AVF-16, corrección de
|
|
5715
|
+
* rechazo: criterios 5-6 no estaban cubiertos en modo single, solo en
|
|
5716
|
+
* `multi`).
|
|
5717
|
+
*/
|
|
5718
|
+
get singleFailed() {
|
|
5719
|
+
const img = this.image;
|
|
5720
|
+
return !this.multi() && !!img && this.statusOf(img) === 'fallido';
|
|
5351
5721
|
}
|
|
5352
5722
|
writeValue(value) {
|
|
5353
5723
|
if (Array.isArray(value)) {
|
|
5724
|
+
value.forEach((image) => assignUid(image));
|
|
5354
5725
|
this.value.set(value);
|
|
5355
5726
|
}
|
|
5356
5727
|
else {
|
|
5728
|
+
if (value) {
|
|
5729
|
+
assignUid(value);
|
|
5730
|
+
}
|
|
5357
5731
|
this.value.set(this.multi() && !value ? [] : value);
|
|
5358
5732
|
}
|
|
5359
5733
|
}
|
|
@@ -5362,41 +5736,125 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5362
5736
|
this.imgRef.nativeElement.click();
|
|
5363
5737
|
}
|
|
5364
5738
|
}
|
|
5739
|
+
/**
|
|
5740
|
+
* Click handler for the single-mode (`!multi()`) drag-container: it is
|
|
5741
|
+
* both the file picker trigger and, once the image has failed, the
|
|
5742
|
+
* retry control — same dual role the `multi` grid button and the cover
|
|
5743
|
+
* chip already had (AVF-16 corrección de rechazo).
|
|
5744
|
+
*/
|
|
5745
|
+
onDragContainerClick() {
|
|
5746
|
+
if (this.singleFailed) {
|
|
5747
|
+
this.retry(this.image);
|
|
5748
|
+
}
|
|
5749
|
+
else {
|
|
5750
|
+
this.onClick();
|
|
5751
|
+
}
|
|
5752
|
+
}
|
|
5365
5753
|
load() {
|
|
5366
5754
|
const { files } = this.imgRef.nativeElement;
|
|
5367
5755
|
if (files.length) {
|
|
5368
|
-
this.
|
|
5756
|
+
this.enqueueFiles(Array.from(files));
|
|
5369
5757
|
this.imgRef.nativeElement.value = null;
|
|
5370
5758
|
}
|
|
5759
|
+
this.onTouched();
|
|
5371
5760
|
}
|
|
5372
5761
|
add(image) {
|
|
5373
|
-
|
|
5762
|
+
const tracked = assignUid(image);
|
|
5763
|
+
const uid = this.uidOf(tracked);
|
|
5764
|
+
// Stashed before `reader.onload` below overwrites `tracked.data` with
|
|
5765
|
+
// the preview string, so a later `retry()` on this same object still
|
|
5766
|
+
// has the real file to resend (AVF-18 QA finding).
|
|
5767
|
+
originalDataRegistry.set(tracked, tracked.data);
|
|
5768
|
+
this.setStatus(uid, 'subiendo');
|
|
5374
5769
|
const reader = new FileReader();
|
|
5375
|
-
reader.readAsDataURL(
|
|
5770
|
+
reader.readAsDataURL(tracked.data);
|
|
5376
5771
|
reader.onload = () => {
|
|
5377
5772
|
if (this.client) {
|
|
5378
|
-
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
}
|
|
5389
|
-
});
|
|
5390
|
-
image.data = reader.result;
|
|
5391
|
-
this.assignValue(image);
|
|
5773
|
+
// Started before the local-preview mutation below, matching the
|
|
5774
|
+
// pre-AVF-16 ordering: whatever the injected client reads off
|
|
5775
|
+
// `tracked.data` at call time, it reads before it gets overwritten
|
|
5776
|
+
// with the base64 preview string. `tracked` here is always a
|
|
5777
|
+
// freshly `NsFile.parse`d object this component created itself
|
|
5778
|
+
// (never a host-provided, possibly-frozen instance), so mutating
|
|
5779
|
+
// `.data` in place is safe.
|
|
5780
|
+
this.upload(tracked, uid);
|
|
5781
|
+
tracked.data = reader.result;
|
|
5782
|
+
this.assignValue(tracked);
|
|
5392
5783
|
}
|
|
5393
5784
|
else {
|
|
5394
|
-
|
|
5395
|
-
this.
|
|
5396
|
-
this.assignValue(
|
|
5785
|
+
tracked.data = reader.result;
|
|
5786
|
+
this.setStatus(uid, 'ok');
|
|
5787
|
+
this.assignValue(tracked);
|
|
5397
5788
|
}
|
|
5398
5789
|
};
|
|
5399
5790
|
}
|
|
5791
|
+
/**
|
|
5792
|
+
* Re-subscribes to the same upload the failed attempt used — no new
|
|
5793
|
+
* `NsUploadClient` contract needed (AVF-16 evidence: `upload(file):
|
|
5794
|
+
* Observable<file>` is already re-subscribable). Shared by the first
|
|
5795
|
+
* attempt (`add`) and every later retry. `uid` is passed in rather than
|
|
5796
|
+
* re-derived from `image`, since `retry()` needs the *original* uid even
|
|
5797
|
+
* though the `image` it holds may itself be a server response object by
|
|
5798
|
+
* then.
|
|
5799
|
+
*/
|
|
5800
|
+
upload(image, uid) {
|
|
5801
|
+
const client = this.client;
|
|
5802
|
+
if (!client) {
|
|
5803
|
+
return;
|
|
5804
|
+
}
|
|
5805
|
+
this.setStatus(uid, 'subiendo');
|
|
5806
|
+
// On a retry, `image.data` may already be the base64 preview string
|
|
5807
|
+
// (see `originalDataRegistry`'s doc comment) — the original `File`, when
|
|
5808
|
+
// stashed, is what actually goes out over the wire. Cloning (rather than
|
|
5809
|
+
// mutating `image` back) keeps `image`'s own `.data` as the preview the
|
|
5810
|
+
// template renders while this request is in flight.
|
|
5811
|
+
const original = originalDataRegistry.get(image);
|
|
5812
|
+
client
|
|
5813
|
+
.upload(original ? new NsFile({ ...image, data: original }) : image)
|
|
5814
|
+
.subscribe({
|
|
5815
|
+
next: (data) => {
|
|
5816
|
+
// Preserves identity through the preview → server swap: registers
|
|
5817
|
+
// the same `uid` for the new server-response object rather than
|
|
5818
|
+
// mutating it, so the gallery doesn't remount the image and
|
|
5819
|
+
// AVF-16's per-file state isn't lost right as the upload finishes.
|
|
5820
|
+
uidRegistry.set(data, uid);
|
|
5821
|
+
this.setStatus(uid, 'ok');
|
|
5822
|
+
if (this.multi()) {
|
|
5823
|
+
// Replaces the preview in place, by uid, rather than filtering it
|
|
5824
|
+
// out and pushing the server response at the end: with several
|
|
5825
|
+
// uploads resolving concurrently, each `next` reads `this.images`
|
|
5826
|
+
// fresh at its own callback, and an in-place-by-uid update can
|
|
5827
|
+
// never clobber or reorder an entry a sibling upload already
|
|
5828
|
+
// committed (AVF-16 — verified by the 3-concurrent-uploads spec).
|
|
5829
|
+
this.value.set(this.images.map((img) => (this.uidOf(img) === uid ? data : img)));
|
|
5830
|
+
this.onChange(this.value());
|
|
5831
|
+
}
|
|
5832
|
+
else {
|
|
5833
|
+
this.assignValue(data);
|
|
5834
|
+
}
|
|
5835
|
+
},
|
|
5836
|
+
error: () => {
|
|
5837
|
+
// `setStatus` (not a raw `status.set`) is what makes this reach the
|
|
5838
|
+
// screen at all: a failed upload is the one outcome that never
|
|
5839
|
+
// touches `value`, so without the signal write inside `setStatus`,
|
|
5840
|
+
// nothing tells Angular this control needs checking again — the
|
|
5841
|
+
// thumbnail stays stuck showing "subiendo" forever (AVF-18
|
|
5842
|
+
// corrección de rechazo #2).
|
|
5843
|
+
this.setStatus(uid, 'fallido');
|
|
5844
|
+
}
|
|
5845
|
+
});
|
|
5846
|
+
}
|
|
5847
|
+
/**
|
|
5848
|
+
* Retries a failed upload in place: same `uid`, same position in the
|
|
5849
|
+
* gallery, no re-read from disk (the preview already holds the file's
|
|
5850
|
+
* data).
|
|
5851
|
+
*/
|
|
5852
|
+
retry(image) {
|
|
5853
|
+
if (!this.client || this.statusOf(image) !== 'fallido') {
|
|
5854
|
+
return;
|
|
5855
|
+
}
|
|
5856
|
+
this.upload(image, this.uidOf(image));
|
|
5857
|
+
}
|
|
5400
5858
|
assignValue(image) {
|
|
5401
5859
|
if (this.multi()) {
|
|
5402
5860
|
this.value.set([...this.images, image]);
|
|
@@ -5406,26 +5864,33 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5406
5864
|
}
|
|
5407
5865
|
this.onChange(this.value());
|
|
5408
5866
|
}
|
|
5409
|
-
compareWith(from, to) {
|
|
5410
|
-
return from.id === to.id || from.name === to.name;
|
|
5411
|
-
}
|
|
5412
5867
|
remove(image) {
|
|
5413
|
-
this.
|
|
5868
|
+
const uid = this.uidOf(image);
|
|
5869
|
+
const previousStatus = this.statusOf(image);
|
|
5870
|
+
this.setStatus(uid, 'subiendo');
|
|
5414
5871
|
if (this.client && !!image.id) {
|
|
5415
5872
|
this.client.remove(image.id).subscribe({
|
|
5416
5873
|
next: () => {
|
|
5417
5874
|
this.value.set(this.multi() ? this.images.filter((img) => img !== image) : null);
|
|
5418
|
-
this.
|
|
5875
|
+
this.deleteStatus(uid);
|
|
5419
5876
|
this.onChange(this.value());
|
|
5420
5877
|
},
|
|
5421
5878
|
error: () => {
|
|
5422
|
-
|
|
5879
|
+
// Removal failed: restore whatever status the image had before
|
|
5880
|
+
// (normally 'ok' or 'fallido'), rather than leaving it stuck on
|
|
5881
|
+
// 'subiendo' with no way out.
|
|
5882
|
+
if (previousStatus) {
|
|
5883
|
+
this.setStatus(uid, previousStatus);
|
|
5884
|
+
}
|
|
5885
|
+
else {
|
|
5886
|
+
this.deleteStatus(uid);
|
|
5887
|
+
}
|
|
5423
5888
|
}
|
|
5424
5889
|
});
|
|
5425
5890
|
}
|
|
5426
5891
|
else {
|
|
5427
5892
|
this.value.set(this.multi() ? this.images.filter((img) => img !== image) : null);
|
|
5428
|
-
this.
|
|
5893
|
+
this.deleteStatus(uid);
|
|
5429
5894
|
this.onChange(this.value());
|
|
5430
5895
|
}
|
|
5431
5896
|
}
|
|
@@ -5434,17 +5899,40 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5434
5899
|
event.dataTransfer.dropEffect = 'move';
|
|
5435
5900
|
this._fromIndex = index;
|
|
5436
5901
|
}
|
|
5902
|
+
/**
|
|
5903
|
+
* Shared by every drop target (thumbnails, the `cover` node — index 0 —
|
|
5904
|
+
* and the plain drop zones). `event.dataTransfer.types` never carries
|
|
5905
|
+
* `'Files'` for the internal reorder drag (it writes nothing to the
|
|
5906
|
+
* clipboard today), so that check alone tells the external-file drop and
|
|
5907
|
+
* the reorder drag apart without a separate state flag.
|
|
5908
|
+
*/
|
|
5437
5909
|
dragover(event, index) {
|
|
5438
5910
|
event.preventDefault();
|
|
5911
|
+
if (this.isFileDrag(event)) {
|
|
5912
|
+
this.dragActive.set(true);
|
|
5913
|
+
return;
|
|
5914
|
+
}
|
|
5439
5915
|
this._toIndex = index;
|
|
5440
5916
|
}
|
|
5917
|
+
dragleave(event) {
|
|
5918
|
+
if (this.isFileDrag(event)) {
|
|
5919
|
+
this.dragActive.set(false);
|
|
5920
|
+
}
|
|
5921
|
+
}
|
|
5441
5922
|
dragend(event) {
|
|
5442
5923
|
this.renderer.setStyle(event.target, 'opacity', 1);
|
|
5443
5924
|
}
|
|
5444
5925
|
drop(event) {
|
|
5445
5926
|
event.stopPropagation();
|
|
5927
|
+
if (this.isFileDrag(event)) {
|
|
5928
|
+
event.preventDefault();
|
|
5929
|
+
this.dragActive.set(false);
|
|
5930
|
+
this.addDroppedFile(event.dataTransfer.files);
|
|
5931
|
+
return;
|
|
5932
|
+
}
|
|
5933
|
+
this.dragActive.set(false);
|
|
5446
5934
|
if (this._fromIndex !== this._toIndex) {
|
|
5447
|
-
const images = this.images;
|
|
5935
|
+
const images = [...this.images];
|
|
5448
5936
|
const element = images[this._fromIndex];
|
|
5449
5937
|
images.splice(this._fromIndex, 1);
|
|
5450
5938
|
images.splice(this._toIndex, 0, element);
|
|
@@ -5452,28 +5940,105 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
5452
5940
|
this.onChange(this.value());
|
|
5453
5941
|
}
|
|
5454
5942
|
}
|
|
5943
|
+
isFileDrag(event) {
|
|
5944
|
+
return !!event.dataTransfer?.types?.includes('Files');
|
|
5945
|
+
}
|
|
5946
|
+
isAcceptedFile(file) {
|
|
5947
|
+
const patterns = this.accept()
|
|
5948
|
+
.split(',')
|
|
5949
|
+
.map((pattern) => pattern.trim().toLowerCase())
|
|
5950
|
+
.filter(Boolean);
|
|
5951
|
+
if (!patterns.length) {
|
|
5952
|
+
return true;
|
|
5953
|
+
}
|
|
5954
|
+
const name = file.name.toLowerCase();
|
|
5955
|
+
const type = file.type.toLowerCase();
|
|
5956
|
+
return patterns.some((pattern) => {
|
|
5957
|
+
if (pattern.startsWith('.')) {
|
|
5958
|
+
return name.endsWith(pattern);
|
|
5959
|
+
}
|
|
5960
|
+
if (pattern.endsWith('/*')) {
|
|
5961
|
+
return type.startsWith(pattern.slice(0, -1));
|
|
5962
|
+
}
|
|
5963
|
+
return type === pattern;
|
|
5964
|
+
});
|
|
5965
|
+
}
|
|
5966
|
+
addDroppedFile(files) {
|
|
5967
|
+
if (!this.multi()) {
|
|
5968
|
+
// Kept byte-for-byte identical to the pre-AVF-16 single-file check:
|
|
5969
|
+
// only the raw first dropped file is ever considered, exactly as
|
|
5970
|
+
// before. The multi-file/limit pipeline below is new behaviour and
|
|
5971
|
+
// must not change this path (AVF-16, criterio "sin regresión").
|
|
5972
|
+
const file = files?.item(0);
|
|
5973
|
+
if (!file || !this.isAcceptedFile(file)) {
|
|
5974
|
+
return;
|
|
5975
|
+
}
|
|
5976
|
+
this.add(NsFile.parse(file));
|
|
5977
|
+
this.onTouched();
|
|
5978
|
+
return;
|
|
5979
|
+
}
|
|
5980
|
+
const accepted = Array.from(files ?? []).filter((file) => this.isAcceptedFile(file));
|
|
5981
|
+
if (this.enqueueFiles(accepted) > 0) {
|
|
5982
|
+
this.onTouched();
|
|
5983
|
+
}
|
|
5984
|
+
}
|
|
5985
|
+
/**
|
|
5986
|
+
* Accepts as many of `files` as fit under `limit()`, all at once, and
|
|
5987
|
+
* reports the rest inline. `limit()` is evaluated once here, against
|
|
5988
|
+
* `this.images.length` as it stands *before* any of this batch's
|
|
5989
|
+
* `add()` calls run — never inside a per-file callback, where it would
|
|
5990
|
+
* lag behind sibling files whose `FileReader`/upload hasn't resolved yet
|
|
5991
|
+
* and let more through than actually fit (AVF-16).
|
|
5992
|
+
*
|
|
5993
|
+
* Returns how many files were actually enqueued, so callers can decide
|
|
5994
|
+
* whether to mark the control touched.
|
|
5995
|
+
*/
|
|
5996
|
+
enqueueFiles(files) {
|
|
5997
|
+
if (!files.length) {
|
|
5998
|
+
return 0;
|
|
5999
|
+
}
|
|
6000
|
+
if (!this.multi()) {
|
|
6001
|
+
this.limitWarning.set(null);
|
|
6002
|
+
this.add(NsFile.parse(files[0]));
|
|
6003
|
+
return 1;
|
|
6004
|
+
}
|
|
6005
|
+
const room = Math.max(0, this.limit() - this.images.length);
|
|
6006
|
+
const accepted = files.slice(0, room);
|
|
6007
|
+
const rejected = files.length - accepted.length;
|
|
6008
|
+
this.limitWarning.set(rejected > 0 ? this.buildLimitWarning(room, rejected) : null);
|
|
6009
|
+
accepted.forEach((file) => this.add(NsFile.parse(file)));
|
|
6010
|
+
return accepted.length;
|
|
6011
|
+
}
|
|
6012
|
+
buildLimitWarning(room, rejected) {
|
|
6013
|
+
const rejectedPhrase = rejected === 1 ? '1 no se añadió' : `${rejected} no se añadieron`;
|
|
6014
|
+
if (room <= 0) {
|
|
6015
|
+
return `Ya alcanzaste el límite de fotos; ${rejectedPhrase}`;
|
|
6016
|
+
}
|
|
6017
|
+
const roomPhrase = room === 1 ? 'cabe 1 foto' : `caben ${room} fotos`;
|
|
6018
|
+
return `Solo ${roomPhrase}; ${rejectedPhrase}`;
|
|
6019
|
+
}
|
|
5455
6020
|
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: [
|
|
6021
|
+
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
6022
|
{
|
|
5458
6023
|
provide: NG_VALUE_ACCESSOR,
|
|
5459
6024
|
useExisting: forwardRef(() => NsImageUploadComponent),
|
|
5460
6025
|
multi: true
|
|
5461
6026
|
}
|
|
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" }] });
|
|
6027
|
+
], 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", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsImageUrlPipe, name: "nsImageUrl" }] });
|
|
5463
6028
|
}
|
|
5464
6029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsImageUploadComponent, decorators: [{
|
|
5465
6030
|
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()'
|
|
6031
|
+
args: [{ selector: 'ns-image-upload', imports: [CommonModule, NsImageUrlPipe, NsIconsComponent, NsButtonComponent], standalone: true, host: {
|
|
6032
|
+
'[class.ns-image-upload--loaded]': '!multi() && !!value()',
|
|
6033
|
+
'[class.ns-image-upload--disabled]': 'disabled()'
|
|
5469
6034
|
}, providers: [
|
|
5470
6035
|
{
|
|
5471
6036
|
provide: NG_VALUE_ACCESSOR,
|
|
5472
6037
|
useExisting: forwardRef(() => NsImageUploadComponent),
|
|
5473
6038
|
multi: true
|
|
5474
6039
|
}
|
|
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: [{
|
|
6040
|
+
], 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"] }]
|
|
6041
|
+
}], 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
6042
|
type: ViewChild,
|
|
5478
6043
|
args: ['input', { static: false, read: ElementRef }]
|
|
5479
6044
|
}] } });
|
|
@@ -6384,11 +6949,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6384
6949
|
}]
|
|
6385
6950
|
}] });
|
|
6386
6951
|
|
|
6952
|
+
// Fallback for `--ns-component-schedule-slot-height` (mirrors the
|
|
6953
|
+
// `min-height` of `.ns-schedule__timeline-day`): used when the token is
|
|
6954
|
+
// missing, e.g. in tests or SSR where `provideNsTheme` never ran and the
|
|
6955
|
+
// custom property resolves empty.
|
|
6956
|
+
const SLOT_CONTENT_HEIGHT_PX = 96;
|
|
6957
|
+
// Shared border between consecutive timeline rows — comes from the
|
|
6958
|
+
// `@apply border` on `.ns-schedule__timeline-day` (Tailwind's default border
|
|
6959
|
+
// width), not from a theme token.
|
|
6960
|
+
const SLOT_SEAM_PX = 1;
|
|
6387
6961
|
class NsScheduleEventComponent {
|
|
6388
6962
|
schedule = input(undefined, ...(ngDevMode ? [{ debugName: "schedule" }] : /* istanbul ignore next */ []));
|
|
6389
6963
|
timeline = input(undefined, ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
|
|
6390
6964
|
height;
|
|
6391
6965
|
service = inject(NsScheduleService);
|
|
6966
|
+
elementRef = inject((ElementRef));
|
|
6392
6967
|
get matchHour() {
|
|
6393
6968
|
const schedule = this.schedule();
|
|
6394
6969
|
return (!!schedule && new Date(schedule.startTime).getHours() === this.timeline());
|
|
@@ -6399,7 +6974,9 @@ class NsScheduleEventComponent {
|
|
|
6399
6974
|
const startTime = new Date(schedule.startTime);
|
|
6400
6975
|
const endTime = new Date(schedule.endTime);
|
|
6401
6976
|
const hours = Math.abs(startTime.getTime() - endTime.getTime()) / 36e5;
|
|
6402
|
-
|
|
6977
|
+
const slot = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--ns-component-schedule-slot-height'));
|
|
6978
|
+
const slotHeight = Number.isNaN(slot) || slot <= 0 ? SLOT_CONTENT_HEIGHT_PX : slot;
|
|
6979
|
+
this.height = Math.max(slotHeight * hours + SLOT_SEAM_PX * (hours - 1), slotHeight / 2);
|
|
6403
6980
|
}
|
|
6404
6981
|
}
|
|
6405
6982
|
onClick(event) {
|
|
@@ -6410,7 +6987,7 @@ class NsScheduleEventComponent {
|
|
|
6410
6987
|
}
|
|
6411
6988
|
}
|
|
6412
6989
|
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
|
|
6990
|
+
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
6991
|
}
|
|
6415
6992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleEventComponent, decorators: [{
|
|
6416
6993
|
type: Component,
|
|
@@ -6418,7 +6995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6418
6995
|
'[class.ns-schedule__event]': 'true',
|
|
6419
6996
|
'[class.ns-schedule__event--show]': 'schedule() && matchHour',
|
|
6420
6997
|
'[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
|
|
6998
|
+
}, 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
6999
|
}], 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
7000
|
type: HostListener,
|
|
6424
7001
|
args: ['click', ['$event']]
|
|
@@ -6450,7 +7027,7 @@ class DayComponent {
|
|
|
6450
7027
|
.map((x, y) => x + y);
|
|
6451
7028
|
}
|
|
6452
7029
|
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" }] });
|
|
7030
|
+
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
7031
|
}
|
|
6455
7032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DayComponent, decorators: [{
|
|
6456
7033
|
type: Component,
|
|
@@ -6459,7 +7036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6459
7036
|
WeekDayPipe,
|
|
6460
7037
|
FilterByDayPipe,
|
|
6461
7038
|
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"] }]
|
|
7039
|
+
], 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
7040
|
}], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
|
|
6464
7041
|
|
|
6465
7042
|
class WeekComponent {
|
|
@@ -6494,7 +7071,7 @@ class WeekComponent {
|
|
|
6494
7071
|
.map((x, y) => x + y);
|
|
6495
7072
|
}
|
|
6496
7073
|
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" }] });
|
|
7074
|
+
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
7075
|
}
|
|
6499
7076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: WeekComponent, decorators: [{
|
|
6500
7077
|
type: Component,
|
|
@@ -6504,7 +7081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6504
7081
|
NsScheduleCellComponent,
|
|
6505
7082
|
FilterByDayPipe,
|
|
6506
7083
|
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"] }]
|
|
7084
|
+
], 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
7085
|
}], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
|
|
6509
7086
|
|
|
6510
7087
|
class NsWorkweekComponent {
|
|
@@ -6542,7 +7119,7 @@ class NsWorkweekComponent {
|
|
|
6542
7119
|
.map((x, y) => x + y);
|
|
6543
7120
|
}
|
|
6544
7121
|
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" }] });
|
|
7122
|
+
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
7123
|
}
|
|
6547
7124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsWorkweekComponent, decorators: [{
|
|
6548
7125
|
type: Component,
|
|
@@ -6552,7 +7129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6552
7129
|
NsScheduleCellComponent,
|
|
6553
7130
|
NsScheduleEventComponent,
|
|
6554
7131
|
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"] }]
|
|
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': 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
7133
|
}], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
|
|
6557
7134
|
|
|
6558
7135
|
class NsScheduleComponent {
|
|
@@ -6573,7 +7150,7 @@ class NsScheduleComponent {
|
|
|
6573
7150
|
this.selected.set(new Date(date.year, date.month - 1, date.day));
|
|
6574
7151
|
}
|
|
6575
7152
|
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
|
|
7153
|
+
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", "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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
6577
7154
|
}
|
|
6578
7155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, decorators: [{
|
|
6579
7156
|
type: Component,
|
|
@@ -6588,7 +7165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6588
7165
|
NsDropdownItemDirective
|
|
6589
7166
|
], encapsulation: ViewEncapsulation.None, host: {
|
|
6590
7167
|
'[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
|
|
7168
|
+
}, 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
7169
|
}], 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
7170
|
|
|
6594
7171
|
class NsSchemaMarkupComponent {
|
|
@@ -6795,12 +7372,24 @@ const DELTA_GLYPH = {
|
|
|
6795
7372
|
* suffix), and an optional delta pill (`up` / `down` / `neutral`) with a
|
|
6796
7373
|
* caption and a secondary hint. `variant="dark"` renders the emphasis
|
|
6797
7374
|
* surface used for headline metrics; `variant="compact"` renders a smaller
|
|
6798
|
-
* card with a smaller value size
|
|
6799
|
-
*
|
|
7375
|
+
* card with a smaller value size; `variant="tile"` renders a compact KPI
|
|
7376
|
+
* tile (icon circle beside a label/value/delta column, delta as plain
|
|
7377
|
+
* colored text instead of a pill). Set `interactive` to render the card as
|
|
7378
|
+
* a `<button>` and receive `(activated)` instead of a static `<div>`.
|
|
6800
7379
|
*
|
|
6801
7380
|
* `valueTone` colors only the headline value with the matching semantic
|
|
6802
7381
|
* status color (`success`/`warning`/`danger`/`info`); it is ignored on
|
|
6803
|
-
* `variant="dark"`, where the value stays white.
|
|
7382
|
+
* `variant="dark"`, where the value stays white. `hintTone` colors only the
|
|
7383
|
+
* hint with the same semantic scale, independently of `valueTone`; like
|
|
7384
|
+
* `valueTone`, it is ignored on `variant="dark"`, where the hint keeps the
|
|
7385
|
+
* emphasis-surface foreground color instead of a status color. `iconTone`
|
|
7386
|
+
* colors the icon wrapper background/foreground and applies to every
|
|
7387
|
+
* variant.
|
|
7388
|
+
*
|
|
7389
|
+
* The hint's own `margin-inline-start: auto` (pushing it to the opposite
|
|
7390
|
+
* edge from the value) only applies when it shares the meta row with a
|
|
7391
|
+
* `delta` and/or `deltaLabel` — something to separate from. A lone hint
|
|
7392
|
+
* (no delta, no deltaLabel) aligns to the start, under the value.
|
|
6804
7393
|
*/
|
|
6805
7394
|
class NsStatCardComponent {
|
|
6806
7395
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -6811,6 +7400,8 @@ class NsStatCardComponent {
|
|
|
6811
7400
|
deltaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "deltaLabel" }] : /* istanbul ignore next */ []));
|
|
6812
7401
|
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
6813
7402
|
valueTone = input('default', ...(ngDevMode ? [{ debugName: "valueTone" }] : /* istanbul ignore next */ []));
|
|
7403
|
+
hintTone = input('default', ...(ngDevMode ? [{ debugName: "hintTone" }] : /* istanbul ignore next */ []));
|
|
7404
|
+
iconTone = input('neutral', ...(ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []));
|
|
6814
7405
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
6815
7406
|
interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6816
7407
|
activated = output();
|
|
@@ -6821,7 +7412,7 @@ class NsStatCardComponent {
|
|
|
6821
7412
|
this.activated.emit();
|
|
6822
7413
|
}
|
|
6823
7414
|
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: `
|
|
7415
|
+
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
7416
|
@if (interactive()) {
|
|
6826
7417
|
<button
|
|
6827
7418
|
type="button"
|
|
@@ -6835,63 +7426,127 @@ class NsStatCardComponent {
|
|
|
6835
7426
|
<ng-container [ngTemplateOutlet]="content" />
|
|
6836
7427
|
</div>
|
|
6837
7428
|
}
|
|
6838
|
-
<ng-template #
|
|
6839
|
-
<
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
7429
|
+
<ng-template #iconWrapper>
|
|
7430
|
+
<span
|
|
7431
|
+
class="ns-stat-card__icon"
|
|
7432
|
+
[class.ns-stat-card__icon--info]="iconTone() === 'info'"
|
|
7433
|
+
[class.ns-stat-card__icon--success]="iconTone() === 'success'"
|
|
7434
|
+
[class.ns-stat-card__icon--warning]="iconTone() === 'warning'"
|
|
7435
|
+
[class.ns-stat-card__icon--danger]="iconTone() === 'danger'"
|
|
7436
|
+
[class.ns-stat-card__icon--neutral]="iconTone() === 'neutral'"
|
|
7437
|
+
><ng-content select="[stat-card-icon]"
|
|
7438
|
+
/></span>
|
|
7439
|
+
</ng-template>
|
|
7440
|
+
<ng-template #footerSlot>
|
|
7441
|
+
<div class="ns-stat-card__footer">
|
|
7442
|
+
<ng-content select="[stat-card-footer]" />
|
|
6846
7443
|
</div>
|
|
6847
|
-
|
|
6848
|
-
|
|
6849
|
-
|
|
6850
|
-
|
|
7444
|
+
</ng-template>
|
|
7445
|
+
<ng-template #deltaBadge>
|
|
7446
|
+
<span
|
|
7447
|
+
class="ns-stat-card__delta"
|
|
7448
|
+
[class.ns-stat-card__delta--up]="deltaTone() === 'up'"
|
|
7449
|
+
[class.ns-stat-card__delta--down]="deltaTone() === 'down'"
|
|
7450
|
+
[class.ns-stat-card__delta--neutral]="deltaTone() === 'neutral'"
|
|
7451
|
+
>
|
|
7452
|
+
<span class="ns-stat-card__delta-icon" aria-hidden="true">{{
|
|
7453
|
+
deltaGlyph()
|
|
7454
|
+
}}</span
|
|
7455
|
+
>{{ delta() }}
|
|
7456
|
+
</span>
|
|
7457
|
+
</ng-template>
|
|
7458
|
+
<ng-template #hintText>
|
|
7459
|
+
<span
|
|
7460
|
+
class="ns-stat-card__hint"
|
|
7461
|
+
[class.ns-stat-card__hint--success]="
|
|
7462
|
+
hintTone() === 'success' && variant() !== 'dark'
|
|
6851
7463
|
"
|
|
6852
|
-
[class.ns-stat-
|
|
6853
|
-
|
|
7464
|
+
[class.ns-stat-card__hint--warning]="
|
|
7465
|
+
hintTone() === 'warning' && variant() !== 'dark'
|
|
6854
7466
|
"
|
|
6855
|
-
[class.ns-stat-
|
|
6856
|
-
|
|
7467
|
+
[class.ns-stat-card__hint--danger]="
|
|
7468
|
+
hintTone() === 'danger' && variant() !== 'dark'
|
|
6857
7469
|
"
|
|
6858
|
-
[class.ns-stat-
|
|
6859
|
-
|
|
7470
|
+
[class.ns-stat-card__hint--info]="
|
|
7471
|
+
hintTone() === 'info' && variant() !== 'dark'
|
|
6860
7472
|
"
|
|
7473
|
+
>{{ hint() }}</span
|
|
6861
7474
|
>
|
|
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() }}
|
|
7475
|
+
</ng-template>
|
|
7476
|
+
<ng-template #content>
|
|
7477
|
+
@if (variant() === 'tile') {
|
|
7478
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7479
|
+
<div class="ns-stat-card__column">
|
|
7480
|
+
<span class="ns-stat-card__label">{{ label() }}</span>
|
|
7481
|
+
<div class="ns-stat-card__value-row">
|
|
7482
|
+
<span class="ns-stat-card__value">
|
|
7483
|
+
{{ value() }}
|
|
7484
|
+
@if (suffix()) {
|
|
7485
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
7486
|
+
}
|
|
6880
7487
|
</span>
|
|
7488
|
+
@if (delta()) {
|
|
7489
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7490
|
+
}
|
|
7491
|
+
</div>
|
|
7492
|
+
@if (deltaLabel() || hint()) {
|
|
7493
|
+
<div class="ns-stat-card__meta">
|
|
7494
|
+
@if (deltaLabel()) {
|
|
7495
|
+
<span class="ns-stat-card__delta-label">{{
|
|
7496
|
+
deltaLabel()
|
|
7497
|
+
}}</span>
|
|
7498
|
+
}
|
|
7499
|
+
@if (hint()) {
|
|
7500
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7501
|
+
}
|
|
7502
|
+
</div>
|
|
6881
7503
|
}
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
7504
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
7505
|
+
</div>
|
|
7506
|
+
} @else {
|
|
7507
|
+
<div class="ns-stat-card__header">
|
|
7508
|
+
<span class="ns-stat-card__label">
|
|
7509
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7510
|
+
{{ label() }}
|
|
7511
|
+
</span>
|
|
7512
|
+
</div>
|
|
7513
|
+
<div
|
|
7514
|
+
class="ns-stat-card__value"
|
|
7515
|
+
[class.ns-stat-card__value--success]="
|
|
7516
|
+
valueTone() === 'success' && variant() !== 'dark'
|
|
7517
|
+
"
|
|
7518
|
+
[class.ns-stat-card__value--warning]="
|
|
7519
|
+
valueTone() === 'warning' && variant() !== 'dark'
|
|
7520
|
+
"
|
|
7521
|
+
[class.ns-stat-card__value--danger]="
|
|
7522
|
+
valueTone() === 'danger' && variant() !== 'dark'
|
|
7523
|
+
"
|
|
7524
|
+
[class.ns-stat-card__value--info]="
|
|
7525
|
+
valueTone() === 'info' && variant() !== 'dark'
|
|
7526
|
+
"
|
|
7527
|
+
>
|
|
7528
|
+
{{ value() }}
|
|
7529
|
+
@if (suffix()) {
|
|
7530
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
6887
7531
|
}
|
|
6888
7532
|
</div>
|
|
7533
|
+
@if (delta() || hint()) {
|
|
7534
|
+
<div class="ns-stat-card__meta">
|
|
7535
|
+
@if (delta()) {
|
|
7536
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7537
|
+
}
|
|
7538
|
+
@if (deltaLabel()) {
|
|
7539
|
+
<span class="ns-stat-card__delta-label">{{ deltaLabel() }}</span>
|
|
7540
|
+
}
|
|
7541
|
+
@if (hint()) {
|
|
7542
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7543
|
+
}
|
|
7544
|
+
</div>
|
|
7545
|
+
}
|
|
7546
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
6889
7547
|
}
|
|
6890
|
-
<div class="ns-stat-card__footer">
|
|
6891
|
-
<ng-content select="[stat-card-footer]" />
|
|
6892
|
-
</div>
|
|
6893
7548
|
</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);
|
|
7549
|
+
`, 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
7550
|
}
|
|
6896
7551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsStatCardComponent, decorators: [{
|
|
6897
7552
|
type: Component,
|
|
@@ -6909,70 +7564,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
6909
7564
|
<ng-container [ngTemplateOutlet]="content" />
|
|
6910
7565
|
</div>
|
|
6911
7566
|
}
|
|
6912
|
-
<ng-template #
|
|
6913
|
-
<
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
7567
|
+
<ng-template #iconWrapper>
|
|
7568
|
+
<span
|
|
7569
|
+
class="ns-stat-card__icon"
|
|
7570
|
+
[class.ns-stat-card__icon--info]="iconTone() === 'info'"
|
|
7571
|
+
[class.ns-stat-card__icon--success]="iconTone() === 'success'"
|
|
7572
|
+
[class.ns-stat-card__icon--warning]="iconTone() === 'warning'"
|
|
7573
|
+
[class.ns-stat-card__icon--danger]="iconTone() === 'danger'"
|
|
7574
|
+
[class.ns-stat-card__icon--neutral]="iconTone() === 'neutral'"
|
|
7575
|
+
><ng-content select="[stat-card-icon]"
|
|
7576
|
+
/></span>
|
|
7577
|
+
</ng-template>
|
|
7578
|
+
<ng-template #footerSlot>
|
|
7579
|
+
<div class="ns-stat-card__footer">
|
|
7580
|
+
<ng-content select="[stat-card-footer]" />
|
|
6920
7581
|
</div>
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
|
|
7582
|
+
</ng-template>
|
|
7583
|
+
<ng-template #deltaBadge>
|
|
7584
|
+
<span
|
|
7585
|
+
class="ns-stat-card__delta"
|
|
7586
|
+
[class.ns-stat-card__delta--up]="deltaTone() === 'up'"
|
|
7587
|
+
[class.ns-stat-card__delta--down]="deltaTone() === 'down'"
|
|
7588
|
+
[class.ns-stat-card__delta--neutral]="deltaTone() === 'neutral'"
|
|
7589
|
+
>
|
|
7590
|
+
<span class="ns-stat-card__delta-icon" aria-hidden="true">{{
|
|
7591
|
+
deltaGlyph()
|
|
7592
|
+
}}</span
|
|
7593
|
+
>{{ delta() }}
|
|
7594
|
+
</span>
|
|
7595
|
+
</ng-template>
|
|
7596
|
+
<ng-template #hintText>
|
|
7597
|
+
<span
|
|
7598
|
+
class="ns-stat-card__hint"
|
|
7599
|
+
[class.ns-stat-card__hint--success]="
|
|
7600
|
+
hintTone() === 'success' && variant() !== 'dark'
|
|
6925
7601
|
"
|
|
6926
|
-
[class.ns-stat-
|
|
6927
|
-
|
|
7602
|
+
[class.ns-stat-card__hint--warning]="
|
|
7603
|
+
hintTone() === 'warning' && variant() !== 'dark'
|
|
6928
7604
|
"
|
|
6929
|
-
[class.ns-stat-
|
|
6930
|
-
|
|
7605
|
+
[class.ns-stat-card__hint--danger]="
|
|
7606
|
+
hintTone() === 'danger' && variant() !== 'dark'
|
|
6931
7607
|
"
|
|
6932
|
-
[class.ns-stat-
|
|
6933
|
-
|
|
7608
|
+
[class.ns-stat-card__hint--info]="
|
|
7609
|
+
hintTone() === 'info' && variant() !== 'dark'
|
|
6934
7610
|
"
|
|
7611
|
+
>{{ hint() }}</span
|
|
6935
7612
|
>
|
|
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() }}
|
|
7613
|
+
</ng-template>
|
|
7614
|
+
<ng-template #content>
|
|
7615
|
+
@if (variant() === 'tile') {
|
|
7616
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7617
|
+
<div class="ns-stat-card__column">
|
|
7618
|
+
<span class="ns-stat-card__label">{{ label() }}</span>
|
|
7619
|
+
<div class="ns-stat-card__value-row">
|
|
7620
|
+
<span class="ns-stat-card__value">
|
|
7621
|
+
{{ value() }}
|
|
7622
|
+
@if (suffix()) {
|
|
7623
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
7624
|
+
}
|
|
6954
7625
|
</span>
|
|
7626
|
+
@if (delta()) {
|
|
7627
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7628
|
+
}
|
|
7629
|
+
</div>
|
|
7630
|
+
@if (deltaLabel() || hint()) {
|
|
7631
|
+
<div class="ns-stat-card__meta">
|
|
7632
|
+
@if (deltaLabel()) {
|
|
7633
|
+
<span class="ns-stat-card__delta-label">{{
|
|
7634
|
+
deltaLabel()
|
|
7635
|
+
}}</span>
|
|
7636
|
+
}
|
|
7637
|
+
@if (hint()) {
|
|
7638
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7639
|
+
}
|
|
7640
|
+
</div>
|
|
6955
7641
|
}
|
|
6956
|
-
|
|
6957
|
-
|
|
6958
|
-
|
|
6959
|
-
|
|
6960
|
-
|
|
7642
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
7643
|
+
</div>
|
|
7644
|
+
} @else {
|
|
7645
|
+
<div class="ns-stat-card__header">
|
|
7646
|
+
<span class="ns-stat-card__label">
|
|
7647
|
+
<ng-container [ngTemplateOutlet]="iconWrapper" />
|
|
7648
|
+
{{ label() }}
|
|
7649
|
+
</span>
|
|
7650
|
+
</div>
|
|
7651
|
+
<div
|
|
7652
|
+
class="ns-stat-card__value"
|
|
7653
|
+
[class.ns-stat-card__value--success]="
|
|
7654
|
+
valueTone() === 'success' && variant() !== 'dark'
|
|
7655
|
+
"
|
|
7656
|
+
[class.ns-stat-card__value--warning]="
|
|
7657
|
+
valueTone() === 'warning' && variant() !== 'dark'
|
|
7658
|
+
"
|
|
7659
|
+
[class.ns-stat-card__value--danger]="
|
|
7660
|
+
valueTone() === 'danger' && variant() !== 'dark'
|
|
7661
|
+
"
|
|
7662
|
+
[class.ns-stat-card__value--info]="
|
|
7663
|
+
valueTone() === 'info' && variant() !== 'dark'
|
|
7664
|
+
"
|
|
7665
|
+
>
|
|
7666
|
+
{{ value() }}
|
|
7667
|
+
@if (suffix()) {
|
|
7668
|
+
<span class="ns-stat-card__suffix">{{ suffix() }}</span>
|
|
6961
7669
|
}
|
|
6962
7670
|
</div>
|
|
7671
|
+
@if (delta() || hint()) {
|
|
7672
|
+
<div class="ns-stat-card__meta">
|
|
7673
|
+
@if (delta()) {
|
|
7674
|
+
<ng-container [ngTemplateOutlet]="deltaBadge" />
|
|
7675
|
+
}
|
|
7676
|
+
@if (deltaLabel()) {
|
|
7677
|
+
<span class="ns-stat-card__delta-label">{{ deltaLabel() }}</span>
|
|
7678
|
+
}
|
|
7679
|
+
@if (hint()) {
|
|
7680
|
+
<ng-container [ngTemplateOutlet]="hintText" />
|
|
7681
|
+
}
|
|
7682
|
+
</div>
|
|
7683
|
+
}
|
|
7684
|
+
<ng-container [ngTemplateOutlet]="footerSlot" />
|
|
6963
7685
|
}
|
|
6964
|
-
<div class="ns-stat-card__footer">
|
|
6965
|
-
<ng-content select="[stat-card-footer]" />
|
|
6966
|
-
</div>
|
|
6967
7686
|
</ng-template>
|
|
6968
7687
|
`, host: {
|
|
6969
7688
|
'[class.ns-stat-card]': 'true',
|
|
6970
7689
|
'[class.ns-stat-card--default]': "variant() === 'default'",
|
|
6971
7690
|
'[class.ns-stat-card--dark]': "variant() === 'dark'",
|
|
6972
7691
|
'[class.ns-stat-card--compact]': "variant() === 'compact'",
|
|
7692
|
+
'[class.ns-stat-card--tile]': "variant() === 'tile'",
|
|
6973
7693
|
'[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"] }] } });
|
|
7694
|
+
}, 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"] }]
|
|
7695
|
+
}], 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
7696
|
|
|
6977
7697
|
class TemplateDirective {
|
|
6978
7698
|
name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'nsTemplate' });
|
|
@@ -7011,13 +7731,25 @@ const Arvisfy = {
|
|
|
7011
7731
|
},
|
|
7012
7732
|
neutral: {
|
|
7013
7733
|
0: '#FFFFFF',
|
|
7734
|
+
// Editor footer background (batch 10), proto 2732.
|
|
7735
|
+
15: '#FCFCFB',
|
|
7736
|
+
// Editor toolbar background (batch 9): warmer and lighter than `50`,
|
|
7737
|
+
// matches the literal previously kept as its own
|
|
7738
|
+
// `editor.toolbarBackground` primitive.
|
|
7739
|
+
25: '#FAFAF9',
|
|
7740
|
+
// Toolbar search-field background (batch 10), proto 1121.
|
|
7741
|
+
35: '#F8F8F7',
|
|
7014
7742
|
50: '#F7F8FA',
|
|
7015
7743
|
100: '#F5F5F4',
|
|
7744
|
+
// Empty-state icon circle background (batch 10), proto 1172.
|
|
7745
|
+
125: '#F4F5F7',
|
|
7016
7746
|
// Neutral status-pill background (batch 6), distinct from `100`.
|
|
7017
7747
|
150: '#F1F2F4',
|
|
7018
7748
|
200: '#E8E8E6',
|
|
7019
7749
|
300: '#E4E4E2',
|
|
7020
7750
|
400: '#A9AAAF',
|
|
7751
|
+
// Empty-state icon glyph color (batch 10), proto 1173.
|
|
7752
|
+
450: '#9EA1A8',
|
|
7021
7753
|
500: '#8A8C93',
|
|
7022
7754
|
600: '#6E7078',
|
|
7023
7755
|
// Inactive pill-tab chrome text (batch 6), distinct from `600`/`700`.
|
|
@@ -7075,6 +7807,16 @@ const Arvisfy = {
|
|
|
7075
7807
|
secondaryForeground: '#13182A',
|
|
7076
7808
|
tertiaryForeground: '#13182A'
|
|
7077
7809
|
},
|
|
7810
|
+
// `ns-image-upload[layout="cover"]` badge/action chips (AVF-8):
|
|
7811
|
+
// translucent dark overlay over the cover photo — decided as a
|
|
7812
|
+
// literal rgba pair rather than a theme color, since it must read at
|
|
7813
|
+
// ~11.2:1 contrast against any photo, not a themed surface. Reused
|
|
7814
|
+
// as-is for dark mode: it is already a fixed dark overlay, not a
|
|
7815
|
+
// theme-relative surface.
|
|
7816
|
+
imageUpload: {
|
|
7817
|
+
chipBackground: 'rgba(18, 24, 43, .82)',
|
|
7818
|
+
chipBackgroundHover: 'rgba(18, 24, 43, .64)'
|
|
7819
|
+
},
|
|
7078
7820
|
dark: {
|
|
7079
7821
|
canvas: '#0C1220',
|
|
7080
7822
|
surface: '#151C2B',
|
|
@@ -7121,12 +7863,39 @@ const Arvisfy = {
|
|
|
7121
7863
|
// distinct from `neutral.300` (the general control/card border).
|
|
7122
7864
|
modal: {
|
|
7123
7865
|
footerBorder: '#EFEFEE'
|
|
7866
|
+
},
|
|
7867
|
+
// `ns-editor` toolbar chrome (batch 8), measured on the prototype's
|
|
7868
|
+
// rich-text toolbar. The toolbar background moved into the shared
|
|
7869
|
+
// `neutral.25` scale step (batch 9); only the border stays a
|
|
7870
|
+
// component-local primitive.
|
|
7871
|
+
editor: {
|
|
7872
|
+
// Hairline under the toolbar and the action-button hover wash;
|
|
7873
|
+
// lighter than `neutral.200`/`300`. Same value as
|
|
7874
|
+
// `modal.footerBorder`, kept as its own primitive so the two can
|
|
7875
|
+
// diverge independently.
|
|
7876
|
+
toolbarBorder: '#EFEFEE'
|
|
7877
|
+
},
|
|
7878
|
+
// `ns-stat-tile` icon tones (batch 10), measured on the prototype's KPI
|
|
7879
|
+
// tile row (proto 1069-1113). `successForeground` is not duplicated
|
|
7880
|
+
// here: it reuses the existing `success.600` primitive.
|
|
7881
|
+
tile: {
|
|
7882
|
+
infoBackground: '#E7EEFF',
|
|
7883
|
+
infoForeground: '#3D6BE0',
|
|
7884
|
+
successBackground: '#E9F7EF',
|
|
7885
|
+
warningBackground: '#FEF3E1',
|
|
7886
|
+
warningForeground: '#B9791A',
|
|
7887
|
+
dangerBackground: '#FBE9E9',
|
|
7888
|
+
dangerForeground: '#D64545'
|
|
7124
7889
|
}
|
|
7125
7890
|
},
|
|
7126
7891
|
letterSpacing: {
|
|
7127
7892
|
wide: '0.08em',
|
|
7128
7893
|
tight: '-0.035em',
|
|
7129
|
-
tighter: '-0.04em'
|
|
7894
|
+
tighter: '-0.04em',
|
|
7895
|
+
// `ns-stat-tile` value letter-spacing (batch 10): the tile's KPI value
|
|
7896
|
+
// reads at the default tracking, distinct from the tighter `stat-card`
|
|
7897
|
+
// display figures.
|
|
7898
|
+
normal: '0'
|
|
7130
7899
|
},
|
|
7131
7900
|
font: {
|
|
7132
7901
|
family: {
|
|
@@ -7147,7 +7916,23 @@ const Arvisfy = {
|
|
|
7147
7916
|
displayMd: '1.8125rem',
|
|
7148
7917
|
displayLg: '2.25rem',
|
|
7149
7918
|
// `ns-modal`'s projected `[modal-description]` subtitle (batch 6).
|
|
7150
|
-
modalDescription: '0.8125rem'
|
|
7919
|
+
modalDescription: '0.8125rem',
|
|
7920
|
+
// Form-field label size (batch 9): 12.5px, measured on the
|
|
7921
|
+
// prototype's field labels — distinct from the 14px `sm` used
|
|
7922
|
+
// elsewhere for body copy.
|
|
7923
|
+
label: '0.78125rem',
|
|
7924
|
+
// Button label size (batch 9): 13px, measured on the prototype's
|
|
7925
|
+
// buttons.
|
|
7926
|
+
control: '0.8125rem',
|
|
7927
|
+
// `ns-editor` footer caption (batch 10): 11.5px, proto 2732 (shared
|
|
7928
|
+
// with the stat-tile hint text, proto 1080).
|
|
7929
|
+
caption: '0.71875rem',
|
|
7930
|
+
// `ns-empty-state[size="sm"]` title (batch 10): 13.5px, proto 1594.
|
|
7931
|
+
headingXs: '0.84375rem',
|
|
7932
|
+
// `ns-empty-state[size="md"]` title (batch 10): 14.5px, proto 1035.
|
|
7933
|
+
headingSm: '0.90625rem',
|
|
7934
|
+
// `ns-empty-state[size="lg"]` title (batch 10): 15px, proto 1176.
|
|
7935
|
+
headingMd: '0.9375rem'
|
|
7151
7936
|
},
|
|
7152
7937
|
weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
|
|
7153
7938
|
lineHeight: { compact: 1.25, normal: 1.5, display: 1 }
|
|
@@ -7183,11 +7968,21 @@ const Arvisfy = {
|
|
|
7183
7968
|
// 4px is ~20% of the box side and matches the "rounded" convention
|
|
7184
7969
|
// used by other systems (Tailwind's default `rounded`, Radix,
|
|
7185
7970
|
// GitHub Primer) for compact 16-20px controls.
|
|
7186
|
-
xs: '0.25rem'
|
|
7971
|
+
xs: '0.25rem',
|
|
7972
|
+
// `ns-editor` toolbar action-button corner (batch 8): 7px. Neither
|
|
7973
|
+
// `pill` (8px) nor `sm` (12px) matches the prototype's tighter,
|
|
7974
|
+
// 28px-square toolbar buttons — both read too round at that size.
|
|
7975
|
+
editorAction: '0.4375rem',
|
|
7976
|
+
// `ns-stat-tile` corner radius (batch 10): 14px, proto 1069.
|
|
7977
|
+
tile: '0.875rem'
|
|
7187
7978
|
},
|
|
7188
7979
|
border: {
|
|
7189
7980
|
thin: '1px',
|
|
7190
|
-
medium: '1.5px'
|
|
7981
|
+
medium: '1.5px',
|
|
7982
|
+
// `ns-card[borderless]`/`ns-stat-tile` (batch 10): a tile/card without
|
|
7983
|
+
// a visible border still needs a slot in the border scale so its
|
|
7984
|
+
// `borderWidth` can reference the tier-3 primitive/semantic chain.
|
|
7985
|
+
none: '0'
|
|
7191
7986
|
},
|
|
7192
7987
|
opacity: {
|
|
7193
7988
|
backdrop: 0.7,
|
|
@@ -7272,6 +8067,11 @@ const Arvisfy = {
|
|
|
7272
8067
|
switchThumbTranslateSm: '12px',
|
|
7273
8068
|
chipPillPaddingBlock: '5px',
|
|
7274
8069
|
chipPillPaddingInline: '10px',
|
|
8070
|
+
// `ns-chip[size="choice"]` (batch 9): a rectangular selection chip
|
|
8071
|
+
// measured on the prototype's sales-channel picker, distinct from the
|
|
8072
|
+
// `md` default's pill/round family above.
|
|
8073
|
+
chipChoiceMinHeight: '34px',
|
|
8074
|
+
chipChoicePaddingInline: '13px',
|
|
7275
8075
|
tabsPillPaddingBlock: '7px',
|
|
7276
8076
|
tabsPillPaddingInline: '15px',
|
|
7277
8077
|
timelineDot: '9px',
|
|
@@ -7309,14 +8109,81 @@ const Arvisfy = {
|
|
|
7309
8109
|
statCardPaddingInline: '22px',
|
|
7310
8110
|
statCardPaddingBlockCompact: '16px',
|
|
7311
8111
|
statCardPaddingInlineCompact: '18px',
|
|
7312
|
-
|
|
8112
|
+
// Batch 10: 34px, up from 28px, proto 770 — the icon badge grew to
|
|
8113
|
+
// match the redesigned KPI icon treatment.
|
|
8114
|
+
statCardIconSize: '34px',
|
|
8115
|
+
// `ns-stat-card` icon glyph (batch 10), proto 771.
|
|
8116
|
+
statCardIconGlyphSize: '16px',
|
|
8117
|
+
// `ns-stat-card[variant="tile"]` (batch 10), proto 1069-1113.
|
|
8118
|
+
statTileIconSize: '36px',
|
|
8119
|
+
statTileGap: '12px',
|
|
8120
|
+
statTileColumnGap: '6px',
|
|
8121
|
+
statTilePaddingBlock: '14px',
|
|
8122
|
+
statTilePaddingInline: '16px',
|
|
8123
|
+
// `ns-empty-state` icon circle sizes (batch 10), proto 1171-1177 (lg),
|
|
8124
|
+
// 1030-1036 (md), 1593-1599 (sm).
|
|
8125
|
+
emptyStateIconLg: '72px',
|
|
8126
|
+
emptyStateIconMd: '64px',
|
|
8127
|
+
emptyStateIconSm: '52px',
|
|
8128
|
+
emptyStateGlyphLg: '28px',
|
|
8129
|
+
emptyStateGlyphMd: '26px',
|
|
8130
|
+
emptyStateGlyphSm: '22px',
|
|
8131
|
+
emptyStateMaxWidthLg: '320px',
|
|
8132
|
+
emptyStateMaxWidthMd: '280px',
|
|
8133
|
+
emptyStateMaxWidthSm: '220px',
|
|
8134
|
+
emptyStateGap: '14px',
|
|
8135
|
+
emptyStatePaddingBlockLg: '64px',
|
|
8136
|
+
emptyStatePaddingBlockMd: '56px',
|
|
8137
|
+
emptyStatePaddingBlockSm: '36px',
|
|
8138
|
+
// `ns-input-search` leading glyph (batch 10), proto 1120.
|
|
8139
|
+
searchIconSize: '15px',
|
|
8140
|
+
// `ns-editor` footer chrome (batch 10), proto 2729-2732.
|
|
8141
|
+
editorContentMinHeight: '118px',
|
|
8142
|
+
editorContentPadding: '14px',
|
|
8143
|
+
editorFooterPaddingInline: '14px',
|
|
7313
8144
|
commandPalette: '40rem',
|
|
7314
|
-
commandPaletteItemIcon: '20px'
|
|
8145
|
+
commandPaletteItemIcon: '20px',
|
|
8146
|
+
// `ns-editor` toolbar chrome (batch 8), measured on the prototype's
|
|
8147
|
+
// rich-text toolbar.
|
|
8148
|
+
editorToolButton: '28px',
|
|
8149
|
+
editorToolIcon: '16px',
|
|
8150
|
+
editorToolbarPaddingBlock: '6px',
|
|
8151
|
+
editorSeparatorHeight: '18px',
|
|
8152
|
+
editorSeparatorSpacing: '6px',
|
|
8153
|
+
editorToolbarGap: '2px',
|
|
8154
|
+
// The color-picker's chevron indicator is smaller than the other
|
|
8155
|
+
// toolbar glyphs; a dedicated size keeps `.ns-editor__toggle` out of
|
|
8156
|
+
// the generic per-button `svg` sizing rule.
|
|
8157
|
+
editorToggleIconSize: '12px',
|
|
8158
|
+
// `ns-image-upload[layout="cover"]` (AVF-19, was 30rem in AVF-8):
|
|
8159
|
+
// empty-state dropzone minimum height. Also the single source of
|
|
8160
|
+
// truth for the filled state's height since AVF-29 — the component's
|
|
8161
|
+
// stylesheet reuses this exact token (never a fixed per-row size) for
|
|
8162
|
+
// `.ns-image-upload__cover`/`.ns-image-upload__stack`, so both states
|
|
8163
|
+
// move together whatever this resolves to, and `grid-auto-rows` there
|
|
8164
|
+
// divides it among the reserved rows instead of the rows driving the
|
|
8165
|
+
// height. See `imageUpload.stackGap` below for why it no longer
|
|
8166
|
+
// participates in that arithmetic. The per-row size token this used
|
|
8167
|
+
// to share that arithmetic with, `thumbnailSize`, has been retired —
|
|
8168
|
+
// it no longer has any effect, and the retired-token registry warns
|
|
8169
|
+
// anyone who still overrides it.
|
|
8170
|
+
emptyMinHeight: '17.5rem',
|
|
8171
|
+
// Empty-state icon circle (AVF-8): distinct from `emptyStateIconLg`
|
|
8172
|
+
// (72px) — this is the larger cover-dropzone treatment, not the
|
|
8173
|
+
// generic `ns-empty-state` component.
|
|
8174
|
+
emptyIconCircleSize: '6.875rem',
|
|
8175
|
+
emptyIconSize: '2.5rem',
|
|
8176
|
+
addIconSize: '1.75rem'
|
|
7315
8177
|
},
|
|
7316
8178
|
layout: {
|
|
7317
8179
|
scheduleDay: '[index] 3rem [timeline] minmax(0, 1fr)',
|
|
7318
8180
|
scheduleWeek: '[index] 3rem repeat(7, minmax(0, 1fr))',
|
|
7319
|
-
scheduleWorkweek: '[index] 3rem repeat(5, minmax(0, 1fr))'
|
|
8181
|
+
scheduleWorkweek: '[index] 3rem repeat(5, minmax(0, 1fr))',
|
|
8182
|
+
// Timeline row height for a single hour slot (`.ns-schedule__timeline-day`).
|
|
8183
|
+
// Must be `px`, not `rem`: `event.component.ts` reads this custom
|
|
8184
|
+
// property back with `getComputedStyle` at runtime, which returns the
|
|
8185
|
+
// value as written rather than resolving it to pixels.
|
|
8186
|
+
scheduleSlotHeight: '96px'
|
|
7320
8187
|
},
|
|
7321
8188
|
zIndex: { overlay: 1000, backdrop: 1050, modal: 1060, toast: 1080 }
|
|
7322
8189
|
},
|
|
@@ -7325,25 +8192,40 @@ const Arvisfy = {
|
|
|
7325
8192
|
font: {
|
|
7326
8193
|
body: '{primitive.font.family.sans}',
|
|
7327
8194
|
display: '{primitive.font.family.display}',
|
|
7328
|
-
code: '{primitive.font.family.mono}'
|
|
8195
|
+
code: '{primitive.font.family.mono}',
|
|
8196
|
+
// `ns-stat-tile` value typeface (batch 10): no dedicated semantic
|
|
8197
|
+
// name existed for the sans family — `body` already resolves to the
|
|
8198
|
+
// same primitive but under a name that doesn't read as a font-family
|
|
8199
|
+
// token at the tile's call site.
|
|
8200
|
+
sans: '{primitive.font.family.sans}'
|
|
7329
8201
|
},
|
|
7330
8202
|
text: {
|
|
7331
8203
|
xs: '{primitive.font.size.xs}',
|
|
7332
8204
|
sm: '{primitive.font.size.sm}',
|
|
7333
8205
|
md: '{primitive.font.size.md}',
|
|
7334
8206
|
lg: '{primitive.font.size.lg}',
|
|
8207
|
+
// `ns-stat-tile` value size (batch 10): the `xl` step existed as a
|
|
8208
|
+
// primitive but had no semantic mirror yet.
|
|
8209
|
+
xl: '{primitive.font.size.xl}',
|
|
7335
8210
|
navItem: '{primitive.font.size.navItem}',
|
|
7336
8211
|
navItemDescription: '{primitive.font.size.navItemDescription}',
|
|
7337
8212
|
navEyebrow: '{primitive.font.size.navEyebrow}',
|
|
7338
8213
|
displaySm: '{primitive.font.size.displaySm}',
|
|
7339
8214
|
displayMd: '{primitive.font.size.displayMd}',
|
|
7340
8215
|
displayLg: '{primitive.font.size.displayLg}',
|
|
7341
|
-
modalDescription: '{primitive.font.size.modalDescription}'
|
|
8216
|
+
modalDescription: '{primitive.font.size.modalDescription}',
|
|
8217
|
+
label: '{primitive.font.size.label}',
|
|
8218
|
+
control: '{primitive.font.size.control}',
|
|
8219
|
+
caption: '{primitive.font.size.caption}',
|
|
8220
|
+
headingXs: '{primitive.font.size.headingXs}',
|
|
8221
|
+
headingSm: '{primitive.font.size.headingSm}',
|
|
8222
|
+
headingMd: '{primitive.font.size.headingMd}'
|
|
7342
8223
|
},
|
|
7343
8224
|
letterSpacing: {
|
|
7344
8225
|
wide: '{primitive.letterSpacing.wide}',
|
|
7345
8226
|
tight: '{primitive.letterSpacing.tight}',
|
|
7346
|
-
tighter: '{primitive.letterSpacing.tighter}'
|
|
8227
|
+
tighter: '{primitive.letterSpacing.tighter}',
|
|
8228
|
+
normal: '{primitive.letterSpacing.normal}'
|
|
7347
8229
|
},
|
|
7348
8230
|
navRail: {
|
|
7349
8231
|
text: '{primitive.color.navRail.text}',
|
|
@@ -7382,11 +8264,14 @@ const Arvisfy = {
|
|
|
7382
8264
|
field: '{primitive.radius.field}',
|
|
7383
8265
|
// Dedicated slot for the checkbox box (batch 7): kept separate from
|
|
7384
8266
|
// `control` so button/input/menu radii are untouched.
|
|
7385
|
-
checkbox: '{primitive.radius.xs}'
|
|
8267
|
+
checkbox: '{primitive.radius.xs}',
|
|
8268
|
+
editorAction: '{primitive.radius.editorAction}',
|
|
8269
|
+
tile: '{primitive.radius.tile}'
|
|
7386
8270
|
},
|
|
7387
8271
|
border: {
|
|
7388
8272
|
thin: '{primitive.border.thin}',
|
|
7389
|
-
medium: '{primitive.border.medium}'
|
|
8273
|
+
medium: '{primitive.border.medium}',
|
|
8274
|
+
none: '{primitive.border.none}'
|
|
7390
8275
|
},
|
|
7391
8276
|
opacity: {
|
|
7392
8277
|
backdrop: '{primitive.opacity.backdrop}',
|
|
@@ -7443,6 +8328,8 @@ const Arvisfy = {
|
|
|
7443
8328
|
switchThumbTranslateSm: '{primitive.size.switchThumbTranslateSm}',
|
|
7444
8329
|
chipPillPaddingBlock: '{primitive.size.chipPillPaddingBlock}',
|
|
7445
8330
|
chipPillPaddingInline: '{primitive.size.chipPillPaddingInline}',
|
|
8331
|
+
chipChoiceMinHeight: '{primitive.size.chipChoiceMinHeight}',
|
|
8332
|
+
chipChoicePaddingInline: '{primitive.size.chipChoicePaddingInline}',
|
|
7446
8333
|
tabsPillPaddingBlock: '{primitive.size.tabsPillPaddingBlock}',
|
|
7447
8334
|
tabsPillPaddingInline: '{primitive.size.tabsPillPaddingInline}',
|
|
7448
8335
|
timelineDot: '{primitive.size.timelineDot}',
|
|
@@ -7471,8 +8358,42 @@ const Arvisfy = {
|
|
|
7471
8358
|
statCardPaddingBlockCompact: '{primitive.size.statCardPaddingBlockCompact}',
|
|
7472
8359
|
statCardPaddingInlineCompact: '{primitive.size.statCardPaddingInlineCompact}',
|
|
7473
8360
|
statCardIconSize: '{primitive.size.statCardIconSize}',
|
|
8361
|
+
statCardIconGlyphSize: '{primitive.size.statCardIconGlyphSize}',
|
|
8362
|
+
statTileIconSize: '{primitive.size.statTileIconSize}',
|
|
8363
|
+
statTileGap: '{primitive.size.statTileGap}',
|
|
8364
|
+
statTileColumnGap: '{primitive.size.statTileColumnGap}',
|
|
8365
|
+
statTilePaddingBlock: '{primitive.size.statTilePaddingBlock}',
|
|
8366
|
+
statTilePaddingInline: '{primitive.size.statTilePaddingInline}',
|
|
8367
|
+
emptyStateIconLg: '{primitive.size.emptyStateIconLg}',
|
|
8368
|
+
emptyStateIconMd: '{primitive.size.emptyStateIconMd}',
|
|
8369
|
+
emptyStateIconSm: '{primitive.size.emptyStateIconSm}',
|
|
8370
|
+
emptyStateGlyphLg: '{primitive.size.emptyStateGlyphLg}',
|
|
8371
|
+
emptyStateGlyphMd: '{primitive.size.emptyStateGlyphMd}',
|
|
8372
|
+
emptyStateGlyphSm: '{primitive.size.emptyStateGlyphSm}',
|
|
8373
|
+
emptyStateMaxWidthLg: '{primitive.size.emptyStateMaxWidthLg}',
|
|
8374
|
+
emptyStateMaxWidthMd: '{primitive.size.emptyStateMaxWidthMd}',
|
|
8375
|
+
emptyStateMaxWidthSm: '{primitive.size.emptyStateMaxWidthSm}',
|
|
8376
|
+
emptyStateGap: '{primitive.size.emptyStateGap}',
|
|
8377
|
+
emptyStatePaddingBlockLg: '{primitive.size.emptyStatePaddingBlockLg}',
|
|
8378
|
+
emptyStatePaddingBlockMd: '{primitive.size.emptyStatePaddingBlockMd}',
|
|
8379
|
+
emptyStatePaddingBlockSm: '{primitive.size.emptyStatePaddingBlockSm}',
|
|
8380
|
+
searchIconSize: '{primitive.size.searchIconSize}',
|
|
8381
|
+
editorContentMinHeight: '{primitive.size.editorContentMinHeight}',
|
|
8382
|
+
editorContentPadding: '{primitive.size.editorContentPadding}',
|
|
8383
|
+
editorFooterPaddingInline: '{primitive.size.editorFooterPaddingInline}',
|
|
7474
8384
|
commandPalette: '{primitive.size.commandPalette}',
|
|
7475
|
-
commandPaletteItemIcon: '{primitive.size.commandPaletteItemIcon}'
|
|
8385
|
+
commandPaletteItemIcon: '{primitive.size.commandPaletteItemIcon}',
|
|
8386
|
+
editorToolButton: '{primitive.size.editorToolButton}',
|
|
8387
|
+
editorToolIcon: '{primitive.size.editorToolIcon}',
|
|
8388
|
+
editorToolbarPaddingBlock: '{primitive.size.editorToolbarPaddingBlock}',
|
|
8389
|
+
editorSeparatorHeight: '{primitive.size.editorSeparatorHeight}',
|
|
8390
|
+
editorSeparatorSpacing: '{primitive.size.editorSeparatorSpacing}',
|
|
8391
|
+
editorToolbarGap: '{primitive.size.editorToolbarGap}',
|
|
8392
|
+
editorToggleIconSize: '{primitive.size.editorToggleIconSize}',
|
|
8393
|
+
emptyMinHeight: '{primitive.size.emptyMinHeight}',
|
|
8394
|
+
emptyIconCircleSize: '{primitive.size.emptyIconCircleSize}',
|
|
8395
|
+
emptyIconSize: '{primitive.size.emptyIconSize}',
|
|
8396
|
+
addIconSize: '{primitive.size.addIconSize}'
|
|
7476
8397
|
},
|
|
7477
8398
|
layer: {
|
|
7478
8399
|
overlay: '{primitive.zIndex.overlay}',
|
|
@@ -7483,7 +8404,8 @@ const Arvisfy = {
|
|
|
7483
8404
|
layout: {
|
|
7484
8405
|
scheduleDay: '{primitive.layout.scheduleDay}',
|
|
7485
8406
|
scheduleWeek: '{primitive.layout.scheduleWeek}',
|
|
7486
|
-
scheduleWorkweek: '{primitive.layout.scheduleWorkweek}'
|
|
8407
|
+
scheduleWorkweek: '{primitive.layout.scheduleWorkweek}',
|
|
8408
|
+
scheduleSlotHeight: '{primitive.layout.scheduleSlotHeight}'
|
|
7487
8409
|
},
|
|
7488
8410
|
status: {
|
|
7489
8411
|
primarySoft: '{primitive.color.klein.50}',
|
|
@@ -7525,7 +8447,9 @@ const Arvisfy = {
|
|
|
7525
8447
|
},
|
|
7526
8448
|
color: {
|
|
7527
8449
|
switchOn: '{primitive.color.switch.on}',
|
|
7528
|
-
switchOff: '{primitive.color.switch.off}'
|
|
8450
|
+
switchOff: '{primitive.color.switch.off}',
|
|
8451
|
+
chipBackground: '{primitive.color.imageUpload.chipBackground}',
|
|
8452
|
+
chipBackgroundHover: '{primitive.color.imageUpload.chipBackgroundHover}'
|
|
7529
8453
|
},
|
|
7530
8454
|
button: {
|
|
7531
8455
|
solidForeground: '{primitive.color.white}',
|
|
@@ -7557,6 +8481,10 @@ const Arvisfy = {
|
|
|
7557
8481
|
emphasisBackground: '{primitive.color.neutral.800}',
|
|
7558
8482
|
emphasisForeground: '{primitive.color.white}',
|
|
7559
8483
|
text: '{primitive.color.neutral.800}',
|
|
8484
|
+
// Typed/entered field text (batch 9): `ns-input` and friends'
|
|
8485
|
+
// value text, measured slightly lighter than the general `text`
|
|
8486
|
+
// token on the prototype.
|
|
8487
|
+
textSecondary: '{primitive.color.neutral.700}',
|
|
7560
8488
|
toastBackground: '{primitive.color.toast.backgroundLight}',
|
|
7561
8489
|
toastForeground: '{primitive.color.toast.foregroundLight}',
|
|
7562
8490
|
textMuted: '{primitive.color.neutral.500}',
|
|
@@ -7566,6 +8494,24 @@ const Arvisfy = {
|
|
|
7566
8494
|
borderStrong: '{primitive.color.neutral.400}',
|
|
7567
8495
|
separator: '{primitive.color.neutral.100}',
|
|
7568
8496
|
modalFooterBorder: '{primitive.color.modal.footerBorder}',
|
|
8497
|
+
// `ns-editor` toolbar chrome (batch 8): the prototype is
|
|
8498
|
+
// light-only, so these have no dark counterpart to observe from.
|
|
8499
|
+
editorToolbarBackground: '{primitive.color.neutral.25}',
|
|
8500
|
+
editorToolbarBorder: '{primitive.color.editor.toolbarBorder}',
|
|
8501
|
+
editorActionColor: '{primitive.color.neutral.700}',
|
|
8502
|
+
editorActionHoverBackground: '{primitive.color.editor.toolbarBorder}',
|
|
8503
|
+
// Batch 10: `ns-input-search`/`ns-editor` placeholder text, proto
|
|
8504
|
+
// 1121/2732.
|
|
8505
|
+
textPlaceholder: '{primitive.color.neutral.400}',
|
|
8506
|
+
// `ns-empty-state` icon circle (batch 10), proto 1171-1177.
|
|
8507
|
+
emptyStateIconBackground: '{primitive.color.neutral.125}',
|
|
8508
|
+
emptyStateIconColor: '{primitive.color.neutral.450}',
|
|
8509
|
+
// `ns-input-search` toolbar field background (batch 10), proto
|
|
8510
|
+
// 1121.
|
|
8511
|
+
searchFieldBackground: '{primitive.color.neutral.35}',
|
|
8512
|
+
// `ns-editor` footer chrome (batch 10), proto 2732.
|
|
8513
|
+
editorFooterBackground: '{primitive.color.neutral.15}',
|
|
8514
|
+
editorFooterBorder: '{primitive.color.neutral.100}',
|
|
7569
8515
|
primary: '{primitive.color.klein.500}',
|
|
7570
8516
|
primaryHover: '{primitive.color.klein.600}',
|
|
7571
8517
|
primaryActive: '{primitive.color.klein.700}',
|
|
@@ -7602,6 +8548,20 @@ const Arvisfy = {
|
|
|
7602
8548
|
commandPaletteAvatarActiveBackground: '{primitive.color.commandPalette.avatarActiveBackground}',
|
|
7603
8549
|
infoSoft: '{primitive.color.klein.50}',
|
|
7604
8550
|
infoSoftForeground: '{primitive.color.info.foreground}',
|
|
8551
|
+
// `ns-stat-card[variant="tile"]` icon/delta tones (batch 10),
|
|
8552
|
+
// proto 1069-1113. Named `*TileTint` rather than the brief's plain
|
|
8553
|
+
// `*Tint` because `successTint`/`successTintForeground` already
|
|
8554
|
+
// exist above as the unrelated selection/interactive tint consumed
|
|
8555
|
+
// by `chip`, `menu`, `sideNav` and `commandPalette` — reusing that
|
|
8556
|
+
// name here would have silently changed those components' colors.
|
|
8557
|
+
infoTileTint: '{primitive.color.tile.infoBackground}',
|
|
8558
|
+
infoTileTintForeground: '{primitive.color.tile.infoForeground}',
|
|
8559
|
+
successTileTint: '{primitive.color.tile.successBackground}',
|
|
8560
|
+
successTileTintForeground: '{primitive.color.success.600}',
|
|
8561
|
+
warningTileTint: '{primitive.color.tile.warningBackground}',
|
|
8562
|
+
warningTileTintForeground: '{primitive.color.tile.warningForeground}',
|
|
8563
|
+
dangerTileTint: '{primitive.color.tile.dangerBackground}',
|
|
8564
|
+
dangerTileTintForeground: '{primitive.color.tile.dangerForeground}',
|
|
7605
8565
|
selectedSoft: '{primitive.color.selected.soft}',
|
|
7606
8566
|
selectedSoftForeground: '{primitive.color.selected.foreground}',
|
|
7607
8567
|
success: '{primitive.color.success.500}',
|
|
@@ -7657,6 +8617,10 @@ const Arvisfy = {
|
|
|
7657
8617
|
emphasisBackground: '{primitive.color.dark.surfaceRaised}',
|
|
7658
8618
|
emphasisForeground: '{primitive.color.dark.text}',
|
|
7659
8619
|
text: '{primitive.color.dark.text}',
|
|
8620
|
+
// Typed/entered field text (batch 9): no distinct dark primitive
|
|
8621
|
+
// was observed for this secondary shade, so dark mode keeps full
|
|
8622
|
+
// contrast instead of introducing an unobserved intermediate tone.
|
|
8623
|
+
textSecondary: '{primitive.color.dark.text}',
|
|
7660
8624
|
toastBackground: '{primitive.color.toast.backgroundDark}',
|
|
7661
8625
|
toastForeground: '{primitive.color.toast.foregroundDark}',
|
|
7662
8626
|
textMuted: '{primitive.color.dark.muted}',
|
|
@@ -7675,6 +8639,24 @@ const Arvisfy = {
|
|
|
7675
8639
|
// (batch 6); the prototype is light-only, so no distinct dark
|
|
7676
8640
|
// value is observed.
|
|
7677
8641
|
modalFooterBorder: '{primitive.color.dark.separator}',
|
|
8642
|
+
// `ns-editor` toolbar chrome (batch 8): the prototype is
|
|
8643
|
+
// light-only, so these reuse the existing dark surface/muted
|
|
8644
|
+
// tokens that already carry this exact legibility today
|
|
8645
|
+
// (`surfaceMuted` in dark already resolves to `dark.surfaceRaised`)
|
|
8646
|
+
// — the dark scheme is not degraded by this addition.
|
|
8647
|
+
editorToolbarBackground: '{primitive.color.dark.surfaceRaised}',
|
|
8648
|
+
editorToolbarBorder: '{primitive.color.dark.border}',
|
|
8649
|
+
editorActionColor: '{primitive.color.dark.muted}',
|
|
8650
|
+
editorActionHoverBackground: '{primitive.color.dark.separator}',
|
|
8651
|
+
// Batch 10: no distinct dark primitives were observed for these
|
|
8652
|
+
// light-only prototype surfaces, so dark mode reuses the existing
|
|
8653
|
+
// muted/raised-surface tokens that already carry the same role.
|
|
8654
|
+
textPlaceholder: '{primitive.color.dark.muted}',
|
|
8655
|
+
emptyStateIconBackground: '{primitive.color.dark.surfaceRaised}',
|
|
8656
|
+
emptyStateIconColor: '{primitive.color.dark.muted}',
|
|
8657
|
+
searchFieldBackground: '{primitive.color.dark.surface}',
|
|
8658
|
+
editorFooterBackground: '{primitive.color.dark.surfaceRaised}',
|
|
8659
|
+
editorFooterBorder: '{primitive.color.dark.separator}',
|
|
7678
8660
|
primary: '{primitive.color.klein.400}',
|
|
7679
8661
|
primaryHover: '{primitive.color.klein.300}',
|
|
7680
8662
|
primaryActive: '{primitive.color.klein.500}',
|
|
@@ -7718,6 +8700,17 @@ const Arvisfy = {
|
|
|
7718
8700
|
commandPaletteAvatarActiveBackground: '{primitive.color.dark.successBackground}',
|
|
7719
8701
|
infoSoft: '{primitive.color.dark.infoBackground}',
|
|
7720
8702
|
infoSoftForeground: '{primitive.color.dark.infoText}',
|
|
8703
|
+
// `ns-stat-card[variant="tile"]` icon/delta tones (batch 10): see
|
|
8704
|
+
// the light-scheme comment above for the `*TileTint` naming
|
|
8705
|
+
// rationale.
|
|
8706
|
+
infoTileTint: '{primitive.color.dark.infoBackground}',
|
|
8707
|
+
infoTileTintForeground: '{primitive.color.dark.infoText}',
|
|
8708
|
+
successTileTint: '{primitive.color.dark.successBackground}',
|
|
8709
|
+
successTileTintForeground: '{primitive.color.dark.successText}',
|
|
8710
|
+
warningTileTint: '{primitive.color.dark.warningBackground}',
|
|
8711
|
+
warningTileTintForeground: '{primitive.color.dark.warningText}',
|
|
8712
|
+
dangerTileTint: '{primitive.color.dark.dangerBackground}',
|
|
8713
|
+
dangerTileTintForeground: '{primitive.color.dark.dangerText}',
|
|
7721
8714
|
selectedSoft: '{primitive.color.dark.infoBackground}',
|
|
7722
8715
|
selectedSoftForeground: '{primitive.color.dark.infoText}',
|
|
7723
8716
|
success: '{primitive.color.success.500}',
|
|
@@ -7785,10 +8778,10 @@ const Arvisfy = {
|
|
|
7785
8778
|
},
|
|
7786
8779
|
input: {
|
|
7787
8780
|
labelColor: '{semantic.color.text}',
|
|
7788
|
-
labelSize: '{semantic.text.
|
|
7789
|
-
labelWeight: '{semantic.fontWeight.
|
|
8781
|
+
labelSize: '{semantic.text.label}',
|
|
8782
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
7790
8783
|
background: '{semantic.color.surface}',
|
|
7791
|
-
color: '{semantic.color.
|
|
8784
|
+
color: '{semantic.color.textSecondary}',
|
|
7792
8785
|
placeholder: '{semantic.color.textMuted}',
|
|
7793
8786
|
borderColor: '{semantic.color.border}',
|
|
7794
8787
|
borderHoverColor: '{semantic.color.borderStrong}',
|
|
@@ -7828,8 +8821,8 @@ const Arvisfy = {
|
|
|
7828
8821
|
paddingInline: '{semantic.space.lg}',
|
|
7829
8822
|
minWidth: '{semantic.size.buttonMin}',
|
|
7830
8823
|
minHeight: '{semantic.size.controlMd}',
|
|
7831
|
-
fontSize: '{semantic.text.
|
|
7832
|
-
fontWeight: '{semantic.fontWeight.
|
|
8824
|
+
fontSize: '{semantic.text.control}',
|
|
8825
|
+
fontWeight: '{semantic.fontWeight.bold}',
|
|
7833
8826
|
gap: '{semantic.space.sm}',
|
|
7834
8827
|
focusShadow: '{semantic.shadow.focus}',
|
|
7835
8828
|
successBackground: '{semantic.button.successBackground}',
|
|
@@ -7853,7 +8846,10 @@ const Arvisfy = {
|
|
|
7853
8846
|
tertiaryBackgroundHover: '{semantic.color.content2}',
|
|
7854
8847
|
tertiaryBackgroundActive: '{semantic.color.content3}',
|
|
7855
8848
|
selectedShadow: '{semantic.shadow.subtle}',
|
|
7856
|
-
|
|
8849
|
+
// Kept equal to `fontWeight` (batch 9): a lighter selected weight would
|
|
8850
|
+
// read as less emphasized than the resting state now that the base
|
|
8851
|
+
// button label is bold.
|
|
8852
|
+
selectedFontWeight: '{semantic.fontWeight.bold}',
|
|
7857
8853
|
secondarySelectedBackground: '{semantic.color.surface}',
|
|
7858
8854
|
secondarySelectedBorderColor: '{semantic.color.surface}',
|
|
7859
8855
|
secondarySelectedColor: '{semantic.button.secondaryColor}',
|
|
@@ -7873,7 +8869,18 @@ const Arvisfy = {
|
|
|
7873
8869
|
minHeightLg: '{semantic.size.controlLg}',
|
|
7874
8870
|
loadingDuration: '{semantic.motion.buttonLoading}',
|
|
7875
8871
|
spinnerSize: '{semantic.text.md}',
|
|
7876
|
-
transitionDuration: '{semantic.motion.fast}'
|
|
8872
|
+
transitionDuration: '{semantic.motion.fast}',
|
|
8873
|
+
// `variant="dark"` (AVF-20): the same emphasis pair `ns-stat-card`
|
|
8874
|
+
// already uses for its `dark` icon badge (`stat-card.darkBackground`/
|
|
8875
|
+
// `darkColor` above) — `emphasisBackground` resolves to `neutral.800`
|
|
8876
|
+
// (`#12182B`) in light mode and `dark.surfaceRaised` in dark mode, so
|
|
8877
|
+
// this needs no new primitive or semantic token. No `darkBackgroundHover`/
|
|
8878
|
+
// `darkBackgroundActive` entry here: `button.component.scss` derives
|
|
8879
|
+
// those with `color-mix()` off this single token instead — see the
|
|
8880
|
+
// comment there for why (no ready `semantic.status.*Hover/Active` pair
|
|
8881
|
+
// exists for an emphasis background the way it does for success/danger).
|
|
8882
|
+
darkBackground: '{semantic.color.emphasisBackground}',
|
|
8883
|
+
darkColor: '{semantic.color.emphasisForeground}'
|
|
7877
8884
|
},
|
|
7878
8885
|
avatar: {
|
|
7879
8886
|
background: '{semantic.color.surfaceEmphasis}',
|
|
@@ -7920,13 +8927,16 @@ const Arvisfy = {
|
|
|
7920
8927
|
},
|
|
7921
8928
|
editor: {
|
|
7922
8929
|
labelColor: '{semantic.color.text}',
|
|
7923
|
-
labelSize: '{semantic.text.
|
|
7924
|
-
labelWeight: '{semantic.fontWeight.
|
|
8930
|
+
labelSize: '{semantic.text.label}',
|
|
8931
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
7925
8932
|
background: '{semantic.color.surface}',
|
|
7926
|
-
toolbarBackground: '{semantic.color.
|
|
8933
|
+
toolbarBackground: '{semantic.color.editorToolbarBackground}',
|
|
7927
8934
|
color: '{semantic.color.text}',
|
|
7928
8935
|
borderColor: '{semantic.color.border}',
|
|
7929
|
-
radius: '
|
|
8936
|
+
// Wrapper corner radius (batch 8): 10px, matching the prototype's
|
|
8937
|
+
// envelope. Toolbar action buttons no longer read this — see
|
|
8938
|
+
// `actionRadius` below.
|
|
8939
|
+
radius: '{semantic.radius.field}',
|
|
7930
8940
|
overlayRadius: '{semantic.radius.overlay}',
|
|
7931
8941
|
overlayShadow: '{semantic.shadow.overlay}',
|
|
7932
8942
|
padding: '{semantic.space.sm}',
|
|
@@ -7935,7 +8945,39 @@ const Arvisfy = {
|
|
|
7935
8945
|
focusBorderColor: '{semantic.color.focus}',
|
|
7936
8946
|
focusShadow: '{semantic.shadow.focus}',
|
|
7937
8947
|
actionBackground: '{semantic.color.surfaceEmphasis}',
|
|
7938
|
-
actionFocusShadow: '{semantic.shadow.focus}'
|
|
8948
|
+
actionFocusShadow: '{semantic.shadow.focus}',
|
|
8949
|
+
// Toolbar chrome (batch 8), measured on the prototype's rich-text
|
|
8950
|
+
// toolbar.
|
|
8951
|
+
toolbarBorderColor: '{semantic.color.editorToolbarBorder}',
|
|
8952
|
+
toolbarPaddingBlock: '{semantic.size.editorToolbarPaddingBlock}',
|
|
8953
|
+
toolbarPaddingInline: '{semantic.space.sm}',
|
|
8954
|
+
toolbarGap: '{semantic.size.editorToolbarGap}',
|
|
8955
|
+
// Toolbar action-button sizing/color (batch 8): a dedicated 28px/7px
|
|
8956
|
+
// family distinct from the wrapper's `radius`/`background`.
|
|
8957
|
+
actionSize: '{semantic.size.editorToolButton}',
|
|
8958
|
+
actionRadius: '{semantic.radius.editorAction}',
|
|
8959
|
+
actionColor: '{semantic.color.editorActionColor}',
|
|
8960
|
+
actionHoverBackground: '{semantic.color.editorActionHoverBackground}',
|
|
8961
|
+
// Only the color-picker button needs this: it hosts two glyphs (the
|
|
8962
|
+
// color swatch letter plus the chevron) that don't fit the fixed
|
|
8963
|
+
// 28px action width.
|
|
8964
|
+
actionPaddingInline: '{semantic.space.xs}',
|
|
8965
|
+
iconSize: '{semantic.size.editorToolIcon}',
|
|
8966
|
+
separatorColor: '{semantic.color.border}',
|
|
8967
|
+
separatorWidth: '{semantic.border.thin}',
|
|
8968
|
+
separatorHeight: '{semantic.size.editorSeparatorHeight}',
|
|
8969
|
+
separatorSpacing: '{semantic.size.editorSeparatorSpacing}',
|
|
8970
|
+
toggleIconSize: '{semantic.size.editorToggleIconSize}',
|
|
8971
|
+
// Content area + footer chrome (batch 10), proto 2729-2732.
|
|
8972
|
+
contentMinHeight: '{semantic.size.editorContentMinHeight}',
|
|
8973
|
+
contentPadding: '{semantic.size.editorContentPadding}',
|
|
8974
|
+
footerPaddingBlock: '{semantic.space.sm}',
|
|
8975
|
+
footerPaddingInline: '{semantic.size.editorFooterPaddingInline}',
|
|
8976
|
+
footerBorderColor: '{semantic.color.editorFooterBorder}',
|
|
8977
|
+
footerBackground: '{semantic.color.editorFooterBackground}',
|
|
8978
|
+
footerFontSize: '{semantic.text.caption}',
|
|
8979
|
+
footerFontWeight: '{semantic.fontWeight.medium}',
|
|
8980
|
+
footerColor: '{semantic.color.textPlaceholder}'
|
|
7939
8981
|
},
|
|
7940
8982
|
checkbox: {
|
|
7941
8983
|
color: '{semantic.color.text}',
|
|
@@ -7958,8 +9000,8 @@ const Arvisfy = {
|
|
|
7958
9000
|
},
|
|
7959
9001
|
datePicker: {
|
|
7960
9002
|
labelColor: '{semantic.color.text}',
|
|
7961
|
-
labelSize: '{semantic.text.
|
|
7962
|
-
labelWeight: '{semantic.fontWeight.
|
|
9003
|
+
labelSize: '{semantic.text.label}',
|
|
9004
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
7963
9005
|
bodyFontFamily: '{semantic.font.body}',
|
|
7964
9006
|
titleFontFamily: '{semantic.font.display}',
|
|
7965
9007
|
titleSize: '{semantic.text.lg}',
|
|
@@ -8022,10 +9064,10 @@ const Arvisfy = {
|
|
|
8022
9064
|
},
|
|
8023
9065
|
inputNumber: {
|
|
8024
9066
|
labelColor: '{semantic.color.text}',
|
|
8025
|
-
labelSize: '{semantic.text.
|
|
8026
|
-
labelWeight: '{semantic.fontWeight.
|
|
9067
|
+
labelSize: '{semantic.text.label}',
|
|
9068
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8027
9069
|
background: '{semantic.color.surface}',
|
|
8028
|
-
color: '{semantic.color.
|
|
9070
|
+
color: '{semantic.color.textSecondary}',
|
|
8029
9071
|
borderColor: '{semantic.color.border}',
|
|
8030
9072
|
borderFocusColor: '{semantic.color.focus}',
|
|
8031
9073
|
// Form-field radius/height (batch 6): 10px/42px, matching `ns-input`
|
|
@@ -8040,6 +9082,7 @@ const Arvisfy = {
|
|
|
8040
9082
|
stepperBorderWidth: '{semantic.border.thin}',
|
|
8041
9083
|
stepperBackgroundHover: '{semantic.color.surfaceMuted}',
|
|
8042
9084
|
stepperMutedColor: '{semantic.color.textMuted}',
|
|
9085
|
+
prefixColor: '{semantic.color.textMuted}',
|
|
8043
9086
|
descriptionColor: '{semantic.color.textMuted}',
|
|
8044
9087
|
errorColor: '{semantic.status.danger}'
|
|
8045
9088
|
},
|
|
@@ -8054,15 +9097,23 @@ const Arvisfy = {
|
|
|
8054
9097
|
// untokenized `min-h-10` Tailwind utility.
|
|
8055
9098
|
radius: '{semantic.radius.tab}',
|
|
8056
9099
|
minHeight: '{semantic.size.controlSm}',
|
|
8057
|
-
|
|
9100
|
+
// Batch 10: the toolbar search field carries its own warm-gray fill
|
|
9101
|
+
// and placeholder tone (proto 1121), distinct from the plain-surface
|
|
9102
|
+
// `ns-input`.
|
|
9103
|
+
background: '{semantic.color.searchFieldBackground}',
|
|
8058
9104
|
color: '{semantic.color.text}',
|
|
8059
|
-
placeholder: '{semantic.color.
|
|
9105
|
+
placeholder: '{semantic.color.textPlaceholder}',
|
|
8060
9106
|
paddingInline: '{semantic.space.md}',
|
|
8061
9107
|
focusShadow: '{semantic.shadow.focus}',
|
|
8062
9108
|
actionColor: '{semantic.color.textMuted}',
|
|
8063
9109
|
actionBackgroundHover: '{semantic.color.surfaceMuted}',
|
|
8064
9110
|
descriptionColor: '{semantic.color.textMuted}',
|
|
8065
|
-
errorColor: '{semantic.status.danger}'
|
|
9111
|
+
errorColor: '{semantic.status.danger}',
|
|
9112
|
+
// Leading magnifier glyph (batch 10), proto 1120.
|
|
9113
|
+
fontSize: '{semantic.text.control}',
|
|
9114
|
+
iconSize: '{semantic.size.searchIconSize}',
|
|
9115
|
+
iconColor: '{semantic.color.textMuted}',
|
|
9116
|
+
gap: '{semantic.space.sm}'
|
|
8066
9117
|
},
|
|
8067
9118
|
inputCode: {
|
|
8068
9119
|
labelColor: '{semantic.color.text}',
|
|
@@ -8086,10 +9137,10 @@ const Arvisfy = {
|
|
|
8086
9137
|
},
|
|
8087
9138
|
password: {
|
|
8088
9139
|
labelColor: '{semantic.color.text}',
|
|
8089
|
-
labelSize: '{semantic.text.
|
|
8090
|
-
labelWeight: '{semantic.fontWeight.
|
|
9140
|
+
labelSize: '{semantic.text.label}',
|
|
9141
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8091
9142
|
background: '{semantic.color.surface}',
|
|
8092
|
-
color: '{semantic.color.
|
|
9143
|
+
color: '{semantic.color.textSecondary}',
|
|
8093
9144
|
borderColor: '{semantic.color.border}',
|
|
8094
9145
|
borderFocusColor: '{semantic.color.focus}',
|
|
8095
9146
|
// Aligned to `input.radius` (batch 6 follow-up): a password field must
|
|
@@ -8143,10 +9194,10 @@ const Arvisfy = {
|
|
|
8143
9194
|
},
|
|
8144
9195
|
textarea: {
|
|
8145
9196
|
labelColor: '{semantic.color.text}',
|
|
8146
|
-
labelSize: '{semantic.text.
|
|
8147
|
-
labelWeight: '{semantic.fontWeight.
|
|
9197
|
+
labelSize: '{semantic.text.label}',
|
|
9198
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8148
9199
|
background: '{semantic.color.surface}',
|
|
8149
|
-
color: '{semantic.color.
|
|
9200
|
+
color: '{semantic.color.textSecondary}',
|
|
8150
9201
|
placeholder: '{semantic.color.textMuted}',
|
|
8151
9202
|
borderColor: '{semantic.color.border}',
|
|
8152
9203
|
borderFocusColor: '{semantic.color.focus}',
|
|
@@ -8197,8 +9248,57 @@ const Arvisfy = {
|
|
|
8197
9248
|
controlShadow: '{semantic.shadow.subtle}',
|
|
8198
9249
|
thumbnailRadius: '{semantic.radius.surface}',
|
|
8199
9250
|
thumbnailShadow: '{semantic.shadow.overlay}',
|
|
9251
|
+
thumbnailBorderWidth: '{semantic.border.thin}',
|
|
8200
9252
|
overlayColor: '{semantic.color.surface}',
|
|
8201
|
-
transitionDuration: '{semantic.motion.fast}'
|
|
9253
|
+
transitionDuration: '{semantic.motion.fast}',
|
|
9254
|
+
// --- layout="cover" (AVF-8) ---
|
|
9255
|
+
columnGap: '{semantic.space.xxl}',
|
|
9256
|
+
// AVF-19 (was `semantic.space.lg`/16px): dropped to `md` (12px). Still
|
|
9257
|
+
// the gap `grid-auto-rows` in the component's stylesheet subtracts
|
|
9258
|
+
// between reserved rows (AVF-29: each row's height is
|
|
9259
|
+
// `(emptyMinHeight - (rows - 1) * stackGap) / rows`), not a value
|
|
9260
|
+
// chosen to hit a fixed pixel target the way it used to be — the
|
|
9261
|
+
// 280px arithmetic this comment previously cited (the old
|
|
9262
|
+
// `thumbnailSize` token, since retired) no longer holds now that the
|
|
9263
|
+
// filled state's total height is pinned to `emptyMinHeight` directly
|
|
9264
|
+
// instead of being computed from a per-row thumbnail size and this
|
|
9265
|
+
// gap. 10px (the prototype's gap) still doesn't exist in
|
|
9266
|
+
// `primitive.space` (see the scale above), so `md` remains the
|
|
9267
|
+
// closest available step.
|
|
9268
|
+
stackGap: '{semantic.space.md}',
|
|
9269
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
9270
|
+
coverBackground: '{semantic.color.surfaceMuted}',
|
|
9271
|
+
emptyMinHeight: '{semantic.size.emptyMinHeight}',
|
|
9272
|
+
emptyGap: '{semantic.space.lg}',
|
|
9273
|
+
emptyIconCircleBackground: '{semantic.color.surfaceMuted}',
|
|
9274
|
+
emptyIconCircleSize: '{semantic.size.emptyIconCircleSize}',
|
|
9275
|
+
emptyIconSize: '{semantic.size.emptyIconSize}',
|
|
9276
|
+
emptyTitleColor: '{semantic.color.text}',
|
|
9277
|
+
emptyTitleFontSize: '{semantic.text.headingSm}',
|
|
9278
|
+
emptyTitleFontWeight: '{semantic.fontWeight.bold}',
|
|
9279
|
+
emptySubtitleColor: '{semantic.color.textMuted}',
|
|
9280
|
+
emptySubtitleFontSize: '{semantic.text.label}',
|
|
9281
|
+
addIconSize: '{semantic.size.addIconSize}',
|
|
9282
|
+
addTitleColor: '{semantic.color.text}',
|
|
9283
|
+
addTitleFontSize: '{semantic.text.label}',
|
|
9284
|
+
addSubtitleColor: '{semantic.color.textMuted}',
|
|
9285
|
+
addSubtitleFontSize: '{semantic.text.xs}',
|
|
9286
|
+
chipBackground: '{semantic.color.chipBackground}',
|
|
9287
|
+
chipBackgroundHover: '{semantic.color.chipBackgroundHover}',
|
|
9288
|
+
chipColor: '{semantic.color.emphasisForeground}',
|
|
9289
|
+
chipRadius: '{semantic.radius.pill}',
|
|
9290
|
+
chipPaddingBlock: '{semantic.space.sm}',
|
|
9291
|
+
chipPaddingInline: '{semantic.space.lg}',
|
|
9292
|
+
chipFontSize: '{semantic.text.label}',
|
|
9293
|
+
chipFontWeight: '{semantic.fontWeight.medium}',
|
|
9294
|
+
chipOffset: '{semantic.space.md}',
|
|
9295
|
+
// Limit-exceeded inline notice (AVF-16). Reuses the pre-existing
|
|
9296
|
+
// `status.warningText` pair (defined in both color schemes but,
|
|
9297
|
+
// before this, consumed by no component) rather than
|
|
9298
|
+
// `warningSoftForeground` — that one is tuned for an icon on a soft
|
|
9299
|
+
// background (~3:1), not plain text on `surface`, where it falls
|
|
9300
|
+
// short of the 4.5:1 AA text minimum.
|
|
9301
|
+
warningTextColor: '{semantic.status.warningText}'
|
|
8202
9302
|
},
|
|
8203
9303
|
scheduleEvent: {
|
|
8204
9304
|
background: '{semantic.color.surfaceEmphasis}',
|
|
@@ -8301,7 +9401,12 @@ const Arvisfy = {
|
|
|
8301
9401
|
softBackground: '{semantic.color.surfaceMuted}',
|
|
8302
9402
|
color: '{semantic.color.text}',
|
|
8303
9403
|
borderColor: '{semantic.color.border}',
|
|
8304
|
-
|
|
9404
|
+
// Batch 10: the default card relies on `shadow` for separation, not a
|
|
9405
|
+
// visible border — matching the prototype's borderless card shell.
|
|
9406
|
+
// Callers that still want a hairline (e.g. an `outline` variant) use
|
|
9407
|
+
// `outlineBorderWidth` below.
|
|
9408
|
+
borderWidth: '{semantic.border.none}',
|
|
9409
|
+
outlineBorderWidth: '{semantic.border.thin}',
|
|
8305
9410
|
dividerColor: '{semantic.color.border}',
|
|
8306
9411
|
dividerWidth: '{semantic.border.thin}',
|
|
8307
9412
|
radius: '{semantic.radius.surface}',
|
|
@@ -8366,6 +9471,16 @@ const Arvisfy = {
|
|
|
8366
9471
|
pillFontWeight: '{semantic.fontWeight.medium}',
|
|
8367
9472
|
pillPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
8368
9473
|
pillPaddingInline: '{semantic.size.chipPillPaddingInline}',
|
|
9474
|
+
// `size="choice"` (batch 9): a rectangular selection chip measured on
|
|
9475
|
+
// the prototype's sales-channel picker (e.g. "Tienda online",
|
|
9476
|
+
// "WhatsApp Business"). The `md` default stays the pill/round shape
|
|
9477
|
+
// above — this is an additional size, not a replacement. Colors are
|
|
9478
|
+
// unchanged; only shape/typography tokens are added.
|
|
9479
|
+
choiceRadius: '{semantic.radius.field}',
|
|
9480
|
+
choiceMinHeight: '{semantic.size.chipChoiceMinHeight}',
|
|
9481
|
+
choicePaddingInline: '{semantic.size.chipChoicePaddingInline}',
|
|
9482
|
+
choiceFontSize: '{semantic.text.label}',
|
|
9483
|
+
choiceFontWeight: '{semantic.fontWeight.bold}',
|
|
8369
9484
|
transitionDuration: '{semantic.motion.fast}'
|
|
8370
9485
|
},
|
|
8371
9486
|
drawer: {
|
|
@@ -8439,8 +9554,8 @@ const Arvisfy = {
|
|
|
8439
9554
|
dropdown: {
|
|
8440
9555
|
labelGap: '{semantic.space.sm}',
|
|
8441
9556
|
labelColor: '{semantic.color.text}',
|
|
8442
|
-
labelSize: '{semantic.text.
|
|
8443
|
-
labelWeight: '{semantic.fontWeight.
|
|
9557
|
+
labelSize: '{semantic.text.label}',
|
|
9558
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
8444
9559
|
triggerMinHeight: '{semantic.size.controlMd}',
|
|
8445
9560
|
triggerPaddingBlock: '{semantic.space.sm}',
|
|
8446
9561
|
triggerPaddingInline: '{semantic.space.md}',
|
|
@@ -8451,7 +9566,10 @@ const Arvisfy = {
|
|
|
8451
9566
|
triggerBorderFocusColor: '{semantic.color.focus}',
|
|
8452
9567
|
triggerRadius: '{semantic.radius.control}',
|
|
8453
9568
|
triggerBackground: '{semantic.color.surface}',
|
|
8454
|
-
|
|
9569
|
+
// Selected-value text (batch 9), the dropdown's equivalent of an
|
|
9570
|
+
// input's typed text — distinct from `menuColor`/`searchColor`, which
|
|
9571
|
+
// stay on `semantic.color.text`.
|
|
9572
|
+
triggerColor: '{semantic.color.textSecondary}',
|
|
8455
9573
|
triggerPlaceholderColor: '{semantic.color.textMuted}',
|
|
8456
9574
|
triggerFocusShadow: '{semantic.shadow.focus}',
|
|
8457
9575
|
triggerDisabledBackground: '{semantic.color.surfaceMuted}',
|
|
@@ -8581,7 +9699,8 @@ const Arvisfy = {
|
|
|
8581
9699
|
gap: '{semantic.space.sm}',
|
|
8582
9700
|
dayColumns: '{semantic.layout.scheduleDay}',
|
|
8583
9701
|
weekColumns: '{semantic.layout.scheduleWeek}',
|
|
8584
|
-
workweekColumns: '{semantic.layout.scheduleWorkweek}'
|
|
9702
|
+
workweekColumns: '{semantic.layout.scheduleWorkweek}',
|
|
9703
|
+
slotHeight: '{semantic.layout.scheduleSlotHeight}'
|
|
8585
9704
|
},
|
|
8586
9705
|
tabs: {
|
|
8587
9706
|
gap: '{semantic.space.sm}',
|
|
@@ -8680,16 +9799,37 @@ const Arvisfy = {
|
|
|
8680
9799
|
counterFontWeight: '{semantic.fontWeight.semibold}'
|
|
8681
9800
|
},
|
|
8682
9801
|
emptyState: {
|
|
8683
|
-
|
|
8684
|
-
|
|
8685
|
-
|
|
8686
|
-
|
|
9802
|
+
// Batch 10: `lg`/`md`/`sm` sizes with an icon circle, proto 1171-1177
|
|
9803
|
+
// (lg), 1030-1036 (md), 1593-1599 (sm).
|
|
9804
|
+
gap: '{semantic.size.emptyStateGap}',
|
|
9805
|
+
gapSm: '{semantic.space.md}',
|
|
9806
|
+
textGap: '{semantic.space.xs}',
|
|
9807
|
+
paddingBlock: '{semantic.size.emptyStatePaddingBlockMd}',
|
|
9808
|
+
paddingBlockLg: '{semantic.size.emptyStatePaddingBlockLg}',
|
|
9809
|
+
paddingBlockSm: '{semantic.size.emptyStatePaddingBlockSm}',
|
|
9810
|
+
paddingInline: '{semantic.space.xl}',
|
|
9811
|
+
paddingInlineSm: '{semantic.space.md}',
|
|
9812
|
+
iconSize: '{semantic.size.emptyStateIconMd}',
|
|
9813
|
+
iconSizeLg: '{semantic.size.emptyStateIconLg}',
|
|
9814
|
+
iconSizeSm: '{semantic.size.emptyStateIconSm}',
|
|
9815
|
+
iconBackground: '{semantic.color.emptyStateIconBackground}',
|
|
9816
|
+
iconColor: '{semantic.color.emptyStateIconColor}',
|
|
9817
|
+
glyphSizeLg: '{semantic.size.emptyStateGlyphLg}',
|
|
9818
|
+
glyphSizeMd: '{semantic.size.emptyStateGlyphMd}',
|
|
9819
|
+
glyphSizeSm: '{semantic.size.emptyStateGlyphSm}',
|
|
9820
|
+
maxWidthLg: '{semantic.size.emptyStateMaxWidthLg}',
|
|
9821
|
+
maxWidthMd: '{semantic.size.emptyStateMaxWidthMd}',
|
|
9822
|
+
maxWidthSm: '{semantic.size.emptyStateMaxWidthSm}',
|
|
8687
9823
|
titleColor: '{semantic.color.text}',
|
|
8688
|
-
titleFontSize: '{semantic.text.
|
|
8689
|
-
|
|
8690
|
-
|
|
9824
|
+
titleFontSize: '{semantic.text.headingSm}',
|
|
9825
|
+
titleFontSizeLg: '{semantic.text.headingMd}',
|
|
9826
|
+
titleFontSizeSm: '{semantic.text.headingXs}',
|
|
9827
|
+
titleFontWeight: '{semantic.fontWeight.bold}',
|
|
8691
9828
|
descriptionColor: '{semantic.color.textMuted}',
|
|
8692
|
-
descriptionFontSize: '{semantic.text.
|
|
9829
|
+
descriptionFontSize: '{semantic.text.label}',
|
|
9830
|
+
descriptionFontSizeLg: '{semantic.text.control}',
|
|
9831
|
+
descriptionFontSizeSm: '{semantic.text.xs}',
|
|
9832
|
+
descriptionFontWeight: '{semantic.fontWeight.regular}',
|
|
8693
9833
|
actionsGap: '{semantic.space.sm}'
|
|
8694
9834
|
},
|
|
8695
9835
|
menu: {
|
|
@@ -8800,7 +9940,9 @@ const Arvisfy = {
|
|
|
8800
9940
|
color: '{semantic.color.text}',
|
|
8801
9941
|
borderColor: '{semantic.color.border}',
|
|
8802
9942
|
borderColorHover: '{semantic.color.borderStrong}',
|
|
8803
|
-
|
|
9943
|
+
// Batch 10: borderless by default, matching the redesigned card shell
|
|
9944
|
+
// — see `card.borderWidth` above.
|
|
9945
|
+
borderWidth: '{semantic.border.none}',
|
|
8804
9946
|
radius: '{semantic.radius.surface}',
|
|
8805
9947
|
radiusCompact: '{semantic.radius.overlay}',
|
|
8806
9948
|
shadow: '{semantic.shadow.subtle}',
|
|
@@ -8826,8 +9968,46 @@ const Arvisfy = {
|
|
|
8826
9968
|
suffixColor: '{semantic.color.textMuted}',
|
|
8827
9969
|
suffixFontSize: '{semantic.text.lg}',
|
|
8828
9970
|
iconSize: '{semantic.size.statCardIconSize}',
|
|
8829
|
-
|
|
9971
|
+
// Batch 10: the icon badge moved from a circle to the shared field
|
|
9972
|
+
// radius (10px) — the tile variant below keeps its own circular
|
|
9973
|
+
// `iconRadiusTile`.
|
|
9974
|
+
iconRadius: '{semantic.radius.field}',
|
|
8830
9975
|
iconColor: '{semantic.color.textMuted}',
|
|
9976
|
+
iconGlyphSize: '{semantic.size.statCardIconGlyphSize}',
|
|
9977
|
+
// `variant="tile"` (batch 10), proto 1069-1113: a compact KPI tile
|
|
9978
|
+
// layout with its own padding/gap/icon/value/delta/hint scale.
|
|
9979
|
+
radiusTile: '{semantic.radius.tile}',
|
|
9980
|
+
paddingBlockTile: '{semantic.size.statTilePaddingBlock}',
|
|
9981
|
+
paddingInlineTile: '{semantic.size.statTilePaddingInline}',
|
|
9982
|
+
gapTile: '{semantic.size.statTileGap}',
|
|
9983
|
+
columnGapTile: '{semantic.size.statTileColumnGap}',
|
|
9984
|
+
iconSizeTile: '{semantic.size.statTileIconSize}',
|
|
9985
|
+
iconRadiusTile: '{semantic.radius.round}',
|
|
9986
|
+
labelColorTile: '{semantic.color.textMutedStrong}',
|
|
9987
|
+
labelFontSizeTile: '{semantic.text.label}',
|
|
9988
|
+
labelFontWeightTile: '{semantic.fontWeight.medium}',
|
|
9989
|
+
valueFontFamilyTile: '{semantic.font.sans}',
|
|
9990
|
+
valueFontSizeTile: '{semantic.text.xl}',
|
|
9991
|
+
valueLetterSpacingTile: '{semantic.letterSpacing.normal}',
|
|
9992
|
+
deltaFontSizeTile: '{semantic.text.xs}',
|
|
9993
|
+
deltaFontWeightTile: '{semantic.fontWeight.bold}',
|
|
9994
|
+
// `*Tile` delta/icon tones reference the `*TileTint` status family
|
|
9995
|
+
// added above, kept distinct from the base card's `*Soft` tones.
|
|
9996
|
+
deltaUpColorTile: '{semantic.status.successTileTintForeground}',
|
|
9997
|
+
deltaDownColorTile: '{semantic.status.dangerTileTintForeground}',
|
|
9998
|
+
deltaNeutralColorTile: '{semantic.color.textMuted}',
|
|
9999
|
+
hintFontSizeTile: '{semantic.text.caption}',
|
|
10000
|
+
hintFontWeightTile: '{semantic.fontWeight.medium}',
|
|
10001
|
+
iconInfoBackground: '{semantic.status.infoTileTint}',
|
|
10002
|
+
iconInfoColor: '{semantic.status.infoTileTintForeground}',
|
|
10003
|
+
iconSuccessBackground: '{semantic.status.successTileTint}',
|
|
10004
|
+
iconSuccessColor: '{semantic.status.successTileTintForeground}',
|
|
10005
|
+
iconWarningBackground: '{semantic.status.warningTileTint}',
|
|
10006
|
+
iconWarningColor: '{semantic.status.warningTileTintForeground}',
|
|
10007
|
+
iconDangerBackground: '{semantic.status.dangerTileTint}',
|
|
10008
|
+
iconDangerColor: '{semantic.status.dangerTileTintForeground}',
|
|
10009
|
+
iconNeutralBackground: '{semantic.color.surfaceMuted}',
|
|
10010
|
+
iconNeutralColor: '{semantic.color.textMuted}',
|
|
8831
10011
|
deltaFontSize: '{semantic.text.xs}',
|
|
8832
10012
|
deltaFontWeight: '{semantic.fontWeight.semibold}',
|
|
8833
10013
|
deltaPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
@@ -8843,6 +10023,12 @@ const Arvisfy = {
|
|
|
8843
10023
|
deltaLabelColor: '{semantic.color.textMuted}',
|
|
8844
10024
|
hintColor: '{semantic.color.textMuted}',
|
|
8845
10025
|
hintFontSize: '{semantic.text.xs}',
|
|
10026
|
+
// `hintTone`: colors the hint independently of the delta pill, reusing
|
|
10027
|
+
// the same status-soft-foreground family as `valueTone`.
|
|
10028
|
+
hintToneSuccessColor: '{semantic.status.successSoftForeground}',
|
|
10029
|
+
hintToneWarningColor: '{semantic.status.warningSoftForeground}',
|
|
10030
|
+
hintToneDangerColor: '{semantic.status.dangerSoftForeground}',
|
|
10031
|
+
hintToneInfoColor: '{semantic.status.infoSoftForeground}',
|
|
8846
10032
|
metaGap: '{semantic.space.sm}',
|
|
8847
10033
|
footerBorderColor: '{semantic.color.border}',
|
|
8848
10034
|
footerPaddingBlock: '{semantic.space.sm}',
|
|
@@ -8947,7 +10133,46 @@ function provideNsTheme(options = {}) {
|
|
|
8947
10133
|
]);
|
|
8948
10134
|
}
|
|
8949
10135
|
|
|
10136
|
+
/**
|
|
10137
|
+
* Registry of theme tokens that used to be part of the Arvisfy preset and no
|
|
10138
|
+
* longer have any effect on rendering. `NsTokenTree` has an open index
|
|
10139
|
+
* signature and `mergeObjects` (below) merges unknown keys in without
|
|
10140
|
+
* complaint, so a consumer overriding a retired token gets no type error and
|
|
10141
|
+
* no `validateNsPreset` error -- the override is silently inert.
|
|
10142
|
+
* `validateNsPreset` walks this map against the resolved preset and emits a
|
|
10143
|
+
* `console.warn` for every retired path still present, so the override at
|
|
10144
|
+
* least surfaces instead of doing nothing invisibly.
|
|
10145
|
+
*
|
|
10146
|
+
* Keys are full token paths, one of:
|
|
10147
|
+
* - `primitive.<path>`
|
|
10148
|
+
* - `semantic.common.<path>`
|
|
10149
|
+
* - `semantic.colorScheme.<light|dark>.<path>`
|
|
10150
|
+
* - `components.<path>`
|
|
10151
|
+
*
|
|
10152
|
+
* Values are the exact message logged for that path. Do not include a
|
|
10153
|
+
* version number in a message: the published package version and this
|
|
10154
|
+
* source's `package.json` version can diverge, so a hardcoded version would
|
|
10155
|
+
* go stale.
|
|
10156
|
+
*
|
|
10157
|
+
* This lives here rather than in its own file: `packages/mcp` transpiles
|
|
10158
|
+
* this module in isolation (`extract-tokens.mjs`'s `assertNoValueImports`)
|
|
10159
|
+
* and cannot resolve a relative value import from a sibling module at that
|
|
10160
|
+
* point, so a second file imported here for its data would break
|
|
10161
|
+
* `nx run mcp:build-data`.
|
|
10162
|
+
*/
|
|
10163
|
+
const NS_RETIRED_TOKENS = {
|
|
10164
|
+
'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.'
|
|
10165
|
+
};
|
|
8950
10166
|
const TOKEN_KEY = /^(?:[a-z][a-zA-Z0-9]*|[0-9]+)$/;
|
|
10167
|
+
// Longest prefix first: `semantic.colorScheme.light.` must win over a naive
|
|
10168
|
+
// `semantic.` match before `semantic.common.` gets a chance.
|
|
10169
|
+
const RETIRED_TOKEN_TIERS = [
|
|
10170
|
+
['semantic.colorScheme.light.', 'semanticLight'],
|
|
10171
|
+
['semantic.colorScheme.dark.', 'semanticDark'],
|
|
10172
|
+
['semantic.common.', 'semanticCommon'],
|
|
10173
|
+
['components.', 'components'],
|
|
10174
|
+
['primitive.', 'primitive']
|
|
10175
|
+
];
|
|
8951
10176
|
const UNSAFE_CSS_VALUE = /[;{}]/;
|
|
8952
10177
|
const PRIMITIVE_REFERENCE = /^\{primitive\.([a-zA-Z0-9.]+)\}$/;
|
|
8953
10178
|
const SEMANTIC_REFERENCE = /^\{semantic\.([a-zA-Z0-9.]+)\}$/;
|
|
@@ -8989,6 +10214,26 @@ function validateNsPreset(preset) {
|
|
|
8989
10214
|
throw new Error(`Component token components.${path} must reference a common semantic token or one available in both color schemes`);
|
|
8990
10215
|
}
|
|
8991
10216
|
}
|
|
10217
|
+
warnRetiredTokens({
|
|
10218
|
+
primitive: primitives,
|
|
10219
|
+
semanticCommon,
|
|
10220
|
+
semanticLight,
|
|
10221
|
+
semanticDark,
|
|
10222
|
+
components
|
|
10223
|
+
});
|
|
10224
|
+
}
|
|
10225
|
+
function warnRetiredTokens(tokensByTier) {
|
|
10226
|
+
for (const [retiredPath, message] of Object.entries(NS_RETIRED_TOKENS)) {
|
|
10227
|
+
const match = RETIRED_TOKEN_TIERS.find(([prefix]) => retiredPath.startsWith(prefix));
|
|
10228
|
+
if (!match) {
|
|
10229
|
+
continue;
|
|
10230
|
+
}
|
|
10231
|
+
const [prefix, tier] = match;
|
|
10232
|
+
const relativePath = retiredPath.slice(prefix.length);
|
|
10233
|
+
if (tokensByTier[tier].has(relativePath)) {
|
|
10234
|
+
console.warn(message);
|
|
10235
|
+
}
|
|
10236
|
+
}
|
|
8992
10237
|
}
|
|
8993
10238
|
function flattenTokens(tree) {
|
|
8994
10239
|
const tokens = new Map();
|
|
@@ -9959,5 +11204,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
9959
11204
|
* Generated bundle index. Do not edit.
|
|
9960
11205
|
*/
|
|
9961
11206
|
|
|
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 };
|
|
11207
|
+
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
11208
|
//# sourceMappingURL=ng-solid-design-system.mjs.map
|