@ardium-ui/ui 5.0.0-alpha.67 → 5.0.0-alpha.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ardium-ui-ui.mjs +66 -48
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/inputs/input-utils.d.ts +8 -3
- package/lib/inputs/number-input/number-input.component.d.ts +3 -1
- package/lib/inputs/number-input/number-input.defaults.d.ts +2 -0
- package/lib/inputs/number-input/number-input.types.d.ts +6 -0
- package/package.json +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +33 -16
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/themes/default/inputs/number-input.scss +36 -18
|
@@ -529,8 +529,7 @@ const int = (currentText, previousText, caretPos) => {
|
|
|
529
529
|
};
|
|
530
530
|
const float = (currentText, previousText, caretPos) => {
|
|
531
531
|
const regexes = [
|
|
532
|
-
[/[^0-9
|
|
533
|
-
[/,/, '.'],
|
|
532
|
+
[/[^0-9.-]/],
|
|
534
533
|
[/(.+)-/, '$1'],
|
|
535
534
|
[/\.(.*)\./, '$1.'],
|
|
536
535
|
[/^(-?)\./, '$10.'],
|
|
@@ -549,6 +548,12 @@ const ArdTransformer = {
|
|
|
549
548
|
Float: float,
|
|
550
549
|
};
|
|
551
550
|
|
|
551
|
+
const ArdNumberInputMinMaxBehavior = {
|
|
552
|
+
AdjustOnInput: 'adjust-on-input',
|
|
553
|
+
AdjustOnBlur: 'adjust-on-blur',
|
|
554
|
+
Noop: 'noop',
|
|
555
|
+
};
|
|
556
|
+
|
|
552
557
|
class InputModel {
|
|
553
558
|
constructor(_ardHostCmp) {
|
|
554
559
|
this._ardHostCmp = _ardHostCmp;
|
|
@@ -660,13 +665,26 @@ class NumberInputModel {
|
|
|
660
665
|
this._value.set(stringV);
|
|
661
666
|
this._updateInputEl();
|
|
662
667
|
}
|
|
663
|
-
|
|
664
|
-
|
|
668
|
+
updateOnBlur(adjustMinMax) {
|
|
669
|
+
let v = this._value();
|
|
670
|
+
if (isNull(v))
|
|
665
671
|
return;
|
|
666
|
-
|
|
667
|
-
|
|
672
|
+
this._applyStandardConstraints(v, adjustMinMax ?? this._ardHostCmp.minMaxBehavior() === ArdNumberInputMinMaxBehavior.AdjustOnBlur);
|
|
673
|
+
if (this._ardHostCmp.fixedDecimalPlaces()) {
|
|
674
|
+
v = this._fixDecimalPlaces(v);
|
|
675
|
+
}
|
|
668
676
|
// internal storage remains using '.'; _updateInputEl handles display
|
|
669
|
-
|
|
677
|
+
// convert to number and back to string to remove any trailing decimal separator without digits and to remove leading zeros
|
|
678
|
+
this.setValue(Number(v));
|
|
679
|
+
}
|
|
680
|
+
_fixDecimalPlaces(v) {
|
|
681
|
+
const maxDp = this._ardHostCmp.maxDecimalPlaces();
|
|
682
|
+
if (!isDefined(maxDp) || maxDp === Infinity)
|
|
683
|
+
return v;
|
|
684
|
+
const num = Number(v);
|
|
685
|
+
if (isNaN(num))
|
|
686
|
+
return v;
|
|
687
|
+
return num.toFixed(maxDp);
|
|
670
688
|
}
|
|
671
689
|
_updateInputEl() {
|
|
672
690
|
let stringV = this.stringValue();
|
|
@@ -682,28 +700,20 @@ class NumberInputModel {
|
|
|
682
700
|
this.caretPos = caretPos;
|
|
683
701
|
}
|
|
684
702
|
//! write value handlers
|
|
685
|
-
writeValue(v) {
|
|
703
|
+
writeValue(v, applyConstraints) {
|
|
686
704
|
if (!isNumber(v) && !isAnyString(v) && !isNull(v)) {
|
|
687
705
|
//warn when using non-string/non-null value
|
|
688
706
|
console.warn(new Error(`ARD-WA0070: Trying to set <ard-number-input>'s value to "${typeof v}", expected string, number, or null.`));
|
|
689
707
|
//normalize the value
|
|
690
708
|
v = v?.toString?.() ?? String(v);
|
|
691
709
|
}
|
|
692
|
-
v = String(v);
|
|
693
|
-
|
|
694
|
-
const sep = this._ardHostCmp.decimalSeparator();
|
|
695
|
-
if (sep && sep !== '.') {
|
|
696
|
-
v = v.replaceAll(sep, '.');
|
|
697
|
-
}
|
|
698
|
-
return this._writeValue(v);
|
|
710
|
+
v = v === null ? null : String(v);
|
|
711
|
+
return this._writeValue(v, applyConstraints);
|
|
699
712
|
}
|
|
700
|
-
_writeValue(v) {
|
|
713
|
+
_writeValue(v, applyConstraints) {
|
|
701
714
|
//constraints
|
|
702
|
-
if (
|
|
703
|
-
v = this.
|
|
704
|
-
v = this._applyNumberConstraint(v);
|
|
705
|
-
v = this._applyMaxDecimalPlaces(v);
|
|
706
|
-
v = this._applyMinMaxConstraints(v);
|
|
715
|
+
if (applyConstraints) {
|
|
716
|
+
v = this._applyStandardConstraints(v, this._ardHostCmp.minMaxBehavior() === ArdNumberInputMinMaxBehavior.AdjustOnInput);
|
|
707
717
|
}
|
|
708
718
|
if (v === '')
|
|
709
719
|
v = null;
|
|
@@ -713,7 +723,7 @@ class NumberInputModel {
|
|
|
713
723
|
return oldVal !== v;
|
|
714
724
|
}
|
|
715
725
|
rewriteValueAfterHostUpdate() {
|
|
716
|
-
this._writeValue(this._value());
|
|
726
|
+
this._writeValue(this._value(), false);
|
|
717
727
|
}
|
|
718
728
|
//! input element methods
|
|
719
729
|
get caretPos() {
|
|
@@ -724,32 +734,38 @@ class NumberInputModel {
|
|
|
724
734
|
el?.setSelectionRange(pos, pos);
|
|
725
735
|
}
|
|
726
736
|
//! constraints
|
|
737
|
+
_applyStandardConstraints(v, adjustMinMax) {
|
|
738
|
+
if (!v && v !== 0)
|
|
739
|
+
return '';
|
|
740
|
+
v = this._standardizeSeparator(v);
|
|
741
|
+
v = this._removeDecimalPlaces(v);
|
|
742
|
+
v = this._applyNumberConstraint(v);
|
|
743
|
+
v = this._applyMaxDecimalPlaces(v);
|
|
744
|
+
if (adjustMinMax) {
|
|
745
|
+
v = this._applyMinMaxConstraints(v);
|
|
746
|
+
}
|
|
747
|
+
return v;
|
|
748
|
+
}
|
|
749
|
+
_standardizeSeparator(v) {
|
|
750
|
+
if (!v && v !== 0)
|
|
751
|
+
return '';
|
|
752
|
+
const sep = this._ardHostCmp.decimalSeparator();
|
|
753
|
+
if (!sep || sep === '.')
|
|
754
|
+
return String(v);
|
|
755
|
+
return String(v).replaceAll(sep, '.');
|
|
756
|
+
}
|
|
727
757
|
_removeDecimalPlaces(v) {
|
|
728
758
|
if (!v && v !== 0)
|
|
729
759
|
return '';
|
|
730
760
|
if (this._ardHostCmp.allowFloat())
|
|
731
761
|
return v;
|
|
732
|
-
|
|
733
|
-
let str = String(v);
|
|
734
|
-
const sep = this._ardHostCmp.decimalSeparator();
|
|
735
|
-
if (sep && sep !== '.') {
|
|
736
|
-
str = str.replaceAll(sep, '.');
|
|
737
|
-
}
|
|
738
|
-
const num = Number(str);
|
|
739
|
-
if (!isNaN(num))
|
|
740
|
-
return Math.round(num);
|
|
741
|
-
return v;
|
|
762
|
+
return String(v).split('.')[0];
|
|
742
763
|
}
|
|
743
764
|
_applyNumberConstraint(v) {
|
|
744
765
|
if (!v && v !== 0)
|
|
745
766
|
return '';
|
|
746
|
-
const
|
|
747
|
-
|
|
748
|
-
let prev = this.stringValue();
|
|
749
|
-
if (sep && sep !== '.') {
|
|
750
|
-
input = input.replaceAll(sep, '.');
|
|
751
|
-
prev = prev.replaceAll(sep, '.');
|
|
752
|
-
}
|
|
767
|
+
const input = String(v);
|
|
768
|
+
const prev = this.stringValue();
|
|
753
769
|
const transformerFn = this._ardHostCmp.allowFloat() ? ArdTransformer.Float : ArdTransformer.Integer;
|
|
754
770
|
const { text, caretPos } = transformerFn(input, prev, this.caretPos);
|
|
755
771
|
this.caretPos = caretPos;
|
|
@@ -9833,7 +9849,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
|
|
|
9833
9849
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
9834
9850
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
9835
9851
|
},
|
|
9836
|
-
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigitsAsInt()\"\r\n (input)=\"onInput(textInput.value, $event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-
|
|
9852
|
+
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigitsAsInt()\"\r\n (input)=\"onInput(textInput.value, $event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9837
9853
|
}
|
|
9838
9854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
|
|
9839
9855
|
type: Component,
|
|
@@ -9847,7 +9863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
9847
9863
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
9848
9864
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
9849
9865
|
},
|
|
9850
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigitsAsInt()\"\r\n (input)=\"onInput(textInput.value, $event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-
|
|
9866
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigitsAsInt()\"\r\n (input)=\"onInput(textInput.value, $event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
|
|
9851
9867
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
9852
9868
|
type: Inject,
|
|
9853
9869
|
args: [ARD_HEX_INPUT_DEFAULTS]
|
|
@@ -9895,6 +9911,7 @@ const _numberInputDefaults = {
|
|
|
9895
9911
|
inputAttrs: {},
|
|
9896
9912
|
min: 0,
|
|
9897
9913
|
max: Infinity,
|
|
9914
|
+
minMaxBehavior: ArdNumberInputMinMaxBehavior.AdjustOnBlur,
|
|
9898
9915
|
maxDecimalPlaces: Infinity,
|
|
9899
9916
|
fixedDecimalPlaces: false,
|
|
9900
9917
|
decimalSeparator: '.',
|
|
@@ -10003,6 +10020,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10003
10020
|
//! min/max and number type
|
|
10004
10021
|
this.min = input(this._DEFAULTS.min, { transform: v => coerceNumberProperty(v, this._DEFAULTS.min) });
|
|
10005
10022
|
this.max = input(this._DEFAULTS.max, { transform: v => coerceNumberProperty(v, this._DEFAULTS.max) });
|
|
10023
|
+
this.minMaxBehavior = input(this._DEFAULTS.minMaxBehavior);
|
|
10006
10024
|
this.maxDecimalPlaces = input(this._DEFAULTS.maxDecimalPlaces, {
|
|
10007
10025
|
transform: v => {
|
|
10008
10026
|
const newValue = coerceNumberProperty(v, this._DEFAULTS.maxDecimalPlaces);
|
|
@@ -10078,10 +10096,10 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10078
10096
|
}
|
|
10079
10097
|
//! control value accessor's write value implementation
|
|
10080
10098
|
writeValue(v) {
|
|
10081
|
-
this.inputModel.writeValue(v);
|
|
10099
|
+
this.inputModel.writeValue(v, false);
|
|
10082
10100
|
if (this.isFocused())
|
|
10083
10101
|
return;
|
|
10084
|
-
this.inputModel.
|
|
10102
|
+
this.inputModel.updateOnBlur(true);
|
|
10085
10103
|
}
|
|
10086
10104
|
set value(v) {
|
|
10087
10105
|
if (typeof v === 'number')
|
|
@@ -10130,7 +10148,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10130
10148
|
}
|
|
10131
10149
|
//! event handlers
|
|
10132
10150
|
onInput(newVal) {
|
|
10133
|
-
const valueHasChanged = this.inputModel.writeValue(newVal);
|
|
10151
|
+
const valueHasChanged = this.inputModel.writeValue(newVal, true);
|
|
10134
10152
|
if (!valueHasChanged)
|
|
10135
10153
|
return;
|
|
10136
10154
|
this._emitInput();
|
|
@@ -10145,7 +10163,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10145
10163
|
}
|
|
10146
10164
|
onBlurMaster(event) {
|
|
10147
10165
|
this.onBlur(event);
|
|
10148
|
-
this.inputModel.
|
|
10166
|
+
this.inputModel.updateOnBlur();
|
|
10149
10167
|
}
|
|
10150
10168
|
//change
|
|
10151
10169
|
onChange(event) {
|
|
@@ -10195,7 +10213,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10195
10213
|
}
|
|
10196
10214
|
}
|
|
10197
10215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, deps: [{ token: ARD_NUMBER_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumNumberInputComponent, isStandalone: false, selector: "ard-number-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxDecimalPlaces: { classPropertyName: "maxDecimalPlaces", publicName: "maxDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, fixedDecimalPlaces: { classPropertyName: "fixedDecimalPlaces", publicName: "fixedDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOnQuickChangeButton: { classPropertyName: "keepFocusOnQuickChangeButton", publicName: "keepFocusOnQuickChangeButton", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
|
|
10216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumNumberInputComponent, isStandalone: false, selector: "ard-number-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minMaxBehavior: { classPropertyName: "minMaxBehavior", publicName: "minMaxBehavior", isSignal: true, isRequired: false, transformFunction: null }, maxDecimalPlaces: { classPropertyName: "maxDecimalPlaces", publicName: "maxDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, fixedDecimalPlaces: { classPropertyName: "fixedDecimalPlaces", publicName: "fixedDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOnQuickChangeButton: { classPropertyName: "keepFocusOnQuickChangeButton", publicName: "keepFocusOnQuickChangeButton", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
|
|
10199
10217
|
{
|
|
10200
10218
|
provide: NG_VALUE_ACCESSOR,
|
|
10201
10219
|
useExisting: forwardRef(() => ArdiumNumberInputComponent),
|
|
@@ -10205,7 +10223,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10205
10223
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
10206
10224
|
useExisting: ArdiumNumberInputComponent,
|
|
10207
10225
|
},
|
|
10208
|
-
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-input-
|
|
10226
|
+
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-number-input-wrapper\">\r\n @if (prefixTemplate()) {\r\n <div class=\"ard-number-input-prefix-container\">\r\n <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template\r\n #defaultPlaceholderTemplate\r\n let-plchldr\r\n >\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (mousedown)=\"$event.stopPropagation()\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n @if (suffixTemplate()) {\r\n <div class=\"ard-number-input-suffix-container\">\r\n <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button increment\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canIncrement()\"\r\n [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n ardHoldSpaceKey\r\n >\r\n +\r\n </ard-button>\r\n }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10209
10227
|
}
|
|
10210
10228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
|
|
10211
10229
|
type: Component,
|
|
@@ -10219,7 +10237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
10219
10237
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
10220
10238
|
useExisting: ArdiumNumberInputComponent,
|
|
10221
10239
|
},
|
|
10222
|
-
], template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-input-
|
|
10240
|
+
], template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-number-input-wrapper\">\r\n @if (prefixTemplate()) {\r\n <div class=\"ard-number-input-prefix-container\">\r\n <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template\r\n #defaultPlaceholderTemplate\r\n let-plchldr\r\n >\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (mousedown)=\"$event.stopPropagation()\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n @if (suffixTemplate()) {\r\n <div class=\"ard-number-input-suffix-container\">\r\n <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button increment\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canIncrement()\"\r\n [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n ardHoldSpaceKey\r\n >\r\n +\r\n </ard-button>\r\n }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
|
|
10223
10241
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10224
10242
|
type: Inject,
|
|
10225
10243
|
args: [ARD_NUMBER_INPUT_DEFAULTS]
|