@ardium-ui/ui 3.3.0-alpha.7 → 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/inputs/digit-input/digit-input.component.mjs +3 -3
- 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 +80 -9
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- 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';
|
|
@@ -735,7 +735,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
|
|
|
735
735
|
provide: _FormFieldComponentBase,
|
|
736
736
|
useExisting: ArdiumDigitInputComponent,
|
|
737
737
|
},
|
|
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 [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 }); }
|
|
739
739
|
}
|
|
740
740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
|
|
741
741
|
type: Component,
|
|
@@ -749,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
749
749
|
provide: _FormFieldComponentBase,
|
|
750
750
|
useExisting: ArdiumDigitInputComponent,
|
|
751
751
|
},
|
|
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 [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" }]
|
|
753
753
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
754
754
|
type: Inject,
|
|
755
755
|
args: [ARD_DIGIT_INPUT_DEFAULTS]
|
|
@@ -4145,7 +4145,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4145
4145
|
provide: _FormFieldComponentBase,
|
|
4146
4146
|
useExisting: ArdiumSelectComponent,
|
|
4147
4147
|
},
|
|
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 <!-- 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 }); }
|
|
4149
4149
|
}
|
|
4150
4150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
|
|
4151
4151
|
type: Component,
|
|
@@ -4159,7 +4159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4159
4159
|
provide: _FormFieldComponentBase,
|
|
4160
4160
|
useExisting: ArdiumSelectComponent,
|
|
4161
4161
|
},
|
|
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 <!-- 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"] }]
|
|
4163
4163
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4164
4164
|
type: Inject,
|
|
4165
4165
|
args: [ARD_SELECT_DEFAULTS]
|
|
@@ -5990,7 +5990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5990
5990
|
}] });
|
|
5991
5991
|
|
|
5992
5992
|
const _radioDefaults = {
|
|
5993
|
-
...
|
|
5993
|
+
..._focusableComponentDefaults,
|
|
5994
5994
|
color: SimpleComponentColor.Primary,
|
|
5995
5995
|
};
|
|
5996
5996
|
const ARD_RADIO_DEFAULTS = new InjectionToken('ard-radio-defaults', {
|
|
@@ -6002,10 +6002,31 @@ function provideRadioDefaults(config) {
|
|
|
6002
6002
|
return { provide: ARD_RADIO_DEFAULTS, useValue: { ..._radioDefaults, ...config } };
|
|
6003
6003
|
}
|
|
6004
6004
|
|
|
6005
|
-
class ArdiumRadioComponent extends
|
|
6005
|
+
class ArdiumRadioComponent extends _FocusableComponentBase {
|
|
6006
6006
|
constructor(defaults) {
|
|
6007
6007
|
super(defaults);
|
|
6008
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();
|
|
6009
6030
|
this.value = input();
|
|
6010
6031
|
//! appearance
|
|
6011
6032
|
this.color = input(this._DEFAULTS.color);
|
|
@@ -6013,6 +6034,47 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
6013
6034
|
//! radio-group access points
|
|
6014
6035
|
this.name = signal(null);
|
|
6015
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
|
+
}
|
|
6016
6078
|
//! event handlers
|
|
6017
6079
|
onMousedown() {
|
|
6018
6080
|
this.focus();
|
|
@@ -6033,7 +6095,7 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
6033
6095
|
this._changeDetector.markForCheck();
|
|
6034
6096
|
}
|
|
6035
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 }); }
|
|
6036
|
-
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 }); }
|
|
6037
6099
|
}
|
|
6038
6100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
|
|
6039
6101
|
type: Component,
|
|
@@ -6041,7 +6103,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6041
6103
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6042
6104
|
type: Inject,
|
|
6043
6105
|
args: [ARD_RADIO_DEFAULTS]
|
|
6044
|
-
}] }]
|
|
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
|
+
}] } });
|
|
6045
6116
|
|
|
6046
6117
|
class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
6047
6118
|
get _htmlIdHostAttribute() {
|