@ardium-ui/ui 5.0.0-alpha.5 → 5.0.0-alpha.7

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.
@@ -783,6 +783,7 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
783
783
  this.maxLength = input(this._DEFAULTS.maxLength, {
784
784
  transform: v => coerceNumberProperty(v, this._DEFAULTS.maxLength),
785
785
  });
786
+ this.maxLengthAsInt = computed(() => this.maxLength() ?? 2_147_483_647);
786
787
  //! no-value attribute setters/getters
787
788
  this.clearable = input(this._DEFAULTS.clearable, { transform: v => coerceBooleanProperty(v) });
788
789
  //! value two-way binding
@@ -1412,7 +1413,7 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
1412
1413
  provide: ARD_FORM_FIELD_CONTROL,
1413
1414
  useExisting: ArdiumAutocompleteInputComponent,
1414
1415
  },
1415
- ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdAutocompleteInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdAutocompleteInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdAutocompleteInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdAutocompleteInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdAutocompleteInputLoadingTemplateDirective, 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-autocomplete-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 [maxLength]=\"maxLength()\"\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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1416
+ ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdAutocompleteInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdAutocompleteInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdAutocompleteInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdAutocompleteInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdAutocompleteInputLoadingTemplateDirective, 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-autocomplete-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 [maxLength]=\"maxLengthAsInt()\"\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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1416
1417
  }
1417
1418
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumAutocompleteInputComponent, decorators: [{
1418
1419
  type: Component,
@@ -1426,7 +1427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
1426
1427
  provide: ARD_FORM_FIELD_CONTROL,
1427
1428
  useExisting: ArdiumAutocompleteInputComponent,
1428
1429
  },
1429
- ], 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-autocomplete-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 [maxLength]=\"maxLength()\"\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"] }]
1430
+ ], 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-autocomplete-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 [maxLength]=\"maxLengthAsInt()\"\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"] }]
1430
1431
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1431
1432
  type: Inject,
1432
1433
  args: [ARD_AUTOCOMPLETE_INPUT_DEFAULTS]
@@ -2186,7 +2187,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
2186
2187
  provide: ARD_FORM_FIELD_CONTROL,
2187
2188
  useExisting: ArdiumInputComponent,
2188
2189
  },
2189
- ], 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 }], 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 [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 [maxLength]=\"maxLength()\"\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 }); }
2190
+ ], 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 }], 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 [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 [maxLength]=\"maxLengthAsInt()\"\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 }); }
2190
2191
  }
2191
2192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumInputComponent, decorators: [{
2192
2193
  type: Component,
@@ -2200,7 +2201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2200
2201
  provide: ARD_FORM_FIELD_CONTROL,
2201
2202
  useExisting: ArdiumInputComponent,
2202
2203
  },
2203
- ], 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 [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 [maxLength]=\"maxLength()\"\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"] }]
2204
+ ], 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 [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 [maxLength]=\"maxLengthAsInt()\"\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"] }]
2204
2205
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2205
2206
  type: Inject,
2206
2207
  args: [ARD_SIMPLE_INPUT_DEFAULTS]
@@ -8063,6 +8064,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
8063
8064
  this.maxDigits = input(this._DEFAULTS.maxDigits, {
8064
8065
  transform: v => coerceNumberProperty(v, this._DEFAULTS.maxDigits),
8065
8066
  });
8067
+ this.maxDigitsAsInt = computed(() => this.maxDigits() ?? 2_147_483_647);
8066
8068
  this.hideHash = input(this._DEFAULTS.hideHash, { transform: v => coerceBooleanProperty(v) });
8067
8069
  this.showHash = computed(() => !this.hideHash());
8068
8070
  //! clear button
@@ -8184,7 +8186,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
8184
8186
  provide: ARD_FORM_FIELD_CONTROL,
8185
8187
  useExisting: forwardRef(() => ArdiumHexInputComponent),
8186
8188
  },
8187
- ], 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 @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigits()\"\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.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 }); }
8189
+ ], 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 @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigitsAsInt()\"\r\n (input)=\"onInput(textInput.value, $event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-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.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 }); }
8188
8190
  }
8189
8191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
8190
8192
  type: Component,
@@ -8198,7 +8200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
8198
8200
  provide: ARD_FORM_FIELD_CONTROL,
8199
8201
  useExisting: forwardRef(() => ArdiumHexInputComponent),
8200
8202
  },
8201
- ], 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 @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigits()\"\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"] }]
8203
+ ], 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 @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxDigitsAsInt()\"\r\n (input)=\"onInput(textInput.value, $event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (change)=\"onChange($event)\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-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"] }]
8202
8204
  }], ctorParameters: () => [{ type: undefined, decorators: [{
8203
8205
  type: Inject,
8204
8206
  args: [ARD_HEX_INPUT_DEFAULTS]
@@ -11804,11 +11806,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11804
11806
 
11805
11807
  class ArdiumFormFieldComponent extends _FormFieldBase {
11806
11808
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11807
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11809
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11808
11810
  }
11809
11811
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
11810
11812
  type: Component,
11811
- args: [{ standalone: false, 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]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
11813
+ args: [{ standalone: false, 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]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
11812
11814
  }] });
11813
11815
 
11814
11816
  class ArdiumHintErrorComponent {
@@ -11841,11 +11843,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11841
11843
 
11842
11844
  class ArdiumHorizontalFormFieldComponent extends _FormFieldBase {
11843
11845
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11844
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11846
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11845
11847
  }
11846
11848
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
11847
11849
  type: Component,
11848
- args: [{ standalone: false, 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]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
11850
+ args: [{ standalone: false, 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]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\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__errors]=\"hasAnyError()\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine() || hasAnyHint()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n <ng-template [ngTemplateOutlet]=\"leftHintErrors\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n <ng-template [ngTemplateOutlet]=\"defaultHintErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n <ng-template [ngTemplateOutlet]=\"rightHintErrors\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultHintErrors>\r\n <ng-content select=\"ard-hint-error:not([left]):not([right]), [ard-hint-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n<ng-template #leftHintErrors>\r\n <ng-content select=\"ard-hint-error[left], [ard-hint-error][left]\" />\r\n</ng-template>\r\n<ng-template #rightHintErrors>\r\n <ng-content select=\"ard-hint-error[right], [ard-hint-error][right]\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:flex;flex-direction:column}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
11849
11851
  }] });
11850
11852
 
11851
11853
  class ArdiumFormFieldModule {