@ardium-ui/ui 5.0.0-alpha.65 → 5.0.0-alpha.67
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 +27 -11
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/form-field-frame/form-field-frame.component.d.ts +1 -0
- package/lib/inputs/date-input/date-range-input.component.d.ts +1 -0
- package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +1 -0
- package/lib/slider/range-slider/range-slider.component.d.ts +1 -1
- package/lib/tabber/tab/tab.component.d.ts +3 -1
- package/lib/tabber/tabber.defaults.d.ts +1 -0
- package/package.json +1 -1
- package/prebuilt-themes/default/core.css +13 -2
- package/prebuilt-themes/default/core.css.map +1 -1
- package/prebuilt-themes/default/form-field-frame.css +12 -12
- package/prebuilt-themes/default/form-field-frame.css.map +1 -1
- package/prebuilt-themes/default/inputs/autocomplete-input.css +22 -5
- package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/date-input.css +22 -5
- package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +21 -6
- package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/hex-input.css +20 -5
- package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/input.css +20 -5
- package/prebuilt-themes/default/inputs/input.css.map +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +20 -5
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/password-input.css +20 -5
- package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
- package/prebuilt-themes/default/tabber.css +7 -2
- package/prebuilt-themes/default/tabber.css.map +1 -1
- package/themes/default/core.scss +13 -2
- package/themes/default/form-field-frame.scss +15 -12
- package/themes/default/inputs/_shared.scss +28 -7
- package/themes/default/inputs/autocomplete-input.scss +18 -4
- package/themes/default/inputs/date-input.scss +16 -4
- package/themes/default/inputs/file-input.scss +17 -5
- package/themes/default/inputs/hex-input.scss +16 -4
- package/themes/default/inputs/input.scss +16 -4
- package/themes/default/inputs/number-input.scss +17 -5
- package/themes/default/inputs/password-input.scss +16 -4
- package/themes/default/tabber.scss +7 -2
- package/prebuilt-themes/default/inputs/search-bar.css +0 -135
- package/prebuilt-themes/default/inputs/search-bar.css.map +0 -1
- package/themes/default/inputs/search-bar.scss +0 -55
|
@@ -11,8 +11,9 @@ import { resolvePath } from 'resolve-object-path';
|
|
|
11
11
|
import { 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
|
+
import { toSignal } from '@angular/core/rxjs-interop';
|
|
15
|
+
import { Subject, startWith, delay, isObservable, firstValueFrom, merge, takeUntil, filter, map, BehaviorSubject } from 'rxjs';
|
|
14
16
|
import { AutofillMonitor, CdkAutofill } from '@angular/cdk/text-field';
|
|
15
|
-
import { Subject, isObservable, firstValueFrom, merge, takeUntil, startWith, filter, map, BehaviorSubject } from 'rxjs';
|
|
16
17
|
import { roundToMultiple, roundFromZero, roundToPrecision } from 'more-rounding';
|
|
17
18
|
import { keyToString } from 'key-display-names';
|
|
18
19
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
@@ -1082,6 +1083,7 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
|
|
|
1082
1083
|
* Whether to use the compact styling or not.
|
|
1083
1084
|
*/
|
|
1084
1085
|
this.compact = input(false, { transform: v => coerceBooleanProperty(v) });
|
|
1086
|
+
this._enableTransitions = toSignal(new Subject().asObservable().pipe(startWith(true), delay(0)));
|
|
1085
1087
|
this.ngClasses = computed(() => [
|
|
1086
1088
|
`ard-appearance-${this.appearance()}`,
|
|
1087
1089
|
`ard-variant-${this.variant()}`,
|
|
@@ -1089,6 +1091,7 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
|
|
|
1089
1091
|
this.hasError() ? 'ard-has-error' : '',
|
|
1090
1092
|
this.isSuccess() ? 'ard-is-success' : '',
|
|
1091
1093
|
this.isFocused() && !this.readonly() ? 'ard-focused' : 'ard-unfocused',
|
|
1094
|
+
this._enableTransitions() ? 'ard-enable-transitions' : '',
|
|
1092
1095
|
].join(' '));
|
|
1093
1096
|
//! prefix & suffix
|
|
1094
1097
|
this.prefixTemplateInput = input(undefined, { alias: 'prefixTemplate' });
|
|
@@ -1478,7 +1481,7 @@ class ArdiumAutocompleteInputComponent extends _SimpleInputComponentBase {
|
|
|
1478
1481
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
1479
1482
|
useExisting: ArdiumAutocompleteInputComponent,
|
|
1480
1483
|
},
|
|
1481
|
-
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact()\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected\"\r\n [class.ard-option-highlighted]=\"item.highlighted\"\r\n [attr.aria-selected]=\"item.selected\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"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: [".ard-
|
|
1484
|
+
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact()\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected\"\r\n [class.ard-option-highlighted]=\"item.highlighted\"\r\n [attr.aria-selected]=\"item.selected\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"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: [".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 }); }
|
|
1482
1485
|
}
|
|
1483
1486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumAutocompleteInputComponent, decorators: [{
|
|
1484
1487
|
type: Component,
|
|
@@ -1492,7 +1495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1492
1495
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
1493
1496
|
useExisting: ArdiumAutocompleteInputComponent,
|
|
1494
1497
|
},
|
|
1495
|
-
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact()\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected\"\r\n [class.ard-option-highlighted]=\"item.highlighted\"\r\n [attr.aria-selected]=\"item.selected\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"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: [".ard-
|
|
1498
|
+
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n role=\"listbox\"\r\n [compact]=\"compact()\"\r\n aria-label=\"Suggestions\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"shouldDisplaySuggestions()\"\r\n (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n >\r\n @for (item of suggestionItems(); track item.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-selected]=\"item.selected\"\r\n [class.ard-option-highlighted]=\"item.highlighted\"\r\n [attr.aria-selected]=\"item.selected\"\r\n (click)=\"selectSuggestion(item, $event)\"\r\n (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n >\r\n <span class=\"ard-option-label\">\r\n <ng-template #defaultOptionTemplate>\r\n {{ item.label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"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: [".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"] }]
|
|
1496
1499
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1497
1500
|
type: Inject,
|
|
1498
1501
|
args: [ARD_AUTOCOMPLETE_INPUT_DEFAULTS]
|
|
@@ -2243,7 +2246,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
|
|
|
2243
2246
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
2244
2247
|
useExisting: ArdiumInputComponent,
|
|
2245
2248
|
},
|
|
2246
|
-
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-
|
|
2249
|
+
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-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 }); }
|
|
2247
2250
|
}
|
|
2248
2251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumInputComponent, decorators: [{
|
|
2249
2252
|
type: Component,
|
|
@@ -2257,7 +2260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2257
2260
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
2258
2261
|
useExisting: ArdiumInputComponent,
|
|
2259
2262
|
},
|
|
2260
|
-
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-
|
|
2263
|
+
], 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]=\"inputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [maxLength]=\"maxLengthAsInt()\"\r\n (input)=\"onInput(textInput.value)\"\r\n (focus)=\"onFocusMaster($event)\"\r\n (blur)=\"onBlurMaster($event)\"\r\n (change)=\"onChange($event)\"\r\n (copy)=\"onCopy($event)\"\r\n />\r\n </div>\r\n\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"onClearButtonClick($event)\"\r\n />\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-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"] }]
|
|
2261
2264
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2262
2265
|
type: Inject,
|
|
2263
2266
|
args: [ARD_SIMPLE_INPUT_DEFAULTS]
|
|
@@ -6163,9 +6166,6 @@ class _AbstractDateInput extends _FormFieldComponentBase {
|
|
|
6163
6166
|
if (target.tagName !== 'INPUT') {
|
|
6164
6167
|
event.preventDefault();
|
|
6165
6168
|
}
|
|
6166
|
-
if (this.isOpen()) {
|
|
6167
|
-
this.close();
|
|
6168
|
-
}
|
|
6169
6169
|
}
|
|
6170
6170
|
onOutsideClick(event) {
|
|
6171
6171
|
if (!this.isOpen())
|
|
@@ -8652,6 +8652,9 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
|
|
|
8652
8652
|
onGeneralClick(event) {
|
|
8653
8653
|
super.onGeneralClick(event);
|
|
8654
8654
|
this.dateInput().nativeElement.focus();
|
|
8655
|
+
if (this.isOpen()) {
|
|
8656
|
+
this.close();
|
|
8657
|
+
}
|
|
8655
8658
|
}
|
|
8656
8659
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, deps: [{ token: ARD_DATE_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8657
8660
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDateInputComponent, isStandalone: false, selector: "ard-date-input", inputs: { dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, minMaxStrategy: { classPropertyName: "minMaxStrategy", publicName: "minMaxStrategy", isSignal: true, isRequired: false, transformFunction: null }, serializeFn: { classPropertyName: "serializeFn", publicName: "serializeFn", isSignal: true, isRequired: false, transformFunction: null }, deserializeFn: { classPropertyName: "deserializeFn", publicName: "deserializeFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateInputValue: "dateInputValueChange" }, providers: [
|
|
@@ -8980,6 +8983,10 @@ class ArdiumDateRangeInputComponent extends _AbstractDateInput {
|
|
|
8980
8983
|
this.calendarMonthTemplate = contentChild(ArdDateRangeInputMonthTemplateDirective);
|
|
8981
8984
|
this.calendarDayTemplate = contentChild(ArdDateRangeInputDayTemplateDirective);
|
|
8982
8985
|
}
|
|
8986
|
+
onGeneralClick(event) {
|
|
8987
|
+
super.onGeneralClick(event);
|
|
8988
|
+
this.toggle();
|
|
8989
|
+
}
|
|
8983
8990
|
writeValue(v) {
|
|
8984
8991
|
if (isObject(v) && 'from' in v && 'to' in v && isDate(v['from']) && isDate(v['to'])) {
|
|
8985
8992
|
this.value.set({ from: v['from'], to: v['to'] });
|
|
@@ -9362,6 +9369,10 @@ class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput {
|
|
|
9362
9369
|
this.calendarMonthTemplate = contentChild(ArdMultipageDateRangeInputMonthTemplateDirective);
|
|
9363
9370
|
this.calendarDayTemplate = contentChild(ArdMultipageDateRangeInputDayTemplateDirective);
|
|
9364
9371
|
}
|
|
9372
|
+
onGeneralClick(event) {
|
|
9373
|
+
super.onGeneralClick(event);
|
|
9374
|
+
this.toggle();
|
|
9375
|
+
}
|
|
9365
9376
|
onActivePageChange(newPage, index) {
|
|
9366
9377
|
const newDate = new Date(newPage.year, newPage.month, 1);
|
|
9367
9378
|
newDate.setMonth(newDate.getMonth() - index);
|
|
@@ -16261,6 +16272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
16261
16272
|
|
|
16262
16273
|
const _tabberDefaults = {
|
|
16263
16274
|
tabDisabled: false,
|
|
16275
|
+
tabPointerEventsWhenDisabled: false,
|
|
16264
16276
|
color: ComponentColor.Primary,
|
|
16265
16277
|
stretchTabs: false,
|
|
16266
16278
|
uniformTabWidths: false,
|
|
@@ -16280,6 +16292,10 @@ class ArdiumTabComponent {
|
|
|
16280
16292
|
constructor() {
|
|
16281
16293
|
this._DEFAULTS = inject(ARD_TABBER_DEFAULTS);
|
|
16282
16294
|
this.disabled = input(this._DEFAULTS.tabDisabled, { transform: v => coerceBooleanProperty(v) });
|
|
16295
|
+
this.pointerEventsWhenDisabled = input(this._DEFAULTS.tabPointerEventsWhenDisabled, {
|
|
16296
|
+
transform: v => coerceBooleanProperty(v),
|
|
16297
|
+
});
|
|
16298
|
+
this.tabTitle = input('');
|
|
16283
16299
|
this.selected = signal(false);
|
|
16284
16300
|
this.focused = signal(false);
|
|
16285
16301
|
this._label = input(null, { alias: 'label' });
|
|
@@ -16312,7 +16328,7 @@ class ArdiumTabComponent {
|
|
|
16312
16328
|
this.selectedChangeInternal$.complete();
|
|
16313
16329
|
}
|
|
16314
16330
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", selectedChange: "selectedChange" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.ard-tab-disabled": "disabled()", "class.ard-tab-selected": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
16331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, tabTitle: { classPropertyName: "tabTitle", publicName: "tabTitle", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", selectedChange: "selectedChange" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.ard-tab-disabled": "disabled()", "class.ard-tab-selected": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
16316
16332
|
}
|
|
16317
16333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, decorators: [{
|
|
16318
16334
|
type: Component,
|
|
@@ -16482,11 +16498,11 @@ class ArdiumTabberComponent {
|
|
|
16482
16498
|
this.focusedTabId.set(null);
|
|
16483
16499
|
}
|
|
16484
16500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16485
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabId: "selectedTabChange", focusEvent: "focus", blurEvent: "blur" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdTabberLabelTemplateDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n
|
|
16501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabId: "selectedTabChange", focusEvent: "focus", blurEvent: "blur" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdTabberLabelTemplateDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"ard-tab-button\"\r\n [id]=\"tabObj.tab.tabId()\"\r\n [class.ard-tab-disabled]=\"tabObj.tab.disabled()\"\r\n [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n [title]=\"tabObj.tab.tabTitle()\"\r\n (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n (focus)=\"onTabFocus(tabObj.tab)\"\r\n (blur)=\"onTabBlur(tabObj.tab)\"\r\n [tabindex]=\"tabObj.tab.disabled() ? -1 : tabIndex()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultLabelTemplate\r\n let-label\r\n >\r\n {{ label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n />\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n <div\r\n role=\"tabpanel\"\r\n class=\"ard-tabber-content\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
16486
16502
|
}
|
|
16487
16503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, decorators: [{
|
|
16488
16504
|
type: Component,
|
|
16489
|
-
args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n
|
|
16505
|
+
args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"ard-tab-button\"\r\n [id]=\"tabObj.tab.tabId()\"\r\n [class.ard-tab-disabled]=\"tabObj.tab.disabled()\"\r\n [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n [title]=\"tabObj.tab.tabTitle()\"\r\n (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n (focus)=\"onTabFocus(tabObj.tab)\"\r\n (blur)=\"onTabBlur(tabObj.tab)\"\r\n [tabindex]=\"tabObj.tab.disabled() ? -1 : tabIndex()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultLabelTemplate\r\n let-label\r\n >\r\n {{ label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n />\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n <div\r\n role=\"tabpanel\"\r\n class=\"ard-tabber-content\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
|
|
16490
16506
|
}] });
|
|
16491
16507
|
|
|
16492
16508
|
class ArdiumTabberModule {
|