@ardium-ui/ui 3.3.0-alpha.6 → 3.3.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/_internal/focusable-component.mjs +1 -3
- package/esm2022/lib/_internal/ngmodel-component.mjs +15 -3
- package/esm2022/lib/inputs/digit-input/digit-input.component.mjs +5 -8
- package/esm2022/lib/radio/radio/radio.component.mjs +79 -6
- package/esm2022/lib/radio/radio/radio.defaults.mjs +3 -3
- package/esm2022/lib/select/select.component.mjs +3 -3
- package/fesm2022/ardium-ui-ui.mjs +96 -18
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/focusable-component.d.ts +0 -1
- package/lib/_internal/ngmodel-component.d.ts +3 -0
- package/lib/radio/radio/radio.component.d.ts +42 -3
- package/lib/radio/radio/radio.defaults.d.ts +2 -2
- package/package.json +1 -1
- package/prebuilt-themes/default/inputs/digit-input.css +5 -0
- package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
- package/themes/default/inputs/digit-input.scss +6 -0
|
@@ -6,7 +6,7 @@ import * as i4 from '@ardium-ui/devkit';
|
|
|
6
6
|
import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, ArdiumHoldEventModule } from '@ardium-ui/devkit';
|
|
7
7
|
import { toObservable } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { map, Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
|
|
9
|
-
import { TakeChance } from 'take-chance';
|
|
9
|
+
import Random, { TakeChance } from 'take-chance';
|
|
10
10
|
import { isAnyString, isNull, isArray, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
|
|
11
11
|
import * as i1 from '@angular/common';
|
|
12
12
|
import { CommonModule, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
@@ -97,7 +97,6 @@ class _FocusableComponentBase extends _DisablableComponentBase {
|
|
|
97
97
|
* Whether the component is currently focused.
|
|
98
98
|
*/
|
|
99
99
|
this.isFocused = signal(false);
|
|
100
|
-
this.wasTouched = signal(false);
|
|
101
100
|
}
|
|
102
101
|
/**
|
|
103
102
|
* Focuses the correct element in the component.
|
|
@@ -136,7 +135,6 @@ class _FocusableComponentBase extends _DisablableComponentBase {
|
|
|
136
135
|
* @param event The focus event to emit.
|
|
137
136
|
*/
|
|
138
137
|
onBlur(event) {
|
|
139
|
-
this.wasTouched.set(true);
|
|
140
138
|
this.isFocused.set(false);
|
|
141
139
|
this.blurEvent.emit(event);
|
|
142
140
|
}
|
|
@@ -162,6 +160,9 @@ const _ngModelComponentDefaults = {
|
|
|
162
160
|
class _NgModelComponentBase extends _FocusableComponentBase {
|
|
163
161
|
constructor() {
|
|
164
162
|
super(...arguments);
|
|
163
|
+
//! event handlers
|
|
164
|
+
this.wasTouched = signal(false);
|
|
165
|
+
this._shouldEmitTouched = false;
|
|
165
166
|
//! form field related
|
|
166
167
|
this._injector = inject(Injector);
|
|
167
168
|
this._ngControl = null;
|
|
@@ -194,10 +195,19 @@ class _NgModelComponentBase extends _FocusableComponentBase {
|
|
|
194
195
|
setDisabledState(isDisabled) {
|
|
195
196
|
this.disabled.set(isDisabled);
|
|
196
197
|
}
|
|
197
|
-
|
|
198
|
+
onFocus(event) {
|
|
199
|
+
super.onFocus(event);
|
|
200
|
+
this._shouldEmitTouched = false;
|
|
201
|
+
}
|
|
198
202
|
onBlur(event) {
|
|
203
|
+
this._shouldEmitTouched = true;
|
|
199
204
|
super.onBlur(event);
|
|
200
|
-
|
|
205
|
+
setTimeout(() => {
|
|
206
|
+
if (!this._shouldEmitTouched)
|
|
207
|
+
return;
|
|
208
|
+
this.wasTouched.set(true);
|
|
209
|
+
this._onTouchedRegistered?.();
|
|
210
|
+
}, 0);
|
|
201
211
|
}
|
|
202
212
|
ngOnInit() {
|
|
203
213
|
this._ngControl = this._injector.get(NgControl, null);
|
|
@@ -650,20 +660,17 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
|
|
|
650
660
|
this.focusByIndex(index - 1 + Math.min(value.length, maxLength));
|
|
651
661
|
}
|
|
652
662
|
onInput(event, index) {
|
|
653
|
-
|
|
654
|
-
if (!wasChanged)
|
|
655
|
-
return;
|
|
663
|
+
this._updateSingleInputValue(event.target.value, index);
|
|
656
664
|
this.focusByIndex(index + 1);
|
|
657
665
|
}
|
|
658
666
|
_updateSingleInputValue(value, index) {
|
|
659
667
|
const changeResult = this.model.validateInputAndSetValue(value, index);
|
|
660
668
|
if (!changeResult?.wasChanged)
|
|
661
|
-
return
|
|
669
|
+
return;
|
|
662
670
|
this._emitChange();
|
|
663
671
|
if (this.model.isValueFull()) {
|
|
664
672
|
this.blur();
|
|
665
673
|
}
|
|
666
|
-
return true;
|
|
667
674
|
}
|
|
668
675
|
focusByIndex(index, tryFocusingNext, direction) {
|
|
669
676
|
if (index < 0 || index >= this.inputs().length)
|
|
@@ -728,7 +735,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
|
|
|
728
735
|
provide: _FormFieldComponentBase,
|
|
729
736
|
useExisting: ArdiumDigitInputComponent,
|
|
730
737
|
},
|
|
731
|
-
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
738
|
+
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
732
739
|
}
|
|
733
740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
|
|
734
741
|
type: Component,
|
|
@@ -742,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
742
749
|
provide: _FormFieldComponentBase,
|
|
743
750
|
useExisting: ArdiumDigitInputComponent,
|
|
744
751
|
},
|
|
745
|
-
], template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
752
|
+
], template: "<div\r\n class=\"ard-digit-input\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-has-error]=\"hasError()\"\r\n [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n @for (data of configArrayData(); track $index) {\r\n <div\r\n class=\"ard-digit-input__item\"\r\n [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n >\r\n @if (data.type === 'input') {\r\n <input\r\n #input\r\n #focusableElement\r\n class=\"ard-digit-input__input\"\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [readonly]=\"data.readonly\"\r\n [placeholder]=\"data.placeholder\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n (paste)=\"onPaste($event, data.index!)\"\r\n (input)=\"onInput($event, data.index!)\"\r\n (focus)=\"onFocusMaster($event, data.index!)\"\r\n (blur)=\"onBlurMaster($event, data.index!)\"\r\n (keydown)=\"onKeydown($event, data.index!)\"\r\n />\r\n } @else {\r\n <div class=\"ard-digit-input__static\">\r\n {{ data.char }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
746
753
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
747
754
|
type: Inject,
|
|
748
755
|
args: [ARD_DIGIT_INPUT_DEFAULTS]
|
|
@@ -4138,7 +4145,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4138
4145
|
provide: _FormFieldComponentBase,
|
|
4139
4146
|
useExisting: ArdiumSelectComponent,
|
|
4140
4147
|
},
|
|
4141
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n <!-- TODO check if can remove div -->\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4148
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4142
4149
|
}
|
|
4143
4150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
|
|
4144
4151
|
type: Component,
|
|
@@ -4152,7 +4159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4152
4159
|
provide: _FormFieldComponentBase,
|
|
4153
4160
|
useExisting: ArdiumSelectComponent,
|
|
4154
4161
|
},
|
|
4155
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n <!-- TODO check if can remove div -->\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
|
|
4162
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-select\"\r\n #dropdownHost\r\n (click)=\"handleAnywhereClick($event)\"\r\n [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-select-value-container\">\r\n @if (shouldDisplayPlaceholder()) {\r\n <ng-template #defaultPlaceholderTemplate>\r\n <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n <div\r\n class=\"ard-select-value\"\r\n [class.ard-value-disabled]=\"item.disabled()\"\r\n [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n >\r\n <ng-template\r\n *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-item\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-unselect=\"unselect\"\r\n >\r\n <ard-deletable-chip\r\n (delete)=\"unselect(item)\"\r\n [variant]=\"variant()\"\r\n compact\r\n appearance=\"outlined-strong\"\r\n >\r\n <div\r\n [ardInnerHTML]=\"item.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></div>\r\n </ard-deletable-chip>\r\n </ng-template>\r\n } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n <div class=\"ard-overflow-indicator\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n />\r\n\r\n <ng-template\r\n #defaultItemDisplayLimitTemplate\r\n let-count=\"overflowCount\"\r\n >\r\n <div>{{ count }} more...</div>\r\n </ng-template>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ard-search-input\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n >\r\n <input\r\n #searchInput\r\n #focusableElement\r\n type=\"text\"\r\n [attr.id]=\"searchInputId()\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [readonly]=\"isInputElementReadonly()\"\r\n [disabled]=\"disabled()\"\r\n [value]=\"searchTerm()\"\r\n aria-autocomplete=\"list\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"filter(searchInput.value)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onSearchInputFocus()\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onSearchInputBlur()\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"ard-select-controls\">\r\n @if (isLoading()) {\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ard-simple-spinner\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n } @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ard-dropdown-arrow-wrapper\"\r\n (click)=\"handleDropdownArrowClick($event)\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n >\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n role=\"listbox\"\r\n aria-label=\"Options list\"\r\n [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [filterValue]=\"searchTerm()\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"handleOutsideClick($event)\"\r\n (mousemove)=\"onMouseMove()\"\r\n (scroll)=\"scrollEvent.emit($event)\"\r\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n >\r\n @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n <div\r\n class=\"ard-optgroup\"\r\n role=\"group\"\r\n [class.ard-group-disabled]=\"group.disabled()\"\r\n [class.ard-group-selected]=\"group.selected()\"\r\n [class.ard-group-highlighted]=\"group.highlighted()\"\r\n (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (group.label() !== '' && group.label() !== undefined) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-group\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [ardInnerHTML]=\"group.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n />\r\n }\r\n\r\n <div class=\"ard-optgroup-children\">\r\n @for (option of group.children(); track option.index) {\r\n <div\r\n class=\"ard-option\"\r\n role=\"option\"\r\n [class.ard-option-disabled]=\"option.disabled()\"\r\n [class.ard-option-selected]=\"option.selected()\"\r\n [class.ard-option-highlighted]=\"option.highlighted()\"\r\n [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n [attr.aria-selected]=\"option.selected()\"\r\n [attr.id]=\"htmlId() + '-' + option.index\"\r\n (click)=\"onItemClick(option, $event)\"\r\n (mouseover)=\"onItemMouseOver($event)\"\r\n (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n >\r\n <div class=\"ard-option-label\">\r\n <ng-template\r\n #defaultOptionTemplate\r\n let-option\r\n >\r\n <span\r\n [ardInnerHTML]=\"option.label()\"\r\n [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } } @if (shouldShowNoItemsFound()) {\r\n <ng-template #defaultNoItemsFoundTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n } @if (shouldShowAddCustom()) {\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm)\"\r\n >\r\n <span class=\"ard-add-custom-label\">Add option</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n } @if (isLoading()) {\r\n <ng-template #defaultLoadingPlaceholderTemplate>\r\n <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n [ngTemplateOutletContext]=\"getSearchContext()\"\r\n />\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
|
|
4156
4163
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4157
4164
|
type: Inject,
|
|
4158
4165
|
args: [ARD_SELECT_DEFAULTS]
|
|
@@ -5983,7 +5990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5983
5990
|
}] });
|
|
5984
5991
|
|
|
5985
5992
|
const _radioDefaults = {
|
|
5986
|
-
...
|
|
5993
|
+
..._focusableComponentDefaults,
|
|
5987
5994
|
color: SimpleComponentColor.Primary,
|
|
5988
5995
|
};
|
|
5989
5996
|
const ARD_RADIO_DEFAULTS = new InjectionToken('ard-radio-defaults', {
|
|
@@ -5995,10 +6002,31 @@ function provideRadioDefaults(config) {
|
|
|
5995
6002
|
return { provide: ARD_RADIO_DEFAULTS, useValue: { ..._radioDefaults, ...config } };
|
|
5996
6003
|
}
|
|
5997
6004
|
|
|
5998
|
-
class ArdiumRadioComponent extends
|
|
6005
|
+
class ArdiumRadioComponent extends _FocusableComponentBase {
|
|
5999
6006
|
constructor(defaults) {
|
|
6000
6007
|
super(defaults);
|
|
6001
6008
|
this._changeDetector = inject(ChangeDetectorRef);
|
|
6009
|
+
this.htmlId = input(Random.id());
|
|
6010
|
+
//! events
|
|
6011
|
+
/**
|
|
6012
|
+
* The event emitter responsible for firing `select` events. Fired when the `selected` state is set to true.
|
|
6013
|
+
*/
|
|
6014
|
+
this.selectEvent = output({ alias: 'select' });
|
|
6015
|
+
/**
|
|
6016
|
+
* The event emitter responsible for firing `unselect` events. Fired when the `selected` state is set to false.
|
|
6017
|
+
*/
|
|
6018
|
+
this.unselectEvent = output({ alias: 'unselect' });
|
|
6019
|
+
/**
|
|
6020
|
+
* The event emitter responsible for firing `change` events. Fired when the `selected` state is changed.
|
|
6021
|
+
*/
|
|
6022
|
+
this.changeEvent = output({ alias: 'change' });
|
|
6023
|
+
//! [(selected)] two-way binding
|
|
6024
|
+
// can be set using a no-value argument
|
|
6025
|
+
this.selected = signal(false);
|
|
6026
|
+
/**
|
|
6027
|
+
* The event emitter responsible for firing `selectedChange` events. Fired when the `selected` state is changed.
|
|
6028
|
+
*/
|
|
6029
|
+
this.selectedChange = output();
|
|
6002
6030
|
this.value = input();
|
|
6003
6031
|
//! appearance
|
|
6004
6032
|
this.color = input(this._DEFAULTS.color);
|
|
@@ -6006,6 +6034,47 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
6006
6034
|
//! radio-group access points
|
|
6007
6035
|
this.name = signal(null);
|
|
6008
6036
|
}
|
|
6037
|
+
/**
|
|
6038
|
+
* Emits all select-state-related events.
|
|
6039
|
+
*/
|
|
6040
|
+
_emitChange() {
|
|
6041
|
+
if (this.selected())
|
|
6042
|
+
this.selectEvent.emit(null);
|
|
6043
|
+
else
|
|
6044
|
+
this.unselectEvent.emit(null);
|
|
6045
|
+
this.selectedChange.emit(this.selected());
|
|
6046
|
+
this.changeEvent.emit(this.selected());
|
|
6047
|
+
}
|
|
6048
|
+
/**
|
|
6049
|
+
* The selection state of the component. Coercible into a boolean.
|
|
6050
|
+
*/
|
|
6051
|
+
set _selected(v) {
|
|
6052
|
+
this.selected.set(coerceBooleanProperty(v));
|
|
6053
|
+
}
|
|
6054
|
+
get _selectedHostAttribute() {
|
|
6055
|
+
return this.selected();
|
|
6056
|
+
}
|
|
6057
|
+
/**
|
|
6058
|
+
* Toggles the selected state. Emits all appropriate events.
|
|
6059
|
+
*/
|
|
6060
|
+
toggleSelected() {
|
|
6061
|
+
this.selected.update(v => !v);
|
|
6062
|
+
this._emitChange();
|
|
6063
|
+
}
|
|
6064
|
+
/**
|
|
6065
|
+
* Sets the state to "selected". Emits all appropriate events only if the state changes.
|
|
6066
|
+
*/
|
|
6067
|
+
select() {
|
|
6068
|
+
this.selected.set(true);
|
|
6069
|
+
this._emitChange();
|
|
6070
|
+
}
|
|
6071
|
+
/**
|
|
6072
|
+
* Sets the state to "unselected". Emits all appropriate events only if the state changes.
|
|
6073
|
+
*/
|
|
6074
|
+
unselect() {
|
|
6075
|
+
this.selected.set(false);
|
|
6076
|
+
this._emitChange();
|
|
6077
|
+
}
|
|
6009
6078
|
//! event handlers
|
|
6010
6079
|
onMousedown() {
|
|
6011
6080
|
this.focus();
|
|
@@ -6026,7 +6095,7 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
6026
6095
|
this._changeDetector.markForCheck();
|
|
6027
6096
|
}
|
|
6028
6097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: ARD_RADIO_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n #focusableElement\n class=\"ard-radio\"\n type=\"button\"\n [ngClass]=\"ngClasses()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (mousedown)=\"onMousedown()\"\n (mouseup)=\"onMouseup()\"\n [tabindex]=\"tabIndex()\"\n>\n <div class=\"ard-radio-circles\">\n <div class=\"ard-radio-outer-circle\"></div>\n <div class=\"ard-radio-inner-circle\"></div>\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-hitbox\"></div>\n </div>\n <label [for]=\"htmlId()\">\n <ng-content></ng-content>\n </label>\n</button>\n\n<input\n class=\"ard-radio-input-element\"\n type=\"radio\"\n [name]=\"name()\"\n [id]=\"htmlId()\"\n [checked]=\"selected()\"\n #radio\n/>\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<button\n #focusableElement\n class=\"ard-radio\"\n type=\"button\"\n [ngClass]=\"ngClasses()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (mousedown)=\"onMousedown()\"\n (mouseup)=\"onMouseup()\"\n [tabindex]=\"tabIndex()\"\n>\n <div class=\"ard-radio-circles\">\n <div class=\"ard-radio-outer-circle\"></div>\n <div class=\"ard-radio-inner-circle\"></div>\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-hitbox\"></div>\n </div>\n <label [for]=\"htmlId()\">\n <ng-content></ng-content>\n </label>\n</button>\n\n<input\n class=\"ard-radio-input-element\"\n type=\"radio\"\n [name]=\"name()\"\n [id]=\"htmlId()\"\n [checked]=\"selected()\"\n #radio\n/>\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6030
6099
|
}
|
|
6031
6100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
|
|
6032
6101
|
type: Component,
|
|
@@ -6034,7 +6103,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6034
6103
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6035
6104
|
type: Inject,
|
|
6036
6105
|
args: [ARD_RADIO_DEFAULTS]
|
|
6037
|
-
}] }]
|
|
6106
|
+
}] }], propDecorators: { _selected: [{
|
|
6107
|
+
type: Input,
|
|
6108
|
+
args: ['selected']
|
|
6109
|
+
}], _selectedHostAttribute: [{
|
|
6110
|
+
type: HostBinding,
|
|
6111
|
+
args: ['attr.selected']
|
|
6112
|
+
}, {
|
|
6113
|
+
type: HostBinding,
|
|
6114
|
+
args: ['class.ard-selected']
|
|
6115
|
+
}] } });
|
|
6038
6116
|
|
|
6039
6117
|
class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
6040
6118
|
get _htmlIdHostAttribute() {
|