@tedi-design-system/angular 10.0.0-rc.7 → 10.0.0-rc.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# TEDI Design System for Angular
|
|
2
|
+
|
|
3
|
+
[](https://codecov.io/gh/TEDI-Design-System/angular)
|
|
4
|
+
[](https://github.com/semantic-release/semantic-release)
|
|
5
|
+
|
|
6
|
+
`@tedi-design-system/angular` is a library of Angular components implementing the TEDI Design System.
|
|
7
|
+
It provides reusable, accessible, and consistent UI components to streamline building Angular applications.
|
|
8
|
+
|
|
9
|
+
Component documentation, examples and APIs are in [Storybook](https://storybook.tedi.ee/angular/main/?path=/docs/documentation-get-started--get-started).
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Getting Started
|
|
14
|
+
|
|
15
|
+
### Installation
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm install @tedi-design-system/angular
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Peer dependencies: `@angular/core`, `@angular/common`, `@angular/forms`, `@angular/platform-browser` and `@angular/cdk` 20, 21 or 22. The text editor also needs `quill` and the `ngx-quill` major that matches your Angular version: 28 for Angular 20, 30 for 21 and 31 for 22. Design tokens, fonts and icons come from `@tedi-design-system/core`, which is installed with the package.
|
|
22
|
+
|
|
23
|
+
### Setup
|
|
24
|
+
|
|
25
|
+
Add the stylesheet (fonts, tokens and component styles) to `angular.json`, next to your app's own global styles:
|
|
26
|
+
|
|
27
|
+
```jsonc
|
|
28
|
+
// projects.<app>.architect.build.options
|
|
29
|
+
"styles": ["node_modules/@tedi-design-system/angular/index.css", "src/styles.scss"]
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
To load only one Material Symbols style, use `index-without-icons.css` together with one of `icons/outlined.css`, `icons/rounded.css` or `icons/sharp.css`.
|
|
33
|
+
|
|
34
|
+
The text editor also needs Quill's stylesheets in your global styles:
|
|
35
|
+
|
|
36
|
+
```scss
|
|
37
|
+
// src/styles.scss
|
|
38
|
+
@forward "quill/dist/quill.core.css";
|
|
39
|
+
@forward "quill/dist/quill.snow.css";
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Provide the theme and language in your application config, and start `ThemeService` with the app:
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
// app.config.ts
|
|
46
|
+
import { ApplicationConfig, inject, provideAppInitializer } from "@angular/core";
|
|
47
|
+
import { provideTedi, ThemeService } from "@tedi-design-system/angular/tedi";
|
|
48
|
+
|
|
49
|
+
export const appConfig: ApplicationConfig = {
|
|
50
|
+
providers: [
|
|
51
|
+
provideTedi({ language: "et", theme: "default" }),
|
|
52
|
+
provideAppInitializer(() => {
|
|
53
|
+
inject(ThemeService);
|
|
54
|
+
}),
|
|
55
|
+
],
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
`ThemeService` sets the theme class on `<html>`. It is created only when something injects it, so without the initializer a theme other than `default`, or one saved in the `tedi-theme` cookie, is not applied on load.
|
|
60
|
+
|
|
61
|
+
### Usage
|
|
62
|
+
|
|
63
|
+
Components are standalone. Import them into the component that uses them:
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
import { Component } from "@angular/core";
|
|
67
|
+
import { ButtonComponent } from "@tedi-design-system/angular/tedi";
|
|
68
|
+
|
|
69
|
+
@Component({
|
|
70
|
+
selector: "app-root",
|
|
71
|
+
imports: [ButtonComponent],
|
|
72
|
+
template: `<button tedi-button variant="primary">Save</button>`,
|
|
73
|
+
})
|
|
74
|
+
export class AppComponent {}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
TEDI-Ready components are exported from `@tedi-design-system/angular/tedi`, community components from `@tedi-design-system/angular/community`. The text editor has its own entry point, `@tedi-design-system/angular/community/text-editor`, so apps that don't use it don't need Quill. Prefer a TEDI-Ready component where one exists. Browse all components in [Storybook](https://storybook.tedi.ee/angular/main/?path=/docs/documentation-get-started--get-started).
|
|
78
|
+
|
|
79
|
+
### Supported versions
|
|
80
|
+
|
|
81
|
+
The library supports the three latest Angular majors, currently **Angular 20, 21 and 22**. See [Supported versions](https://github.com/TEDI-Design-System/general/wiki/Supported-versions) in the wiki for the policy and the [Angular release schedule](https://angular.dev/reference/releases) for upcoming dates.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Accessibility
|
|
86
|
+
|
|
87
|
+
TEDI follows EN 301 549 and, for web content, WCAG 2.2 level AA. Components released before TEDI moved to WCAG 2.2 were built and tested against WCAG 2.1 AA and are being reviewed for the new criteria.
|
|
88
|
+
|
|
89
|
+
The [accessibility page on tedi.ee](https://www.tedi.ee/1ee8444b7/p/33df89-sissejuhatus/b/05a2e8) (in Estonian) describes how components are tested, what TEDI covers and what stays with your project, and how to report an accessibility issue.
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## AI Tooling
|
|
94
|
+
|
|
95
|
+
### For consumers: the `tedi-angular` skill
|
|
96
|
+
|
|
97
|
+
Helps AI coding agents build UIs with `@tedi-design-system/angular`: component usage, forms integration, theming and translation setup.
|
|
98
|
+
|
|
99
|
+
Install it into your agent (Claude Code, Cursor, Codex and others) with the [`skills`](https://www.skills.sh) CLI, from your project root:
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
npx skills add https://github.com/TEDI-Design-System/angular --skill tedi-angular
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### For contributors: the `contributing` skill
|
|
106
|
+
|
|
107
|
+
Guides development inside this repository: creating new components, running tests and lint, WCAG audits, refactoring and Storybook stories. Available as `/contributing` when working in this repository. Skills for contributing across the design system live in [TEDI-Design-System/ai-skills](https://github.com/TEDI-Design-System/ai-skills).
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Contributing
|
|
112
|
+
|
|
113
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for how to report issues, set up the repository and open a pull request, and for adding or dropping an Angular major. Component guidelines and coding standards are in the [wiki](https://github.com/TEDI-Design-System/general/wiki).
|
|
114
|
+
|
|
115
|
+
To work on the library locally:
|
|
116
|
+
|
|
117
|
+
```
|
|
118
|
+
npm install
|
|
119
|
+
npm run start
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
`npm run start` launches Storybook for developing components in isolation.
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## Visual Testing
|
|
127
|
+
|
|
128
|
+
[](https://www.chromatic.com/)
|
|
129
|
+
|
|
130
|
+
We use [Chromatic](https://www.chromatic.com/) for visual testing, reviewing UI changes, and preventing visual regressions.
|
|
131
|
+
|
|
132
|
+
## License
|
|
133
|
+
|
|
134
|
+
[MIT](LICENSE). The bundled fonts and the logos in `public/` are not covered, see [NOTICE.md](NOTICE.md).
|
|
@@ -10378,7 +10378,7 @@ class SelectComponent {
|
|
|
10378
10378
|
useExisting: forwardRef(() => SelectComponent),
|
|
10379
10379
|
multi: true,
|
|
10380
10380
|
},
|
|
10381
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "tooltipTemplate", first: true, predicate: SelectTooltipTemplateDirective, 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: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "virtualListboxRef", first: true, predicate: ["virtualListbox"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], 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 <tedi-label-row>\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 @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\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() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : 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]=\"showSingleSelectedValue() ? '' : 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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && 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 <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\n }\n}\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #singleValue>\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</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 (attach)=\"onOverlayAttached()\"\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 @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\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-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\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-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\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-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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 }\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--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=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-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-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{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-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){--_field-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{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.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;outline:none}.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{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;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-radius-rounded);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(--body-regular-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 1 var(--_search-input-reserve);width:auto;min-width:0;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),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--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__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.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:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;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__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: "ngmodule", type: ScrollingModule }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { 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", "visuallyHidden"] }, { kind: "component", type: LabelRowComponent, selector: "tedi-label-row" }, { kind: "component", type: InfoTooltipComponent, selector: "tedi-info-tooltip", inputs: ["position", "openWith", "maxWidth", "color", "ariaLabel"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: OptionContentComponent, selector: "tedi-option-content", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: OptionContentLabelComponent, selector: "tedi-option-content-label", inputs: ["clipContent"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10381
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "tooltipTemplate", first: true, predicate: SelectTooltipTemplateDirective, 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: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "virtualListboxRef", first: true, predicate: ["virtualListbox"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], 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 <tedi-label-row>\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 @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\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() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n [attr.aria-disabled]=\"disabled() || 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]=\"showSingleSelectedValue() ? '' : 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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && 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 <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\n }\n}\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #singleValue>\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</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 (attach)=\"onOverlayAttached()\"\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 @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\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-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\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-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\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-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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 }\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--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=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-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-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{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-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){--_field-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{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.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;outline:none}.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{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;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-radius-rounded);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(--body-regular-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 1 var(--_search-input-reserve);width:auto;min-width:0;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),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--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__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.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:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;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__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: "ngmodule", type: ScrollingModule }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { 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", "visuallyHidden"] }, { kind: "component", type: LabelRowComponent, selector: "tedi-label-row" }, { kind: "component", type: InfoTooltipComponent, selector: "tedi-info-tooltip", inputs: ["position", "openWith", "maxWidth", "color", "ariaLabel"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: OptionContentComponent, selector: "tedi-option-content", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: OptionContentLabelComponent, selector: "tedi-option-content-label", inputs: ["clipContent"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10382
10382
|
}
|
|
10383
10383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
|
|
10384
10384
|
type: Component,
|
|
@@ -10409,7 +10409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10409
10409
|
useExisting: forwardRef(() => SelectComponent),
|
|
10410
10410
|
multi: true,
|
|
10411
10411
|
},
|
|
10412
|
-
], template: "@if (label()) {\n <tedi-label-row>\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 @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\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() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : 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]=\"showSingleSelectedValue() ? '' : 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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && 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 <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\n }\n}\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #singleValue>\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</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 (attach)=\"onOverlayAttached()\"\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 @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\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-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\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-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\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-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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 }\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--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=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-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-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{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-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){--_field-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{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.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;outline:none}.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{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;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-radius-rounded);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(--body-regular-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 1 var(--_search-input-reserve);width:auto;min-width:0;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),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--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__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.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:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;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__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.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"] }]
|
|
10412
|
+
], template: "@if (label()) {\n <tedi-label-row>\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 @if (tooltipTemplate()?.template; as tooltipTpl) {\n <tedi-info-tooltip>\n <ng-container [ngTemplateOutlet]=\"tooltipTpl\" />\n </tedi-info-tooltip>\n } @else if (tooltip(); as tooltipText) {\n <tedi-info-tooltip>{{ tooltipText }}</tedi-info-tooltip>\n }\n </tedi-label-row>\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() && isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-invalid]=\"!searchable() ? isInvalid() || null : null\"\n [attr.aria-describedby]=\"!searchable() ? feedbackId() : null\"\n [attr.aria-disabled]=\"disabled() || 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]=\"showSingleSelectedValue() ? '' : 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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 if (ellipsis(); as ellipsisPos) {\n <tedi-ellipsis [position]=\"ellipsisPos\" [lineClamp]=\"1\">\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n </tedi-ellipsis>\n } @else {\n <ng-container [ngTemplateOutlet]=\"singleValue\" />\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && !disabled() && 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 <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (name(); as fieldName) {\n @for (formValue of formValues(); track $index) {\n <input\n type=\"hidden\"\n [name]=\"fieldName\"\n [value]=\"formValue\"\n [disabled]=\"disabled()\"\n />\n }\n}\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #singleValue>\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</ng-template>\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n [class.tedi-select__multiselect-container--ellipsis]=\"tagEllipsis()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\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]=\"isOpen() ? listboxId() : null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"feedbackId()\"\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 (attach)=\"onOverlayAttached()\"\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 @if (virtualize()) {\n <div\n #virtualListbox\n [id]=\"listboxId()\"\n class=\"tedi-select__options tedi-select__options--virtual\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"allowMultiple() ? true : null\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [tabindex]=\"searchable() ? -1 : 0\"\n (keydown)=\"onVirtualListboxKeydown($event)\"\n >\n @if (filteredOptions().length) {\n @if (showSelectAllRow()) {\n <div\n class=\"tedi-dropdown-item\"\n [id]=\"listboxId() + '-select-all'\"\n role=\"option\"\n [attr.aria-selected]=\"allOptionsSelected()\"\n [class.tedi-dropdown-item--active]=\"activeIndex() === 0\"\n (click)=\"onVirtualSelectAllClick()\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n }\n <cdk-virtual-scroll-viewport\n class=\"tedi-select__viewport\"\n [itemSize]=\"virtualRowHeight()\"\n [style.height.px]=\"virtualViewportHeight()\"\n [minBufferPx]=\"virtualRowHeight() * 6\"\n [maxBufferPx]=\"virtualRowHeight() * 12\"\n >\n <div\n *cdkVirtualFor=\"\n let option of filteredOptions();\n let i = index;\n trackBy: trackByOptionValue\n \"\n class=\"tedi-dropdown-item\"\n [id]=\"virtualOptionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled ? true : null\"\n [class.tedi-dropdown-item--selected]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [class.tedi-dropdown-item--active]=\"\n activeIndex() - (showSelectAllRow() ? 1 : 0) === i\n \"\n (click)=\"onVirtualOptionClick(option)\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"tedi-dropdown-item tedi-select__no-options\"\n role=\"option\"\n aria-disabled=\"true\"\n >\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </div>\n }\n </div>\n } @else {\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-option-content\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-option-content-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-option-content-label>\n </tedi-option-content>\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-option-content\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-option-content-label>{{\n group.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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]=\"\n !allowMultiple() && isOptionSelected(option.value)\n \"\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-option-content\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-option-content-label>{{\n option.label\n }}</tedi-option-content-label>\n </tedi-option-content>\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 }\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--selected,[aria-selected=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true],.tedi-dropdown-item--selected,[aria-selected=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-dropdown-content__list--plain>li[tedi-dropdown-item]{position:relative}.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] a[href]:after,.tedi-dropdown-content__list--plain>li[tedi-dropdown-item] button:after{position:absolute;inset:0;content:\"\"}.tedi-input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x);--_placeholder-color: var(--form-input-text-placeholder);--_search-input-reserve: 5rem;margin-bottom:0;font-family:var(--family-default);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled)}.tedi-input:hover{--_field-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{--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);color:var(--form-input-text-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_field-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){--_field-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{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select--clear-on-interaction .tedi-select__clear{visibility:hidden}.tedi-select--clear-on-interaction .tedi-select__clear+.tedi-select__arrow{border-left-color:transparent}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear{visibility:visible}.tedi-select--clear-on-interaction .tedi-select__trigger:hover .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:active .tedi-select__clear+.tedi-select__arrow,.tedi-select--clear-on-interaction .tedi-select__trigger:focus-within .tedi-select__clear+.tedi-select__arrow{border-left-color:var(--general-border-primary)}.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;outline:none}.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{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;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-radius-rounded);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(--body-regular-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 1 var(--_search-input-reserve);width:auto;min-width:0;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),.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--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__options--virtual{display:flex;flex-direction:column;overflow:visible}.tedi-select__viewport{width:100%}.tedi-select__viewport .tedi-dropdown-item{box-sizing:border-box}.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:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);min-width:0}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 0 auto;gap:var(--form-field-inner-spacing);min-width:0;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__multiselect-container--single-row .tedi-select__multiselect-counter{flex-shrink:0}.tedi-select__multiselect-container--single-row.tedi-select__multiselect-container--ellipsis .tedi-select__multiselect-tags{flex:0 1 auto}.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"] }]
|
|
10413
10413
|
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showClearOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearOnInteraction", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], dropdownAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownAlign", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], disabledKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKey", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], maxDropdownHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDropdownHeight", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], dropdownType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownType", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], cdkListboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], virtualListboxRef: [{ type: i0.ViewChild, args: ["virtualListbox", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ["trigger", { ...{ read: ElementRef }, isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], multiselectContainerRef: [{ type: i0.ViewChild, args: ["multiselectContainer", { isSignal: true }] }], tagRefs: [{ type: i0.ViewChildren, args: ["tagElement", { ...{ read: ElementRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValueTemplateDirective), { isSignal: true }] }], tooltipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTooltipTemplateDirective), { isSignal: true }] }], onWindowResize: [{
|
|
10414
10414
|
type: HostListener,
|
|
10415
10415
|
args: ["window:resize"]
|