@tedi-design-system/angular 6.3.0-rc.10 → 6.3.0-rc.11
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.
|
@@ -4,7 +4,7 @@ import * as i1 from '@angular/cdk/layout';
|
|
|
4
4
|
import * as i1$2 from '@angular/common';
|
|
5
5
|
import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
|
|
6
6
|
import * as i2 from '@angular/cdk/overlay';
|
|
7
|
-
import { Overlay, OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
|
|
7
|
+
import { Overlay, OverlayConfig, CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
|
|
8
8
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
9
9
|
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
10
10
|
import * as i1$1 from 'ngx-float-ui';
|
|
@@ -4627,6 +4627,12 @@ class SelectComponent {
|
|
|
4627
4627
|
* @default false
|
|
4628
4628
|
*/
|
|
4629
4629
|
searchable = input(false);
|
|
4630
|
+
/**
|
|
4631
|
+
* Custom search function for filtering options.
|
|
4632
|
+
* When provided, overrides the default label-based search.
|
|
4633
|
+
* Receives the search term and the option item (with all original properties), returns true to include the option.
|
|
4634
|
+
*/
|
|
4635
|
+
searchFn = input();
|
|
4630
4636
|
SpecialOptionControls = SpecialOptionControls;
|
|
4631
4637
|
dropdownPositions = [
|
|
4632
4638
|
// Open below, expand downward
|
|
@@ -4663,6 +4669,7 @@ class SelectComponent {
|
|
|
4663
4669
|
});
|
|
4664
4670
|
listboxRef = viewChild(CdkListbox, { read: ElementRef });
|
|
4665
4671
|
cdkListboxRef = viewChild(CdkListbox);
|
|
4672
|
+
connectedOverlay = viewChild(CdkConnectedOverlay);
|
|
4666
4673
|
triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
|
|
4667
4674
|
searchInputRef = viewChild("searchInput");
|
|
4668
4675
|
multiselectContainerRef = viewChild("multiselectContainer");
|
|
@@ -4705,10 +4712,15 @@ class SelectComponent {
|
|
|
4705
4712
|
});
|
|
4706
4713
|
filteredOptions = computed(() => {
|
|
4707
4714
|
const options = this.normalizedOptions();
|
|
4708
|
-
const
|
|
4709
|
-
if (!
|
|
4715
|
+
const trimmed = this.searchTerm().trim();
|
|
4716
|
+
if (!trimmed) {
|
|
4710
4717
|
return options;
|
|
4711
4718
|
}
|
|
4719
|
+
const term = trimmed.toLowerCase();
|
|
4720
|
+
const searchFn = this.searchFn();
|
|
4721
|
+
if (searchFn) {
|
|
4722
|
+
return options.filter((option) => searchFn(term, option));
|
|
4723
|
+
}
|
|
4712
4724
|
return options.filter((option) => option.label.toLowerCase().includes(term));
|
|
4713
4725
|
});
|
|
4714
4726
|
optionGroups = computed(() => {
|
|
@@ -4745,12 +4757,25 @@ class SelectComponent {
|
|
|
4745
4757
|
return !this.searchTerm() && !!this.selectedValues().length && !this.allowMultiple();
|
|
4746
4758
|
});
|
|
4747
4759
|
allOptionsSelected = computed(() => {
|
|
4748
|
-
const
|
|
4760
|
+
const options = this.searchTerm().trim()
|
|
4761
|
+
? this.filteredOptions()
|
|
4762
|
+
: this.normalizedOptions();
|
|
4763
|
+
const enabledOptions = options.filter((o) => !o.disabled);
|
|
4749
4764
|
const selected = this.selectedValues();
|
|
4750
4765
|
const compareWith = this.compareWith();
|
|
4751
4766
|
return (enabledOptions.length > 0 &&
|
|
4752
4767
|
enabledOptions.every((option) => selected.some((val) => compareWith(option.value, val))));
|
|
4753
4768
|
});
|
|
4769
|
+
someOptionsSelected = computed(() => {
|
|
4770
|
+
const options = this.searchTerm().trim()
|
|
4771
|
+
? this.filteredOptions()
|
|
4772
|
+
: this.normalizedOptions();
|
|
4773
|
+
const enabledOptions = options.filter((o) => !o.disabled);
|
|
4774
|
+
const selected = this.selectedValues();
|
|
4775
|
+
const compareWith = this.compareWith();
|
|
4776
|
+
const selectedCount = enabledOptions.filter((option) => selected.some((val) => compareWith(option.value, val))).length;
|
|
4777
|
+
return selectedCount > 0 && selectedCount < enabledOptions.length;
|
|
4778
|
+
});
|
|
4754
4779
|
ngAfterContentChecked() {
|
|
4755
4780
|
this.setDropdownWidth();
|
|
4756
4781
|
}
|
|
@@ -4758,6 +4783,9 @@ class SelectComponent {
|
|
|
4758
4783
|
if (this.allowMultiple() && !this.multiRow()) {
|
|
4759
4784
|
this.calculateVisibleTags();
|
|
4760
4785
|
}
|
|
4786
|
+
if (this.isOpen()) {
|
|
4787
|
+
this.connectedOverlay()?.overlayRef?.updatePosition();
|
|
4788
|
+
}
|
|
4761
4789
|
}
|
|
4762
4790
|
onWindowResize() {
|
|
4763
4791
|
this.setDropdownWidth();
|
|
@@ -4819,8 +4847,7 @@ class SelectComponent {
|
|
|
4819
4847
|
this.openDropdown();
|
|
4820
4848
|
}
|
|
4821
4849
|
else {
|
|
4822
|
-
this.
|
|
4823
|
-
this.isOpen.set(false);
|
|
4850
|
+
this.closeDropdown();
|
|
4824
4851
|
}
|
|
4825
4852
|
}
|
|
4826
4853
|
}
|
|
@@ -4851,6 +4878,10 @@ class SelectComponent {
|
|
|
4851
4878
|
this.toggleIsOpen();
|
|
4852
4879
|
}
|
|
4853
4880
|
}
|
|
4881
|
+
onArrowClick(event) {
|
|
4882
|
+
event.stopPropagation();
|
|
4883
|
+
this.toggleIsOpen();
|
|
4884
|
+
}
|
|
4854
4885
|
onTriggerEnter() {
|
|
4855
4886
|
if (!this.isOpen()) {
|
|
4856
4887
|
this.openDropdown();
|
|
@@ -4969,7 +5000,6 @@ class SelectComponent {
|
|
|
4969
5000
|
}
|
|
4970
5001
|
this.selectedValues.set(newSelection);
|
|
4971
5002
|
this.onChange(newSelection);
|
|
4972
|
-
this.searchTerm.set("");
|
|
4973
5003
|
if (this.searchable()) {
|
|
4974
5004
|
this.searchInputRef()?.nativeElement.focus();
|
|
4975
5005
|
}
|
|
@@ -5144,19 +5174,28 @@ class SelectComponent {
|
|
|
5144
5174
|
this.dropdownWidth.set(computedWidth);
|
|
5145
5175
|
}
|
|
5146
5176
|
toggleSelectAll() {
|
|
5147
|
-
const
|
|
5177
|
+
const isSearching = !!this.searchTerm().trim();
|
|
5178
|
+
const options = isSearching
|
|
5179
|
+
? this.filteredOptions()
|
|
5180
|
+
: this.normalizedOptions();
|
|
5148
5181
|
const enabledOptions = options.filter((o) => !o.disabled);
|
|
5149
5182
|
const compareWith = this.compareWith();
|
|
5150
|
-
const disabledSelectedValues = this.selectedValues().filter((val) => options.some((o) => o.disabled && compareWith(val, o.value)));
|
|
5151
5183
|
if (this.allOptionsSelected()) {
|
|
5152
|
-
|
|
5153
|
-
this.
|
|
5184
|
+
// Deselect: remove only the visible enabled options, keep the rest
|
|
5185
|
+
const newSelection = this.selectedValues().filter((val) => !enabledOptions.some((o) => compareWith(val, o.value)));
|
|
5186
|
+
this.selectedValues.set(newSelection);
|
|
5187
|
+
this.onChange(newSelection);
|
|
5154
5188
|
}
|
|
5155
5189
|
else {
|
|
5156
|
-
|
|
5157
|
-
const
|
|
5158
|
-
|
|
5159
|
-
|
|
5190
|
+
// Select: add visible enabled options to current selection
|
|
5191
|
+
const newSelection = [...this.selectedValues()];
|
|
5192
|
+
for (const option of enabledOptions) {
|
|
5193
|
+
if (!newSelection.some((val) => compareWith(val, option.value))) {
|
|
5194
|
+
newSelection.push(option.value);
|
|
5195
|
+
}
|
|
5196
|
+
}
|
|
5197
|
+
this.selectedValues.set(newSelection);
|
|
5198
|
+
this.onChange(newSelection);
|
|
5160
5199
|
}
|
|
5161
5200
|
}
|
|
5162
5201
|
toggleGroupSelection(groupLabel) {
|
|
@@ -5205,13 +5244,13 @@ class SelectComponent {
|
|
|
5205
5244
|
}
|
|
5206
5245
|
}
|
|
5207
5246
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
|
|
5247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
|
|
5209
5248
|
{
|
|
5210
5249
|
provide: NG_VALUE_ACCESSOR,
|
|
5211
5250
|
useExisting: forwardRef(() => SelectComponent),
|
|
5212
5251
|
multi: true,
|
|
5213
5252
|
},
|
|
5214
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n }\n <input\n #searchInput\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"selectedValues().length ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n />\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n @if (hiddenTagsCount() > 0) {\n <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\">\n <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 50px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5253
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <button\n class=\"tedi-select__arrow\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n @if (hiddenTagsCount() > 0) {\n <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5215
5254
|
}
|
|
5216
5255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
|
|
5217
5256
|
type: Component,
|
|
@@ -5237,7 +5276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5237
5276
|
useExisting: forwardRef(() => SelectComponent),
|
|
5238
5277
|
multi: true,
|
|
5239
5278
|
},
|
|
5240
|
-
], template: "@if (label()) {\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n }\n <input\n #searchInput\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"selectedValues().length ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n />\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n @if (hiddenTagsCount() > 0) {\n <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\">\n <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 50px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
|
|
5279
|
+
], template: "@if (label()) {\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <button\n class=\"tedi-select__arrow\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n @if (hiddenTagsCount() > 0) {\n <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
|
|
5241
5280
|
}], ctorParameters: () => [], propDecorators: { onWindowResize: [{
|
|
5242
5281
|
type: HostListener,
|
|
5243
5282
|
args: ["window:resize"]
|