@ardium-ui/ui 5.0.0-alpha.11 → 5.0.0-alpha.12
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.
|
@@ -4327,7 +4327,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4327
4327
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
4328
4328
|
useExisting: ArdiumSelectComponent,
|
|
4329
4329
|
},
|
|
4330
|
-
], 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 [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-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 @if (isValueWithinDisplayLimit($index)) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\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 class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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-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 } @if (!readonly()) {\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 }\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 [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></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 <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm())\"\r\n >\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </ng-template>\r\n </div>\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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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.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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i5.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4330
|
+
], 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 [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-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 @if (isValueWithinDisplayLimit($index)) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\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 class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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-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 } @if (!readonly()) {\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 }\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 [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></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 <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </ng-template>\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 <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n </div>\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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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.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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i5.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4331
4331
|
}
|
|
4332
4332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
|
|
4333
4333
|
type: Component,
|
|
@@ -4341,7 +4341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4341
4341
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
4342
4342
|
useExisting: ArdiumSelectComponent,
|
|
4343
4343
|
},
|
|
4344
|
-
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-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 @if (isValueWithinDisplayLimit($index)) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\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 class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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-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 } @if (!readonly()) {\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 }\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 [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></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 <div\r\n class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n (click)=\"addCustomOption(searchTerm())\"\r\n >\r\n <ng-template\r\n #defaultAddCustomTemplate\r\n let-searchTerm\r\n >\r\n <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </ng-template>\r\n </div>\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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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"] }]
|
|
4344
|
+
], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [readonly]=\"readonly()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-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 @if (isValueWithinDisplayLimit($index)) {\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n />\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 class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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-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 } @if (!readonly()) {\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 }\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 [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></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 <span class=\"ard-add-custom-label\">{{ addCustomOptionText() }}</span>\r\n <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n </ng-template>\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 <ng-template\r\n [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n />\r\n </div>\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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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"] }]
|
|
4345
4345
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4346
4346
|
type: Inject,
|
|
4347
4347
|
args: [ARD_SELECT_DEFAULTS]
|