@ardium-ui/ui 3.3.0-alpha.1 → 3.3.0-alpha.3
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/esm2022/lib/_internal/focusable-component.mjs +7 -5
- package/esm2022/lib/_internal/form-field-component.mjs +5 -3
- package/esm2022/lib/_internal/selectable-list-component.mjs +6 -6
- package/esm2022/lib/file-inputs/file-input/file-input.component.mjs +3 -3
- package/esm2022/lib/form-field/form-field.component.mjs +3 -3
- package/esm2022/lib/form-field/horizontal-form-field.component.mjs +3 -3
- package/esm2022/lib/form-field-frame/form-field-frame.component.mjs +12 -7
- package/esm2022/lib/inputs/digit-input/digit-input.component.mjs +3 -3
- package/esm2022/lib/inputs/hex-input/hex-input.component.mjs +3 -3
- package/esm2022/lib/inputs/input/input.component.mjs +3 -3
- package/esm2022/lib/inputs/number-input/number-input.component.mjs +3 -3
- package/esm2022/lib/inputs/password-input/password-input.component.mjs +3 -3
- package/esm2022/lib/inputs/simple-input/simple-input.component.mjs +3 -3
- package/esm2022/lib/segment/segment.component.mjs +3 -3
- package/esm2022/lib/select/select.component.mjs +3 -3
- package/fesm2022/ardium-ui-ui.mjs +47 -38
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/focusable-component.d.ts +2 -1
- package/lib/_internal/form-field-component.d.ts +2 -1
- package/lib/form-field-frame/form-field-frame.component.d.ts +3 -2
- package/package.json +1 -1
- package/prebuilt-themes/default/chips.css.map +1 -1
- package/prebuilt-themes/default/form-field-frame.css +10 -4
- package/prebuilt-themes/default/form-field-frame.css.map +1 -1
- package/prebuilt-themes/default/form-field.css +4 -0
- package/prebuilt-themes/default/form-field.css.map +1 -1
- package/prebuilt-themes/default/inputs/digit-input.css +9 -3
- package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +0 -5
- package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/input.css +0 -5
- package/prebuilt-themes/default/inputs/input.css.map +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +6 -3
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/simple-input.css +0 -5
- package/prebuilt-themes/default/inputs/simple-input.css.map +1 -1
- package/prebuilt-themes/default/segment.css +6 -3
- package/prebuilt-themes/default/segment.css.map +1 -1
- package/themes/default/_mixins.scss +6 -4
- package/themes/default/form-field-frame.scss +5 -1
- package/themes/default/form-field.scss +5 -0
- package/themes/default/inputs/digit-input.scss +5 -0
- package/themes/default/inputs/file-input.scss +0 -6
- package/themes/default/inputs/input.scss +1 -7
- package/themes/default/inputs/simple-input.scss +1 -8
|
@@ -95,7 +95,8 @@ class _FocusableComponentBase extends _DisablableComponentBase {
|
|
|
95
95
|
/**
|
|
96
96
|
* Whether the component is currently focused.
|
|
97
97
|
*/
|
|
98
|
-
this.isFocused = false;
|
|
98
|
+
this.isFocused = signal(false);
|
|
99
|
+
this.wasTouched = signal(false);
|
|
99
100
|
}
|
|
100
101
|
/**
|
|
101
102
|
* Focuses the correct element in the component.
|
|
@@ -126,7 +127,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
|
|
|
126
127
|
* @param event The focus event to emit.
|
|
127
128
|
*/
|
|
128
129
|
onFocus(event) {
|
|
129
|
-
this.isFocused
|
|
130
|
+
this.isFocused.set(true);
|
|
130
131
|
this.focusEvent.emit(event);
|
|
131
132
|
}
|
|
132
133
|
/**
|
|
@@ -134,7 +135,8 @@ class _FocusableComponentBase extends _DisablableComponentBase {
|
|
|
134
135
|
* @param event The focus event to emit.
|
|
135
136
|
*/
|
|
136
137
|
onBlur(event) {
|
|
137
|
-
this.
|
|
138
|
+
this.wasTouched.set(true);
|
|
139
|
+
this.isFocused.set(false);
|
|
138
140
|
this.blurEvent.emit(event);
|
|
139
141
|
}
|
|
140
142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FocusableComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -214,12 +216,14 @@ class _FormFieldComponentBase extends _NgModelComponentBase {
|
|
|
214
216
|
alias: 'hasError',
|
|
215
217
|
});
|
|
216
218
|
this._hasErrorInControl = signal(false);
|
|
217
|
-
this.hasError = computed(() => this._hasError() ?? this._hasErrorInControl());
|
|
219
|
+
this.hasError = computed(() => this._hasError() ?? (this.wasTouched() && this._hasErrorInControl()));
|
|
220
|
+
this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
|
|
218
221
|
}
|
|
219
222
|
ngOnInit() {
|
|
220
223
|
this._ngControl = this._injector.get(NgControl, null);
|
|
221
224
|
if (this._ngControl) {
|
|
222
225
|
this._ngControl.valueAccessor = this;
|
|
226
|
+
this._hasErrorInControl.set(this._ngControl.status === 'INVALID');
|
|
223
227
|
this._statusChangesSub = this._ngControl.statusChanges
|
|
224
228
|
?.pipe(map(v => v === 'INVALID'))
|
|
225
229
|
.subscribe(v => this._hasErrorInControl.set(v));
|
|
@@ -232,7 +236,7 @@ class _FormFieldComponentBase extends _NgModelComponentBase {
|
|
|
232
236
|
this._statusChangesSub?.unsubscribe();
|
|
233
237
|
}
|
|
234
238
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
235
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _FormFieldComponentBase, inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
239
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _FormFieldComponentBase, inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
236
240
|
}
|
|
237
241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldComponentBase, decorators: [{
|
|
238
242
|
type: Directive
|
|
@@ -688,7 +692,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
|
|
|
688
692
|
provide: _FormFieldComponentBase,
|
|
689
693
|
useExisting: ArdiumDigitInputComponent,
|
|
690
694
|
},
|
|
691
|
-
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
695
|
+
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
692
696
|
}
|
|
693
697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
|
|
694
698
|
type: Component,
|
|
@@ -702,7 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
702
706
|
provide: _FormFieldComponentBase,
|
|
703
707
|
useExisting: ArdiumDigitInputComponent,
|
|
704
708
|
},
|
|
705
|
-
], template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
709
|
+
], template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
706
710
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
707
711
|
type: Inject,
|
|
708
712
|
args: [ARD_DIGIT_INPUT_DEFAULTS]
|
|
@@ -938,8 +942,7 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
|
|
|
938
942
|
constructor(defaults) {
|
|
939
943
|
super(defaults);
|
|
940
944
|
this.hasError = input(false, { transform: v => coerceBooleanProperty(v) });
|
|
941
|
-
|
|
942
|
-
this.isFocused = false;
|
|
945
|
+
this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
|
|
943
946
|
//! appearance
|
|
944
947
|
/**
|
|
945
948
|
* The appearance of the component, aka the styling.
|
|
@@ -958,7 +961,8 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
|
|
|
958
961
|
`ard-variant-${this.variant()}`,
|
|
959
962
|
this.compact() ? 'ard-compact' : '',
|
|
960
963
|
this.hasError() ? 'ard-has-error' : '',
|
|
961
|
-
this.
|
|
964
|
+
this.isSuccess() ? 'ard-is-success' : '',
|
|
965
|
+
this.isFocused() ? 'ard-focused' : 'ard-unfocused',
|
|
962
966
|
].join(' '));
|
|
963
967
|
//! prefix & suffix
|
|
964
968
|
this.prefixTemplateInput = input(undefined, { alias: 'prefixTemplate' });
|
|
@@ -966,8 +970,12 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
|
|
|
966
970
|
this.prefixTemplate = contentChild(ArdFormFieldPrefixTemplateDirective);
|
|
967
971
|
this.suffixTemplate = contentChild(ArdFormFieldSuffixTemplateDirective);
|
|
968
972
|
}
|
|
973
|
+
//! focused state
|
|
974
|
+
set _setIsFocused(v) {
|
|
975
|
+
this.isFocused.set(v);
|
|
976
|
+
}
|
|
969
977
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldFrameComponent, deps: [{ token: ARD_FORM_FIELD_FRAME_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null },
|
|
978
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, _setIsFocused: { classPropertyName: "_setIsFocused", publicName: "isFocused", isSignal: false, 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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, prefixTemplateInput: { classPropertyName: "prefixTemplateInput", publicName: "prefixTemplate", isSignal: true, isRequired: false, transformFunction: null }, suffixTemplateInput: { classPropertyName: "suffixTemplateInput", publicName: "suffixTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ard-form-field-frame\"\n [ngClass]=\"ngClasses()\"\n>\n <div class=\"ard-form-field-overlay\"></div>\n @if (prefixTemplateInput() ?? prefixTemplate()) {\n <div class=\"ard-form-field-prefix-container\">\n <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\n </div>\n }\n <div class=\"ard-form-field-content-container\">\n <ng-content></ng-content>\n </div>\n @if (suffixTemplateInput() ?? suffixTemplate()) {\n <div class=\"ard-form-field-suffix-container\">\n <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\n </div>\n }\n</div>\n", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
971
979
|
}
|
|
972
980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldFrameComponent, decorators: [{
|
|
973
981
|
type: Component,
|
|
@@ -975,8 +983,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
975
983
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
976
984
|
type: Inject,
|
|
977
985
|
args: [ARD_FORM_FIELD_FRAME_DEFAULTS]
|
|
978
|
-
}] }], propDecorators: {
|
|
979
|
-
type: Input
|
|
986
|
+
}] }], propDecorators: { _setIsFocused: [{
|
|
987
|
+
type: Input,
|
|
988
|
+
args: [{ alias: 'isFocused' }]
|
|
980
989
|
}] } });
|
|
981
990
|
|
|
982
991
|
class ArdiumFormFieldFrameModule {
|
|
@@ -1854,7 +1863,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
|
|
|
1854
1863
|
provide: _FormFieldComponentBase,
|
|
1855
1864
|
useExisting: ArdiumInputComponent,
|
|
1856
1865
|
},
|
|
1857
|
-
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, 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 [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-input\"\r\n #suggestionsHost\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayAutocomplete()) {\r\n <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n }\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 <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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\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\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected()\"\r\n [class.ard-option-highlighted]=\"item.highlighted()\"\r\n [attr.aria-selected]=\"item.selected()\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n ></ng-template>\r\n </span>\r\n </div>\r\n }\r\n @if (areSuggestionsLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1866
|
+
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, 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 [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-input\"\r\n #suggestionsHost\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayAutocomplete()) {\r\n <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n }\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 <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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\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\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected()\"\r\n [class.ard-option-highlighted]=\"item.highlighted()\"\r\n [attr.aria-selected]=\"item.selected()\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n ></ng-template>\r\n </span>\r\n </div>\r\n }\r\n @if (areSuggestionsLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1858
1867
|
}
|
|
1859
1868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumInputComponent, decorators: [{
|
|
1860
1869
|
type: Component,
|
|
@@ -1868,7 +1877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1868
1877
|
provide: _FormFieldComponentBase,
|
|
1869
1878
|
useExisting: ArdiumInputComponent,
|
|
1870
1879
|
},
|
|
1871
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-input\"\r\n #suggestionsHost\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayAutocomplete()) {\r\n <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n }\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 <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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\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\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected()\"\r\n [class.ard-option-highlighted]=\"item.highlighted()\"\r\n [attr.aria-selected]=\"item.selected()\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n ></ng-template>\r\n </span>\r\n </div>\r\n }\r\n @if (areSuggestionsLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
|
|
1880
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-input\"\r\n #suggestionsHost\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\r\n >\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayAutocomplete()) {\r\n <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n }\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 <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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\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\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected()\"\r\n [class.ard-option-highlighted]=\"item.highlighted()\"\r\n [attr.aria-selected]=\"item.selected()\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n ></ng-template>\r\n </span>\r\n </div>\r\n }\r\n @if (areSuggestionsLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
|
|
1872
1881
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1873
1882
|
type: Inject,
|
|
1874
1883
|
args: [ARD_INPUT_DEFAULTS]
|
|
@@ -2218,7 +2227,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
|
|
|
2218
2227
|
provide: _FormFieldComponentBase,
|
|
2219
2228
|
useExisting: ArdiumPasswordInputComponent,
|
|
2220
2229
|
},
|
|
2221
|
-
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, 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 [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-password-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value()\"\r\n (click)=\"focus()\"\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\" />\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\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)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n [class.ard-revealed]=\"revealable() && revealed()\"\r\n />\r\n </div>\r\n\r\n @if (revealable()) {\r\n <button\r\n class=\"ard-reveal-button\"\r\n type=\"button\"\r\n (click)=\"!holdToReveal() && toggleReveal()\"\r\n (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n >\r\n <ng-template\r\n #defaultRevealTemplate\r\n let-revealed\r\n >\r\n <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n />\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2230
|
+
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, 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 [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-password-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value()\"\r\n (click)=\"focus()\"\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\" />\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\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)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n [class.ard-revealed]=\"revealable() && revealed()\"\r\n />\r\n </div>\r\n\r\n @if (revealable()) {\r\n <button\r\n class=\"ard-reveal-button\"\r\n type=\"button\"\r\n (click)=\"!holdToReveal() && toggleReveal()\"\r\n (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n >\r\n <ng-template\r\n #defaultRevealTemplate\r\n let-revealed\r\n >\r\n <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n />\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2222
2231
|
}
|
|
2223
2232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
|
|
2224
2233
|
type: Component,
|
|
@@ -2232,7 +2241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2232
2241
|
provide: _FormFieldComponentBase,
|
|
2233
2242
|
useExisting: ArdiumPasswordInputComponent,
|
|
2234
2243
|
},
|
|
2235
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-password-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value()\"\r\n (click)=\"focus()\"\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\" />\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\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)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n [class.ard-revealed]=\"revealable() && revealed()\"\r\n />\r\n </div>\r\n\r\n @if (revealable()) {\r\n <button\r\n class=\"ard-reveal-button\"\r\n type=\"button\"\r\n (click)=\"!holdToReveal() && toggleReveal()\"\r\n (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n >\r\n <ng-template\r\n #defaultRevealTemplate\r\n let-revealed\r\n >\r\n <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n />\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n" }]
|
|
2244
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-password-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value()\"\r\n (click)=\"focus()\"\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\" />\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\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)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n [class.ard-revealed]=\"revealable() && revealed()\"\r\n />\r\n </div>\r\n\r\n @if (revealable()) {\r\n <button\r\n class=\"ard-reveal-button\"\r\n type=\"button\"\r\n (click)=\"!holdToReveal() && toggleReveal()\"\r\n (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n >\r\n <ng-template\r\n #defaultRevealTemplate\r\n let-revealed\r\n >\r\n <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n />\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n" }]
|
|
2236
2245
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2237
2246
|
type: Inject,
|
|
2238
2247
|
args: [ARD_PASSWORD_INPUT_DEFAULTS]
|
|
@@ -2361,7 +2370,7 @@ class ArdiumSimpleInputComponent extends _SimpleInputComponentBase {
|
|
|
2361
2370
|
provide: _FormFieldComponentBase,
|
|
2362
2371
|
useExisting: ArdiumSimpleInputComponent
|
|
2363
2372
|
},
|
|
2364
|
-
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, 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 [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-simple-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2373
|
+
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, 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 [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-simple-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2365
2374
|
}
|
|
2366
2375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
|
|
2367
2376
|
type: Component,
|
|
@@ -2375,7 +2384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2375
2384
|
provide: _FormFieldComponentBase,
|
|
2376
2385
|
useExisting: ArdiumSimpleInputComponent
|
|
2377
2386
|
},
|
|
2378
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-simple-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
|
|
2387
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-simple-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-value]=\"value\"\r\n (click)=\"focus()\"\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 (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;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-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
|
|
2379
2388
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2380
2389
|
type: Inject,
|
|
2381
2390
|
args: [ARD_SIMPLE_INPUT_DEFAULTS]
|
|
@@ -4093,7 +4102,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4093
4102
|
provide: _FormFieldComponentBase,
|
|
4094
4103
|
useExisting: ArdiumSelectComponent,
|
|
4095
4104
|
},
|
|
4096
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-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\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n <!-- TODO check if can remove div -->\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4105
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-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\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n <!-- TODO check if can remove div -->\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4097
4106
|
}
|
|
4098
4107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
|
|
4099
4108
|
type: Component,
|
|
@@ -4107,7 +4116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4107
4116
|
provide: _FormFieldComponentBase,
|
|
4108
4117
|
useExisting: ArdiumSelectComponent,
|
|
4109
4118
|
},
|
|
4110
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused\"\r\n [hasError]=\"hasError()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-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\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n <!-- TODO check if can remove div -->\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
|
|
4119
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-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\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n <!-- TODO check if can remove div -->\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
|
|
4111
4120
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4112
4121
|
type: Inject,
|
|
4113
4122
|
args: [ARD_SELECT_DEFAULTS]
|
|
@@ -5076,7 +5085,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
|
|
|
5076
5085
|
useExisting: forwardRef(() => ArdiumFileInputComponent),
|
|
5077
5086
|
multi: true,
|
|
5078
5087
|
},
|
|
5079
|
-
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n class=\"ard-file-input-form-field-frame\"\n [appearance]=\"appearance()\"\n [variant]=\"variant()\"\n [compact]=\"compact()\"\n [isFocused]=\"isFocused\"\n [prefixTemplate]=\"prefixTemplate\"\n [suffixTemplate]=\"suffixTemplate\"\n (dragover)=\"onDragover($event)\"\n (dragleave)=\"onDragleave()\"\n (drop)=\"onDrop($event)\"\n (ardClickOutside)=\"onDragleave()\"\n>\n <div\n class=\"ard-file-input\"\n [ngClass]=\"ngClasses()\"\n >\n <div class=\"ard-input-container\">\n @if (shouldDisplayPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n </ng-template>\n\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n <div class=\"ard-file-input__value\">\n @if (currentViewState() === 'idle') {\n <ng-template\n [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n [ngTemplateOutletContext]=\"getIdleContext()\"\n />\n }\n @if (currentViewState() === 'dragover') {\n <ng-template\n [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n [ngTemplateOutletContext]=\"getDragoverContext()\"\n />\n }\n @if (currentViewState() === 'uploaded') {\n <ng-template\n [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n [ngTemplateOutletContext]=\"getUploadedContext()\"\n />\n }\n </div>\n </div>\n\n @if (shouldShowClearButton) {\n <ard-clear-button\n #focusableElement\n [title]=\"clearButtonTitle()\"\n (mouseup)=\"onClearButtonClick($event)\"\n />\n }\n @if (!shouldBeBlocked) {\n <button\n #focusableElement\n type=\"button\"\n class=\"ard-browse-button\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"openBrowseDialog()\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <ard-icon>folder</ard-icon>\n </button>\n }\n </div>\n</ard-form-field-frame>\n\n<input\n #fileInput\n class=\"ard-file-input__input\"\n type=\"file\"\n [name]=\"name()\"\n [multiple]=\"multiple()\"\n [attr.id]=\"htmlId()\"\n (change)=\"onInputChange()\"\n/>\n\n<ng-template\n #defaultIdleTemplate\n let-browse=\"browse\"\n>\n <span class=\"ard-file-input__idle\">\n @if (multiple()) {\n <span>Upload a file</span>\n } @else {\n <span>Upload files</span>\n }\n </span>\n</ng-template>\n\n<ng-template\n #defaultDragoverTemplate\n let-amount=\"amount\"\n>\n <span class=\"ard-file-input__dragover-text\">Drop </span>\n @if (multiple()) {\n <span class=\"ard-file-input__dragover-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n } @else {\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\n }\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n #defaultUploadedTemplate\n let-amount=\"amount\"\n>\n <div class=\"ard-file-input__uploaded\">\n <span class=\"ard-file-input__uploaded-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\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: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5088
|
+
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n class=\"ard-file-input-form-field-frame\"\n [appearance]=\"appearance()\"\n [variant]=\"variant()\"\n [compact]=\"compact()\"\n [isFocused]=\"isFocused()\"\n [prefixTemplate]=\"prefixTemplate\"\n [suffixTemplate]=\"suffixTemplate\"\n (dragover)=\"onDragover($event)\"\n (dragleave)=\"onDragleave()\"\n (drop)=\"onDrop($event)\"\n (ardClickOutside)=\"onDragleave()\"\n>\n <div\n class=\"ard-file-input\"\n [ngClass]=\"ngClasses()\"\n >\n <div class=\"ard-input-container\">\n @if (shouldDisplayPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n </ng-template>\n\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n <div class=\"ard-file-input__value\">\n @if (currentViewState() === 'idle') {\n <ng-template\n [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n [ngTemplateOutletContext]=\"getIdleContext()\"\n />\n }\n @if (currentViewState() === 'dragover') {\n <ng-template\n [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n [ngTemplateOutletContext]=\"getDragoverContext()\"\n />\n }\n @if (currentViewState() === 'uploaded') {\n <ng-template\n [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n [ngTemplateOutletContext]=\"getUploadedContext()\"\n />\n }\n </div>\n </div>\n\n @if (shouldShowClearButton) {\n <ard-clear-button\n #focusableElement\n [title]=\"clearButtonTitle()\"\n (mouseup)=\"onClearButtonClick($event)\"\n />\n }\n @if (!shouldBeBlocked) {\n <button\n #focusableElement\n type=\"button\"\n class=\"ard-browse-button\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"openBrowseDialog()\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <ard-icon>folder</ard-icon>\n </button>\n }\n </div>\n</ard-form-field-frame>\n\n<input\n #fileInput\n class=\"ard-file-input__input\"\n type=\"file\"\n [name]=\"name()\"\n [multiple]=\"multiple()\"\n [attr.id]=\"htmlId()\"\n (change)=\"onInputChange()\"\n/>\n\n<ng-template\n #defaultIdleTemplate\n let-browse=\"browse\"\n>\n <span class=\"ard-file-input__idle\">\n @if (multiple()) {\n <span>Upload a file</span>\n } @else {\n <span>Upload files</span>\n }\n </span>\n</ng-template>\n\n<ng-template\n #defaultDragoverTemplate\n let-amount=\"amount\"\n>\n <span class=\"ard-file-input__dragover-text\">Drop </span>\n @if (multiple()) {\n <span class=\"ard-file-input__dragover-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n } @else {\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\n }\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n #defaultUploadedTemplate\n let-amount=\"amount\"\n>\n <div class=\"ard-file-input__uploaded\">\n <span class=\"ard-file-input__uploaded-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\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: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { 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" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5080
5089
|
}
|
|
5081
5090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
|
|
5082
5091
|
type: Component,
|
|
@@ -5086,7 +5095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5086
5095
|
useExisting: forwardRef(() => ArdiumFileInputComponent),
|
|
5087
5096
|
multi: true,
|
|
5088
5097
|
},
|
|
5089
|
-
], template: "<ard-form-field-frame\n class=\"ard-file-input-form-field-frame\"\n [appearance]=\"appearance()\"\n [variant]=\"variant()\"\n [compact]=\"compact()\"\n [isFocused]=\"isFocused\"\n [prefixTemplate]=\"prefixTemplate\"\n [suffixTemplate]=\"suffixTemplate\"\n (dragover)=\"onDragover($event)\"\n (dragleave)=\"onDragleave()\"\n (drop)=\"onDrop($event)\"\n (ardClickOutside)=\"onDragleave()\"\n>\n <div\n class=\"ard-file-input\"\n [ngClass]=\"ngClasses()\"\n >\n <div class=\"ard-input-container\">\n @if (shouldDisplayPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n </ng-template>\n\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n <div class=\"ard-file-input__value\">\n @if (currentViewState() === 'idle') {\n <ng-template\n [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n [ngTemplateOutletContext]=\"getIdleContext()\"\n />\n }\n @if (currentViewState() === 'dragover') {\n <ng-template\n [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n [ngTemplateOutletContext]=\"getDragoverContext()\"\n />\n }\n @if (currentViewState() === 'uploaded') {\n <ng-template\n [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n [ngTemplateOutletContext]=\"getUploadedContext()\"\n />\n }\n </div>\n </div>\n\n @if (shouldShowClearButton) {\n <ard-clear-button\n #focusableElement\n [title]=\"clearButtonTitle()\"\n (mouseup)=\"onClearButtonClick($event)\"\n />\n }\n @if (!shouldBeBlocked) {\n <button\n #focusableElement\n type=\"button\"\n class=\"ard-browse-button\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"openBrowseDialog()\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <ard-icon>folder</ard-icon>\n </button>\n }\n </div>\n</ard-form-field-frame>\n\n<input\n #fileInput\n class=\"ard-file-input__input\"\n type=\"file\"\n [name]=\"name()\"\n [multiple]=\"multiple()\"\n [attr.id]=\"htmlId()\"\n (change)=\"onInputChange()\"\n/>\n\n<ng-template\n #defaultIdleTemplate\n let-browse=\"browse\"\n>\n <span class=\"ard-file-input__idle\">\n @if (multiple()) {\n <span>Upload a file</span>\n } @else {\n <span>Upload files</span>\n }\n </span>\n</ng-template>\n\n<ng-template\n #defaultDragoverTemplate\n let-amount=\"amount\"\n>\n <span class=\"ard-file-input__dragover-text\">Drop </span>\n @if (multiple()) {\n <span class=\"ard-file-input__dragover-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n } @else {\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\n }\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n #defaultUploadedTemplate\n let-amount=\"amount\"\n>\n <div class=\"ard-file-input__uploaded\">\n <span class=\"ard-file-input__uploaded-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
|
|
5098
|
+
], template: "<ard-form-field-frame\n class=\"ard-file-input-form-field-frame\"\n [appearance]=\"appearance()\"\n [variant]=\"variant()\"\n [compact]=\"compact()\"\n [isFocused]=\"isFocused()\"\n [prefixTemplate]=\"prefixTemplate\"\n [suffixTemplate]=\"suffixTemplate\"\n (dragover)=\"onDragover($event)\"\n (dragleave)=\"onDragleave()\"\n (drop)=\"onDrop($event)\"\n (ardClickOutside)=\"onDragleave()\"\n>\n <div\n class=\"ard-file-input\"\n [ngClass]=\"ngClasses()\"\n >\n <div class=\"ard-input-container\">\n @if (shouldDisplayPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n </ng-template>\n\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n <div class=\"ard-file-input__value\">\n @if (currentViewState() === 'idle') {\n <ng-template\n [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n [ngTemplateOutletContext]=\"getIdleContext()\"\n />\n }\n @if (currentViewState() === 'dragover') {\n <ng-template\n [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n [ngTemplateOutletContext]=\"getDragoverContext()\"\n />\n }\n @if (currentViewState() === 'uploaded') {\n <ng-template\n [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n [ngTemplateOutletContext]=\"getUploadedContext()\"\n />\n }\n </div>\n </div>\n\n @if (shouldShowClearButton) {\n <ard-clear-button\n #focusableElement\n [title]=\"clearButtonTitle()\"\n (mouseup)=\"onClearButtonClick($event)\"\n />\n }\n @if (!shouldBeBlocked) {\n <button\n #focusableElement\n type=\"button\"\n class=\"ard-browse-button\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"openBrowseDialog()\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <ard-icon>folder</ard-icon>\n </button>\n }\n </div>\n</ard-form-field-frame>\n\n<input\n #fileInput\n class=\"ard-file-input__input\"\n type=\"file\"\n [name]=\"name()\"\n [multiple]=\"multiple()\"\n [attr.id]=\"htmlId()\"\n (change)=\"onInputChange()\"\n/>\n\n<ng-template\n #defaultIdleTemplate\n let-browse=\"browse\"\n>\n <span class=\"ard-file-input__idle\">\n @if (multiple()) {\n <span>Upload a file</span>\n } @else {\n <span>Upload files</span>\n }\n </span>\n</ng-template>\n\n<ng-template\n #defaultDragoverTemplate\n let-amount=\"amount\"\n>\n <span class=\"ard-file-input__dragover-text\">Drop </span>\n @if (multiple()) {\n <span class=\"ard-file-input__dragover-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n } @else {\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\n }\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n #defaultUploadedTemplate\n let-amount=\"amount\"\n>\n <div class=\"ard-file-input__uploaded\">\n <span class=\"ard-file-input__uploaded-amount\">\n {{ amount }}\n <ng-container [ngPlural]=\"amount\">\n <ng-template ngPluralCase=\"=1\">file</ng-template>\n <ng-template ngPluralCase=\"other\">files</ng-template>\n </ng-container>\n </span>\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
|
|
5090
5099
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5091
5100
|
type: Inject,
|
|
5092
5101
|
args: [ARD_FILE_INPUT_DEFAULTS]
|
|
@@ -5433,7 +5442,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
|
|
|
5433
5442
|
provide: _FormFieldComponentBase,
|
|
5434
5443
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
5435
5444
|
},
|
|
5436
|
-
], 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 [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 <div\r\n class=\"ard-hash-container\"\r\n *ngIf=\"showHash\"\r\n >\r\n #\r\n </div>\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 (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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5445
|
+
], 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 [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 <div\r\n class=\"ard-hash-container\"\r\n *ngIf=\"showHash\"\r\n >\r\n #\r\n </div>\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 (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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 }); }
|
|
5437
5446
|
}
|
|
5438
5447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
|
|
5439
5448
|
type: Component,
|
|
@@ -5447,7 +5456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5447
5456
|
provide: _FormFieldComponentBase,
|
|
5448
5457
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
5449
5458
|
},
|
|
5450
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\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 <div\r\n class=\"ard-hash-container\"\r\n *ngIf=\"showHash\"\r\n >\r\n #\r\n </div>\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 (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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
|
|
5459
|
+
], 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 [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 <div\r\n class=\"ard-hash-container\"\r\n *ngIf=\"showHash\"\r\n >\r\n #\r\n </div>\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 (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-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
|
|
5451
5460
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5452
5461
|
type: Inject,
|
|
5453
5462
|
args: [ARD_HEX_INPUT_DEFAULTS]
|
|
@@ -5718,7 +5727,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
5718
5727
|
provide: _FormFieldComponentBase,
|
|
5719
5728
|
useExisting: ArdiumNumberInputComponent,
|
|
5720
5729
|
},
|
|
5721
|
-
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, 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-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 (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\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 [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 (!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 (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n (ardHold)=\"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-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;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.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5730
|
+
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, 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 (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\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 [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 (!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 (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n (ardHold)=\"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-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;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.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5722
5731
|
}
|
|
5723
5732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
|
|
5724
5733
|
type: Component,
|
|
@@ -5732,7 +5741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5732
5741
|
provide: _FormFieldComponentBase,
|
|
5733
5742
|
useExisting: ArdiumNumberInputComponent,
|
|
5734
5743
|
},
|
|
5735
|
-
], template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\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 (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\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 [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 (!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 (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n (ardHold)=\"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-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;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"] }]
|
|
5744
|
+
], 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 (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\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 [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 (!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 (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n (ardHold)=\"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-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;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"] }]
|
|
5736
5745
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5737
5746
|
type: Inject,
|
|
5738
5747
|
args: [ARD_NUMBER_INPUT_DEFAULTS]
|
|
@@ -6731,7 +6740,7 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
|
|
|
6731
6740
|
}
|
|
6732
6741
|
}
|
|
6733
6742
|
_toggleHighlightedItems(event) {
|
|
6734
|
-
if (!this.isFocused)
|
|
6743
|
+
if (!this.isFocused())
|
|
6735
6744
|
return;
|
|
6736
6745
|
event.preventDefault();
|
|
6737
6746
|
const highlightedItems = this.highlightedItems();
|
|
@@ -6743,28 +6752,28 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
|
|
|
6743
6752
|
}
|
|
6744
6753
|
}
|
|
6745
6754
|
_highlightPrevious(event) {
|
|
6746
|
-
if (!this.isFocused)
|
|
6755
|
+
if (!this.isFocused())
|
|
6747
6756
|
return;
|
|
6748
6757
|
event.preventDefault();
|
|
6749
6758
|
this.isMouseBeingUsed.set(false);
|
|
6750
6759
|
this.itemStorage.highlightNextItem(-1, event.shiftKey);
|
|
6751
6760
|
}
|
|
6752
6761
|
_highlightNext(event) {
|
|
6753
|
-
if (!this.isFocused)
|
|
6762
|
+
if (!this.isFocused())
|
|
6754
6763
|
return;
|
|
6755
6764
|
event.preventDefault();
|
|
6756
6765
|
this.isMouseBeingUsed.set(false);
|
|
6757
6766
|
this.itemStorage.highlightNextItem(+1, event.shiftKey);
|
|
6758
6767
|
}
|
|
6759
6768
|
_highlightFirst(event) {
|
|
6760
|
-
if (!this.isFocused)
|
|
6769
|
+
if (!this.isFocused())
|
|
6761
6770
|
return;
|
|
6762
6771
|
event.preventDefault();
|
|
6763
6772
|
this.isMouseBeingUsed.set(false);
|
|
6764
6773
|
this.itemStorage.highlightFirstItem();
|
|
6765
6774
|
}
|
|
6766
6775
|
_highlightLast(event) {
|
|
6767
|
-
if (!this.isFocused)
|
|
6776
|
+
if (!this.isFocused())
|
|
6768
6777
|
return;
|
|
6769
6778
|
event.preventDefault();
|
|
6770
6779
|
this.isMouseBeingUsed.set(false);
|
|
@@ -6933,11 +6942,11 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
|
|
|
6933
6942
|
this.itemStorage.unhighlightAll();
|
|
6934
6943
|
}
|
|
6935
6944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, deps: [{ token: ARD_SEGMENT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconBased: { classPropertyName: "iconBased", publicName: "iconBased", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, uniformWidths: { classPropertyName: "uniformWidths", publicName: "uniformWidths", isSignal: true, isRequired: false, transformFunction: null }, itemsPerRow: { classPropertyName: "itemsPerRow", publicName: "itemsPerRow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n #focusableElement\n class=\"ard-segment-container\"\n [class.ard-disabled]=\"disabled()\"\n [ariaDisabled]=\"disabled()\"\n [ngClass]=\"ngClasses()\"\n [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\n [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n [attr.tabindex]=\"tabIndex()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n>\n @for (row of itemRows(); track $index) {\n <div\n class=\"ard-segment-row\"\n [class.ard-segment-row-partial]=\"row.isNotFull\"\n [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n >\n @for (option of row.options; track $index) {\n <button\n type=\"button\"\n class=\"ard-segment-option\"\n tabindex=\"-1\"\n [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n [class.ard-option-selected]=\"option.selected()\"\n [class.ard-option-highlighted]=\"option.highlighted()\"\n [ariaSelected]=\"option.selected()\"\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\n (click)=\"onItemClick(option, $event)\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-button-content\">\n <span class=\"ard-option-label\">\n <ng-template #defaultOptionTemplate>\n {{ option.label() }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\n />\n </span>\n </div>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconBased: { classPropertyName: "iconBased", publicName: "iconBased", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, uniformWidths: { classPropertyName: "uniformWidths", publicName: "uniformWidths", isSignal: true, isRequired: false, transformFunction: null }, itemsPerRow: { classPropertyName: "itemsPerRow", publicName: "itemsPerRow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n #focusableElement\n class=\"ard-segment-container\"\n [class.ard-disabled]=\"disabled()\"\n [ariaDisabled]=\"disabled()\"\n [ngClass]=\"ngClasses()\"\n [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n [attr.tabindex]=\"tabIndex()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n>\n @for (row of itemRows(); track $index) {\n <div\n class=\"ard-segment-row\"\n [class.ard-segment-row-partial]=\"row.isNotFull\"\n [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n >\n @for (option of row.options; track $index) {\n <button\n type=\"button\"\n class=\"ard-segment-option\"\n tabindex=\"-1\"\n [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n [class.ard-option-selected]=\"option.selected()\"\n [class.ard-option-highlighted]=\"option.highlighted()\"\n [ariaSelected]=\"option.selected()\"\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\n (click)=\"onItemClick(option, $event)\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-button-content\">\n <span class=\"ard-option-label\">\n <ng-template #defaultOptionTemplate>\n {{ option.label() }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\n />\n </span>\n </div>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6937
6946
|
}
|
|
6938
6947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
|
|
6939
6948
|
type: Component,
|
|
6940
|
-
args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #focusableElement\n class=\"ard-segment-container\"\n [class.ard-disabled]=\"disabled()\"\n [ariaDisabled]=\"disabled()\"\n [ngClass]=\"ngClasses()\"\n [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\n [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n [attr.tabindex]=\"tabIndex()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n>\n @for (row of itemRows(); track $index) {\n <div\n class=\"ard-segment-row\"\n [class.ard-segment-row-partial]=\"row.isNotFull\"\n [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n >\n @for (option of row.options; track $index) {\n <button\n type=\"button\"\n class=\"ard-segment-option\"\n tabindex=\"-1\"\n [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n [class.ard-option-selected]=\"option.selected()\"\n [class.ard-option-highlighted]=\"option.highlighted()\"\n [ariaSelected]=\"option.selected()\"\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\n (click)=\"onItemClick(option, $event)\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-button-content\">\n <span class=\"ard-option-label\">\n <ng-template #defaultOptionTemplate>\n {{ option.label() }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\n />\n </span>\n </div>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
|
|
6949
|
+
args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #focusableElement\n class=\"ard-segment-container\"\n [class.ard-disabled]=\"disabled()\"\n [ariaDisabled]=\"disabled()\"\n [ngClass]=\"ngClasses()\"\n [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n [attr.tabindex]=\"tabIndex()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n>\n @for (row of itemRows(); track $index) {\n <div\n class=\"ard-segment-row\"\n [class.ard-segment-row-partial]=\"row.isNotFull\"\n [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n >\n @for (option of row.options; track $index) {\n <button\n type=\"button\"\n class=\"ard-segment-option\"\n tabindex=\"-1\"\n [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n [class.ard-option-selected]=\"option.selected()\"\n [class.ard-option-highlighted]=\"option.highlighted()\"\n [ariaSelected]=\"option.selected()\"\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\n (click)=\"onItemClick(option, $event)\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-button-content\">\n <span class=\"ard-option-label\">\n <ng-template #defaultOptionTemplate>\n {{ option.label() }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\n />\n </span>\n </div>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
|
|
6941
6950
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6942
6951
|
type: Inject,
|
|
6943
6952
|
args: [ARD_SEGMENT_DEFAULTS]
|
|
@@ -8759,11 +8768,11 @@ class ArdiumFormFieldComponent {
|
|
|
8759
8768
|
}
|
|
8760
8769
|
}
|
|
8761
8770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8771
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8763
8772
|
}
|
|
8764
8773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
|
|
8765
8774
|
type: Component,
|
|
8766
|
-
args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
|
|
8775
|
+
args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
|
|
8767
8776
|
}] });
|
|
8768
8777
|
|
|
8769
8778
|
class ArdiumHintComponent {
|
|
@@ -8797,11 +8806,11 @@ class ArdiumHorizontalFormFieldComponent {
|
|
|
8797
8806
|
}
|
|
8798
8807
|
}
|
|
8799
8808
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8800
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8801
8810
|
}
|
|
8802
8811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
|
|
8803
8812
|
type: Component,
|
|
8804
|
-
args: [{ selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
|
|
8813
|
+
args: [{ selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"controlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
|
|
8805
8814
|
}] });
|
|
8806
8815
|
|
|
8807
8816
|
class ArdiumFormFieldModule {
|