@ng-solid/design-system 22.4.0 → 22.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,7 @@ import * as i1$1 from '@angular/common';
|
|
|
5
5
|
import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, CommonModule, NgClass, NgStyle } from '@angular/common';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormsModule, NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
-
import { DateFormatter, startOfWeek, startOfMonth, getDayOfWeek, endOfMonth, isToday,
|
|
8
|
+
import { DateFormatter, startOfWeek, startOfMonth, getDayOfWeek, endOfMonth, isToday, getLocalTimeZone, today } from '@internationalized/date';
|
|
9
9
|
import { RouterLink } from '@angular/router';
|
|
10
10
|
import { NsSafeHtmlPipe, NsHumanizePipe, Guid, NS_UPLOAD_CLIENT, NsFile, notEmpty } from '@ng-solid/core';
|
|
11
11
|
import { Subject } from 'rxjs';
|
|
@@ -514,13 +514,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
514
514
|
read: ElementRef
|
|
515
515
|
}, isSignal: true }] }] } });
|
|
516
516
|
|
|
517
|
-
function numberOrUndefined(value) {
|
|
517
|
+
function numberOrUndefined$1(value) {
|
|
518
518
|
return value === undefined || value === null
|
|
519
519
|
? undefined
|
|
520
520
|
: numberAttribute(value);
|
|
521
521
|
}
|
|
522
522
|
class NsBadgeComponent {
|
|
523
|
-
count = input(undefined, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
|
|
523
|
+
count = input(undefined, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: numberOrUndefined$1 });
|
|
524
524
|
mode = input('count', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
525
525
|
ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
526
526
|
normalizedCount = computed(() => {
|
|
@@ -610,12 +610,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
610
610
|
function booleanOrUndefined(value) {
|
|
611
611
|
return value === undefined ? undefined : booleanAttribute(value);
|
|
612
612
|
}
|
|
613
|
+
function numberOrUndefined(value) {
|
|
614
|
+
return value === undefined || value === null || value === ''
|
|
615
|
+
? undefined
|
|
616
|
+
: numberAttribute(value) || undefined;
|
|
617
|
+
}
|
|
613
618
|
class NsButtonComponent {
|
|
614
619
|
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
615
620
|
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
616
621
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
617
622
|
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
618
623
|
iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
624
|
+
/**
|
|
625
|
+
* Explicit `ns-icon` size override. Defaults to 14 for `size="xs"` and 16
|
|
626
|
+
* for every other size when left unset.
|
|
627
|
+
*/
|
|
628
|
+
iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
|
|
629
|
+
/** Resolved `ns-icon` size: `iconSize()` when set, else a per-size default. */
|
|
630
|
+
effectiveIconSize = computed(() => this.iconSize() ?? (this.size() === 'xs' ? 14 : 16), ...(ngDevMode ? [{ debugName: "effectiveIconSize" }] : /* istanbul ignore next */ []));
|
|
619
631
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
620
632
|
block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
621
633
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -639,7 +651,7 @@ class NsButtonComponent {
|
|
|
639
651
|
this.control().nativeElement.focus();
|
|
640
652
|
}
|
|
641
653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsButtonComponent, isStandalone: true, selector: "ns-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-button": "true", "class.ns-button--block": "block()", "class.ns-button--icon-only": "iconOnly()", "class.ns-button--loading": "loading()", "class.ns-button--selected": "selected() === true", "class.ns-button--unselected": "selected() === false", "attr.data-selected": "selected() === undefined ? null : selected()", "class.ns-button--sm": "size() === 'sm'", "class.ns-button--md": "size() === 'md'", "class.ns-button--lg": "size() === 'lg'", "class.ns-button--primary": "variant() === 'primary'", "class.ns-button--secondary": "variant() === 'secondary'", "class.ns-button--tertiary": "variant() === 'tertiary'", "class.ns-button--success": "variant() === 'success'", "class.ns-button--danger": "variant() === 'danger'", "class.ns-button--dark": "variant() === 'dark'" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsButtonComponent, isStandalone: true, selector: "ns-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-button": "true", "class.ns-button--block": "block()", "class.ns-button--icon-only": "iconOnly()", "class.ns-button--loading": "loading()", "class.ns-button--selected": "selected() === true", "class.ns-button--unselected": "selected() === false", "attr.data-selected": "selected() === undefined ? null : selected()", "class.ns-button--xs": "size() === 'xs'", "class.ns-button--sm": "size() === 'sm'", "class.ns-button--md": "size() === 'md'", "class.ns-button--lg": "size() === 'lg'", "class.ns-button--primary": "variant() === 'primary'", "class.ns-button--secondary": "variant() === 'secondary'", "class.ns-button--tertiary": "variant() === 'tertiary'", "class.ns-button--success": "variant() === 'success'", "class.ns-button--danger": "variant() === 'danger'", "class.ns-button--dark": "variant() === 'dark'" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
643
655
|
<button
|
|
644
656
|
#control
|
|
645
657
|
class="ns-button__control"
|
|
@@ -660,13 +672,13 @@ class NsButtonComponent {
|
|
|
660
672
|
<ns-icon
|
|
661
673
|
class="ns-button__icon"
|
|
662
674
|
[name]="icon()"
|
|
663
|
-
size="
|
|
675
|
+
[size]="effectiveIconSize()"
|
|
664
676
|
aria-hidden="true"
|
|
665
677
|
/>
|
|
666
678
|
}
|
|
667
679
|
<ng-content />
|
|
668
680
|
</button>
|
|
669
|
-
`, isInline: true, styles: ["@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 });
|
|
681
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";@layer properties;:host{display:inline-block}:host(.ns-button--block){display:block}.ns-button__control{display:inline-flex;width:100%;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-outline-style: none;outline-style:none;min-inline-size:var(--ns-component-button-min-width);min-block-size:var(--ns-component-button-min-height);gap:var(--ns-component-button-gap);padding-block:var(--ns-component-button-padding-block);padding-inline:var(--ns-component-button-padding-inline);border-color:var(--ns-component-button-background);border-radius:var(--ns-component-button-radius);background:var(--ns-component-button-background);color:var(--ns-component-button-color);font-size:var(--ns-component-button-font-size);font-weight:var(--ns-component-button-font-weight);transition:background var(--ns-component-button-transition-duration),border-color var(--ns-component-button-transition-duration),color var(--ns-component-button-transition-duration),box-shadow var(--ns-component-button-transition-duration)}.ns-button__control:disabled{cursor:not-allowed}.ns-button__control:disabled{opacity:60%}.ns-button__control:hover:not(:disabled){background:var(--ns-component-button-background-hover);border-color:var(--ns-component-button-background-hover)}.ns-button__control:active:not(:disabled){background:var(--ns-component-button-background-active);border-color:var(--ns-component-button-background-active)}.ns-button__control:focus-visible{box-shadow:var(--ns-component-button-focus-shadow)}:host(.ns-button--xs) .ns-button__control{min-block-size:var(--ns-component-button-min-height-xs);border-radius:var(--ns-component-button-radius-xs)}:host(.ns-button--sm) .ns-button__control{min-block-size:var(--ns-component-button-min-height-sm)}:host(.ns-button--lg) .ns-button__control{min-block-size:var(--ns-component-button-min-height-lg)}:host(.ns-button--secondary) .ns-button__control{border-color:var(--ns-component-button-secondary-border-color);background:var(--ns-component-button-secondary-background);color:var(--ns-component-button-secondary-color)}:host(.ns-button--secondary) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-secondary-background-hover);border-color:var(--ns-component-button-secondary-background-hover)}:host(.ns-button--secondary) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-secondary-background-active);border-color:var(--ns-component-button-secondary-background-active)}:host(.ns-button--tertiary) .ns-button__control{border-color:transparent;background:transparent;color:var(--ns-component-button-tertiary-color)}:host(.ns-button--tertiary) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-tertiary-background-hover)}:host(.ns-button--tertiary) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-tertiary-background-active)}:host(.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height);padding-inline:var(--ns-component-button-icon-padding-inline)}:host(.ns-button--xs.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height-xs)}:host(.ns-button--success) .ns-button__control{background:var(--ns-component-button-success-background);border-color:var(--ns-component-button-success-background);color:var(--ns-component-button-success-solid-color)}:host(.ns-button--success) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-success-background-hover);border-color:var(--ns-component-button-success-background-hover);color:var(--ns-component-button-success-solid-color-hover)}:host(.ns-button--success) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-success-background-active);border-color:var(--ns-component-button-success-background-active);color:var(--ns-component-button-success-solid-color-active)}:host(.ns-button--danger) .ns-button__control{background:var(--ns-component-button-danger-background);border-color:var(--ns-component-button-danger-background);color:var(--ns-component-button-danger-solid-color)}:host(.ns-button--danger) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-danger-background-hover);border-color:var(--ns-component-button-danger-background-hover);color:var(--ns-component-button-danger-solid-color-hover)}:host(.ns-button--danger) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-danger-background-active);border-color:var(--ns-component-button-danger-background-active);color:var(--ns-component-button-danger-solid-color-active)}:host(.ns-button--dark) .ns-button__control{background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background);color:var(--ns-component-button-dark-color)}:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}:host(.ns-button--selected) .ns-button__control{position:relative;z-index:1;box-shadow:var(--ns-component-button-selected-shadow);font-weight:var(--ns-component-button-selected-font-weight)}:host(.ns-button--selected) .ns-button__control:focus-visible{box-shadow:var(--ns-component-button-focus-shadow)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control{background:var(--ns-component-button-secondary-selected-background);border-color:var(--ns-component-button-secondary-selected-border-color);color:var(--ns-component-button-secondary-selected-color)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-secondary-selected-background-hover);border-color:var(--ns-component-button-secondary-selected-border-color-hover)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-secondary-selected-background-active);border-color:var(--ns-component-button-secondary-selected-border-color-active)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control{background:var(--ns-component-button-tertiary-selected-background);border-color:var(--ns-component-button-tertiary-selected-border-color);color:var(--ns-component-button-tertiary-selected-color)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-tertiary-selected-background-hover);border-color:var(--ns-component-button-tertiary-selected-border-color-hover)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-tertiary-selected-background-active);border-color:var(--ns-component-button-tertiary-selected-border-color-active)}:host-context(.ns-button-group).ns-button--secondary.ns-button--unselected .ns-button__control,:host-context(.ns-button-group).ns-button--tertiary.ns-button--unselected .ns-button__control{opacity:var(--ns-component-button-group-unselected-opacity)}:host-context(.ns-button-group--horizontal) .ns-button__control{border-radius:0}:host-context(.ns-button-group--horizontal):first-child .ns-button__control{border-start-start-radius:var(--ns-component-button-group-segment-radius);border-end-start-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--horizontal):last-child .ns-button__control{border-start-end-radius:var(--ns-component-button-group-segment-radius);border-end-end-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--vertical) .ns-button__control{border-radius:0}:host-context(.ns-button-group--vertical):first-child .ns-button__control{border-start-start-radius:var(--ns-component-button-group-segment-radius);border-start-end-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--vertical):last-child .ns-button__control{border-end-start-radius:var(--ns-component-button-group-segment-radius);border-end-end-radius:var(--ns-component-button-group-segment-radius)}.ns-button__spinner{display:inline-block;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;border-color:currentcolor;border-right-color:transparent;inline-size:var(--ns-component-button-spinner-size);block-size:var(--ns-component-button-spinner-size);animation:ns-button-spin var(--ns-component-button-loading-duration) linear infinite}@keyframes ns-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ns-button__control{transition:none}.ns-button__spinner{animation:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
670
682
|
}
|
|
671
683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, decorators: [{
|
|
672
684
|
type: Component,
|
|
@@ -691,7 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
691
703
|
<ns-icon
|
|
692
704
|
class="ns-button__icon"
|
|
693
705
|
[name]="icon()"
|
|
694
|
-
size="
|
|
706
|
+
[size]="effectiveIconSize()"
|
|
695
707
|
aria-hidden="true"
|
|
696
708
|
/>
|
|
697
709
|
}
|
|
@@ -705,6 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
705
717
|
'[class.ns-button--selected]': 'selected() === true',
|
|
706
718
|
'[class.ns-button--unselected]': 'selected() === false',
|
|
707
719
|
'[attr.data-selected]': 'selected() === undefined ? null : selected()',
|
|
720
|
+
'[class.ns-button--xs]': "size() === 'xs'",
|
|
708
721
|
'[class.ns-button--sm]': "size() === 'sm'",
|
|
709
722
|
'[class.ns-button--md]': "size() === 'md'",
|
|
710
723
|
'[class.ns-button--lg]': "size() === 'lg'",
|
|
@@ -714,8 +727,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
714
727
|
'[class.ns-button--success]': "variant() === 'success'",
|
|
715
728
|
'[class.ns-button--danger]': "variant() === 'danger'",
|
|
716
729
|
'[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"] }]
|
|
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 }] }] } });
|
|
730
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";@layer properties;:host{display:inline-block}:host(.ns-button--block){display:block}.ns-button__control{display:inline-flex;width:100%;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-outline-style: none;outline-style:none;min-inline-size:var(--ns-component-button-min-width);min-block-size:var(--ns-component-button-min-height);gap:var(--ns-component-button-gap);padding-block:var(--ns-component-button-padding-block);padding-inline:var(--ns-component-button-padding-inline);border-color:var(--ns-component-button-background);border-radius:var(--ns-component-button-radius);background:var(--ns-component-button-background);color:var(--ns-component-button-color);font-size:var(--ns-component-button-font-size);font-weight:var(--ns-component-button-font-weight);transition:background var(--ns-component-button-transition-duration),border-color var(--ns-component-button-transition-duration),color var(--ns-component-button-transition-duration),box-shadow var(--ns-component-button-transition-duration)}.ns-button__control:disabled{cursor:not-allowed}.ns-button__control:disabled{opacity:60%}.ns-button__control:hover:not(:disabled){background:var(--ns-component-button-background-hover);border-color:var(--ns-component-button-background-hover)}.ns-button__control:active:not(:disabled){background:var(--ns-component-button-background-active);border-color:var(--ns-component-button-background-active)}.ns-button__control:focus-visible{box-shadow:var(--ns-component-button-focus-shadow)}:host(.ns-button--xs) .ns-button__control{min-block-size:var(--ns-component-button-min-height-xs);border-radius:var(--ns-component-button-radius-xs)}:host(.ns-button--sm) .ns-button__control{min-block-size:var(--ns-component-button-min-height-sm)}:host(.ns-button--lg) .ns-button__control{min-block-size:var(--ns-component-button-min-height-lg)}:host(.ns-button--secondary) .ns-button__control{border-color:var(--ns-component-button-secondary-border-color);background:var(--ns-component-button-secondary-background);color:var(--ns-component-button-secondary-color)}:host(.ns-button--secondary) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-secondary-background-hover);border-color:var(--ns-component-button-secondary-background-hover)}:host(.ns-button--secondary) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-secondary-background-active);border-color:var(--ns-component-button-secondary-background-active)}:host(.ns-button--tertiary) .ns-button__control{border-color:transparent;background:transparent;color:var(--ns-component-button-tertiary-color)}:host(.ns-button--tertiary) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-tertiary-background-hover)}:host(.ns-button--tertiary) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-tertiary-background-active)}:host(.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height);padding-inline:var(--ns-component-button-icon-padding-inline)}:host(.ns-button--xs.ns-button--icon-only) .ns-button__control{min-inline-size:var(--ns-component-button-min-height-xs)}:host(.ns-button--success) .ns-button__control{background:var(--ns-component-button-success-background);border-color:var(--ns-component-button-success-background);color:var(--ns-component-button-success-solid-color)}:host(.ns-button--success) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-success-background-hover);border-color:var(--ns-component-button-success-background-hover);color:var(--ns-component-button-success-solid-color-hover)}:host(.ns-button--success) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-success-background-active);border-color:var(--ns-component-button-success-background-active);color:var(--ns-component-button-success-solid-color-active)}:host(.ns-button--danger) .ns-button__control{background:var(--ns-component-button-danger-background);border-color:var(--ns-component-button-danger-background);color:var(--ns-component-button-danger-solid-color)}:host(.ns-button--danger) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-danger-background-hover);border-color:var(--ns-component-button-danger-background-hover);color:var(--ns-component-button-danger-solid-color-hover)}:host(.ns-button--danger) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-danger-background-active);border-color:var(--ns-component-button-danger-background-active);color:var(--ns-component-button-danger-solid-color-active)}:host(.ns-button--dark) .ns-button__control{background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background);color:var(--ns-component-button-dark-color)}:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:hover:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 88%,black)}}:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-dark-background);border-color:var(--ns-component-button-dark-background)}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){background:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}@supports (color: color-mix(in lab,red,red)){:host(.ns-button--dark) .ns-button__control:active:not(:disabled){border-color:color-mix(in srgb,var(--ns-component-button-dark-background) 76%,black)}}:host(.ns-button--selected) .ns-button__control{position:relative;z-index:1;box-shadow:var(--ns-component-button-selected-shadow);font-weight:var(--ns-component-button-selected-font-weight)}:host(.ns-button--selected) .ns-button__control:focus-visible{box-shadow:var(--ns-component-button-focus-shadow)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control{background:var(--ns-component-button-secondary-selected-background);border-color:var(--ns-component-button-secondary-selected-border-color);color:var(--ns-component-button-secondary-selected-color)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-secondary-selected-background-hover);border-color:var(--ns-component-button-secondary-selected-border-color-hover)}:host(.ns-button--secondary.ns-button--selected) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-secondary-selected-background-active);border-color:var(--ns-component-button-secondary-selected-border-color-active)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control{background:var(--ns-component-button-tertiary-selected-background);border-color:var(--ns-component-button-tertiary-selected-border-color);color:var(--ns-component-button-tertiary-selected-color)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control:hover:not(:disabled){background:var(--ns-component-button-tertiary-selected-background-hover);border-color:var(--ns-component-button-tertiary-selected-border-color-hover)}:host(.ns-button--tertiary.ns-button--selected) .ns-button__control:active:not(:disabled){background:var(--ns-component-button-tertiary-selected-background-active);border-color:var(--ns-component-button-tertiary-selected-border-color-active)}:host-context(.ns-button-group).ns-button--secondary.ns-button--unselected .ns-button__control,:host-context(.ns-button-group).ns-button--tertiary.ns-button--unselected .ns-button__control{opacity:var(--ns-component-button-group-unselected-opacity)}:host-context(.ns-button-group--horizontal) .ns-button__control{border-radius:0}:host-context(.ns-button-group--horizontal):first-child .ns-button__control{border-start-start-radius:var(--ns-component-button-group-segment-radius);border-end-start-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--horizontal):last-child .ns-button__control{border-start-end-radius:var(--ns-component-button-group-segment-radius);border-end-end-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--vertical) .ns-button__control{border-radius:0}:host-context(.ns-button-group--vertical):first-child .ns-button__control{border-start-start-radius:var(--ns-component-button-group-segment-radius);border-start-end-radius:var(--ns-component-button-group-segment-radius)}:host-context(.ns-button-group--vertical):last-child .ns-button__control{border-end-start-radius:var(--ns-component-button-group-segment-radius);border-end-end-radius:var(--ns-component-button-group-segment-radius)}.ns-button__spinner{display:inline-block;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;border-color:currentcolor;border-right-color:transparent;inline-size:var(--ns-component-button-spinner-size);block-size:var(--ns-component-button-spinner-size);animation:ns-button-spin var(--ns-component-button-loading-duration) linear infinite}@keyframes ns-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ns-button__control{transition:none}.ns-button__spinner{animation:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
731
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }] } });
|
|
719
732
|
|
|
720
733
|
const NAVIGATION_KEYS$2 = [
|
|
721
734
|
'ArrowDown',
|
|
@@ -2042,7 +2055,7 @@ class NsDatePickerCalendarComponent {
|
|
|
2042
2055
|
key: date.toString(),
|
|
2043
2056
|
outside: date.month !== visibleMonth.month || date.year !== visibleMonth.year,
|
|
2044
2057
|
disabled: !this.isAvailable(date),
|
|
2045
|
-
current: isToday(date,
|
|
2058
|
+
current: isToday(date, getLocalTimeZone()),
|
|
2046
2059
|
selected: (!!selected && selected.compare(date) === 0) || isStart || isEnd,
|
|
2047
2060
|
inRange: !!range?.start &&
|
|
2048
2061
|
!!range.end &&
|
|
@@ -2262,10 +2275,10 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2262
2275
|
calendarLabel = 'Date picker';
|
|
2263
2276
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2264
2277
|
focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
|
|
2265
|
-
visibleMonth = signal(today(
|
|
2266
|
-
yearAnchor = signal(today(
|
|
2278
|
+
visibleMonth = signal(today(getLocalTimeZone()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
|
|
2279
|
+
yearAnchor = signal(today(getLocalTimeZone()).year, ...(ngDevMode ? [{ debugName: "yearAnchor" }] : /* istanbul ignore next */ []));
|
|
2267
2280
|
pickerView = signal('calendar', ...(ngDevMode ? [{ debugName: "pickerView" }] : /* istanbul ignore next */ []));
|
|
2268
|
-
yearPageStart = signal(today(
|
|
2281
|
+
yearPageStart = signal(today(getLocalTimeZone()).year, ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
|
|
2269
2282
|
overlay = inject(NsOverlayService);
|
|
2270
2283
|
changeDetector = inject(ChangeDetectorRef);
|
|
2271
2284
|
destroyRef = inject(DestroyRef);
|
|
@@ -2483,7 +2496,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2483
2496
|
this.overlayRef?.close('programmatic');
|
|
2484
2497
|
}
|
|
2485
2498
|
firstSelectableDate() {
|
|
2486
|
-
let candidate = this.minDate() || today(
|
|
2499
|
+
let candidate = this.minDate() || today(getLocalTimeZone());
|
|
2487
2500
|
const maxDate = this.maxDate();
|
|
2488
2501
|
const attempts = maxDate
|
|
2489
2502
|
? Number.POSITIVE_INFINITY
|
|
@@ -2539,7 +2552,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2539
2552
|
return years[start];
|
|
2540
2553
|
}
|
|
2541
2554
|
monthOptionState(date) {
|
|
2542
|
-
const current = today(
|
|
2555
|
+
const current = today(getLocalTimeZone());
|
|
2543
2556
|
const selected = this.value();
|
|
2544
2557
|
const visible = this.visibleMonth();
|
|
2545
2558
|
const focused = this.focusedDate();
|
|
@@ -2551,7 +2564,7 @@ class NsDatePickerComponent extends NsValueAccessor {
|
|
|
2551
2564
|
};
|
|
2552
2565
|
}
|
|
2553
2566
|
yearOptionState(year) {
|
|
2554
|
-
const current = today(
|
|
2567
|
+
const current = today(getLocalTimeZone());
|
|
2555
2568
|
const selected = this.value();
|
|
2556
2569
|
const visible = this.visibleMonth();
|
|
2557
2570
|
const focused = this.focusedDate();
|
|
@@ -2896,7 +2909,7 @@ class NsDateRangePickerComponent extends NsValueAccessor {
|
|
|
2896
2909
|
calendarLabel = 'Date range picker';
|
|
2897
2910
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2898
2911
|
focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
|
|
2899
|
-
visibleMonth = signal(today(
|
|
2912
|
+
visibleMonth = signal(today(getLocalTimeZone()), ...(ngDevMode ? [{ debugName: "visibleMonth" }] : /* istanbul ignore next */ []));
|
|
2900
2913
|
overlay = inject(NsOverlayService);
|
|
2901
2914
|
changeDetector = inject(ChangeDetectorRef);
|
|
2902
2915
|
destroyRef = inject(DestroyRef);
|
|
@@ -3019,7 +3032,7 @@ class NsDateRangePickerComponent extends NsValueAccessor {
|
|
|
3019
3032
|
return { start: value.start || null, end: value.end || null };
|
|
3020
3033
|
}
|
|
3021
3034
|
firstSelectableDate() {
|
|
3022
|
-
let candidate = this.minDate() || today(
|
|
3035
|
+
let candidate = this.minDate() || today(getLocalTimeZone());
|
|
3023
3036
|
const maxDate = this.maxDate();
|
|
3024
3037
|
const attempts = maxDate
|
|
3025
3038
|
? Number.POSITIVE_INFINITY
|
|
@@ -3212,8 +3225,9 @@ class NsDropdownItemDirective {
|
|
|
3212
3225
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
3213
3226
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3214
3227
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3228
|
+
dot = input(undefined, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
|
|
3215
3229
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3216
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
3230
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
3217
3231
|
}
|
|
3218
3232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, decorators: [{
|
|
3219
3233
|
type: Directive,
|
|
@@ -3221,7 +3235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3221
3235
|
selector: 'ns-dropdown-item',
|
|
3222
3236
|
standalone: true
|
|
3223
3237
|
}]
|
|
3224
|
-
}], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
3238
|
+
}], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
|
|
3225
3239
|
|
|
3226
3240
|
class NsSkeletonComponent {
|
|
3227
3241
|
width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -3279,13 +3293,15 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3279
3293
|
return projected.map((item) => ({
|
|
3280
3294
|
key: item.key(),
|
|
3281
3295
|
label: item.label(),
|
|
3282
|
-
disabled: item.disabled()
|
|
3296
|
+
disabled: item.disabled(),
|
|
3297
|
+
dot: item.dot()
|
|
3283
3298
|
}));
|
|
3284
3299
|
}
|
|
3285
3300
|
return this.collection().map((item) => ({
|
|
3286
3301
|
key: item.key,
|
|
3287
3302
|
label: item.label,
|
|
3288
|
-
disabled: item.disabled ?? false
|
|
3303
|
+
disabled: item.disabled ?? false,
|
|
3304
|
+
dot: item.dot
|
|
3289
3305
|
}));
|
|
3290
3306
|
}, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
3291
3307
|
visibleItems = computed(() => {
|
|
@@ -3313,6 +3329,14 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3313
3329
|
.map((item) => item.label)
|
|
3314
3330
|
.join(', ');
|
|
3315
3331
|
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
|
|
3332
|
+
/** Dot of the selected item; the trigger shows it for single selection only. */
|
|
3333
|
+
selectedDot = computed(() => {
|
|
3334
|
+
if (this.selectionMode() !== 'single') {
|
|
3335
|
+
return undefined;
|
|
3336
|
+
}
|
|
3337
|
+
const keys = this.selectedKeys();
|
|
3338
|
+
return this.items().find((item) => keys.has(item.key))?.dot;
|
|
3339
|
+
}, ...(ngDevMode ? [{ debugName: "selectedDot" }] : /* istanbul ignore next */ []));
|
|
3316
3340
|
activeId = computed(() => {
|
|
3317
3341
|
const item = this.visibleItems()[this.activeIndex()];
|
|
3318
3342
|
return item ? `${this.listboxId}-${String(item.key)}` : undefined;
|
|
@@ -3477,7 +3501,7 @@ class NsDropdownComponent extends NsValueAccessor {
|
|
|
3477
3501
|
useExisting: NsDropdownComponent,
|
|
3478
3502
|
multi: true
|
|
3479
3503
|
}
|
|
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 });
|
|
3504
|
+
], queries: [{ propertyName: "contentItems", predicate: NsDropdownItemDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsSkeletonComponent, selector: "ns-skeleton", inputs: ["width", "height", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3481
3505
|
}
|
|
3482
3506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
|
|
3483
3507
|
type: Component,
|
|
@@ -3493,7 +3517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
3493
3517
|
useExisting: NsDropdownComponent,
|
|
3494
3518
|
multi: true
|
|
3495
3519
|
}
|
|
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"] }]
|
|
3520
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<button\n #trigger\n type=\"button\"\n class=\"ns-dropdown__trigger\"\n role=\"combobox\"\n [id]=\"controlId()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"listboxId\"\n aria-haspopup=\"listbox\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"onTouched()\"\n>\n <span\n class=\"ns-dropdown__trigger-value\"\n [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n >\n @if (selectedDot(); as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ selectedLabel() || placeholder() }}</span\n >\n <ns-icon\n class=\"ns-dropdown__trigger-icon\"\n name=\"chevron-down\"\n size=\"18\"\n aria-hidden=\"true\"\n />\n</button>\n<select\n class=\"ns-dropdown__native-control\"\n [attr.name]=\"name()\"\n [multiple]=\"selectionMode() === 'multiple'\"\n [disabled]=\"disabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"onTouched()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n>\n @for (item of items(); track item.key) {\n <option\n [value]=\"item.key\"\n [selected]=\"selectedKeys().has(item.key)\"\n [disabled]=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n @if (searchable()) {\n <div class=\"ns-dropdown__search\">\n <input\n #searchInput\n class=\"ns-dropdown__search-input\"\n type=\"text\"\n [id]=\"searchId\"\n [attr.placeholder]=\"searchPlaceholder()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeId()\"\n [value]=\"query()\"\n autocomplete=\"off\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n <ns-icon\n class=\"ns-dropdown__search-icon\"\n name=\"search\"\n size=\"16\"\n aria-hidden=\"true\"\n />\n </div>\n }\n <div\n #listbox\n class=\"ns-dropdown__listbox\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.tabindex]=\"searchable() ? null : 0\"\n (keydown)=\"onListboxKeydown($event)\"\n >\n @if (loading()) {\n @for (row of skeletonRows; track row) {\n <div class=\"ns-dropdown__skeleton-row\">\n <ns-skeleton />\n </div>\n }\n } @else if (visibleItems().length === 0) {\n <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n } @else {\n @for (item of visibleItems(); track item.key; let index = $index) {\n <div\n class=\"ns-dropdown__option\"\n role=\"option\"\n [id]=\"listboxId + '-' + item.key\"\n [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n [class.ns-dropdown__option--disabled]=\"item.disabled\"\n [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n [attr.aria-disabled]=\"item.disabled\"\n (click)=\"select(item.key)\"\n >\n @if (item.dot; as dot) {\n <span\n class=\"ns-dropdown__dot\"\n [class.ns-dropdown__dot--neutral]=\"dot === 'neutral'\"\n [class.ns-dropdown__dot--primary]=\"dot === 'primary'\"\n [class.ns-dropdown__dot--success]=\"dot === 'success'\"\n [class.ns-dropdown__dot--warning]=\"dot === 'warning'\"\n [class.ns-dropdown__dot--danger]=\"dot === 'danger'\"\n aria-hidden=\"true\"\n ></span>\n }\n {{ item.label }}\n </div>\n }\n }\n </div>\n</div>\n@if (description()) {\n <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);margin-bottom:var(--ns-component-dropdown-label-gap);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__dot{display:inline-block;flex-shrink:0;border-radius:calc(infinity * 1px);vertical-align:middle;inline-size:var(--ns-component-dropdown-dot-size);block-size:var(--ns-component-dropdown-dot-size);margin-inline-end:var(--ns-component-dropdown-trigger-gap);background:var(--ns-component-dropdown-dot-neutral)}.ns-dropdown__dot--primary{background:var(--ns-component-dropdown-dot-primary)}.ns-dropdown__dot--success{background:var(--ns-component-dropdown-dot-success)}.ns-dropdown__dot--warning{background:var(--ns-component-dropdown-dot-warning)}.ns-dropdown__dot--danger{background:var(--ns-component-dropdown-dot-danger)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3497
3521
|
}], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsDropdownItemDirective), { isSignal: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{
|
|
3498
3522
|
type: ViewChild,
|
|
3499
3523
|
args: ['trigger']
|
|
@@ -3719,9 +3743,32 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3719
3743
|
: {})
|
|
3720
3744
|
});
|
|
3721
3745
|
}
|
|
3746
|
+
/**
|
|
3747
|
+
* `format: { style: 'percent' }` deliberately breaks from `Intl.NumberFormat`'s
|
|
3748
|
+
* own convention. `Intl` expects a *fraction* (`format(0.1)` → "10%"); this
|
|
3749
|
+
* component's model is the 0-100 *magnitude* instead (`100` means 100%), so a
|
|
3750
|
+
* model of `10` paints "10%".
|
|
3751
|
+
*
|
|
3752
|
+
* Why: almost every form in this codebase stores a percentage as an integer
|
|
3753
|
+
* 0-100 (discounts, tax rates, commission splits, `min`/`max`/`step` all read
|
|
3754
|
+
* naturally as "0 to 100"). Making the model a 0-1 fraction would just push
|
|
3755
|
+
* the ×100/÷100 conversion onto every consumer instead of doing it once here.
|
|
3756
|
+
*
|
|
3757
|
+
* Do NOT "fix" this back to matching `Intl` — that silently multiplies every
|
|
3758
|
+
* stored percentage by 100 the next time this input round-trips a value.
|
|
3759
|
+
* The bug this comment guards against: `formatDisplayValue` used to hand the
|
|
3760
|
+
* raw 0-100 model straight to `Intl` (which reads it as a fraction, so `0.1`
|
|
3761
|
+
* printed as "10%"), while `parse` read "10%" back as the magnitude `10` — a
|
|
3762
|
+
* value that then painted as "1,000%" on the next blur. `parse` already
|
|
3763
|
+
* returns the 0-100 magnitude and is intentionally left untouched; only the
|
|
3764
|
+
* percent *formatting* path divides by 100 before calling `Intl`.
|
|
3765
|
+
*/
|
|
3766
|
+
isPercentMode() {
|
|
3767
|
+
return !this.currency() && this.format().style === 'percent';
|
|
3768
|
+
}
|
|
3722
3769
|
formatDisplayValue(value) {
|
|
3723
3770
|
if (!this.currency()) {
|
|
3724
|
-
return this.formatter.format(value);
|
|
3771
|
+
return this.formatter.format(this.isPercentMode() ? value / 100 : value);
|
|
3725
3772
|
}
|
|
3726
3773
|
return this.formatter
|
|
3727
3774
|
.formatToParts(value)
|
|
@@ -3730,6 +3777,7 @@ class NsInputNumberComponent extends NsValueAccessor {
|
|
|
3730
3777
|
.join('')
|
|
3731
3778
|
.trim();
|
|
3732
3779
|
}
|
|
3780
|
+
/** Returns the 0-100 magnitude even in percent mode — see `isPercentMode`. */
|
|
3733
3781
|
parse(text) {
|
|
3734
3782
|
const parts = this.formatter.formatToParts(12345.6);
|
|
3735
3783
|
const group = parts.find((part) => part.type === 'group')?.value ?? ',';
|
|
@@ -5310,7 +5358,7 @@ class NsEditorImageComponent {
|
|
|
5310
5358
|
}
|
|
5311
5359
|
}
|
|
5312
5360
|
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" }] });
|
|
5361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorImageComponent, isStandalone: true, selector: "ns-editor-image", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-image\"\n [attr.aria-label]=\"'insert_image' | nsEditorLabel\"\n [disabled]=\"disabled()\"\n (click)=\"show = true\"\n>\n <svg\n viewBox=\"0 0 24 24\"\n role=\"presentation\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5Zm14 2H5v8.586l3.293-3.293a1 1 0 0 1 1.414 0L12 13.586l3.793-3.793a1 1 0 0 1 1.414 0L19 11.586V6ZM5 18v-2.586l4-4 2.293 2.293a1 1 0 0 0 1.414 0L17 9.414 19 11.414V18H5Z\"\n ></path>\n <circle cx=\"8\" cy=\"9\" r=\"1.5\"></circle>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formImage\"\n class=\"ns-editor__form-image\"\n aria-labelledby=\"ns-editor-image\"\n [ngClass]=\"{ 'ns-editor__form-image--visible': show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_image' | nsEditorLabel }}</label>\n <button\n type=\"button\"\n class=\"ns-editor__close\"\n [attr.aria-label]=\"'close_image' | nsEditorLabel\"\n (click)=\"show = false\"\n ></button>\n </header>\n\n <ns-input\n [formControlName]=\"'url'\"\n [placeholder]=\"'image_url' | nsEditorLabel\"\n />\n <ns-input\n [formControlName]=\"'text'\"\n [placeholder]=\"'image_alt' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\">{{ 'submit_image' | nsEditorLabel }}</ns-button>\n </footer>\n</form>\n", styles: ["@layer properties;.ns-editor__button,.ns-editor__close{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg,.ns-editor__close svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__form-image{position:absolute;margin:0;display:none;min-width:calc(var(--ns-primitive-space-1) * 64);border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-editor-padding);z-index:var(--ns-component-editor-layer);border-color:var(--ns-component-editor-border-color);border-radius:var(--ns-component-editor-overlay-radius);background:var(--ns-component-editor-background);color:var(--ns-component-editor-color);box-shadow:var(--ns-component-editor-overlay-shadow)}.ns-editor__form-image--visible{display:block}.ns-editor__form-image header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-component-editor-gap)}.ns-editor__form-image footer{margin-top:var(--ns-component-editor-gap)}.ns-editor__form-image ns-input+ns-input{margin-top:calc(var(--ns-primitive-space-1) * 2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsInputComponent, selector: "ns-input", inputs: ["icon"] }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5314
5362
|
}
|
|
5315
5363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorImageComponent, decorators: [{
|
|
5316
5364
|
type: Component,
|
|
@@ -5345,7 +5393,7 @@ class NsEditorLinkComponent {
|
|
|
5345
5393
|
}
|
|
5346
5394
|
}
|
|
5347
5395
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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" }] });
|
|
5396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorLinkComponent, isStandalone: true, selector: "ns-editor-link", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ns-editor__button\"\n id=\"ns-editor-link\"\n [attr.aria-label]=\"'insert_link' | nsEditorLabel\"\n [disabled]=\"disabled()\"\n (click)=\"show = true\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M12.654 8.764a.858.858 0 01-1.213-1.213l1.214-1.214a3.717 3.717 0 015.257 0 3.714 3.714 0 01.001 5.258l-1.214 1.214-.804.804a3.72 3.72 0 01-5.263.005.858.858 0 011.214-1.214c.781.782 2.05.78 2.836-.005l.804-.803 1.214-1.214a1.998 1.998 0 00-.001-2.831 2 2 0 00-2.83 0l-1.215 1.213zm-.808 6.472a.858.858 0 011.213 1.213l-1.214 1.214a3.717 3.717 0 01-5.257 0 3.714 3.714 0 01-.001-5.258l1.214-1.214.804-.804a3.72 3.72 0 015.263-.005.858.858 0 01-1.214 1.214 2.005 2.005 0 00-2.836.005l-.804.803L7.8 13.618a1.998 1.998 0 00.001 2.831 2 2 0 002.83 0l1.215-1.213z\"\n ></path>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formLink\"\n class=\"ns-editor__form-link\"\n aria-labelledby=\"ns-editor-link\"\n [ngClass]=\"{ 'ns-editor__form-link--visible': show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_link' | nsEditorLabel }}</label>\n <button\n type=\"button\"\n class=\"ns-editor__close\"\n [attr.aria-label]=\"'close_link' | nsEditorLabel\"\n (click)=\"show = false\"\n ></button>\n </header>\n\n <ns-input [formControlName]=\"'url'\" [placeholder]=\"'link' | nsEditorLabel\" />\n <ns-input [formControlName]=\"'text'\" [placeholder]=\"'text' | nsEditorLabel\" />\n <ns-input\n [formControlName]=\"'tooltip'\"\n [placeholder]=\"'tooltip_link' | nsEditorLabel\"\n />\n <ns-checkbox\n [formControlName]=\"'openNewWindow'\"\n [label]=\"'open_new_window' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\">{{ 'submit_link' | nsEditorLabel }}</ns-button>\n </footer>\n</form>\n", styles: ["@layer properties;.ns-editor__button,.ns-editor__close{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-editor-action-size);height:var(--ns-component-editor-action-size);border-radius:var(--ns-component-editor-action-radius);color:var(--ns-component-editor-action-color)}.ns-editor__button svg,.ns-editor__close svg{flex-shrink:0;width:var(--ns-component-editor-icon-size);height:var(--ns-component-editor-icon-size)}.ns-editor__button:hover,.ns-editor__close:hover,.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{background:var(--ns-component-editor-action-hover-background)}.ns-editor__button:focus-visible,.ns-editor__close:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}.ns-editor__form-link{position:absolute;margin:0;display:none;min-width:calc(var(--ns-primitive-space-1) * 64);border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-editor-padding);z-index:var(--ns-component-editor-layer);border-color:var(--ns-component-editor-border-color);border-radius:var(--ns-component-editor-overlay-radius);background:var(--ns-component-editor-background);color:var(--ns-component-editor-color);box-shadow:var(--ns-component-editor-overlay-shadow)}.ns-editor__form-link--visible{display:block}.ns-editor__form-link header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ns-component-editor-gap)}.ns-editor__form-link footer{margin-top:var(--ns-component-editor-gap)}.ns-editor__form-link ns-input+ns-input{margin-top:calc(var(--ns-primitive-space-1) * 2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsInputComponent, selector: "ns-input", inputs: ["icon"] }, { kind: "component", type: NsCheckboxComponent, selector: "ns-checkbox" }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5349
5397
|
}
|
|
5350
5398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, decorators: [{
|
|
5351
5399
|
type: Component,
|
|
@@ -5387,7 +5435,7 @@ class NsEditorParagraphComponent {
|
|
|
5387
5435
|
this.editor.formatBlock(heading);
|
|
5388
5436
|
}
|
|
5389
5437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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" }] });
|
|
5438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsEditorParagraphComponent, isStandalone: true, selector: "ns-editor-paragraph", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ns-dropdown [searchable]=\"false\" [disabled]=\"disabled()\" [(ngModel)]=\"value\">\n <ns-dropdown-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\" />\n <ns-dropdown-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\" />\n <ns-dropdown-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\" />\n <ns-dropdown-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\" />\n <ns-dropdown-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\" />\n <ns-dropdown-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\" />\n <ns-dropdown-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\" />\n</ns-dropdown>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["collection", "selectionMode", "loading", "searchable", "searchPlaceholder", "emptyText", "placement", "open"], outputs: ["openChange", "opened", "closed"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["key", "label", "disabled", "dot"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
|
|
5391
5439
|
}
|
|
5392
5440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, decorators: [{
|
|
5393
5441
|
type: Component,
|
|
@@ -6024,7 +6072,7 @@ class NsImageUploadComponent extends NsValueAccessor {
|
|
|
6024
6072
|
useExisting: forwardRef(() => NsImageUploadComponent),
|
|
6025
6073
|
multi: true
|
|
6026
6074
|
}
|
|
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" }] });
|
|
6075
|
+
], viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (layout() === 'cover') {\n <div class=\"ns-image-upload__wrap ns-image-upload__wrap--cover\">\n @if (!images.length) {\n <div\n class=\"ns-image-upload__cover-empty\"\n [class.ns-image-upload__cover-empty--dragging]=\"dragActive()\"\n (dragover)=\"dragover($event, 0)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <div class=\"ns-image-upload__cover-empty-icon\">\n <ns-icon name=\"image\" />\n </div>\n <p class=\"ns-image-upload__cover-empty-title\">\n Arrastra tus fotos aqu\u00ED\n </p>\n <p class=\"ns-image-upload__cover-empty-subtitle\">\n PNG o JPG, hasta 10MB cada una\n </p>\n <ns-button\n type=\"button\"\n variant=\"dark\"\n size=\"sm\"\n [disabled]=\"disabled()\"\n (click)=\"onClick()\"\n >\n Subir fotos\n </ns-button>\n </div>\n } @else {\n <div\n class=\"ns-image-upload__cover-grid\"\n [style.--ns-image-upload-rows]=\"reservedRows()\"\n >\n <div\n class=\"ns-image-upload__cover\"\n tabindex=\"0\"\n [attr.aria-label]=\"'Esta imagen es la portada del producto'\"\n [class.ns-image-upload__cover--dragging]=\"dragActive()\"\n [class.ns-image-upload__cover--loading]=\"\n statusOf(images[0]) === 'subiendo'\n \"\n [class.ns-image-upload__cover--failed]=\"\n statusOf(images[0]) === 'fallido'\n \"\n (dragover)=\"dragover($event, 0)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <img\n class=\"ns-image-upload__cover-image\"\n [attr.src]=\"images[0] | nsImageUrl\"\n [attr.alt]=\"images[0].name\"\n />\n @if (statusOf(images[0]) === 'subiendo') {\n <div class=\"ns-image-upload__status-overlay\">\n <ns-icon name=\"loader-circle\" />\n </div>\n } @else if (statusOf(images[0]) === 'fallido') {\n <button\n type=\"button\"\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Reintentar subir la portada'\"\n (click)=\"retry(images[0]); $event.stopPropagation()\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </button>\n }\n <span class=\"ns-image-upload__badge\">Portada</span>\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__cover-remove\"\n [disabled]=\"disabled() || statusOf(images[0]) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar portada'\"\n (click)=\"remove(images[0]); $event.stopPropagation()\"\n >\n <ns-icon name=\"x\" size=\"14\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <div class=\"ns-image-upload__stack\">\n @for (image of images.slice(1); track uidOf(image); let i = $index) {\n <div\n class=\"ns-image-upload__thumbnail\"\n tabindex=\"0\"\n [draggable]=\"!disabled() && images.length > 1\"\n [class.ns-image-upload__thumbnail--loading]=\"\n statusOf(image) === 'subiendo'\n \"\n [class.ns-image-upload__thumbnail--failed]=\"\n statusOf(image) === 'fallido'\n \"\n (dragstart)=\"dragstart($event, i + 1)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i + 1)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <img\n class=\"ns-image-upload__thumbnail-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n @if (statusOf(image) === 'subiendo') {\n <div class=\"ns-image-upload__status-overlay\">\n <ns-icon name=\"loader-circle\" />\n </div>\n } @else if (statusOf(image) === 'fallido') {\n <button\n type=\"button\"\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Reintentar subir imagen ' + (i + 2)\"\n (click)=\"retry(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </button>\n }\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__thumbnail-remove\"\n [disabled]=\"disabled() || statusOf(image) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar imagen ' + (i + 2)\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"x\" size=\"14\" aria-hidden=\"true\" />\n </button>\n }\n </div>\n }\n @if (images.length < limit()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__add\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Explorar archivos para a\u00F1adir m\u00E1s fotos'\"\n (click)=\"onClick()\"\n >\n <ns-icon name=\"image-plus\" />\n <span class=\"ns-image-upload__add-title\">A\u00F1adir m\u00E1s</span>\n <span class=\"ns-image-upload__add-subtitle\"\n >o explora tus archivos</span\n >\n </button>\n }\n </div>\n </div>\n }\n\n @if (limitWarning(); as warning) {\n <p class=\"ns-image-upload__limit-warning\" role=\"status\">{{ warning }}</p>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </div>\n} @else {\n <div\n class=\"ns-image-upload__wrap\"\n [ngClass]=\"{ 'ns-image-upload__wrap--multiple': multi() && images.length }\"\n >\n @if (multi()) {\n @for (image of images; let i = $index; track uidOf(image)) {\n <div\n class=\"ns-image-upload__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image-upload__button ns-image-upload__button--upload\"\n (click)=\"statusOf(image) === 'fallido' ? retry(image) : onClick()\"\n [ngClass]=\"{\n 'ns-image-upload__button--loading':\n statusOf(image) === 'subiendo',\n 'ns-image-upload__button--failed': statusOf(image) === 'fallido'\n }\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"\n statusOf(image) === 'fallido'\n ? 'Reintentar subir ' + image.name\n : label()\n \"\n >\n <img\n class=\"ns-image-upload__preview\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image-upload__preload\" name=\"loader-circle\" />\n\n @if (statusOf(image) === 'fallido') {\n <div\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\"\n >Reintentar</span\n >\n </div>\n }\n\n <div class=\"ns-image-upload__overlay\">\n <ns-icon class=\"ns-image-upload__drag\" name=\"grip\" />\n </div>\n </button>\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ns-image-upload__remove\"\n [disabled]=\"disabled() || statusOf(image) === 'subiendo'\"\n [attr.aria-label]=\"'Eliminar imagen: ' + image.name\"\n (click)=\"remove(image); $event.stopPropagation()\"\n >\n <ns-icon name=\"trash-2\" />\n </button>\n }\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image-upload__drag-container\"\n (click)=\"onDragContainerClick()\"\n (dragover)=\"dragover($event, images.length)\"\n (dragleave)=\"dragleave($event)\"\n (drop)=\"drop($event)\"\n [ngClass]=\"{\n 'ns-image-upload__drag-container--loading':\n image && !multi() && statusOf(image) === 'subiendo',\n 'ns-image-upload__drag-container--dragging': dragActive()\n }\"\n [attr.aria-label]=\"\n singleFailed ? 'Reintentar subir ' + image?.name : null\n \"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (!multi() && image; as img) {\n <img\n class=\"ns-image-upload__fluid\"\n [attr.src]=\"img | nsImageUrl\"\n [ngClass]=\"{ 'ns-image-upload__fluid--disabled': disabled() }\"\n alt\n />\n @if (statusOf(img) === 'fallido') {\n <div\n class=\"ns-image-upload__status-overlay ns-image-upload__status-overlay--failed\"\n >\n <ns-icon name=\"triangle-alert\" />\n <span class=\"ns-image-upload__error-overlay-label\">Reintentar</span>\n </div>\n }\n }\n\n @if (!image || multi()) {\n <div class=\"ns-image-upload__empty\">\n <ns-icon name=\"image\" />\n <span>{{ label() }}</span>\n </div>\n }\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"multi()\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n\n @if (limitWarning(); as warning) {\n <p class=\"ns-image-upload__limit-warning\" role=\"status\">{{ warning }}</p>\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";@layer properties;:host{position:relative;display:block;width:100%}.ns-image-upload__add:focus-visible,.ns-image-upload__stack .ns-image-upload__thumbnail:focus-visible,.ns-image-upload__stack .ns-image-upload__thumbnail-remove:focus-visible,.ns-image-upload__cover-remove:focus-visible,.ns-image-upload__cover:focus-visible,.ns-image-upload__status-overlay:focus-visible{box-shadow:var(--ns-component-image-upload-focus-shadow)}.ns-image-upload__add:disabled,.ns-image-upload__stack .ns-image-upload__thumbnail-remove:disabled,.ns-image-upload__cover-remove:disabled,.ns-image-upload__status-overlay:disabled{pointer-events:none;opacity:50%}.ns-image-upload__add:hover:not(:disabled),.ns-image-upload__cover-empty:hover:not(:disabled),.ns-image-upload__drag-container:hover:not(:disabled),.ns-image-upload__button:hover:not(:disabled){border-color:var(--ns-component-image-upload-border-hover-color)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove:hover:not(:disabled),.ns-image-upload__cover-remove:hover:not(:disabled){background:var(--ns-component-image-upload-chip-background-hover)}.ns-image-upload__wrap{width:100%}.ns-image-upload__wrap--multiple{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ns-component-image-upload-gap)}.ns-image-upload__drag-container,.ns-image-upload__button{position:relative;display:flex;width:100%;height:100%;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-image-upload-padding);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);box-shadow:var(--ns-component-image-upload-control-shadow);transition:border-color var(--ns-component-image-upload-transition-duration),box-shadow var(--ns-component-image-upload-transition-duration),background var(--ns-component-image-upload-transition-duration)}.ns-image-upload__drag-container{min-height:calc(var(--ns-primitive-space-1) * 40);--tw-border-style: dashed;border-style:dashed}.ns-image-upload__drag-container--dragging,.ns-image-upload__cover-empty--dragging,.ns-image-upload__cover--dragging{border-color:var(--ns-component-image-upload-border-hover-color);box-shadow:var(--ns-component-image-upload-focus-shadow)}.ns-image-upload__wrap--multiple .ns-image-upload__thumbnail{min-height:calc(var(--ns-primitive-space-1) * 32);cursor:move}.ns-image-upload__thumbnail{position:relative;overflow:hidden;border-radius:var(--ns-component-image-upload-thumbnail-radius);box-shadow:var(--ns-component-image-upload-thumbnail-shadow)}.ns-image-upload__preview,.ns-image-upload__fluid,.ns-image-upload__thumbnail-image{width:100%;height:100%;object-fit:cover}.ns-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);background:var(--ns-component-image-upload-overlay-color)}.ns-image-upload__button:hover .ns-image-upload__overlay,.ns-image-upload__drag-container:hover .ns-image-upload__overlay,:host(.ns-image-upload--loaded) .ns-image-upload__overlay{opacity:70%}.ns-image-upload__empty{z-index:10;display:flex;flex-direction:column;align-items:center;gap:var(--ns-component-image-upload-gap)}.ns-image-upload__remove,.ns-image-upload__drag{position:absolute;top:calc(var(--ns-primitive-space-1) * 2);z-index:10;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ns-image-upload__remove{inset-inline-end:calc(var(--ns-primitive-space-1) * 2);cursor:pointer;color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__drag{inset-inline-start:calc(var(--ns-primitive-space-1) * 2)}.ns-image-upload__preload{position:relative;z-index:10;display:none}.ns-image-upload__button--loading .ns-image-upload__preload,.ns-image-upload__drag-container--loading .ns-image-upload__preload{display:block}.ns-image-upload__button--loading .ns-image-upload__preview,.ns-image-upload__drag-container--loading .ns-image-upload__fluid,.ns-image-upload__fluid--disabled,:host(.ns-image-upload--disabled){pointer-events:none;opacity:50%}.ns-image-upload__status-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ns-component-image-upload-gap);background:var(--ns-component-image-upload-overlay-color);border:0;cursor:pointer}.ns-image-upload__status-overlay--failed{color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__wrap--cover{display:flex;flex-direction:column}.ns-image-upload__cover-empty{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;text-align:center;box-sizing:border-box;min-block-size:var(--ns-component-image-upload-empty-min-height);gap:var(--ns-component-image-upload-empty-gap);border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-control-radius);background:var(--ns-component-image-upload-control-background);transition:border-color var(--ns-component-image-upload-transition-duration)}.ns-image-upload__cover-empty-icon{display:flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);inline-size:var(--ns-component-image-upload-empty-icon-circle-size);block-size:var(--ns-component-image-upload-empty-icon-circle-size);background:var(--ns-component-image-upload-empty-icon-circle-background)}.ns-image-upload__cover-empty-icon ::ng-deep svg{inline-size:var(--ns-component-image-upload-empty-icon-size);block-size:var(--ns-component-image-upload-empty-icon-size)}.ns-image-upload__cover-empty-title{margin:0;color:var(--ns-component-image-upload-empty-title-color);font-size:var(--ns-component-image-upload-empty-title-font-size);font-weight:var(--ns-component-image-upload-empty-title-font-weight)}.ns-image-upload__cover-empty-subtitle{margin:0;color:var(--ns-component-image-upload-empty-subtitle-color);font-size:var(--ns-component-image-upload-empty-subtitle-font-size)}.ns-image-upload__cover-grid{display:grid;width:100%;align-items:flex-start;grid-template-columns:2fr 1fr;column-gap:var(--ns-component-image-upload-column-gap)}.ns-image-upload__cover,.ns-image-upload__stack{block-size:var(--ns-component-image-upload-empty-min-height)}.ns-image-upload__cover{position:relative;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none;box-sizing:border-box;border-radius:var(--ns-component-image-upload-thumbnail-radius);background:var(--ns-component-image-upload-cover-background)}.ns-image-upload__cover--failed{border-color:var(--ns-component-image-upload-danger-color)}.ns-image-upload__cover-image{width:100%;height:100%;object-fit:contain}.ns-image-upload__badge{position:absolute;display:inline-flex;align-items:center;border-style:var(--tw-border-style);border-width:0px;border-radius:var(--ns-component-image-upload-chip-radius);background:var(--ns-component-image-upload-chip-background);color:var(--ns-component-image-upload-chip-color);padding-block:var(--ns-component-image-upload-chip-padding-block);padding-inline:var(--ns-component-image-upload-chip-padding-inline);font-size:var(--ns-component-image-upload-chip-font-size);font-weight:var(--ns-component-image-upload-chip-font-weight);top:var(--ns-component-image-upload-chip-offset);inset-inline-start:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove,.ns-image-upload__cover-remove{position:absolute;display:flex;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;--tw-outline-style: none;outline-style:none;background:var(--ns-component-image-upload-chip-background);color:var(--ns-component-image-upload-chip-color);inset-inline-end:var(--ns-component-image-upload-chip-offset);opacity:0;pointer-events:none;transition:background var(--ns-component-image-upload-transition-duration),opacity var(--ns-component-image-upload-transition-duration)}.ns-image-upload__stack .ns-image-upload__thumbnail-remove:focus-visible,.ns-image-upload__cover-remove:focus-visible{opacity:1;pointer-events:auto}.ns-image-upload__cover-remove{z-index:11;bottom:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__stack{display:grid;align-content:flex-start;overflow-y:auto;grid-auto-rows:calc((var(--ns-component-image-upload-empty-min-height) - (var(--ns-image-upload-rows) - 1) * var(--ns-component-image-upload-stack-gap)) / var(--ns-image-upload-rows));row-gap:var(--ns-component-image-upload-stack-gap)}.ns-image-upload__stack .ns-image-upload__thumbnail{width:100%;--tw-outline-style: none;outline-style:none}.ns-image-upload__stack .ns-image-upload__thumbnail--failed{border:var(--ns-component-image-upload-thumbnail-border-width) solid var(--ns-component-image-upload-danger-color);box-sizing:border-box}.ns-image-upload__stack .ns-image-upload__thumbnail-remove{z-index:11;top:var(--ns-component-image-upload-chip-offset)}.ns-image-upload__cover:hover .ns-image-upload__cover-remove,.ns-image-upload__cover:focus-within .ns-image-upload__cover-remove,.ns-image-upload__stack .ns-image-upload__thumbnail:hover .ns-image-upload__thumbnail-remove,.ns-image-upload__stack .ns-image-upload__thumbnail:focus-within .ns-image-upload__thumbnail-remove{opacity:1;pointer-events:auto}.ns-image-upload__add{display:flex;width:100%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;text-align:center;--tw-outline-style: none;outline-style:none;border-color:var(--ns-component-image-upload-control-border-color);border-radius:var(--ns-component-image-upload-thumbnail-radius);background:var(--ns-component-image-upload-control-background);gap:var(--ns-component-image-upload-gap);transition:border-color var(--ns-component-image-upload-transition-duration)}.ns-image-upload__add ::ng-deep svg{inline-size:var(--ns-component-image-upload-add-icon-size);block-size:var(--ns-component-image-upload-add-icon-size)}.ns-image-upload__add-title{margin:0;color:var(--ns-component-image-upload-add-title-color);font-size:var(--ns-component-image-upload-add-title-font-size)}.ns-image-upload__add-subtitle{margin:0;color:var(--ns-component-image-upload-add-subtitle-color);font-size:var(--ns-component-image-upload-add-subtitle-font-size)}.ns-image-upload__limit-warning{margin:0;grid-column:1/-1;margin-top:var(--ns-component-image-upload-gap);color:var(--ns-component-image-upload-warning-text-color);font-size:var(--ns-component-image-upload-add-subtitle-font-size)}@media(prefers-reduced-motion:reduce){.ns-image-upload__drag-container,.ns-image-upload__button,.ns-image-upload__overlay,.ns-image-upload__cover-empty,.ns-image-upload__add,.ns-image-upload__cover-remove,.ns-image-upload__stack .ns-image-upload__thumbnail-remove{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "pipe", type: NsImageUrlPipe, name: "nsImageUrl" }] });
|
|
6028
6076
|
}
|
|
6029
6077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsImageUploadComponent, decorators: [{
|
|
6030
6078
|
type: Component,
|
|
@@ -6607,7 +6655,7 @@ class NsLoadMoreComponent {
|
|
|
6607
6655
|
{{ loadMoreLabel() }}
|
|
6608
6656
|
</ns-button>
|
|
6609
6657
|
}
|
|
6610
|
-
`, isInline: true, styles: [":host.ns-load-more{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ns-component-load-more-gap);padding-block:var(--ns-component-load-more-padding-block)}.ns-load-more__status{margin:0;color:var(--ns-component-load-more-color);font-size:var(--ns-component-load-more-font-size)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "ariaLabel", "block", "disabled", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6658
|
+
`, isInline: true, styles: [":host.ns-load-more{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ns-component-load-more-gap);padding-block:var(--ns-component-load-more-padding-block)}.ns-load-more__status{margin:0;color:var(--ns-component-load-more-color);font-size:var(--ns-component-load-more-font-size)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6611
6659
|
}
|
|
6612
6660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsLoadMoreComponent, decorators: [{
|
|
6613
6661
|
type: Component,
|
|
@@ -7150,7 +7198,7 @@ class NsScheduleComponent {
|
|
|
7150
7198
|
this.selected.set(new Date(date.year, date.month - 1, date.day));
|
|
7151
7199
|
}
|
|
7152
7200
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
7201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selected: "selectedChange", selectedDay: "selectedDayChange", onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n <ns-date-picker\n [ngModel]=\"selectedDay()\"\n (ngModelChange)=\"selectDate($event)\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [searchable]=\"false\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" key=\"day\" />\n <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n <ns-dropdown-item label=\"Week\" key=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: ["@layer properties;.ns-schedule{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;min-height:var(--ns-component-schedule-slot-height);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "iconSize", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayComponent, selector: "ns-schedule-day", inputs: ["schedules", "currentDate"] }, { kind: "component", type: WeekComponent, selector: "ns-schedule-week", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsWorkweekComponent, selector: "ns-schedule-workweek", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsDatePickerComponent, selector: "ns-date-picker", inputs: ["minDate", "maxDate", "unavailableDates", "firstDayOfWeek"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["collection", "selectionMode", "loading", "searchable", "searchPlaceholder", "emptyText", "placement", "open"], outputs: ["openChange", "opened", "closed"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["key", "label", "disabled", "dot"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
7154
7202
|
}
|
|
7155
7203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, decorators: [{
|
|
7156
7204
|
type: Component,
|
|
@@ -8021,6 +8069,9 @@ const Arvisfy = {
|
|
|
8021
8069
|
},
|
|
8022
8070
|
easing: { standard: 'cubic-bezier(0.2, 0, 0, 1)' },
|
|
8023
8071
|
size: {
|
|
8072
|
+
// Extra-small control height (batch AVF button `xs` size): 28px, half
|
|
8073
|
+
// way between the icon-only glyph and `controlSm` (38px).
|
|
8074
|
+
controlXs: '1.75rem',
|
|
8024
8075
|
controlSm: '2.375rem',
|
|
8025
8076
|
controlMd: '2.5rem',
|
|
8026
8077
|
controlLg: '3rem',
|
|
@@ -8304,6 +8355,7 @@ const Arvisfy = {
|
|
|
8304
8355
|
link: '{primitive.offset.link}'
|
|
8305
8356
|
},
|
|
8306
8357
|
size: {
|
|
8358
|
+
controlXs: '{primitive.size.controlXs}',
|
|
8307
8359
|
controlSm: '{primitive.size.controlSm}',
|
|
8308
8360
|
controlMd: '{primitive.size.controlMd}',
|
|
8309
8361
|
controlLg: '{primitive.size.controlLg}',
|
|
@@ -8865,6 +8917,12 @@ const Arvisfy = {
|
|
|
8865
8917
|
tertiarySelectedBackgroundActive: '{semantic.color.content4}',
|
|
8866
8918
|
tertiarySelectedBorderColorActive: '{semantic.color.content4}',
|
|
8867
8919
|
iconPaddingInline: '{semantic.space.sm}',
|
|
8920
|
+
minHeightXs: '{semantic.size.controlXs}',
|
|
8921
|
+
// `size="xs"` (28px) reads too round at the 12px default `control`
|
|
8922
|
+
// radius, so it borrows `semantic.radius.pill` (8px) the same way
|
|
8923
|
+
// `ns-button-group`'s segment radius borrows a dedicated semantic
|
|
8924
|
+
// radius rather than a raw value.
|
|
8925
|
+
radiusXs: '{semantic.radius.pill}',
|
|
8868
8926
|
minHeightSm: '{semantic.size.controlSm}',
|
|
8869
8927
|
minHeightLg: '{semantic.size.controlLg}',
|
|
8870
8928
|
loadingDuration: '{semantic.motion.buttonLoading}',
|
|
@@ -9609,6 +9667,12 @@ const Arvisfy = {
|
|
|
9609
9667
|
optionSelectedBackground: '{semantic.color.surfaceMuted}',
|
|
9610
9668
|
optionSelectedColor: '{semantic.color.primary}',
|
|
9611
9669
|
optionSelectedWeight: '{semantic.fontWeight.semibold}',
|
|
9670
|
+
dotSize: '{semantic.size.timelineDot}',
|
|
9671
|
+
dotNeutral: '{semantic.status.neutralText}',
|
|
9672
|
+
dotPrimary: '{semantic.color.primary}',
|
|
9673
|
+
dotSuccess: '{semantic.status.success}',
|
|
9674
|
+
dotWarning: '{semantic.status.warning}',
|
|
9675
|
+
dotDanger: '{semantic.status.danger}',
|
|
9612
9676
|
emptyPadding: '{semantic.space.md}',
|
|
9613
9677
|
emptyColor: '{semantic.color.textMuted}',
|
|
9614
9678
|
emptySize: '{semantic.text.sm}',
|