@ng-solid/design-system 22.4.2 → 22.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -869,7 +869,7 @@ class NsChipComponent {
|
|
|
869
869
|
×
|
|
870
870
|
</button>
|
|
871
871
|
}
|
|
872
|
-
`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;align-items:center;
|
|
872
|
+
`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;align-items:center;white-space:nowrap;gap:var(--ns-component-chip-gap);min-block-size:var(--ns-component-chip-min-height);padding-inline:var(--ns-component-chip-padding-inline);border-color:var(--ns-component-chip-border-color);border-radius:var(--ns-component-chip-radius);background:var(--ns-component-chip-background);color:var(--ns-component-chip-color);font-size:var(--ns-component-chip-font-size);transition:background var(--ns-component-chip-transition-duration),color var(--ns-component-chip-transition-duration),border-color var(--ns-component-chip-transition-duration)}.ns-chip__dismiss{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:transparent;color:inherit;--tw-outline-style: none;outline-style:none;inline-size:var(--ns-component-chip-dismiss-size);block-size:var(--ns-component-chip-dismiss-size);transition:background var(--ns-component-chip-transition-duration)}.ns-chip__dismiss:hover:not(:disabled){background:var(--ns-component-chip-dismiss-background-hover)}.ns-chip__dismiss:focus-visible{box-shadow:var(--ns-component-chip-focus-shadow)}:host(.ns-chip--disabled){opacity:60%}:host(.ns-chip--solid){background:var(--ns-component-chip-solid-background);color:var(--ns-component-chip-solid-color)}:host(.ns-chip--soft){background:var(--ns-component-chip-background)}:host(.ns-chip--outline){border-style:var(--tw-border-style);border-width:1px;background:transparent;color:var(--ns-component-chip-outline-color)}:host(.ns-chip--outline.ns-chip--neutral){color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--soft.ns-chip--neutral){background:var(--ns-component-chip-soft-neutral-background);color:var(--ns-component-chip-soft-neutral-color)}:host(.ns-chip--primary){background:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-color)}:host(.ns-chip--soft.ns-chip--primary){background:var(--ns-component-chip-soft-primary-background);color:var(--ns-component-chip-soft-primary-color)}:host(.ns-chip--success){background:var(--ns-component-chip-success-background);color:var(--ns-component-chip-success-color)}:host(.ns-chip--soft.ns-chip--success){background:var(--ns-component-chip-soft-success-background);color:var(--ns-component-chip-soft-success-color)}:host(.ns-chip--warning){background:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-color)}:host(.ns-chip--soft.ns-chip--warning){background:var(--ns-component-chip-soft-warning-background);color:var(--ns-component-chip-soft-warning-color)}:host(.ns-chip--danger){background:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-color)}:host(.ns-chip--soft.ns-chip--danger){background:var(--ns-component-chip-soft-danger-background);color:var(--ns-component-chip-soft-danger-color)}:host(.ns-chip--info){background:var(--ns-component-chip-soft-info-background);color:var(--ns-component-chip-soft-info-color)}:host(.ns-chip--selected){background:var(--ns-component-chip-soft-selected-background);color:var(--ns-component-chip-soft-selected-color)}:host(.ns-chip--tint){border-style:var(--tw-border-style);border-width:1px;background:transparent}:host(.ns-chip--tint.ns-chip--primary){border-color:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-background)}:host(.ns-chip--tint.ns-chip--success){background:var(--ns-component-chip-tint-success-background);border-color:var(--ns-component-chip-tint-success-color);color:var(--ns-component-chip-tint-success-color)}:host(.ns-chip--tint.ns-chip--warning){border-color:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-background)}:host(.ns-chip--tint.ns-chip--danger){border-color:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-background)}:host(.ns-chip--tint.ns-chip--neutral){border-color:var(--ns-component-chip-border-color);color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--pill){min-block-size:auto;font-size:var(--ns-component-chip-pill-font-size);font-weight:var(--ns-component-chip-pill-font-weight);padding-block:var(--ns-component-chip-pill-padding-block);padding-inline:var(--ns-component-chip-pill-padding-inline)}:host(.ns-chip--choice){min-block-size:var(--ns-component-chip-choice-min-height);padding-inline:var(--ns-component-chip-choice-padding-inline);font-size:var(--ns-component-chip-choice-font-size);font-weight:var(--ns-component-chip-choice-font-weight);cursor:pointer}:host(.ns-chip--choice.ns-chip--disabled){cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.ns-chip__dismiss{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
873
873
|
}
|
|
874
874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsChipComponent, decorators: [{
|
|
875
875
|
type: Component,
|
|
@@ -903,7 +903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
903
903
|
'[class.ns-chip--md]': "size() === 'md'",
|
|
904
904
|
'[class.ns-chip--pill]': "size() === 'pill'",
|
|
905
905
|
'[class.ns-chip--choice]': "size() === 'choice'"
|
|
906
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:inline-flex;align-items:center;
|
|
906
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host{display:inline-flex;align-items:center;white-space:nowrap;gap:var(--ns-component-chip-gap);min-block-size:var(--ns-component-chip-min-height);padding-inline:var(--ns-component-chip-padding-inline);border-color:var(--ns-component-chip-border-color);border-radius:var(--ns-component-chip-radius);background:var(--ns-component-chip-background);color:var(--ns-component-chip-color);font-size:var(--ns-component-chip-font-size);transition:background var(--ns-component-chip-transition-duration),color var(--ns-component-chip-transition-duration),border-color var(--ns-component-chip-transition-duration)}.ns-chip__dismiss{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:transparent;color:inherit;--tw-outline-style: none;outline-style:none;inline-size:var(--ns-component-chip-dismiss-size);block-size:var(--ns-component-chip-dismiss-size);transition:background var(--ns-component-chip-transition-duration)}.ns-chip__dismiss:hover:not(:disabled){background:var(--ns-component-chip-dismiss-background-hover)}.ns-chip__dismiss:focus-visible{box-shadow:var(--ns-component-chip-focus-shadow)}:host(.ns-chip--disabled){opacity:60%}:host(.ns-chip--solid){background:var(--ns-component-chip-solid-background);color:var(--ns-component-chip-solid-color)}:host(.ns-chip--soft){background:var(--ns-component-chip-background)}:host(.ns-chip--outline){border-style:var(--tw-border-style);border-width:1px;background:transparent;color:var(--ns-component-chip-outline-color)}:host(.ns-chip--outline.ns-chip--neutral){color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--soft.ns-chip--neutral){background:var(--ns-component-chip-soft-neutral-background);color:var(--ns-component-chip-soft-neutral-color)}:host(.ns-chip--primary){background:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-color)}:host(.ns-chip--soft.ns-chip--primary){background:var(--ns-component-chip-soft-primary-background);color:var(--ns-component-chip-soft-primary-color)}:host(.ns-chip--success){background:var(--ns-component-chip-success-background);color:var(--ns-component-chip-success-color)}:host(.ns-chip--soft.ns-chip--success){background:var(--ns-component-chip-soft-success-background);color:var(--ns-component-chip-soft-success-color)}:host(.ns-chip--warning){background:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-color)}:host(.ns-chip--soft.ns-chip--warning){background:var(--ns-component-chip-soft-warning-background);color:var(--ns-component-chip-soft-warning-color)}:host(.ns-chip--danger){background:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-color)}:host(.ns-chip--soft.ns-chip--danger){background:var(--ns-component-chip-soft-danger-background);color:var(--ns-component-chip-soft-danger-color)}:host(.ns-chip--info){background:var(--ns-component-chip-soft-info-background);color:var(--ns-component-chip-soft-info-color)}:host(.ns-chip--selected){background:var(--ns-component-chip-soft-selected-background);color:var(--ns-component-chip-soft-selected-color)}:host(.ns-chip--tint){border-style:var(--tw-border-style);border-width:1px;background:transparent}:host(.ns-chip--tint.ns-chip--primary){border-color:var(--ns-component-chip-primary-background);color:var(--ns-component-chip-primary-background)}:host(.ns-chip--tint.ns-chip--success){background:var(--ns-component-chip-tint-success-background);border-color:var(--ns-component-chip-tint-success-color);color:var(--ns-component-chip-tint-success-color)}:host(.ns-chip--tint.ns-chip--warning){border-color:var(--ns-component-chip-warning-background);color:var(--ns-component-chip-warning-background)}:host(.ns-chip--tint.ns-chip--danger){border-color:var(--ns-component-chip-danger-background);color:var(--ns-component-chip-danger-background)}:host(.ns-chip--tint.ns-chip--neutral){border-color:var(--ns-component-chip-border-color);color:var(--ns-component-chip-neutral-color)}:host(.ns-chip--pill){min-block-size:auto;font-size:var(--ns-component-chip-pill-font-size);font-weight:var(--ns-component-chip-pill-font-weight);padding-block:var(--ns-component-chip-pill-padding-block);padding-inline:var(--ns-component-chip-pill-padding-inline)}:host(.ns-chip--choice){min-block-size:var(--ns-component-chip-choice-min-height);padding-inline:var(--ns-component-chip-choice-padding-inline);font-size:var(--ns-component-chip-choice-font-size);font-weight:var(--ns-component-chip-choice-font-weight);cursor:pointer}:host(.ns-chip--choice.ns-chip--disabled){cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.ns-chip__dismiss{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
907
907
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
908
908
|
|
|
909
909
|
class NsCollectionController {
|
|
@@ -4170,6 +4170,340 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
4170
4170
|
}, template: "@if (label()) {\n <div class=\"ns-password__label-row\">\n <label class=\"ns-password__label\" [for]=\"controlId()\">{{ label() }}</label>\n @if (forgotLink()) {\n <a class=\"ns-password__forgot-link\" [routerLink]=\"forgotLink()\">{{\n forgotLinkLabel()\n }}</a>\n }\n </div>\n}\n\n<div class=\"ns-password__group\">\n <input\n class=\"ns-password__control\"\n [id]=\"controlId()\"\n [type]=\"show ? 'text' : 'password'\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled()\"\n />\n\n <button\n type=\"button\"\n class=\"ns-password__append\"\n [attr.aria-label]=\"show ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"show\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <ns-icon class=\"ns-password__toggle\" [name]=\"show ? 'eye-off' : 'eye'\" />\n </button>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-password__label-row{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:flex;align-items:center;justify-content:space-between;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5)}.ns-password__label{color:var(--ns-component-password-label-color);font-size:var(--ns-component-password-label-size);font-weight:var(--ns-component-password-label-weight)}.ns-password__forgot-link{--tw-outline-style: none;outline-style:none;color:var(--ns-component-password-forgot-link-color);font-size:var(--ns-component-password-label-size);transition:opacity var(--ns-component-password-forgot-link-transition-duration)}.ns-password__forgot-link:hover{opacity:var(--ns-component-password-forgot-link-hover-opacity)}.ns-password__group{position:relative;display:flex;width:100%;align-items:stretch;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-password__control{min-width:0px;flex:1;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-password-min-height);padding:var(--ns-component-password-padding-block) var(--ns-component-password-padding-inline);padding-inline-end:var(--ns-component-password-append-gutter);border-color:var(--ns-component-password-border-color);border-radius:var(--ns-component-password-radius);background:var(--ns-component-password-background);color:var(--ns-component-password-color);font:inherit}.ns-password__group:hover:not(:has(.ns-password__control:disabled)) .ns-password__control{border-color:var(--ns-component-password-border-hover-color)}.ns-password__group:focus-within{border-radius:var(--ns-component-password-radius);box-shadow:var(--ns-component-password-focus-shadow)}.ns-password__group:focus-within .ns-password__control{border-color:var(--ns-component-password-border-focus-color)}.ns-password__append{position:absolute;inset-inline-end:calc(var(--ns-primitive-space-1) * 1.5);top:50%;display:flex;width:calc(var(--ns-primitive-space-1) * 7);height:calc(var(--ns-primitive-space-1) * 7);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-password-radius);color:var(--ns-component-password-color)}.ns-password__append:hover{background:var(--ns-component-password-append-background-hover)}.ns-password__append:focus-visible{box-shadow:var(--ns-component-password-focus-shadow)}.ns-password__control:disabled+.ns-password__append{cursor:not-allowed;color:var(--ns-component-password-append-disabled-color)}.ns-password__toggle ::ng-deep svg{width:var(--ns-component-password-toggle-icon-size);height:var(--ns-component-password-toggle-icon-size)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4171
4171
|
}], ctorParameters: () => [], propDecorators: { forgotLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotLink", required: false }] }], forgotLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotLinkLabel", required: false }] }] } });
|
|
4172
4172
|
|
|
4173
|
+
/** Delay before press-and-hold starts repeating, and the repeat cadence. */
|
|
4174
|
+
const REPEAT_DELAY_MS = 400;
|
|
4175
|
+
const REPEAT_INTERVAL_MS = 60;
|
|
4176
|
+
/** Fraction digits used to keep floating-point drift out of the model. */
|
|
4177
|
+
const MAX_DECIMALS = 12;
|
|
4178
|
+
const optionalNumber = (value) => {
|
|
4179
|
+
if (value === null || value === undefined || value === '') {
|
|
4180
|
+
return undefined;
|
|
4181
|
+
}
|
|
4182
|
+
const parsed = numberAttribute(value, NaN);
|
|
4183
|
+
return Number.isNaN(parsed) ? undefined : parsed;
|
|
4184
|
+
};
|
|
4185
|
+
const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
4186
|
+
const positiveStep = (value) => {
|
|
4187
|
+
const parsed = numberAttribute(value, 1);
|
|
4188
|
+
return parsed > 0 ? parsed : 1;
|
|
4189
|
+
};
|
|
4190
|
+
/** Number of fraction digits needed to write `value` (handles `1e-7`). */
|
|
4191
|
+
const decimalsOf = (value) => {
|
|
4192
|
+
if (!Number.isFinite(value)) {
|
|
4193
|
+
return 0;
|
|
4194
|
+
}
|
|
4195
|
+
const [mantissa, exponent] = String(value).split('e');
|
|
4196
|
+
const fraction = mantissa.split('.')[1]?.length ?? 0;
|
|
4197
|
+
return Math.max(0, fraction - Number(exponent ?? 0));
|
|
4198
|
+
};
|
|
4199
|
+
const roundTo = (value, decimals) => Number(value.toFixed(Math.min(decimals, MAX_DECIMALS)));
|
|
4200
|
+
/**
|
|
4201
|
+
* Numeric stepper `[–] | input | [+]` (WAI-ARIA spinbutton).
|
|
4202
|
+
*
|
|
4203
|
+
* The model is `number | null`. While focused the field shows an editable raw
|
|
4204
|
+
* number; on blur / Enter / stepping the text is parsed with the active
|
|
4205
|
+
* `locale`, clamped to `min`/`max` and snapped to `step` (counted from `min`
|
|
4206
|
+
* when set). When blurred it shows `formatOptions` applied through
|
|
4207
|
+
* `Intl.NumberFormat`.
|
|
4208
|
+
*
|
|
4209
|
+
* `formatOptions.style === 'percent'` follows the `Intl` convention: the model
|
|
4210
|
+
* is a fraction (`0.5` shows "50 %"), so `min`/`max`/`step` are fractions too.
|
|
4211
|
+
*/
|
|
4212
|
+
class NsQuantityComponent extends NsValueAccessor {
|
|
4213
|
+
destroyRef = inject(DestroyRef);
|
|
4214
|
+
fieldContext = inject(NsFieldContext, {
|
|
4215
|
+
optional: true,
|
|
4216
|
+
skipSelf: true
|
|
4217
|
+
});
|
|
4218
|
+
min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
4219
|
+
max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
4220
|
+
step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: positiveStep });
|
|
4221
|
+
/** `Intl.NumberFormat` options used for the blurred display and `aria-valuetext`. */
|
|
4222
|
+
formatOptions = input({}, ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
|
|
4223
|
+
locale = input(inject(LOCALE_ID), ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
4224
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4225
|
+
wheelDisabled = input(false, { ...(ngDevMode ? { debugName: "wheelDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4226
|
+
incrementAriaLabel = input('Aumentar', ...(ngDevMode ? [{ debugName: "incrementAriaLabel" }] : /* istanbul ignore next */ []));
|
|
4227
|
+
decrementAriaLabel = input('Disminuir', ...(ngDevMode ? [{ debugName: "decrementAriaLabel" }] : /* istanbul ignore next */ []));
|
|
4228
|
+
focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
4229
|
+
/** Text typed by the user and not committed yet; `null` when pristine. */
|
|
4230
|
+
draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
4231
|
+
formatter = computed(() => {
|
|
4232
|
+
try {
|
|
4233
|
+
return new Intl.NumberFormat(this.locale(), this.formatOptions());
|
|
4234
|
+
}
|
|
4235
|
+
catch {
|
|
4236
|
+
return new Intl.NumberFormat(undefined, this.formatOptions());
|
|
4237
|
+
}
|
|
4238
|
+
}, ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
|
|
4239
|
+
isPercent = computed(() => this.formatOptions().style === 'percent', ...(ngDevMode ? [{ debugName: "isPercent" }] : /* istanbul ignore next */ []));
|
|
4240
|
+
numericValue = computed(() => {
|
|
4241
|
+
const value = this.value();
|
|
4242
|
+
return typeof value === 'number' && Number.isFinite(value) ? value : null;
|
|
4243
|
+
}, ...(ngDevMode ? [{ debugName: "numericValue" }] : /* istanbul ignore next */ []));
|
|
4244
|
+
displayText = computed(() => {
|
|
4245
|
+
const value = this.numericValue();
|
|
4246
|
+
if (this.focused()) {
|
|
4247
|
+
return this.draft() ?? (value === null ? '' : this.toRawText(value));
|
|
4248
|
+
}
|
|
4249
|
+
return value === null ? '' : this.formatter().format(value);
|
|
4250
|
+
}, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
4251
|
+
valueNow = computed(() => this.numericValue(), ...(ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []));
|
|
4252
|
+
valueText = computed(() => {
|
|
4253
|
+
const value = this.numericValue();
|
|
4254
|
+
return value === null ? null : this.formatter().format(value);
|
|
4255
|
+
}, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
|
|
4256
|
+
decrementDisabled = computed(() => {
|
|
4257
|
+
const value = this.numericValue();
|
|
4258
|
+
const min = this.min();
|
|
4259
|
+
return (this.disabled() ||
|
|
4260
|
+
this.readonly() ||
|
|
4261
|
+
(value !== null && min !== undefined && value <= min));
|
|
4262
|
+
}, ...(ngDevMode ? [{ debugName: "decrementDisabled" }] : /* istanbul ignore next */ []));
|
|
4263
|
+
incrementDisabled = computed(() => {
|
|
4264
|
+
const value = this.numericValue();
|
|
4265
|
+
const max = this.max();
|
|
4266
|
+
return (this.disabled() ||
|
|
4267
|
+
this.readonly() ||
|
|
4268
|
+
(value !== null && max !== undefined && value >= max));
|
|
4269
|
+
}, ...(ngDevMode ? [{ debugName: "incrementDisabled" }] : /* istanbul ignore next */ []));
|
|
4270
|
+
/** Like the base `describedBy`, minus the description hidden by an error. */
|
|
4271
|
+
quantityDescribedBy = computed(() => {
|
|
4272
|
+
const showsError = this.invalid() && !!this.errorMessage();
|
|
4273
|
+
const ids = [
|
|
4274
|
+
this.ariaDescribedBy(),
|
|
4275
|
+
this.fieldContext?.getDescribedBy(),
|
|
4276
|
+
this.description() && !showsError ? this.descriptionId : undefined,
|
|
4277
|
+
showsError ? this.errorId : undefined
|
|
4278
|
+
].filter((id) => Boolean(id));
|
|
4279
|
+
return ids.length ? ids.join(' ') : undefined;
|
|
4280
|
+
}, ...(ngDevMode ? [{ debugName: "quantityDescribedBy" }] : /* istanbul ignore next */ []));
|
|
4281
|
+
repeatTimer;
|
|
4282
|
+
repeatInterval;
|
|
4283
|
+
constructor() {
|
|
4284
|
+
super();
|
|
4285
|
+
this.destroyRef.onDestroy(() => this.stopRepeat());
|
|
4286
|
+
}
|
|
4287
|
+
writeValue(value) {
|
|
4288
|
+
super.writeValue(value);
|
|
4289
|
+
this.draft.set(null);
|
|
4290
|
+
}
|
|
4291
|
+
onFocus() {
|
|
4292
|
+
this.focused.set(true);
|
|
4293
|
+
}
|
|
4294
|
+
onBlur() {
|
|
4295
|
+
this.commit();
|
|
4296
|
+
this.focused.set(false);
|
|
4297
|
+
this.onTouched();
|
|
4298
|
+
}
|
|
4299
|
+
onInput(event) {
|
|
4300
|
+
this.draft.set(event.target.value);
|
|
4301
|
+
}
|
|
4302
|
+
onKeydown(event) {
|
|
4303
|
+
if (event.key === 'Enter') {
|
|
4304
|
+
this.commit();
|
|
4305
|
+
return;
|
|
4306
|
+
}
|
|
4307
|
+
if (this.disabled() || this.readonly()) {
|
|
4308
|
+
return;
|
|
4309
|
+
}
|
|
4310
|
+
const handled = this.handleKey(event.key);
|
|
4311
|
+
if (handled) {
|
|
4312
|
+
event.preventDefault();
|
|
4313
|
+
}
|
|
4314
|
+
}
|
|
4315
|
+
onWheel(event) {
|
|
4316
|
+
if (this.wheelDisabled() ||
|
|
4317
|
+
this.disabled() ||
|
|
4318
|
+
this.readonly() ||
|
|
4319
|
+
!this.focused() ||
|
|
4320
|
+
!event.deltaY) {
|
|
4321
|
+
return;
|
|
4322
|
+
}
|
|
4323
|
+
event.preventDefault();
|
|
4324
|
+
this.stepBy(event.deltaY < 0 ? 1 : -1);
|
|
4325
|
+
}
|
|
4326
|
+
onButtonPointerDown(direction, event) {
|
|
4327
|
+
if (event.button > 0 || this.isButtonDisabled(direction)) {
|
|
4328
|
+
return;
|
|
4329
|
+
}
|
|
4330
|
+
this.stopRepeat();
|
|
4331
|
+
this.stepBy(direction);
|
|
4332
|
+
this.repeatTimer = setTimeout(() => {
|
|
4333
|
+
this.repeatInterval = setInterval(() => {
|
|
4334
|
+
if (this.isButtonDisabled(direction)) {
|
|
4335
|
+
this.stopRepeat();
|
|
4336
|
+
return;
|
|
4337
|
+
}
|
|
4338
|
+
this.stepBy(direction);
|
|
4339
|
+
}, REPEAT_INTERVAL_MS);
|
|
4340
|
+
}, REPEAT_DELAY_MS);
|
|
4341
|
+
}
|
|
4342
|
+
/**
|
|
4343
|
+
* Pointer presses already stepped on `pointerdown`; a click with
|
|
4344
|
+
* `detail === 0` comes from the keyboard or assistive technology.
|
|
4345
|
+
*/
|
|
4346
|
+
onButtonClick(direction, event) {
|
|
4347
|
+
if (event.detail === 0 && !this.isButtonDisabled(direction)) {
|
|
4348
|
+
this.stepBy(direction);
|
|
4349
|
+
}
|
|
4350
|
+
}
|
|
4351
|
+
stopRepeat() {
|
|
4352
|
+
clearTimeout(this.repeatTimer);
|
|
4353
|
+
clearInterval(this.repeatInterval);
|
|
4354
|
+
this.repeatTimer = undefined;
|
|
4355
|
+
this.repeatInterval = undefined;
|
|
4356
|
+
}
|
|
4357
|
+
isButtonDisabled(direction) {
|
|
4358
|
+
return direction > 0 ? this.incrementDisabled() : this.decrementDisabled();
|
|
4359
|
+
}
|
|
4360
|
+
handleKey(key) {
|
|
4361
|
+
switch (key) {
|
|
4362
|
+
case 'ArrowUp':
|
|
4363
|
+
this.stepBy(1);
|
|
4364
|
+
return true;
|
|
4365
|
+
case 'ArrowDown':
|
|
4366
|
+
this.stepBy(-1);
|
|
4367
|
+
return true;
|
|
4368
|
+
case 'PageUp':
|
|
4369
|
+
this.stepBy(1, 10);
|
|
4370
|
+
return true;
|
|
4371
|
+
case 'PageDown':
|
|
4372
|
+
this.stepBy(-1, 10);
|
|
4373
|
+
return true;
|
|
4374
|
+
case 'Home':
|
|
4375
|
+
return this.jumpTo(this.min());
|
|
4376
|
+
case 'End':
|
|
4377
|
+
return this.jumpTo(this.max());
|
|
4378
|
+
default:
|
|
4379
|
+
return false;
|
|
4380
|
+
}
|
|
4381
|
+
}
|
|
4382
|
+
jumpTo(limit) {
|
|
4383
|
+
if (limit === undefined) {
|
|
4384
|
+
return false;
|
|
4385
|
+
}
|
|
4386
|
+
this.draft.set(null);
|
|
4387
|
+
this.setValue(this.normalize(limit));
|
|
4388
|
+
return true;
|
|
4389
|
+
}
|
|
4390
|
+
/** Moves `multiplier` steps along the grid that starts at `min ?? 0`. */
|
|
4391
|
+
stepBy(direction, multiplier = 1) {
|
|
4392
|
+
if (this.disabled() || this.readonly()) {
|
|
4393
|
+
return;
|
|
4394
|
+
}
|
|
4395
|
+
this.commit();
|
|
4396
|
+
const current = this.numericValue();
|
|
4397
|
+
const base = this.min() ?? 0;
|
|
4398
|
+
if (current === null) {
|
|
4399
|
+
this.setValue(this.normalize(base));
|
|
4400
|
+
return;
|
|
4401
|
+
}
|
|
4402
|
+
const steps = Math.round(((current - base) / this.step()) * 1e9) / 1e9;
|
|
4403
|
+
const target = Number.isInteger(steps)
|
|
4404
|
+
? steps + direction * multiplier
|
|
4405
|
+
: direction > 0
|
|
4406
|
+
? Math.ceil(steps) + multiplier - 1
|
|
4407
|
+
: Math.floor(steps) - multiplier + 1;
|
|
4408
|
+
this.setValue(this.normalize(base + target * this.step()));
|
|
4409
|
+
}
|
|
4410
|
+
/** Parses the pending text (if any) and writes the normalized result. */
|
|
4411
|
+
commit() {
|
|
4412
|
+
const text = this.draft();
|
|
4413
|
+
if (text === null) {
|
|
4414
|
+
return;
|
|
4415
|
+
}
|
|
4416
|
+
this.draft.set(null);
|
|
4417
|
+
if (text.trim() === '') {
|
|
4418
|
+
this.setValue(null);
|
|
4419
|
+
return;
|
|
4420
|
+
}
|
|
4421
|
+
const parsed = this.parse(text);
|
|
4422
|
+
if (parsed !== null) {
|
|
4423
|
+
this.setValue(this.normalize(parsed));
|
|
4424
|
+
}
|
|
4425
|
+
}
|
|
4426
|
+
/** Clamps to `min`/`max` and snaps to the nearest step without float drift. */
|
|
4427
|
+
normalize(value) {
|
|
4428
|
+
const min = this.min();
|
|
4429
|
+
const max = this.max();
|
|
4430
|
+
const step = this.step();
|
|
4431
|
+
const base = min ?? 0;
|
|
4432
|
+
const decimals = Math.max(decimalsOf(step), decimalsOf(base));
|
|
4433
|
+
const clamp = (n) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
|
|
4434
|
+
let snapped = roundTo(base + Math.round((clamp(value) - base) / step) * step, decimals);
|
|
4435
|
+
if (max !== undefined && snapped > max) {
|
|
4436
|
+
snapped = roundTo(snapped - step, decimals);
|
|
4437
|
+
}
|
|
4438
|
+
if (min !== undefined && snapped < min) {
|
|
4439
|
+
snapped = roundTo(snapped + step, decimals);
|
|
4440
|
+
}
|
|
4441
|
+
return clamp(snapped);
|
|
4442
|
+
}
|
|
4443
|
+
/** Editable text: locale decimal separator, no grouping, no symbols. */
|
|
4444
|
+
toRawText(value) {
|
|
4445
|
+
const magnitude = this.isPercent()
|
|
4446
|
+
? roundTo(value * 100, MAX_DECIMALS)
|
|
4447
|
+
: value;
|
|
4448
|
+
return new Intl.NumberFormat(this.formatter().resolvedOptions().locale, {
|
|
4449
|
+
useGrouping: false,
|
|
4450
|
+
maximumFractionDigits: 20
|
|
4451
|
+
}).format(magnitude);
|
|
4452
|
+
}
|
|
4453
|
+
/** Locale text → model number (`null` when it is not a number). */
|
|
4454
|
+
parse(text) {
|
|
4455
|
+
const parts = this.formatter().formatToParts(12345.6);
|
|
4456
|
+
const group = parts.find((part) => part.type === 'group')?.value;
|
|
4457
|
+
const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.';
|
|
4458
|
+
let normalized = text.replace(/\s/g, '').replace('−', '-');
|
|
4459
|
+
if (group && group !== decimal) {
|
|
4460
|
+
const groupIsAmbiguous = !normalized.includes(decimal) &&
|
|
4461
|
+
normalized.split(group).length === 2 &&
|
|
4462
|
+
!new RegExp(`${escapeRegExp(group)}\\d{3}(?!\\d)`).test(normalized);
|
|
4463
|
+
normalized = groupIsAmbiguous
|
|
4464
|
+
? normalized.replace(group, decimal)
|
|
4465
|
+
: normalized.split(group).join('');
|
|
4466
|
+
}
|
|
4467
|
+
normalized = normalized
|
|
4468
|
+
.replace(decimal, '.')
|
|
4469
|
+
.replace(/[^0-9.-]/g, '')
|
|
4470
|
+
.replace(/(?!^)-/g, '');
|
|
4471
|
+
const value = Number(normalized);
|
|
4472
|
+
if (normalized === '' || normalized === '-' || !Number.isFinite(value)) {
|
|
4473
|
+
return null;
|
|
4474
|
+
}
|
|
4475
|
+
return this.isPercent() ? roundTo(value / 100, MAX_DECIMALS) : value;
|
|
4476
|
+
}
|
|
4477
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsQuantityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4478
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsQuantityComponent, isStandalone: true, selector: "ns-quantity", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, wheelDisabled: { classPropertyName: "wheelDisabled", publicName: "wheelDisabled", isSignal: true, isRequired: false, transformFunction: null }, incrementAriaLabel: { classPropertyName: "incrementAriaLabel", publicName: "incrementAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementAriaLabel: { classPropertyName: "decrementAriaLabel", publicName: "decrementAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-quantity": "true", "class.ns-quantity--outline": "variant() !== 'soft'", "class.ns-quantity--soft": "variant() === 'soft'", "class.ns-quantity--sm": "size() === 'sm'", "class.ns-quantity--lg": "size() === 'lg'", "class.ns-quantity--disabled": "disabled()", "class.ns-quantity--invalid": "invalid()", "class.ns-quantity--readonly": "readonly()", "class.ns-quantity--full-width": "fullWidth()" } }, providers: [
|
|
4479
|
+
{
|
|
4480
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4481
|
+
useExisting: forwardRef(() => NsQuantityComponent),
|
|
4482
|
+
multi: true
|
|
4483
|
+
}
|
|
4484
|
+
], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"ns-quantity__label\" [for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span class=\"ns-quantity__required\" aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<div class=\"ns-quantity__group\">\n <button\n class=\"ns-quantity__button ns-quantity__button--decrement\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"decrementAriaLabel()\"\n [attr.aria-controls]=\"controlId()\"\n [disabled]=\"decrementDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (pointerdown)=\"onButtonPointerDown(-1, $event)\"\n (pointerup)=\"stopRepeat()\"\n (pointerleave)=\"stopRepeat()\"\n (pointercancel)=\"stopRepeat()\"\n (click)=\"onButtonClick(-1, $event)\"\n >\n <ns-icon name=\"minus\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <input\n class=\"ns-quantity__input\"\n type=\"text\"\n role=\"spinbutton\"\n inputmode=\"decimal\"\n autocomplete=\"off\"\n [id]=\"controlId()\"\n [attr.name]=\"name() ?? null\"\n [attr.placeholder]=\"placeholder() || null\"\n [value]=\"displayText()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-valuenow]=\"valueNow()\"\n [attr.aria-valuemin]=\"min() ?? null\"\n [attr.aria-valuemax]=\"max() ?? null\"\n [attr.aria-valuetext]=\"valueText()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"quantityDescribedBy() ?? null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (wheel)=\"onWheel($event)\"\n />\n <button\n class=\"ns-quantity__button ns-quantity__button--increment\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"incrementAriaLabel()\"\n [attr.aria-controls]=\"controlId()\"\n [disabled]=\"incrementDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (pointerdown)=\"onButtonPointerDown(1, $event)\"\n (pointerup)=\"stopRepeat()\"\n (pointerleave)=\"stopRepeat()\"\n (pointercancel)=\"stopRepeat()\"\n (click)=\"onButtonClick(1, $event)\"\n >\n <ns-icon name=\"plus\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n</div>\n@if (description() && !(invalid() && errorMessage())) {\n <p class=\"ns-quantity__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-quantity__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:inline-block;max-width:100%;vertical-align:top}:host(.ns-quantity--full-width){display:block;width:100%}.ns-quantity__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-quantity-label-color);font-size:var(--ns-component-quantity-label-size);font-weight:var(--ns-component-quantity-label-weight)}.ns-quantity__required{color:var(--ns-component-quantity-required-color)}.ns-quantity__group{display:flex;align-items:stretch;overflow:hidden;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);box-sizing:border-box;min-height:var(--ns-component-quantity-min-height);border-width:var(--ns-component-quantity-border-width);border-radius:var(--ns-component-quantity-radius);border-color:var(--ns-component-quantity-border-color);background:var(--ns-component-quantity-background);box-shadow:var(--ns-component-quantity-shadow);color:var(--ns-component-quantity-color);transition-duration:var(--ns-component-quantity-transition-duration)}.ns-quantity__button{display:inline-flex;flex-shrink:0;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-quantity-min-height);color:var(--ns-component-quantity-icon-color);transition-duration:var(--ns-component-quantity-transition-duration)}.ns-quantity__button:hover:not(:disabled){background:var(--ns-component-quantity-button-hover-background)}.ns-quantity__button:active:not(:disabled){background:var(--ns-component-quantity-button-active-background)}.ns-quantity__button:disabled{cursor:not-allowed;color:var(--ns-component-quantity-button-disabled-color)}.ns-quantity__button ::ng-deep svg{width:var(--ns-component-quantity-icon-size);height:var(--ns-component-quantity-icon-size)}.ns-quantity__input{display:block;width:calc(var(--ns-primitive-space-1) * 20);min-width:0px;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;text-align:center;--tw-outline-style: none;outline-style:none;box-sizing:border-box;padding-block:0;padding-inline:var(--ns-component-quantity-padding-inline);border-style:solid;border-color:var(--ns-component-quantity-divider-color);border-inline-width:var(--ns-component-quantity-border-width);color:inherit;font:inherit;font-variant-numeric:tabular-nums}:host(.ns-quantity--full-width) .ns-quantity__input{width:auto;flex:1}.ns-quantity__input::placeholder{color:var(--ns-component-quantity-placeholder)}.ns-quantity__input:disabled{cursor:not-allowed}.ns-quantity__input[readonly]{cursor:default}:host(.ns-quantity--soft) .ns-quantity__group{border-color:transparent;background:var(--ns-component-quantity-soft-background);box-shadow:none}:host(.ns-quantity--soft) .ns-quantity__button:hover:not(:disabled){background:var(--ns-component-quantity-button-soft-hover-background)}:host(.ns-quantity--sm) .ns-quantity__group{min-height:var(--ns-component-quantity-min-height-sm)}:host(.ns-quantity--sm) .ns-quantity__button{width:var(--ns-component-quantity-min-height-sm)}:host(.ns-quantity--lg) .ns-quantity__group{min-height:var(--ns-component-quantity-min-height-lg)}:host(.ns-quantity--lg) .ns-quantity__button{width:var(--ns-component-quantity-min-height-lg)}:host(:not(.ns-quantity--disabled,.ns-quantity--soft)) .ns-quantity__group:hover{border-color:var(--ns-component-quantity-border-hover-color)}:host(:not(.ns-quantity--disabled)) .ns-quantity__group:focus-within{border-color:var(--ns-component-quantity-border-focus-color);box-shadow:var(--ns-component-quantity-focus-shadow)}:host(.ns-quantity--invalid) .ns-quantity__group,:host(.ns-quantity--invalid) .ns-quantity__group:hover,:host(.ns-quantity--invalid) .ns-quantity__group:focus-within{border-color:var(--ns-component-quantity-invalid-border-color)}:host(.ns-quantity--disabled) .ns-quantity__group{cursor:not-allowed;opacity:50%;background:var(--ns-component-quantity-disabled-background);color:var(--ns-component-quantity-disabled-color);box-shadow:none}:host(.ns-quantity--readonly) .ns-quantity__group{cursor:default}.ns-quantity__description,.ns-quantity__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-quantity__description{color:var(--ns-component-quantity-description-color)}.ns-quantity__error{color:var(--ns-component-quantity-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4485
|
+
}
|
|
4486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsQuantityComponent, decorators: [{
|
|
4487
|
+
type: Component,
|
|
4488
|
+
args: [{ selector: 'ns-quantity', standalone: true, providers: [
|
|
4489
|
+
{
|
|
4490
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4491
|
+
useExisting: forwardRef(() => NsQuantityComponent),
|
|
4492
|
+
multi: true
|
|
4493
|
+
}
|
|
4494
|
+
], imports: [NsIconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4495
|
+
'[class.ns-quantity]': 'true',
|
|
4496
|
+
'[class.ns-quantity--outline]': "variant() !== 'soft'",
|
|
4497
|
+
'[class.ns-quantity--soft]': "variant() === 'soft'",
|
|
4498
|
+
'[class.ns-quantity--sm]': "size() === 'sm'",
|
|
4499
|
+
'[class.ns-quantity--lg]': "size() === 'lg'",
|
|
4500
|
+
'[class.ns-quantity--disabled]': 'disabled()',
|
|
4501
|
+
'[class.ns-quantity--invalid]': 'invalid()',
|
|
4502
|
+
'[class.ns-quantity--readonly]': 'readonly()',
|
|
4503
|
+
'[class.ns-quantity--full-width]': 'fullWidth()'
|
|
4504
|
+
}, template: "@if (label()) {\n <label class=\"ns-quantity__label\" [for]=\"controlId()\"\n >{{ label() }}\n @if (required()) {\n <span class=\"ns-quantity__required\" aria-hidden=\"true\"> *</span>\n }\n </label>\n}\n<div class=\"ns-quantity__group\">\n <button\n class=\"ns-quantity__button ns-quantity__button--decrement\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"decrementAriaLabel()\"\n [attr.aria-controls]=\"controlId()\"\n [disabled]=\"decrementDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (pointerdown)=\"onButtonPointerDown(-1, $event)\"\n (pointerup)=\"stopRepeat()\"\n (pointerleave)=\"stopRepeat()\"\n (pointercancel)=\"stopRepeat()\"\n (click)=\"onButtonClick(-1, $event)\"\n >\n <ns-icon name=\"minus\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <input\n class=\"ns-quantity__input\"\n type=\"text\"\n role=\"spinbutton\"\n inputmode=\"decimal\"\n autocomplete=\"off\"\n [id]=\"controlId()\"\n [attr.name]=\"name() ?? null\"\n [attr.placeholder]=\"placeholder() || null\"\n [value]=\"displayText()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-valuenow]=\"valueNow()\"\n [attr.aria-valuemin]=\"min() ?? null\"\n [attr.aria-valuemax]=\"max() ?? null\"\n [attr.aria-valuetext]=\"valueText()\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"quantityDescribedBy() ?? null\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (wheel)=\"onWheel($event)\"\n />\n <button\n class=\"ns-quantity__button ns-quantity__button--increment\"\n type=\"button\"\n tabindex=\"-1\"\n [attr.aria-label]=\"incrementAriaLabel()\"\n [attr.aria-controls]=\"controlId()\"\n [disabled]=\"incrementDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (pointerdown)=\"onButtonPointerDown(1, $event)\"\n (pointerup)=\"stopRepeat()\"\n (pointerleave)=\"stopRepeat()\"\n (pointercancel)=\"stopRepeat()\"\n (click)=\"onButtonClick(1, $event)\"\n >\n <ns-icon name=\"plus\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n</div>\n@if (description() && !(invalid() && errorMessage())) {\n <p class=\"ns-quantity__description\" [id]=\"descriptionId\">\n {{ description() }}\n </p>\n}\n@if (invalid() && errorMessage()) {\n <p class=\"ns-quantity__error\" [id]=\"errorId\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n}\n", styles: ["@layer properties;:host{display:inline-block;max-width:100%;vertical-align:top}:host(.ns-quantity--full-width){display:block;width:100%}.ns-quantity__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-quantity-label-color);font-size:var(--ns-component-quantity-label-size);font-weight:var(--ns-component-quantity-label-weight)}.ns-quantity__required{color:var(--ns-component-quantity-required-color)}.ns-quantity__group{display:flex;align-items:stretch;overflow:hidden;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);box-sizing:border-box;min-height:var(--ns-component-quantity-min-height);border-width:var(--ns-component-quantity-border-width);border-radius:var(--ns-component-quantity-radius);border-color:var(--ns-component-quantity-border-color);background:var(--ns-component-quantity-background);box-shadow:var(--ns-component-quantity-shadow);color:var(--ns-component-quantity-color);transition-duration:var(--ns-component-quantity-transition-duration)}.ns-quantity__button{display:inline-flex;flex-shrink:0;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-quantity-min-height);color:var(--ns-component-quantity-icon-color);transition-duration:var(--ns-component-quantity-transition-duration)}.ns-quantity__button:hover:not(:disabled){background:var(--ns-component-quantity-button-hover-background)}.ns-quantity__button:active:not(:disabled){background:var(--ns-component-quantity-button-active-background)}.ns-quantity__button:disabled{cursor:not-allowed;color:var(--ns-component-quantity-button-disabled-color)}.ns-quantity__button ::ng-deep svg{width:var(--ns-component-quantity-icon-size);height:var(--ns-component-quantity-icon-size)}.ns-quantity__input{display:block;width:calc(var(--ns-primitive-space-1) * 20);min-width:0px;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;text-align:center;--tw-outline-style: none;outline-style:none;box-sizing:border-box;padding-block:0;padding-inline:var(--ns-component-quantity-padding-inline);border-style:solid;border-color:var(--ns-component-quantity-divider-color);border-inline-width:var(--ns-component-quantity-border-width);color:inherit;font:inherit;font-variant-numeric:tabular-nums}:host(.ns-quantity--full-width) .ns-quantity__input{width:auto;flex:1}.ns-quantity__input::placeholder{color:var(--ns-component-quantity-placeholder)}.ns-quantity__input:disabled{cursor:not-allowed}.ns-quantity__input[readonly]{cursor:default}:host(.ns-quantity--soft) .ns-quantity__group{border-color:transparent;background:var(--ns-component-quantity-soft-background);box-shadow:none}:host(.ns-quantity--soft) .ns-quantity__button:hover:not(:disabled){background:var(--ns-component-quantity-button-soft-hover-background)}:host(.ns-quantity--sm) .ns-quantity__group{min-height:var(--ns-component-quantity-min-height-sm)}:host(.ns-quantity--sm) .ns-quantity__button{width:var(--ns-component-quantity-min-height-sm)}:host(.ns-quantity--lg) .ns-quantity__group{min-height:var(--ns-component-quantity-min-height-lg)}:host(.ns-quantity--lg) .ns-quantity__button{width:var(--ns-component-quantity-min-height-lg)}:host(:not(.ns-quantity--disabled,.ns-quantity--soft)) .ns-quantity__group:hover{border-color:var(--ns-component-quantity-border-hover-color)}:host(:not(.ns-quantity--disabled)) .ns-quantity__group:focus-within{border-color:var(--ns-component-quantity-border-focus-color);box-shadow:var(--ns-component-quantity-focus-shadow)}:host(.ns-quantity--invalid) .ns-quantity__group,:host(.ns-quantity--invalid) .ns-quantity__group:hover,:host(.ns-quantity--invalid) .ns-quantity__group:focus-within{border-color:var(--ns-component-quantity-invalid-border-color)}:host(.ns-quantity--disabled) .ns-quantity__group{cursor:not-allowed;opacity:50%;background:var(--ns-component-quantity-disabled-background);color:var(--ns-component-quantity-disabled-color);box-shadow:none}:host(.ns-quantity--readonly) .ns-quantity__group{cursor:default}.ns-quantity__description,.ns-quantity__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-quantity__description{color:var(--ns-component-quantity-description-color)}.ns-quantity__error{color:var(--ns-component-quantity-error-color)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4505
|
+
}], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], wheelDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheelDisabled", required: false }] }], incrementAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementAriaLabel", required: false }] }], decrementAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementAriaLabel", required: false }] }] } });
|
|
4506
|
+
|
|
4173
4507
|
class NsRadioComponent {
|
|
4174
4508
|
ids = inject(NsAriaIdService);
|
|
4175
4509
|
group = inject(NsRadioGroupContext, {
|
|
@@ -9144,6 +9478,42 @@ const Arvisfy = {
|
|
|
9144
9478
|
descriptionColor: '{semantic.color.textMuted}',
|
|
9145
9479
|
errorColor: '{semantic.status.danger}'
|
|
9146
9480
|
},
|
|
9481
|
+
quantity: {
|
|
9482
|
+
labelColor: '{semantic.color.text}',
|
|
9483
|
+
labelSize: '{semantic.text.label}',
|
|
9484
|
+
labelWeight: '{semantic.fontWeight.bold}',
|
|
9485
|
+
requiredColor: '{semantic.status.danger}',
|
|
9486
|
+
// Stepper group `[–] | input | [+]`: outline = surface + subtle shadow,
|
|
9487
|
+
// soft = muted fill without shadow.
|
|
9488
|
+
background: '{semantic.color.surface}',
|
|
9489
|
+
softBackground: '{semantic.color.surfaceMuted}',
|
|
9490
|
+
color: '{semantic.color.textSecondary}',
|
|
9491
|
+
placeholder: '{semantic.color.textMuted}',
|
|
9492
|
+
borderColor: '{semantic.color.border}',
|
|
9493
|
+
borderHoverColor: '{semantic.color.borderStrong}',
|
|
9494
|
+
borderFocusColor: '{semantic.color.focus}',
|
|
9495
|
+
borderWidth: '{semantic.border.thin}',
|
|
9496
|
+
dividerColor: '{semantic.color.border}',
|
|
9497
|
+
radius: '{semantic.radius.field}',
|
|
9498
|
+
shadow: '{semantic.shadow.subtle}',
|
|
9499
|
+
focusShadow: '{semantic.shadow.focus}',
|
|
9500
|
+
minHeight: '{semantic.size.inputMinHeight}',
|
|
9501
|
+
minHeightSm: '{semantic.size.controlSm}',
|
|
9502
|
+
minHeightLg: '{semantic.size.controlLg}',
|
|
9503
|
+
paddingInline: '{semantic.space.md}',
|
|
9504
|
+
iconColor: '{semantic.color.textSecondary}',
|
|
9505
|
+
iconSize: '{semantic.size.fieldIconSize}',
|
|
9506
|
+
buttonHoverBackground: '{semantic.color.surfaceMuted}',
|
|
9507
|
+
buttonSoftHoverBackground: '{semantic.color.surfaceEmphasis}',
|
|
9508
|
+
buttonActiveBackground: '{semantic.color.surfaceEmphasis}',
|
|
9509
|
+
buttonDisabledColor: '{semantic.color.textMuted}',
|
|
9510
|
+
disabledBackground: '{semantic.color.surfaceMuted}',
|
|
9511
|
+
disabledColor: '{semantic.color.textMuted}',
|
|
9512
|
+
invalidBorderColor: '{semantic.status.danger}',
|
|
9513
|
+
transitionDuration: '{semantic.motion.fast}',
|
|
9514
|
+
descriptionColor: '{semantic.color.textMuted}',
|
|
9515
|
+
errorColor: '{semantic.status.danger}'
|
|
9516
|
+
},
|
|
9147
9517
|
inputSearch: {
|
|
9148
9518
|
labelColor: '{semantic.color.text}',
|
|
9149
9519
|
borderColor: '{semantic.color.border}',
|
|
@@ -9524,7 +9894,6 @@ const Arvisfy = {
|
|
|
9524
9894
|
// their existing solid hue in the component SCSS.
|
|
9525
9895
|
tintSuccessBackground: '{semantic.status.successTint}',
|
|
9526
9896
|
tintSuccessColor: '{semantic.status.successTintForeground}',
|
|
9527
|
-
pillRadius: '{semantic.radius.pill}',
|
|
9528
9897
|
pillFontSize: '{semantic.text.xs}',
|
|
9529
9898
|
pillFontWeight: '{semantic.fontWeight.medium}',
|
|
9530
9899
|
pillPaddingBlock: '{semantic.size.chipPillPaddingBlock}',
|
|
@@ -9534,7 +9903,6 @@ const Arvisfy = {
|
|
|
9534
9903
|
// "WhatsApp Business"). The `md` default stays the pill/round shape
|
|
9535
9904
|
// above — this is an additional size, not a replacement. Colors are
|
|
9536
9905
|
// unchanged; only shape/typography tokens are added.
|
|
9537
|
-
choiceRadius: '{semantic.radius.field}',
|
|
9538
9906
|
choiceMinHeight: '{semantic.size.chipChoiceMinHeight}',
|
|
9539
9907
|
choicePaddingInline: '{semantic.size.chipChoicePaddingInline}',
|
|
9540
9908
|
choiceFontSize: '{semantic.text.label}',
|
|
@@ -11268,5 +11636,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
11268
11636
|
* Generated bundle index. Do not edit.
|
|
11269
11637
|
*/
|
|
11270
11638
|
|
|
11271
|
-
export { Arvisfy, NS_EDITOR_TOOLS_DEFAULT, NS_RETIRED_TOKENS, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsAvatarGroupComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommandPaletteComponent, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorImageComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsEmptyStateComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsLoadMoreComponent, NsMenuComponent, NsMenuDividerComponent, NsMenuItemComponent, NsMenuSectionComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOptionCardComponent, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSideNavComponent, NsSideNavItemComponent, NsSideNavSectionComponent, NsSkeletonComponent, NsSliderComponent, NsStatCardComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsTimelineComponent, NsTimelineItemComponent, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
|
|
11639
|
+
export { Arvisfy, NS_EDITOR_TOOLS_DEFAULT, NS_RETIRED_TOKENS, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsAvatarGroupComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommandPaletteComponent, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorImageComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsEmptyStateComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsLoadMoreComponent, NsMenuComponent, NsMenuDividerComponent, NsMenuItemComponent, NsMenuSectionComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOptionCardComponent, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsQuantityComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSideNavComponent, NsSideNavItemComponent, NsSideNavSectionComponent, NsSkeletonComponent, NsSliderComponent, NsStatCardComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsTimelineComponent, NsTimelineItemComponent, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
|
|
11272
11640
|
//# sourceMappingURL=ng-solid-design-system.mjs.map
|