@ardium-ui/ui 5.0.0-alpha.72 → 5.0.0-alpha.73
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.
|
@@ -3976,9 +3976,11 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
3976
3976
|
this._onChangeRegistered?.(value);
|
|
3977
3977
|
this.valueChange.emit(value);
|
|
3978
3978
|
}
|
|
3979
|
-
|
|
3979
|
+
_emitTouched() {
|
|
3980
|
+
super._emitTouched();
|
|
3981
|
+
if (this.isOpen())
|
|
3982
|
+
return;
|
|
3980
3983
|
this.touched.set(true);
|
|
3981
|
-
this._onTouchedRegistered?.();
|
|
3982
3984
|
}
|
|
3983
3985
|
//! value input & output
|
|
3984
3986
|
set value(newValue) {
|
|
@@ -4102,11 +4104,12 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4102
4104
|
onSearchInputFocus() {
|
|
4103
4105
|
this._searchBarFocused.set(true);
|
|
4104
4106
|
}
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
+
onBlur(event) {
|
|
4108
|
+
super.onBlur(event);
|
|
4109
|
+
if (this.isOpen()) {
|
|
4110
|
+
this.focus();
|
|
4111
|
+
this._shouldEmitTouched = false;
|
|
4107
4112
|
return;
|
|
4108
|
-
if (!this.isOpen()) {
|
|
4109
|
-
this._onTouched();
|
|
4110
4113
|
}
|
|
4111
4114
|
this._searchBarFocused.set(false);
|
|
4112
4115
|
}
|
|
@@ -4157,6 +4160,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4157
4160
|
this.clearEvent.emit();
|
|
4158
4161
|
this.removeEvent.emit(cleared);
|
|
4159
4162
|
this._emitChange();
|
|
4163
|
+
this._emitTouched();
|
|
4160
4164
|
}
|
|
4161
4165
|
_clearLastItem() {
|
|
4162
4166
|
const clearedValue = this.itemStorage.clearLastSelected().value;
|
|
@@ -4270,7 +4274,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4270
4274
|
return;
|
|
4271
4275
|
this.isOpen.set(false);
|
|
4272
4276
|
this._destroyOverlay();
|
|
4273
|
-
this.
|
|
4277
|
+
this._emitTouched();
|
|
4274
4278
|
this.closeEvent.emit();
|
|
4275
4279
|
this._cd.markForCheck();
|
|
4276
4280
|
}
|
|
@@ -4442,7 +4446,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4442
4446
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
4443
4447
|
useExisting: ArdiumSelectComponent,
|
|
4444
4448
|
},
|
|
4445
|
-
], 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: "dropdownArrowTemplate", first: true, predicate: ArdSelectDropdownArrowTemplateDirective, 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, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], 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]=\"valueContextGenerator()(item)\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-label=\"label\"\r\n >\r\n <div\r\n class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-label=\"label\"\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\"\r\n >\r\n <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : 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 <ng-template #defaultDropdownArrowTemplate>\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\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 (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (!!group.label) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-label=\"label\"\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"groupContextGenerator()(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 || (itemStorage.isItemLimitReached() && !option.selected)\"\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-label=\"label\"\r\n >\r\n <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"optionContextGenerator()(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\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{display:block}.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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i4.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4449
|
+
], 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: "dropdownArrowTemplate", first: true, predicate: ArdSelectDropdownArrowTemplateDirective, 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, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], 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]=\"valueContextGenerator()(item)\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-label=\"label\"\r\n >\r\n <div\r\n class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-label=\"label\"\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\"\r\n >\r\n <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : 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 />\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 <ng-template #defaultDropdownArrowTemplate>\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\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 (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (!!group.label) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-label=\"label\"\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"groupContextGenerator()(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 || (itemStorage.isItemLimitReached() && !option.selected)\"\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-label=\"label\"\r\n >\r\n <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"optionContextGenerator()(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\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{display:block}.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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i4.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4446
4450
|
}
|
|
4447
4451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
|
|
4448
4452
|
type: Component,
|
|
@@ -4456,7 +4460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4456
4460
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
4457
4461
|
useExisting: ArdiumSelectComponent,
|
|
4458
4462
|
},
|
|
4459
|
-
], 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]=\"valueContextGenerator()(item)\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-label=\"label\"\r\n >\r\n <div\r\n class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-label=\"label\"\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\"\r\n >\r\n <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : 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 <ng-template #defaultDropdownArrowTemplate>\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\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 (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (!!group.label) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-label=\"label\"\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"groupContextGenerator()(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 || (itemStorage.isItemLimitReached() && !option.selected)\"\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-label=\"label\"\r\n >\r\n <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"optionContextGenerator()(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\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{display:block}.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"] }]
|
|
4463
|
+
], 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]=\"valueContextGenerator()(item)\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n <ng-template\r\n #defaultValueTemplate\r\n let-label=\"label\"\r\n >\r\n <div\r\n class=\"ard-select-value\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></div>\r\n </ng-template>\r\n <ng-template\r\n #defaultMultiValueTemplate\r\n let-item\r\n let-label=\"label\"\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\"\r\n >\r\n <div [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : 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 />\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 <ng-template #defaultDropdownArrowTemplate>\r\n <span class=\"ard-dropdown-arrow\"></span>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"dropdownArrowTemplate()?.template || defaultDropdownArrowTemplate\" />\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 (mouseover)=\"onGroupMouseover(group)\"\r\n (click)=\"onGroupClick(group)\"\r\n >\r\n @if (!!group.label) {\r\n <ng-template\r\n #defaultOptgroupTemplate\r\n let-label=\"label\"\r\n >\r\n <span\r\n class=\"ard-optgroup-label\"\r\n [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"\r\n ></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n [ngTemplateOutletContext]=\"groupContextGenerator()(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 || (itemStorage.isItemLimitReached() && !option.selected)\"\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-label=\"label\"\r\n >\r\n <span [innerHTML]=\"isItemsInputUsed ? (label | escapeHTML) : label\"></span>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"optionContextGenerator()(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\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{display:block}.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"] }]
|
|
4460
4464
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4461
4465
|
type: Inject,
|
|
4462
4466
|
args: [ARD_SELECT_DEFAULTS]
|