@ardium-ui/ui 5.0.0-alpha.83 → 5.0.0-alpha.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ardium-ui-ui.mjs +35 -38
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/ngmodel-component.d.ts +3 -1
- package/lib/inputs/_simple-input-base.d.ts +1 -2
- package/lib/inputs/hex-input/hex-input.component.d.ts +1 -2
- package/lib/inputs/number-input/number-input.component.d.ts +1 -2
- package/lib/inputs/password-input/password-input.component.d.ts +1 -2
- package/lib/radio/radio-group.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import * as i4 from '@ardium-ui/devkit';
|
|
|
8
8
|
import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackFormControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateProperty, ArdiumHoldModule } from '@ardium-ui/devkit';
|
|
9
9
|
import { isDefined, any, isPrimitive, isAnyString, isNull, isNumber, isString, isArray, isFunction, isRegExp, evaluate, isObject, isPromise, isDate } from 'simple-bool';
|
|
10
10
|
import { resolvePath } from 'resolve-object-path';
|
|
11
|
-
import { TakeChance } from 'take-chance';
|
|
11
|
+
import TakeChance$1, { TakeChance } from 'take-chance';
|
|
12
12
|
import * as i1 from '@angular/common';
|
|
13
13
|
import { CommonModule, DatePipe, UpperCasePipe, TitleCasePipe, DATE_PIPE_DEFAULT_OPTIONS, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
14
14
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
@@ -388,6 +388,7 @@ class _NgModelComponentBase extends _FocusableComponentBase {
|
|
|
388
388
|
//! form field related
|
|
389
389
|
this.control = trackFormControl(this);
|
|
390
390
|
this.htmlId = input(TakeChance.id());
|
|
391
|
+
this.htmlName = input(undefined);
|
|
391
392
|
this._hasError = input(undefined, {
|
|
392
393
|
transform: v => coerceBooleanProperty(v),
|
|
393
394
|
alias: 'hasError',
|
|
@@ -441,7 +442,7 @@ class _NgModelComponentBase extends _FocusableComponentBase {
|
|
|
441
442
|
this.control.destroy();
|
|
442
443
|
}
|
|
443
444
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _NgModelComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
444
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _NgModelComponentBase, isStandalone: true, inputs: { 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 }); }
|
|
445
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _NgModelComponentBase, isStandalone: true, inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, htmlName: { classPropertyName: "htmlName", publicName: "htmlName", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
445
446
|
}
|
|
446
447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _NgModelComponentBase, decorators: [{
|
|
447
448
|
type: Directive
|
|
@@ -841,7 +842,6 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
|
|
|
841
842
|
this.inputModel = new InputModel(this);
|
|
842
843
|
this._wasViewInit = false;
|
|
843
844
|
this.placeholder = input(this._DEFAULTS.placeholder);
|
|
844
|
-
this.inputId = input(undefined);
|
|
845
845
|
this.clearButtonTitle = input(this._DEFAULTS.clearButtonTitle);
|
|
846
846
|
this.shouldDisplayPlaceholder = computed(() => Boolean(this.placeholder()) && !this.inputModel.value());
|
|
847
847
|
//! appearance
|
|
@@ -966,7 +966,7 @@ class _SimpleInputComponentBase extends _FormFieldComponentBase {
|
|
|
966
966
|
}
|
|
967
967
|
}
|
|
968
968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _SimpleInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
969
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _SimpleInputComponentBase, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null },
|
|
969
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _SimpleInputComponentBase, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, autoTrim: { classPropertyName: "autoTrim", publicName: "autoTrim", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
970
970
|
}
|
|
971
971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _SimpleInputComponentBase, decorators: [{
|
|
972
972
|
type: Directive
|
|
@@ -1503,7 +1503,7 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
|
|
|
1503
1503
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
1504
1504
|
useExisting: ArdiumAutocompleteInputComponent,
|
|
1505
1505
|
},
|
|
1506
|
-
], 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 [readonly]=\"readonly()\"\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]=\"
|
|
1506
|
+
], 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 [readonly]=\"readonly()\"\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]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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]=\"optionContextGenerator()(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: ["@layer ard-ui{ard-autocomplete-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-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.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1507
1507
|
}
|
|
1508
1508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumAutocompleteInputComponent, decorators: [{
|
|
1509
1509
|
type: Component,
|
|
@@ -1517,7 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1517
1517
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
1518
1518
|
useExisting: ArdiumAutocompleteInputComponent,
|
|
1519
1519
|
},
|
|
1520
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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]=\"
|
|
1520
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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]=\"optionContextGenerator()(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: ["@layer ard-ui{ard-autocomplete-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-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"] }]
|
|
1521
1521
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1522
1522
|
type: Inject,
|
|
1523
1523
|
args: [ARD_AUTOCOMPLETE_INPUT_DEFAULTS]
|
|
@@ -2268,7 +2268,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
|
|
|
2268
2268
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
2269
2269
|
useExisting: ArdiumInputComponent,
|
|
2270
2270
|
},
|
|
2271
|
-
], 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 [readonly]=\"readonly()\"\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]=\"
|
|
2271
|
+
], 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 [readonly]=\"readonly()\"\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]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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: ["@layer ard-ui{ard-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-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 }); }
|
|
2272
2272
|
}
|
|
2273
2273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumInputComponent, decorators: [{
|
|
2274
2274
|
type: Component,
|
|
@@ -2282,7 +2282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2282
2282
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
2283
2283
|
useExisting: ArdiumInputComponent,
|
|
2284
2284
|
},
|
|
2285
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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]=\"
|
|
2285
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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: ["@layer ard-ui{ard-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-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"] }]
|
|
2286
2286
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2287
2287
|
type: Inject,
|
|
2288
2288
|
args: [ARD_SIMPLE_INPUT_DEFAULTS]
|
|
@@ -2472,7 +2472,6 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
|
|
|
2472
2472
|
//! input view
|
|
2473
2473
|
this.textInputEl = viewChild('textInput');
|
|
2474
2474
|
this.placeholder = input(this._DEFAULTS.placeholder);
|
|
2475
|
-
this.inputId = input();
|
|
2476
2475
|
//! prefix & suffix
|
|
2477
2476
|
this.prefixTemplate = contentChild(ArdPasswordInputPrefixTemplateDirective);
|
|
2478
2477
|
this.suffixTemplate = contentChild(ArdPasswordInputSuffixTemplateDirective);
|
|
@@ -2596,7 +2595,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
|
|
|
2596
2595
|
}
|
|
2597
2596
|
}
|
|
2598
2597
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumPasswordInputComponent, deps: [{ token: ARD_PASSWORD_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2599
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumPasswordInputComponent, isStandalone: false, selector: "ard-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null },
|
|
2598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumPasswordInputComponent, isStandalone: false, selector: "ard-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, holdToReveal: { classPropertyName: "holdToReveal", publicName: "holdToReveal", isSignal: true, isRequired: false, transformFunction: null }, autoHideTimeoutMs: { classPropertyName: "autoHideTimeoutMs", publicName: "autoHideTimeoutMs", isSignal: true, isRequired: false, transformFunction: null }, revealed: { classPropertyName: "revealed", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { revealed: "revealedChange", value: "valueChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [
|
|
2600
2599
|
{
|
|
2601
2600
|
provide: NG_VALUE_ACCESSOR,
|
|
2602
2601
|
useExisting: forwardRef(() => ArdiumPasswordInputComponent),
|
|
@@ -2606,7 +2605,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
|
|
|
2606
2605
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
2607
2606
|
useExisting: ArdiumPasswordInputComponent,
|
|
2608
2607
|
},
|
|
2609
|
-
], 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 [readonly]=\"readonly()\"\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]=\"
|
|
2608
|
+
], 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 [readonly]=\"readonly()\"\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]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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 >\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: ["@layer ard-ui{ard-password-input{display:block}}\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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2610
2609
|
}
|
|
2611
2610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
|
|
2612
2611
|
type: Component,
|
|
@@ -2620,7 +2619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2620
2619
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
2621
2620
|
useExisting: ArdiumPasswordInputComponent,
|
|
2622
2621
|
},
|
|
2623
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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]=\"
|
|
2622
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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 >\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: ["@layer ard-ui{ard-password-input{display:block}}\n"] }]
|
|
2624
2623
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2625
2624
|
type: Inject,
|
|
2626
2625
|
args: [ARD_PASSWORD_INPUT_DEFAULTS]
|
|
@@ -4664,7 +4663,7 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
|
|
|
4664
4663
|
useExisting: forwardRef(() => ArdiumSelectableChipComponent),
|
|
4665
4664
|
multi: true,
|
|
4666
4665
|
},
|
|
4667
|
-
], usesInheritance: true, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"ard-chip-wrapper ard-chip-selectable\"\r\n [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n [ngClass]=\"ngClasses()\"\r\n [title]=\"chipTitle()\"\r\n [tabindex]=\"tabIndex()\"\r\n (click)=\"toggleSelected()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div\r\n class=\"ard-chip-selection-icon\"\r\n role=\"img\"\r\n ></div>\r\n <div class=\"ard-chip-content-wrapper\">\r\n <ng-content></ng-content>\r\n </div>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4666
|
+
], usesInheritance: true, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"ard-chip-wrapper ard-chip-selectable\"\r\n role=\"checkbox\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [ngClass]=\"ngClasses()\"\r\n [title]=\"chipTitle()\"\r\n [tabindex]=\"tabIndex()\"\r\n (click)=\"toggleSelected()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div\r\n class=\"ard-chip-selection-icon\"\r\n role=\"img\"\r\n ></div>\r\n <div class=\"ard-chip-content-wrapper\">\r\n <ng-content></ng-content>\r\n </div>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4668
4667
|
}
|
|
4669
4668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
|
|
4670
4669
|
type: Component,
|
|
@@ -4674,7 +4673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4674
4673
|
useExisting: forwardRef(() => ArdiumSelectableChipComponent),
|
|
4675
4674
|
multi: true,
|
|
4676
4675
|
},
|
|
4677
|
-
], template: "<button\r\n type=\"button\"\r\n class=\"ard-chip-wrapper ard-chip-selectable\"\r\n [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n [ngClass]=\"ngClasses()\"\r\n [title]=\"chipTitle()\"\r\n [tabindex]=\"tabIndex()\"\r\n (click)=\"toggleSelected()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div\r\n class=\"ard-chip-selection-icon\"\r\n role=\"img\"\r\n ></div>\r\n <div class=\"ard-chip-content-wrapper\">\r\n <ng-content></ng-content>\r\n </div>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}}\n"] }]
|
|
4676
|
+
], template: "<button\r\n type=\"button\"\r\n class=\"ard-chip-wrapper ard-chip-selectable\"\r\n role=\"checkbox\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [ngClass]=\"ngClasses()\"\r\n [title]=\"chipTitle()\"\r\n [tabindex]=\"tabIndex()\"\r\n (click)=\"toggleSelected()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div\r\n class=\"ard-chip-selection-icon\"\r\n role=\"img\"\r\n ></div>\r\n <div class=\"ard-chip-content-wrapper\">\r\n <ng-content></ng-content>\r\n </div>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-chip,ard-deletable-chip,ard-selectable-chip{display:block}.ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}}\n"] }]
|
|
4678
4677
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4679
4678
|
type: Inject,
|
|
4680
4679
|
args: [ARD_SELECTABLE_CHIP_DEFAULTS]
|
|
@@ -5465,11 +5464,11 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
|
|
|
5465
5464
|
};
|
|
5466
5465
|
}
|
|
5467
5466
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: [{ token: ARD_FILE_DROP_AREA_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFileDropAreaComponent, isStandalone: false, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [
|
|
5467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFileDropAreaComponent, isStandalone: false, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n <strong class=\"ard-file-drop-area-drop-text\">\r\n @if (!multiple) {\r\n <span>Drag & Drop a file</span>\r\n } @else {\r\n <span>Drag & Drop files</span>\r\n } here\r\n </strong>\r\n <span class=\"ard-file-drop-area-or-text\">or</span>\r\n <ard-button\r\n class=\"ard-file-drop-area-browse-button\"\r\n appearance=\"transparent\"\r\n [compact]=\"compact()\"\r\n [variant]=\"variant()\"\r\n [color]=\"color()\"\r\n (click)=\"browse()\"\r\n >\r\n Browse files\r\n </ard-button>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n <span class=\"ard-file-drop-area-dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n @if (amount > 1 && !multiple()) {\r\n <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n }\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-drop-area-uploaded-container\">\r\n <div class=\"ard-file-drop-area-uploaded-message\">\r\n <span class=\"ard-file-drop-area-uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n </div>\r\n <div class=\"ard-file-drop-area-uploaded-files\">\r\n @for (file of files; track $index) {\r\n <div class=\"ard-file-drop-area-file\">\r\n <ard-icon>draft</ard-icon>\r\n <div class=\"ard-file-drop-area-file-info\">\r\n <span class=\"ard-file-drop-area-filename\">\r\n <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext : true }}</span>\r\n </span>\r\n <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-file-drop-area{display:block}.ard-file-drop-area-input-element{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: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i4.ArdiumFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5469
5468
|
}
|
|
5470
5469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
|
|
5471
5470
|
type: Component,
|
|
5472
|
-
args: [{ standalone: false, selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [
|
|
5471
|
+
args: [{ standalone: false, selector: 'ard-file-drop-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-file-drop-area\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n (dragleave)=\"onDragleave()\"\r\n (dragover)=\"onDragover($event)\"\r\n (drop)=\"onDrop($event)\"\r\n [ngClass]=\"ngClasses\"\r\n>\r\n <div class=\"ard-file-drop-area-outline\">\r\n <div class=\"ard-file-drop-area-content\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<input\r\n #fileInput\r\n class=\"ard-file-drop-area-input-element\"\r\n type=\"file\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n <strong class=\"ard-file-drop-area-drop-text\">\r\n @if (!multiple) {\r\n <span>Drag & Drop a file</span>\r\n } @else {\r\n <span>Drag & Drop files</span>\r\n } here\r\n </strong>\r\n <span class=\"ard-file-drop-area-or-text\">or</span>\r\n <ard-button\r\n class=\"ard-file-drop-area-browse-button\"\r\n appearance=\"transparent\"\r\n [compact]=\"compact()\"\r\n [variant]=\"variant()\"\r\n [color]=\"color()\"\r\n (click)=\"browse()\"\r\n >\r\n Browse files\r\n </ard-button>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n <span class=\"ard-file-drop-area-dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n @if (amount > 1 && !multiple()) {\r\n <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n }\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-drop-area-uploaded-container\">\r\n <div class=\"ard-file-drop-area-uploaded-message\">\r\n <span class=\"ard-file-drop-area-uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n </div>\r\n <div class=\"ard-file-drop-area-uploaded-files\">\r\n @for (file of files; track $index) {\r\n <div class=\"ard-file-drop-area-file\">\r\n <ard-icon>draft</ard-icon>\r\n <div class=\"ard-file-drop-area-file-info\">\r\n <span class=\"ard-file-drop-area-filename\">\r\n <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext : true }}</span>\r\n </span>\r\n <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-file-drop-area{display:block}.ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}}\n"] }]
|
|
5473
5472
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5474
5473
|
type: Inject,
|
|
5475
5474
|
args: [ARD_FILE_DROP_AREA_DEFAULTS]
|
|
@@ -5726,7 +5725,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
|
|
|
5726
5725
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
5727
5726
|
useExisting: forwardRef(() => ArdiumFileInputComponent),
|
|
5728
5727
|
},
|
|
5729
|
-
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\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 <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [
|
|
5728
|
+
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\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 <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [accept]=\"acceptString()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <span class=\"ard-file-input__idle\">\r\n @if (multiple()) {\r\n <span>Upload a file</span>\r\n } @else {\r\n <span>Upload files</span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n @if (multiple()) {\r\n <span class=\"ard-file-input__dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n } @else {\r\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n }\r\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-input__uploaded\">\r\n @if (amount === 1) {\r\n <div class=\"ard-file-input__full-file-name\">\r\n <span class=\"ard-file-input__file-name\">\r\n {{ files?.[0]?.name | filename }}\r\n </span>\r\n <span class=\"ard-file-input__file-ext\">\r\n {{ files?.[0]?.name | fileext:true }}\r\n </span>\r\n </div>\r\n } @else {\r\n <span class=\"ard-file-input__uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-file-input{display:block}.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"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5730
5729
|
}
|
|
5731
5730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
|
|
5732
5731
|
type: Component,
|
|
@@ -5740,7 +5739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5740
5739
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
5741
5740
|
useExisting: forwardRef(() => ArdiumFileInputComponent),
|
|
5742
5741
|
},
|
|
5743
|
-
], template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\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 <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [
|
|
5742
|
+
], template: "<ard-form-field-frame\r\n class=\"ard-file-input-form-field-frame\"\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n (dragover)=\"onDragover($event)\"\r\n (dragleave)=\"onDragleave()\"\r\n (drop)=\"onDrop($event)\"\r\n (ardClickOutside)=\"onDragleave()\"\r\n>\r\n <div\r\n class=\"ard-file-input\"\r\n [ngClass]=\"ngClasses()\"\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 <div class=\"ard-file-input__value\">\r\n @if (currentViewState() === 'idle') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n [ngTemplateOutletContext]=\"getIdleContext()\"\r\n />\r\n } @if (currentViewState() === 'dragover') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n />\r\n } @if (currentViewState() === 'uploaded') {\r\n <ng-template\r\n [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (shouldShowClearButton) {\r\n <ard-clear-button\r\n #focusableElement\r\n [title]=\"clearButtonTitle()\"\r\n (mouseup)=\"onClearButtonClick($event)\"\r\n />\r\n } @if (!shouldBeBlocked) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-browse-button\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (click)=\"openBrowseDialog()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-icon>folder</ard-icon>\r\n </button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n #fileInput\r\n class=\"ard-file-input__input\"\r\n type=\"file\"\r\n [multiple]=\"multiple()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [accept]=\"acceptString()\"\r\n (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n #defaultIdleTemplate\r\n let-browse=\"browse\"\r\n>\r\n <span class=\"ard-file-input__idle\">\r\n @if (multiple()) {\r\n <span>Upload a file</span>\r\n } @else {\r\n <span>Upload files</span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultDragoverTemplate\r\n let-amount=\"amount\"\r\n>\r\n <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n @if (multiple()) {\r\n <span class=\"ard-file-input__dragover-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n } @else {\r\n <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n }\r\n <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n #defaultUploadedTemplate\r\n let-amount=\"amount\"\r\n let-files=\"files\"\r\n>\r\n <div class=\"ard-file-input__uploaded\">\r\n @if (amount === 1) {\r\n <div class=\"ard-file-input__full-file-name\">\r\n <span class=\"ard-file-input__file-name\">\r\n {{ files?.[0]?.name | filename }}\r\n </span>\r\n <span class=\"ard-file-input__file-ext\">\r\n {{ files?.[0]?.name | fileext:true }}\r\n </span>\r\n </div>\r\n } @else {\r\n <span class=\"ard-file-input__uploaded-amount\">\r\n {{ amount }}\r\n <ng-container [ngPlural]=\"amount\">\r\n <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n <ng-template ngPluralCase=\"other\">files</ng-template>\r\n </ng-container>\r\n </span>\r\n <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-file-input{display:block}.ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}}\n"] }]
|
|
5744
5743
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5745
5744
|
type: Inject,
|
|
5746
5745
|
args: [ARD_FILE_INPUT_DEFAULTS]
|
|
@@ -8714,7 +8713,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
|
|
|
8714
8713
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
8715
8714
|
useExisting: ArdiumDateInputComponent,
|
|
8716
8715
|
},
|
|
8717
|
-
], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], 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 [readonly]=\"readonly()\"\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-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ date }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\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 [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n
|
|
8716
|
+
], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], 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 [readonly]=\"readonly()\"\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-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ date }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\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 [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\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-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n autoFocus\r\n staticHeight\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [value]=\"value()\"\r\n [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n [yearDateFormat]=\"calendarYearDateFormat()\"\r\n [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n [dayDateFormat]=\"calendarDayDateFormat()\"\r\n (valueChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-accept=\"accept\"\r\n let-cancel=\"cancel\"\r\n let-disabled=\"disabled\"\r\n >\r\n <ard-button\r\n appearance=\"outlined\"\r\n color=\"none\"\r\n [disabled]=\"disabled\"\r\n (click)=\"cancel()\"\r\n >\r\n {{ cancelButtonText() }}\r\n </ard-button>\r\n <ard-button\r\n appearance=\"raised\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled\"\r\n (click)=\"accept()\"\r\n >\r\n {{ acceptButtonText() }}\r\n </ard-button>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display: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: "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: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8718
8717
|
}
|
|
8719
8718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
|
|
8720
8719
|
type: Component,
|
|
@@ -8728,7 +8727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
8728
8727
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
8729
8728
|
useExisting: ArdiumDateInputComponent,
|
|
8730
8729
|
},
|
|
8731
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ date }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\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 [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n
|
|
8730
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\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-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ date }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\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 [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\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-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n autoFocus\r\n staticHeight\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [value]=\"value()\"\r\n [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n [yearDateFormat]=\"calendarYearDateFormat()\"\r\n [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n [dayDateFormat]=\"calendarDayDateFormat()\"\r\n (valueChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-accept=\"accept\"\r\n let-cancel=\"cancel\"\r\n let-disabled=\"disabled\"\r\n >\r\n <ard-button\r\n appearance=\"outlined\"\r\n color=\"none\"\r\n [disabled]=\"disabled\"\r\n (click)=\"cancel()\"\r\n >\r\n {{ cancelButtonText() }}\r\n </ard-button>\r\n <ard-button\r\n appearance=\"raised\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled\"\r\n (click)=\"accept()\"\r\n >\r\n {{ acceptButtonText() }}\r\n </ard-button>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"] }]
|
|
8732
8731
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8733
8732
|
type: Inject,
|
|
8734
8733
|
args: [ARD_DATE_INPUT_DEFAULTS]
|
|
@@ -9740,7 +9739,6 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
|
|
|
9740
9739
|
this.textInputEl = viewChild('textInput');
|
|
9741
9740
|
this.inputModel = new HexInputModel(this);
|
|
9742
9741
|
this._wasViewInit = false;
|
|
9743
|
-
this.inputId = input();
|
|
9744
9742
|
//! prefix & suffix
|
|
9745
9743
|
this.prefixTemplate = contentChild(ArdHexInputPrefixTemplateDirective);
|
|
9746
9744
|
this.suffixTemplate = contentChild(ArdHexInputSuffixTemplateDirective);
|
|
@@ -9870,7 +9868,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
|
|
|
9870
9868
|
}
|
|
9871
9869
|
}
|
|
9872
9870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, deps: [{ token: ARD_HEX_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9873
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHexInputComponent, isStandalone: false, selector: "ard-hex-input", inputs: {
|
|
9871
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHexInputComponent, isStandalone: false, selector: "ard-hex-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, case: { classPropertyName: "case", publicName: "case", isSignal: true, isRequired: false, transformFunction: null }, maxDigits: { classPropertyName: "maxDigits", publicName: "maxDigits", isSignal: true, isRequired: false, transformFunction: null }, hideHash: { classPropertyName: "hideHash", publicName: "hideHash", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear" }, providers: [
|
|
9874
9872
|
{
|
|
9875
9873
|
provide: NG_VALUE_ACCESSOR,
|
|
9876
9874
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
@@ -9880,7 +9878,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
|
|
|
9880
9878
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
9881
9879
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
9882
9880
|
},
|
|
9883
|
-
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"
|
|
9881
|
+
], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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: ["@layer ard-ui{ard-hex-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9884
9882
|
}
|
|
9885
9883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
|
|
9886
9884
|
type: Component,
|
|
@@ -9894,7 +9892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
9894
9892
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
9895
9893
|
useExisting: forwardRef(() => ArdiumHexInputComponent),
|
|
9896
9894
|
},
|
|
9897
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"
|
|
9895
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-hex-input\"\r\n [class.ard-has-value]=\"value\"\r\n (mouseup)=\"onMouseup()\"\r\n >\r\n @if (showHash()) {\r\n <div class=\"ard-hash-container\">#</div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\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: ["@layer ard-ui{ard-hex-input{display:block}.ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}}\n"] }]
|
|
9898
9896
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
9899
9897
|
type: Inject,
|
|
9900
9898
|
args: [ARD_HEX_INPUT_DEFAULTS]
|
|
@@ -10001,7 +9999,6 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10001
9999
|
this.inputEl = viewChild('textInput');
|
|
10002
10000
|
this.inputModel = new NumberInputModel(this);
|
|
10003
10001
|
this._wasViewInit = false;
|
|
10004
|
-
this.inputId = input();
|
|
10005
10002
|
//! placeholder
|
|
10006
10003
|
this.placeholder = input(this._DEFAULTS.placeholder);
|
|
10007
10004
|
this.placeholderTemplate = contentChild(ArdNumberInputPlaceholderTemplateDirective);
|
|
@@ -10244,7 +10241,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10244
10241
|
}
|
|
10245
10242
|
}
|
|
10246
10243
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, deps: [{ token: ARD_NUMBER_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumNumberInputComponent, isStandalone: false, selector: "ard-number-input", inputs: {
|
|
10244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumNumberInputComponent, isStandalone: false, selector: "ard-number-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minMaxBehavior: { classPropertyName: "minMaxBehavior", publicName: "minMaxBehavior", isSignal: true, isRequired: false, transformFunction: null }, maxDecimalPlaces: { classPropertyName: "maxDecimalPlaces", publicName: "maxDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, fixedDecimalPlaces: { classPropertyName: "fixedDecimalPlaces", publicName: "fixedDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOnQuickChangeButton: { classPropertyName: "keepFocusOnQuickChangeButton", publicName: "keepFocusOnQuickChangeButton", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
|
|
10248
10245
|
{
|
|
10249
10246
|
provide: NG_VALUE_ACCESSOR,
|
|
10250
10247
|
useExisting: forwardRef(() => ArdiumNumberInputComponent),
|
|
@@ -10254,7 +10251,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
|
|
|
10254
10251
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
10255
10252
|
useExisting: ArdiumNumberInputComponent,
|
|
10256
10253
|
},
|
|
10257
|
-
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-number-input-wrapper\">\r\n @if (prefixTemplate()) {\r\n <div class=\"ard-number-input-prefix-container\">\r\n <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template\r\n #defaultPlaceholderTemplate\r\n let-plchldr\r\n >\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [attr.id]=\"
|
|
10254
|
+
], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-number-input-wrapper\">\r\n @if (prefixTemplate()) {\r\n <div class=\"ard-number-input-prefix-container\">\r\n <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template\r\n #defaultPlaceholderTemplate\r\n let-plchldr\r\n >\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (mousedown)=\"$event.stopPropagation()\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n @if (suffixTemplate()) {\r\n <div class=\"ard-number-input-suffix-container\">\r\n <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button increment\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canIncrement()\"\r\n [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n ardHoldSpaceKey\r\n >\r\n +\r\n </ard-button>\r\n }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-number-input{display:block}.ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10258
10255
|
}
|
|
10259
10256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
|
|
10260
10257
|
type: Component,
|
|
@@ -10268,7 +10265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
10268
10265
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
10269
10266
|
useExisting: ArdiumNumberInputComponent,
|
|
10270
10267
|
},
|
|
10271
|
-
], template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-number-input-wrapper\">\r\n @if (prefixTemplate()) {\r\n <div class=\"ard-number-input-prefix-container\">\r\n <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template\r\n #defaultPlaceholderTemplate\r\n let-plchldr\r\n >\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [attr.id]=\"
|
|
10268
|
+
], template: "<div\r\n class=\"ard-number-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n [class.ard-has-value]=\"value\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (mouseup)=\"onMouseup()\"\r\n>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button decrement\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canDecrement()\"\r\n [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n ardHoldSpaceKey\r\n >\r\n -\r\n </ard-button>\r\n }\r\n <div class=\"ard-number-input-wrapper\">\r\n @if (prefixTemplate()) {\r\n <div class=\"ard-number-input-prefix-container\">\r\n <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n <div class=\"ard-input-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template\r\n #defaultPlaceholderTemplate\r\n let-plchldr\r\n >\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n }\r\n\r\n <input\r\n #textInput\r\n #focusableElement\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (mousedown)=\"$event.stopPropagation()\"\r\n (mouseup)=\"$event.stopPropagation()\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n @if (suffixTemplate()) {\r\n <div class=\"ard-number-input-suffix-container\">\r\n <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (!noButtons()) {\r\n <ard-button\r\n class=\"ard-quick-change-button increment\"\r\n [variant]=\"buttonVariant()\"\r\n [appearance]=\"buttonAppearance()\"\r\n color=\"none\"\r\n [disabled]=\"!canIncrement()\"\r\n [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n pointerEventsWhenDisabled\r\n (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n ardHoldSpaceKey\r\n >\r\n +\r\n </ard-button>\r\n }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-number-input{display:block}.ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}}\n"] }]
|
|
10272
10269
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10273
10270
|
type: Inject,
|
|
10274
10271
|
args: [ARD_NUMBER_INPUT_DEFAULTS]
|
|
@@ -10464,7 +10461,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
|
10464
10461
|
useExisting: forwardRef(() => ArdiumCheckboxComponent),
|
|
10465
10462
|
multi: true,
|
|
10466
10463
|
},
|
|
10467
|
-
], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [id]=\"htmlId()\"\r\n [
|
|
10464
|
+
], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [tabindex]=\"tabIndex()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"toggleState()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultCheckboxTemplate\r\n let-state=\"state\"\r\n let-selected=\"selected\"\r\n >\r\n <ard-icon\r\n [icon]=\"\r\n state === State.Selected\r\n ? 'check_box'\r\n : state === State.Unselected\r\n ? 'check_box_outline_blank'\r\n : 'indeterminate_check_box'\r\n \"\r\n [filled]=\"state !== State.Indeterminate\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}}\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: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10468
10465
|
}
|
|
10469
10466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
|
|
10470
10467
|
type: Component,
|
|
@@ -10474,7 +10471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
10474
10471
|
useExisting: forwardRef(() => ArdiumCheckboxComponent),
|
|
10475
10472
|
multi: true,
|
|
10476
10473
|
},
|
|
10477
|
-
], template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [id]=\"htmlId()\"\r\n [
|
|
10474
|
+
], template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [tabindex]=\"tabIndex()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"toggleState()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultCheckboxTemplate\r\n let-state=\"state\"\r\n let-selected=\"selected\"\r\n >\r\n <ard-icon\r\n [icon]=\"\r\n state === State.Selected\r\n ? 'check_box'\r\n : state === State.Unselected\r\n ? 'check_box_outline_blank'\r\n : 'indeterminate_check_box'\r\n \"\r\n [filled]=\"state !== State.Indeterminate\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}}\n"] }]
|
|
10478
10475
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10479
10476
|
type: Inject,
|
|
10480
10477
|
args: [ARD_CHECKBOX_DEFAULTS]
|
|
@@ -10645,7 +10642,7 @@ class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
|
|
|
10645
10642
|
this.selected = model(null);
|
|
10646
10643
|
//! name
|
|
10647
10644
|
/** Name of the radio button group. All radio buttons inside this group will use this name. */
|
|
10648
|
-
this.name =
|
|
10645
|
+
this.name = computed(() => this.htmlName() ?? TakeChance$1.id());
|
|
10649
10646
|
//! hooks
|
|
10650
10647
|
this._childEventSubs = [];
|
|
10651
10648
|
this._isContentInit = false;
|
|
@@ -10786,7 +10783,7 @@ class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
|
|
|
10786
10783
|
this._childEventSubs = [];
|
|
10787
10784
|
}
|
|
10788
10785
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumRadioGroupComponent, isStandalone: false, selector: "ard-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }
|
|
10786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumRadioGroupComponent, isStandalone: false, selector: "ard-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", selected: "selectedChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.id": "this._htmlIdHostAttribute" } }, providers: [
|
|
10790
10787
|
{
|
|
10791
10788
|
provide: NG_VALUE_ACCESSOR,
|
|
10792
10789
|
useExisting: forwardRef(() => ArdiumRadioGroupComponent),
|
|
@@ -11704,7 +11701,7 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
|
|
|
11704
11701
|
useExisting: forwardRef(() => ArdiumSlideToggleComponent),
|
|
11705
11702
|
multi: true,
|
|
11706
11703
|
},
|
|
11707
|
-
], usesInheritance: true, ngImport: i0, template: "<button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"ard-slide-toggle\"\r\n [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n [
|
|
11704
|
+
], usesInheritance: true, ngImport: i0, template: "<button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"ard-slide-toggle\"\r\n [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [ngClass]=\"ngClasses()\"\r\n [tabindex]=\"tabIndex()\"\r\n (click)=\"toggleSelected()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slide-toggle-track\">\r\n <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n </div>\r\n <div class=\"ard-slide-toggle-handle\">\r\n <div class=\"ard-focus-overlay\"></div>\r\n @if (selectedIcon() ?? icon()) {\r\n <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n }\r\n @if (unselectedIcon() ?? icon()) {\r\n <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n }\r\n </div>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-slide-toggle{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
11708
11705
|
}
|
|
11709
11706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
|
|
11710
11707
|
type: Component,
|
|
@@ -11714,7 +11711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
11714
11711
|
useExisting: forwardRef(() => ArdiumSlideToggleComponent),
|
|
11715
11712
|
multi: true,
|
|
11716
11713
|
},
|
|
11717
|
-
], template: "<button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"ard-slide-toggle\"\r\n [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n [
|
|
11714
|
+
], template: "<button\r\n type=\"button\"\r\n role=\"checkbox\"\r\n class=\"ard-slide-toggle\"\r\n [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [ngClass]=\"ngClasses()\"\r\n [tabindex]=\"tabIndex()\"\r\n (click)=\"toggleSelected()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slide-toggle-track\">\r\n <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n </div>\r\n <div class=\"ard-slide-toggle-handle\">\r\n <div class=\"ard-focus-overlay\"></div>\r\n @if (selectedIcon() ?? icon()) {\r\n <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n }\r\n @if (unselectedIcon() ?? icon()) {\r\n <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n }\r\n </div>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-slide-toggle{display:block}}\n"] }]
|
|
11718
11715
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11719
11716
|
type: Inject,
|
|
11720
11717
|
args: [ARD_SLIDE_TOGGLE_DEFAULTS]
|
|
@@ -12567,7 +12564,7 @@ class ArdiumStarButtonComponent extends _BooleanComponentBase {
|
|
|
12567
12564
|
useExisting: forwardRef(() => ArdiumStarButtonComponent),
|
|
12568
12565
|
multi: true,
|
|
12569
12566
|
},
|
|
12570
|
-
], queries: [{ propertyName: "starTemplate", first: true, predicate: ArdStarButtonStarTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-star-button\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [tabindex]=\"tabIndex()\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultStarTemplate\r\n let-fillMode=\"fillMode\"\r\n let-color=\"color\"\r\n >\r\n <ard-star\r\n [filled]=\"fillMode\"\r\n [color]=\"color\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-star-button{display:block}.ard-star-button{border:none;background:transparent}}\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: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12567
|
+
], queries: [{ propertyName: "starTemplate", first: true, predicate: ArdStarButtonStarTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-star-button\"\r\n role=\"checkbox\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [tabindex]=\"tabIndex()\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultStarTemplate\r\n let-fillMode=\"fillMode\"\r\n let-color=\"color\"\r\n >\r\n <ard-star\r\n [filled]=\"fillMode\"\r\n [color]=\"color\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-star-button{display:block}.ard-star-button{border:none;background:transparent}}\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: ArdiumStarComponent, selector: "ard-star", inputs: ["wrapperClasses", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12571
12568
|
}
|
|
12572
12569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStarButtonComponent, decorators: [{
|
|
12573
12570
|
type: Component,
|
|
@@ -12577,7 +12574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
12577
12574
|
useExisting: forwardRef(() => ArdiumStarButtonComponent),
|
|
12578
12575
|
multi: true,
|
|
12579
12576
|
},
|
|
12580
|
-
], template: "<button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-star-button\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [tabindex]=\"tabIndex()\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultStarTemplate\r\n let-fillMode=\"fillMode\"\r\n let-color=\"color\"\r\n >\r\n <ard-star\r\n [filled]=\"fillMode\"\r\n [color]=\"color\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-star-button{display:block}.ard-star-button{border:none;background:transparent}}\n"] }]
|
|
12577
|
+
], template: "<button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-star-button\"\r\n role=\"checkbox\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [tabindex]=\"tabIndex()\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultStarTemplate\r\n let-fillMode=\"fillMode\"\r\n let-color=\"color\"\r\n >\r\n <ard-star\r\n [filled]=\"fillMode\"\r\n [color]=\"color\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"starTemplate()?.template || defaultStarTemplate\"\r\n [ngTemplateOutletContext]=\"starTemplateContext()\"\r\n />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-star-button{display:block}.ard-star-button{border:none;background:transparent}}\n"] }]
|
|
12581
12578
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
12582
12579
|
type: Inject,
|
|
12583
12580
|
args: [ARD_STAR_BUTTON_DEFAULTS]
|
|
@@ -12744,7 +12741,7 @@ class ArdiumRatingInputComponent extends _FormFieldComponentBase {
|
|
|
12744
12741
|
useExisting: forwardRef(() => ArdiumRatingInputComponent),
|
|
12745
12742
|
multi: true,
|
|
12746
12743
|
},
|
|
12747
|
-
], queries: [{ propertyName: "starButtonTemplate", first: true, predicate: ArdRatingInputStarButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-rating-input\"\r\n [ngClass]=\"ngClasses()\"\r\n (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n <ng-template\r\n #defaultStarButtonTemplate\r\n let-color=\"color\"\r\n let-index=\"index\"\r\n let-highlightedIndex=\"highlightedIndex\"\r\n let-valueIndex=\"valueIndex\"\r\n let-tabIndex=\"tabIndex\"\r\n let-onClick=\"onClick\"\r\n let-onFocus=\"onFocus\"\r\n let-onBlur=\"onBlur\"\r\n let-onHighlight=\"onHighlight\"\r\n >\r\n <ard-star-button\r\n #starButton\r\n [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n clickStrategy=\"noop\"\r\n [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (mouseenter)=\"onHighlight()\"\r\n [tabIndex]=\"tabIndex\"\r\n />\r\n </ng-template>\r\n\r\n @for (index of starArray(); track index) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n />\r\n <input\r\n type=\"radio\"\r\n class=\"ard-rating-input__radio\"\r\n value=\"index\"\r\n [id]=\"htmlId() + index\"\r\n tabindex=\"-1\"\r\n />\r\n }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-rating-input{display:block}.ard-rating-input{width:max-content}.ard-rating-input__radio{
|
|
12744
|
+
], queries: [{ propertyName: "starButtonTemplate", first: true, predicate: ArdRatingInputStarButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "starButtonInstances", predicate: ["starButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-rating-input\"\r\n [ngClass]=\"ngClasses()\"\r\n (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n <ng-template\r\n #defaultStarButtonTemplate\r\n let-color=\"color\"\r\n let-index=\"index\"\r\n let-highlightedIndex=\"highlightedIndex\"\r\n let-valueIndex=\"valueIndex\"\r\n let-tabIndex=\"tabIndex\"\r\n let-onClick=\"onClick\"\r\n let-onFocus=\"onFocus\"\r\n let-onBlur=\"onBlur\"\r\n let-onHighlight=\"onHighlight\"\r\n >\r\n <ard-star-button\r\n #starButton\r\n [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n clickStrategy=\"noop\"\r\n [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (mouseenter)=\"onHighlight()\"\r\n [tabIndex]=\"tabIndex\"\r\n />\r\n </ng-template>\r\n\r\n @for (index of starArray(); track index) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n />\r\n <input\r\n type=\"radio\"\r\n class=\"ard-rating-input__radio\"\r\n value=\"index\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.id]=\"htmlId() + index\"\r\n tabindex=\"-1\"\r\n />\r\n }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-rating-input{display:block}.ard-rating-input{width:max-content}.ard-rating-input__radio{position:absolute;opacity:0;width:1px;height:1px;margin: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: "component", type: ArdiumStarButtonComponent, selector: "ard-star-button", inputs: ["wrapperClasses", "clickStrategy", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12748
12745
|
}
|
|
12749
12746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRatingInputComponent, decorators: [{
|
|
12750
12747
|
type: Component,
|
|
@@ -12754,7 +12751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
12754
12751
|
useExisting: forwardRef(() => ArdiumRatingInputComponent),
|
|
12755
12752
|
multi: true,
|
|
12756
12753
|
},
|
|
12757
|
-
], template: "<div\r\n class=\"ard-rating-input\"\r\n [ngClass]=\"ngClasses()\"\r\n (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n <ng-template\r\n #defaultStarButtonTemplate\r\n let-color=\"color\"\r\n let-index=\"index\"\r\n let-highlightedIndex=\"highlightedIndex\"\r\n let-valueIndex=\"valueIndex\"\r\n let-tabIndex=\"tabIndex\"\r\n let-onClick=\"onClick\"\r\n let-onFocus=\"onFocus\"\r\n let-onBlur=\"onBlur\"\r\n let-onHighlight=\"onHighlight\"\r\n >\r\n <ard-star-button\r\n #starButton\r\n [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n clickStrategy=\"noop\"\r\n [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (mouseenter)=\"onHighlight()\"\r\n [tabIndex]=\"tabIndex\"\r\n />\r\n </ng-template>\r\n\r\n @for (index of starArray(); track index) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n />\r\n <input\r\n type=\"radio\"\r\n class=\"ard-rating-input__radio\"\r\n value=\"index\"\r\n [id]=\"htmlId() + index\"\r\n tabindex=\"-1\"\r\n />\r\n }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-rating-input{display:block}.ard-rating-input{width:max-content}.ard-rating-input__radio{
|
|
12754
|
+
], template: "<div\r\n class=\"ard-rating-input\"\r\n [ngClass]=\"ngClasses()\"\r\n (mouseleave)=\"setDisplayToValue()\"\r\n>\r\n <ng-template\r\n #defaultStarButtonTemplate\r\n let-color=\"color\"\r\n let-index=\"index\"\r\n let-highlightedIndex=\"highlightedIndex\"\r\n let-valueIndex=\"valueIndex\"\r\n let-tabIndex=\"tabIndex\"\r\n let-onClick=\"onClick\"\r\n let-onFocus=\"onFocus\"\r\n let-onBlur=\"onBlur\"\r\n let-onHighlight=\"onHighlight\"\r\n >\r\n <ard-star-button\r\n #starButton\r\n [class.ard-star-not-in-value]=\"index > valueIndex && index > highlightedIndex\"\r\n [color]=\"index <= valueIndex || index <= highlightedIndex ? color : 'none'\"\r\n clickStrategy=\"noop\"\r\n [selected]=\"highlightedIndex === -1 ? index <= valueIndex : index <= highlightedIndex\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (mouseenter)=\"onHighlight()\"\r\n [tabIndex]=\"tabIndex\"\r\n />\r\n </ng-template>\r\n\r\n @for (index of starArray(); track index) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"starButtonTemplate()?.template || defaultStarButtonTemplate\"\r\n [ngTemplateOutletContext]=\"getStarButtonTemplateContext()(index)\"\r\n />\r\n <input\r\n type=\"radio\"\r\n class=\"ard-rating-input__radio\"\r\n value=\"index\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.id]=\"htmlId() + index\"\r\n tabindex=\"-1\"\r\n />\r\n }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-rating-input{display:block}.ard-rating-input{width:max-content}.ard-rating-input__radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}}\n"] }]
|
|
12758
12755
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
12759
12756
|
type: Inject,
|
|
12760
12757
|
args: [ARD_RATING_INPUT_DEFAULTS]
|