@ardium-ui/ui 5.0.0-alpha.94 → 5.0.0-alpha.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ardium-ui-ui.mjs +21 -6
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/inputs/date-input/date-input.component.d.ts +1 -1
- package/lib/select/select.component.d.ts +1 -0
- package/package.json +1 -1
- package/prebuilt-themes/default/inputs/autocomplete-input.css +4 -1
- package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/date-input.css +8 -3
- package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +4 -1
- package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/hex-input.css +4 -1
- package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/input.css +4 -1
- package/prebuilt-themes/default/inputs/input.css.map +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +4 -1
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/password-input.css +4 -1
- package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
- package/prebuilt-themes/default/select.css +6 -0
- package/prebuilt-themes/default/select.css.map +1 -1
- package/themes/default/inputs/_shared.scss +5 -1
- package/themes/default/select.scss +10 -0
|
@@ -4345,7 +4345,9 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4345
4345
|
this.filter(searchTerm, true);
|
|
4346
4346
|
}
|
|
4347
4347
|
_setSearchInputAttributes() {
|
|
4348
|
-
const input = this.searchInput()
|
|
4348
|
+
const input = this.searchInput()?.nativeElement;
|
|
4349
|
+
if (!input)
|
|
4350
|
+
return;
|
|
4349
4351
|
const attributes = {
|
|
4350
4352
|
type: 'text',
|
|
4351
4353
|
autocorrect: 'off',
|
|
@@ -4376,6 +4378,10 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4376
4378
|
this._onArrowUpPress(event);
|
|
4377
4379
|
return;
|
|
4378
4380
|
}
|
|
4381
|
+
case 'Escape': {
|
|
4382
|
+
this._onEscapePress(event);
|
|
4383
|
+
return;
|
|
4384
|
+
}
|
|
4379
4385
|
case 'Home': {
|
|
4380
4386
|
this._onHomePress(event);
|
|
4381
4387
|
return;
|
|
@@ -4449,6 +4455,13 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4449
4455
|
}
|
|
4450
4456
|
this.dropdownPanel()?.scrollToRecentlyHighlighted('top');
|
|
4451
4457
|
}
|
|
4458
|
+
_onEscapePress(event) {
|
|
4459
|
+
if (!this.isOpen())
|
|
4460
|
+
return;
|
|
4461
|
+
event.preventDefault();
|
|
4462
|
+
this.itemStorage.clearAllHighlights();
|
|
4463
|
+
this.close();
|
|
4464
|
+
}
|
|
4452
4465
|
_onHomePress(event) {
|
|
4453
4466
|
if (!this.isOpen() ||
|
|
4454
4467
|
(this.searchInput()?.nativeElement.selectionEnd !== 0 && this.searchInput()?.nativeElement.selectionStart !== 0))
|
|
@@ -4498,7 +4511,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
4498
4511
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
4499
4512
|
useExisting: ArdiumSelectComponent,
|
|
4500
4513
|
},
|
|
4501
|
-
], 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, true)\"\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: ["@layer ard-ui{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 }); }
|
|
4514
|
+
], 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 }\r\n @if (shouldDisplayValue()) {\r\n @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]=\"\r\n valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\r\n \"\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 }\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 @if (!readonly()) {\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, true)\"\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 }\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 }\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\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()) {\r\n @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 }\r\n }\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 }\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 }\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: ["@layer ard-ui{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 }); }
|
|
4502
4515
|
}
|
|
4503
4516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
|
|
4504
4517
|
type: Component,
|
|
@@ -4512,7 +4525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
4512
4525
|
provide: ARD_FORM_FIELD_CONTROL,
|
|
4513
4526
|
useExisting: ArdiumSelectComponent,
|
|
4514
4527
|
},
|
|
4515
|
-
], 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, true)\"\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: ["@layer ard-ui{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"] }]
|
|
4528
|
+
], 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 }\r\n @if (shouldDisplayValue()) {\r\n @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]=\"\r\n valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\r\n \"\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 }\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 @if (!readonly()) {\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, true)\"\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 }\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 }\r\n @if (shouldShowClearButton()) {\r\n <ard-clear-button\r\n [title]=\"clearButtonTitle()\"\r\n (click)=\"handleClearButtonClick($event)\"\r\n />\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()) {\r\n @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 }\r\n }\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 }\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 }\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: ["@layer ard-ui{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"] }]
|
|
4516
4529
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4517
4530
|
type: Inject,
|
|
4518
4531
|
args: [ARD_SELECT_DEFAULTS]
|
|
@@ -8691,7 +8704,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
|
|
|
8691
8704
|
this.isRangeSelector = false;
|
|
8692
8705
|
this.dateInputValue = model('');
|
|
8693
8706
|
//! date input event handlers
|
|
8694
|
-
this.dateInput = viewChild
|
|
8707
|
+
this.dateInput = viewChild('dateInput');
|
|
8695
8708
|
this.inputAttrs = input(this._DEFAULTS.inputAttrs);
|
|
8696
8709
|
this.inputReadOnly = input(this._DEFAULTS.inputReadOnly, {
|
|
8697
8710
|
transform: v => coerceBooleanProperty(v),
|
|
@@ -8786,7 +8799,9 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
|
|
|
8786
8799
|
this.value.set(date);
|
|
8787
8800
|
}
|
|
8788
8801
|
_setDateInputAttributes() {
|
|
8789
|
-
const input = this.dateInput()
|
|
8802
|
+
const input = this.dateInput()?.nativeElement;
|
|
8803
|
+
if (!input)
|
|
8804
|
+
return;
|
|
8790
8805
|
const attributes = {
|
|
8791
8806
|
type: 'text',
|
|
8792
8807
|
autocorrect: 'off',
|
|
@@ -8813,7 +8828,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
|
|
|
8813
8828
|
if (this.disabled() || this.readonly())
|
|
8814
8829
|
return;
|
|
8815
8830
|
super.onGeneralClick(event);
|
|
8816
|
-
this.dateInput()
|
|
8831
|
+
this.dateInput()?.nativeElement.focus();
|
|
8817
8832
|
if (this.isOpen()) {
|
|
8818
8833
|
this.close();
|
|
8819
8834
|
}
|