@tedi-design-system/angular 9.0.0-rc.10 → 9.0.0-rc.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -916,9 +916,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
916
916
|
}, styles: ["input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1.125rem;position:relative;width:var(--form-checkbox-radio-size-responsive);min-width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-checkbox)}@media(min-width:36rem){input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1rem}}input[tedi-checkbox][type=checkbox]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-checkbox][type=checkbox]:not(:disabled):active{background-color:var(--form-checkbox-radio-default-background-active);border-color:var(--form-checkbox-radio-default-border-active);box-shadow:none}input[tedi-checkbox][type=checkbox]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-checkbox][type=checkbox]:checked,input[tedi-checkbox][type=checkbox]:indeterminate{background-color:var(--form-checkbox-radio-default-background-selected);border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-checkbox][type=checkbox]:checked:disabled,input[tedi-checkbox][type=checkbox]:indeterminate:disabled{cursor:not-allowed;background-color:var(--form-checkbox-radio-default-background-selected-disabled);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-checkbox][type=checkbox]:checked:before,input[tedi-checkbox][type=checkbox]:indeterminate:before{position:absolute;top:50%;left:50%;font-family:Material Symbols Outlined,sans-serif;font-size:var(--_checkbox-icon-size);line-height:1;color:var(--form-checkbox-radio-default-check-indicator-default);content:\"check\";transform:translate(-50%,-50%);-webkit-font-smoothing:antialiased}input[tedi-checkbox][type=checkbox]:checked:before{content:\"check\"}input[tedi-checkbox][type=checkbox]:indeterminate:before{content:\"remove\"}input[tedi-checkbox][type=checkbox]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled):user-invalid,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).ng-invalid.ng-touched{background-color:var(--form-checkbox-radio-default-background-error);border-color:var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid:hover,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled):user-invalid:hover,input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).ng-invalid.ng-touched:hover{border-color:var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox].tedi-checkbox--large{--_checkbox-icon-size: 1.125rem;width:var(--form-checkbox-radio-size-large);height:var(--form-checkbox-radio-size-large)}label:has(input[tedi-checkbox]:not(:disabled)){cursor:pointer}label:has(input[tedi-checkbox]:disabled){cursor:not-allowed}label:has(input[tedi-checkbox])+tedi-feedback-text{padding-left:var(--form-checkbox-radio-size-responsive);margin-left:var(--form-checkbox-radio-inner-spacing)}\n"] }]
|
|
917
917
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
918
918
|
|
|
919
|
-
class
|
|
919
|
+
class OptionContentComponent {
|
|
920
920
|
/**
|
|
921
|
-
* Type of
|
|
921
|
+
* Type of option content - controls selection indicator
|
|
922
922
|
* - 'default': No selection indicator
|
|
923
923
|
* - 'checkbox': Shows checkbox (for multiselect)
|
|
924
924
|
* - 'radio': Shows radio button (for single select listbox)
|
|
@@ -955,21 +955,21 @@ class DropdownItemValueComponent {
|
|
|
955
955
|
onIndicatorClick(event) {
|
|
956
956
|
event.preventDefault();
|
|
957
957
|
}
|
|
958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type:
|
|
959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type:
|
|
958
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OptionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
959
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: OptionContentComponent, isStandalone: true, selector: "tedi-option-content", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-option-content--vertical": "layout() === 'vertical'", "class.tedi-option-content--horizontal": "layout() === 'horizontal'", "class.tedi-option-content--checkbox": "type() === 'checkbox'", "class.tedi-option-content--radio": "type() === 'radio'" }, classAttribute: "tedi-option-content" }, ngImport: i0, template: "@if (type() === \"checkbox\") {\n <input\n type=\"checkbox\"\n tedi-checkbox\n class=\"tedi-option-content__checkbox\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [checked]=\"selected()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (click)=\"onIndicatorClick($event)\"\n />\n} @else if (type() === \"radio\") {\n <input\n type=\"radio\"\n class=\"tedi-option-content__radio\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [checked]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"onIndicatorClick($event)\"\n />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-option-content__content\">\n <ng-content select=\"tedi-option-content-label\" />\n <ng-content select=\"tedi-option-content-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-option-content{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-option-content--vertical.tedi-option-content--checkbox,.tedi-option-content--vertical.tedi-option-content--radio{align-items:flex-start}.tedi-option-content--vertical.tedi-option-content--checkbox>input[tedi-checkbox][type=checkbox],.tedi-option-content--vertical.tedi-option-content--checkbox>input.tedi-option-content__radio,.tedi-option-content--vertical.tedi-option-content--checkbox>.tedi-icon,.tedi-option-content--vertical.tedi-option-content--radio>input[tedi-checkbox][type=checkbox],.tedi-option-content--vertical.tedi-option-content--radio>input.tedi-option-content__radio,.tedi-option-content--vertical.tedi-option-content--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-option-content--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-option-content__checkbox,.tedi-option-content__radio{flex-shrink:0;pointer-events:none}.tedi-option-content__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-option-content__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-option-content__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-option-content__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-option-content__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-option-content__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-option-content__content{display:flex;flex:1 0 0;min-width:0}.tedi-option-content--horizontal .tedi-option-content__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-option-content--vertical .tedi-option-content__content{flex-direction:column;align-items:flex-start}.tedi-option-content__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-option-content__label--no-clip{overflow:visible}.tedi-option-content__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-option-content--vertical .tedi-option-content__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-option-content__label,li[tedi-dropdown-item][aria-selected=true] .tedi-option-content__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-option-content__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-option-content__meta,.tedi-dropdown-item[aria-selected=true] .tedi-option-content__label,.tedi-dropdown-item[aria-selected=true] .tedi-option-content__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-option-content__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-option-content__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-option-content__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-option-content__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-option-content__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-option-content__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-option-content__label,.tedi-dropdown-item[aria-disabled=true] .tedi-option-content__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-option-content__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-option-content__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
960
960
|
}
|
|
961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type:
|
|
961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OptionContentComponent, decorators: [{
|
|
962
962
|
type: Component,
|
|
963
|
-
args: [{ selector: "tedi-
|
|
964
|
-
class: "tedi-
|
|
965
|
-
"[class.tedi-
|
|
966
|
-
"[class.tedi-
|
|
967
|
-
"[class.tedi-
|
|
968
|
-
"[class.tedi-
|
|
969
|
-
}, template: "@if (type() === \"checkbox\") {\n <input\n type=\"checkbox\"\n tedi-checkbox\n class=\"tedi-
|
|
963
|
+
args: [{ selector: "tedi-option-content", standalone: true, imports: [CheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
964
|
+
class: "tedi-option-content",
|
|
965
|
+
"[class.tedi-option-content--vertical]": "layout() === 'vertical'",
|
|
966
|
+
"[class.tedi-option-content--horizontal]": "layout() === 'horizontal'",
|
|
967
|
+
"[class.tedi-option-content--checkbox]": "type() === 'checkbox'",
|
|
968
|
+
"[class.tedi-option-content--radio]": "type() === 'radio'",
|
|
969
|
+
}, template: "@if (type() === \"checkbox\") {\n <input\n type=\"checkbox\"\n tedi-checkbox\n class=\"tedi-option-content__checkbox\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [checked]=\"selected()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (click)=\"onIndicatorClick($event)\"\n />\n} @else if (type() === \"radio\") {\n <input\n type=\"radio\"\n class=\"tedi-option-content__radio\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [checked]=\"selected()\"\n [disabled]=\"disabled()\"\n (click)=\"onIndicatorClick($event)\"\n />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-option-content__content\">\n <ng-content select=\"tedi-option-content-label\" />\n <ng-content select=\"tedi-option-content-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-option-content{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-option-content--vertical.tedi-option-content--checkbox,.tedi-option-content--vertical.tedi-option-content--radio{align-items:flex-start}.tedi-option-content--vertical.tedi-option-content--checkbox>input[tedi-checkbox][type=checkbox],.tedi-option-content--vertical.tedi-option-content--checkbox>input.tedi-option-content__radio,.tedi-option-content--vertical.tedi-option-content--checkbox>.tedi-icon,.tedi-option-content--vertical.tedi-option-content--radio>input[tedi-checkbox][type=checkbox],.tedi-option-content--vertical.tedi-option-content--radio>input.tedi-option-content__radio,.tedi-option-content--vertical.tedi-option-content--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-option-content--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-option-content__checkbox,.tedi-option-content__radio{flex-shrink:0;pointer-events:none}.tedi-option-content__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-option-content__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-option-content__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-option-content__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-option-content__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-option-content__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-option-content__content{display:flex;flex:1 0 0;min-width:0}.tedi-option-content--horizontal .tedi-option-content__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-option-content--vertical .tedi-option-content__content{flex-direction:column;align-items:flex-start}.tedi-option-content__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-option-content__label--no-clip{overflow:visible}.tedi-option-content__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-option-content--vertical .tedi-option-content__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-option-content__label,li[tedi-dropdown-item][aria-selected=true] .tedi-option-content__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-option-content__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-option-content__meta,.tedi-dropdown-item[aria-selected=true] .tedi-option-content__label,.tedi-dropdown-item[aria-selected=true] .tedi-option-content__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-option-content__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-option-content__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-option-content__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-option-content__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-option-content__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-option-content__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-option-content__label,.tedi-dropdown-item[aria-disabled=true] .tedi-option-content__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-option-content__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-option-content__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-option-content--checkbox,.tedi-option-content--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-option-content__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"] }]
|
|
970
970
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
971
971
|
|
|
972
|
-
class
|
|
972
|
+
class OptionContentLabelComponent {
|
|
973
973
|
/**
|
|
974
974
|
* Whether the label clips overflowing content for text ellipsis. Set `false`
|
|
975
975
|
* when the label holds content with decorations that intentionally sit
|
|
@@ -977,20 +977,20 @@ class DropdownItemValueLabelComponent {
|
|
|
977
977
|
* @default true
|
|
978
978
|
*/
|
|
979
979
|
clipContent = input(true, ...(ngDevMode ? [{ debugName: "clipContent" }] : []));
|
|
980
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type:
|
|
981
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type:
|
|
980
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OptionContentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: OptionContentLabelComponent, isStandalone: true, selector: "tedi-option-content-label", inputs: { clipContent: { classPropertyName: "clipContent", publicName: "clipContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-option-content__label--no-clip": "!clipContent()" }, classAttribute: "tedi-option-content__label" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
982
982
|
}
|
|
983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type:
|
|
983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OptionContentLabelComponent, decorators: [{
|
|
984
984
|
type: Component,
|
|
985
985
|
args: [{
|
|
986
|
-
selector: "tedi-
|
|
986
|
+
selector: "tedi-option-content-label",
|
|
987
987
|
template: `<ng-content />`,
|
|
988
988
|
standalone: true,
|
|
989
989
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
990
990
|
encapsulation: ViewEncapsulation.None,
|
|
991
991
|
host: {
|
|
992
|
-
class: "tedi-
|
|
993
|
-
"[class.tedi-
|
|
992
|
+
class: "tedi-option-content__label",
|
|
993
|
+
"[class.tedi-option-content__label--no-clip]": "!clipContent()",
|
|
994
994
|
},
|
|
995
995
|
}]
|
|
996
996
|
}], propDecorators: { clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }] } });
|
|
@@ -1038,8 +1038,8 @@ class DropdownItemComponent {
|
|
|
1038
1038
|
host = inject(ElementRef);
|
|
1039
1039
|
dropdown = inject(DROPDOWN_API);
|
|
1040
1040
|
dropdownContent = inject(DROPDOWN_CONTENT_API);
|
|
1041
|
-
/** Check if custom
|
|
1042
|
-
|
|
1041
|
+
/** Check if custom option content is provided */
|
|
1042
|
+
customOptionContent = contentChild(OptionContentComponent, ...(ngDevMode ? [{ debugName: "customOptionContent" }] : []));
|
|
1043
1043
|
renderer = inject(Renderer2);
|
|
1044
1044
|
destroyRef = inject(DestroyRef);
|
|
1045
1045
|
control = null;
|
|
@@ -1242,17 +1242,17 @@ class DropdownItemComponent {
|
|
|
1242
1242
|
this.dropdown.dropdownTrigger()?.focus();
|
|
1243
1243
|
}
|
|
1244
1244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactiveContent: { classPropertyName: "interactiveContent", publicName: "interactiveContent", isSignal: true, isRequired: false, transformFunction: null }, clipContent: { classPropertyName: "clipContent", publicName: "clipContent", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "click": "onClick()", "mousedown": "onMousedown($event)", "keydown": "onKeydown($event)" }, properties: { "attr.role": "hostRole()", "attr.aria-selected": "hostAriaSelected()", "attr.aria-disabled": "hostAriaDisabled()", "attr.tabindex": "hostTabindex()" } }, queries: [{ propertyName: "
|
|
1245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactiveContent: { classPropertyName: "interactiveContent", publicName: "interactiveContent", isSignal: true, isRequired: false, transformFunction: null }, clipContent: { classPropertyName: "clipContent", publicName: "clipContent", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "click": "onClick()", "mousedown": "onMousedown($event)", "keydown": "onKeydown($event)" }, properties: { "attr.role": "hostRole()", "attr.aria-selected": "hostAriaSelected()", "attr.aria-disabled": "hostAriaDisabled()", "attr.tabindex": "hostTabindex()" } }, queries: [{ propertyName: "customOptionContent", first: true, predicate: OptionContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-option-content\" />\n\n@if (!customOptionContent()) {\n <tedi-option-content>\n <tedi-option-content-label [clipContent]=\"clipContent()\">\n <ng-content />\n </tedi-option-content-label>\n </tedi-option-content>\n}\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:\"\"}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1246
1246
|
}
|
|
1247
1247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
1248
1248
|
type: Component,
|
|
1249
|
-
args: [{ selector: "li[tedi-dropdown-item]", standalone: true, imports: [
|
|
1249
|
+
args: [{ selector: "li[tedi-dropdown-item]", standalone: true, imports: [OptionContentComponent, OptionContentLabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1250
1250
|
"[attr.role]": "hostRole()",
|
|
1251
1251
|
"[attr.aria-selected]": "hostAriaSelected()",
|
|
1252
1252
|
"[attr.aria-disabled]": "hostAriaDisabled()",
|
|
1253
1253
|
"[attr.tabindex]": "hostTabindex()",
|
|
1254
|
-
}, template: "<ng-content select=\"tedi-
|
|
1255
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactiveContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveContent", required: false }] }], clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }],
|
|
1254
|
+
}, template: "<ng-content select=\"tedi-option-content\" />\n\n@if (!customOptionContent()) {\n <tedi-option-content>\n <tedi-option-content-label [clipContent]=\"clipContent()\">\n <ng-content />\n </tedi-option-content-label>\n </tedi-option-content>\n}\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:\"\"}\n"] }]
|
|
1255
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactiveContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveContent", required: false }] }], clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], customOptionContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionContentComponent), { isSignal: true }] }], onClick: [{
|
|
1256
1256
|
type: HostListener,
|
|
1257
1257
|
args: ["click"]
|
|
1258
1258
|
}], onMousedown: [{
|
|
@@ -3723,7 +3723,7 @@ class ButtonGroupComponent {
|
|
|
3723
3723
|
this.toggle(item.value());
|
|
3724
3724
|
}
|
|
3725
3725
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3726
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ButtonGroupComponent, isStandalone: true, selector: "tedi-button-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enableMobileDropdown: { classPropertyName: "enableMobileDropdown", publicName: "enableMobileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabelMode: { classPropertyName: "dropdownLabelMode", publicName: "dropdownLabelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "isDropdownMode() ? null : 'group'", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => ButtonGroupButtonDirective), isSignal: true }], ngImport: i0, template: "<ng-content />\n\n@if (isDropdownMode()) {\n <tedi-dropdown\n class=\"tedi-button-group__dropdown\"\n appendTo=\"body\"\n [offset]=\"0\"\n >\n <button\n tedi-dropdown-trigger\n tedi-button\n type=\"button\"\n [variant]=\"triggerVariant()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n class=\"tedi-button-group__dropdown-trigger\"\n >\n <tedi-icon [name]=\"triggerIcon()\" color=\"inherit\" [size]=\"18\" />\n {{ triggerLabel() }}\n </button>\n\n <tedi-dropdown-content>\n @for (item of items(); track item.value()) {\n <li\n tedi-dropdown-item\n [value]=\"item.value()\"\n [disabled]=\"item.disabled()\"\n [class.tedi-dropdown-item--selected]=\"item.selected()\"\n (itemSelect)=\"onDropdownItemSelect(item)\"\n >\n <tedi-dropdown-item-value>\n @if (item.iconLeft()) {\n <tedi-icon\n [name]=\"item.iconLeft()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n } @else if (item.icon()) {\n <tedi-icon [name]=\"item.icon()!\" color=\"inherit\" [size]=\"18\" />\n }\n <tedi-dropdown-item-value-label>{{\n item.label()\n }}</tedi-dropdown-item-value-label>\n @if (item.iconRight()) {\n <tedi-icon\n [name]=\"item.iconRight()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n }\n </tedi-dropdown-item-value>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n}\n", styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}.tedi-button-group{display:flex}.tedi-button-group--stretch .tedi-button{flex:1}.tedi-button-group .tedi-button:focus-visible{z-index:2}.tedi-button-group .tedi-button[aria-pressed=true]{z-index:1}.tedi-button-group .tedi-button[aria-pressed=true]:not(:disabled){color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group>.tedi-button:not(:first-child){margin-left:calc(var(--tedi-borders-01) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group>.tedi-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tedi-button-group tedi-tooltip:not(:first-child) tedi-tooltip-trigger{margin-left:calc(var(--tedi-borders-01) * -1)}.tedi-button-group tedi-tooltip:not(:first-child) .tedi-button{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group tedi-tooltip:not(:last-child) .tedi-button{border-top-right-radius:0;border-bottom-right-radius:0}@media(max-width:47.98rem){.tedi-button-group .tedi-button{flex:1}}.tedi-button-group--dropdown-mode>.tedi-button,.tedi-button-group--dropdown-mode>tedi-tooltip{display:none}.tedi-button-group__dropdown{display:flex;flex:1 1 auto}.tedi-button-group__dropdown-trigger{flex:1}.tedi-button-group__dropdown-trigger[aria-expanded=true]{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger{border-radius:var(--button-radius-sm)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary{padding:calc(var(--_btn-padding-y) - var(--tedi-borders-02)) calc(var(--_btn-padding-x) - var(--tedi-borders-02));border-width:var(--tedi-borders-02)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary:not([aria-expanded=true]){border-color:var(--button-group-secondary-selected-border)}.tedi-button.tedi-button-group-button{gap:0}.tedi-button-group-button__label{padding-inline:var(--_btn-inner-spacing)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3726
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ButtonGroupComponent, isStandalone: true, selector: "tedi-button-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enableMobileDropdown: { classPropertyName: "enableMobileDropdown", publicName: "enableMobileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabel: { classPropertyName: "dropdownLabel", publicName: "dropdownLabel", isSignal: true, isRequired: false, transformFunction: null }, dropdownLabelMode: { classPropertyName: "dropdownLabelMode", publicName: "dropdownLabelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "isDropdownMode() ? null : 'group'", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => ButtonGroupButtonDirective), isSignal: true }], ngImport: i0, template: "<ng-content />\n\n@if (isDropdownMode()) {\n <tedi-dropdown\n class=\"tedi-button-group__dropdown\"\n appendTo=\"body\"\n [offset]=\"0\"\n >\n <button\n tedi-dropdown-trigger\n tedi-button\n type=\"button\"\n [variant]=\"triggerVariant()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n class=\"tedi-button-group__dropdown-trigger\"\n >\n <tedi-icon [name]=\"triggerIcon()\" color=\"inherit\" [size]=\"18\" />\n {{ triggerLabel() }}\n </button>\n\n <tedi-dropdown-content>\n @for (item of items(); track item.value()) {\n <li\n tedi-dropdown-item\n [value]=\"item.value()\"\n [disabled]=\"item.disabled()\"\n [class.tedi-dropdown-item--selected]=\"item.selected()\"\n (itemSelect)=\"onDropdownItemSelect(item)\"\n >\n <tedi-option-content>\n @if (item.iconLeft()) {\n <tedi-icon\n [name]=\"item.iconLeft()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n } @else if (item.icon()) {\n <tedi-icon [name]=\"item.icon()!\" color=\"inherit\" [size]=\"18\" />\n }\n <tedi-option-content-label>{{\n item.label()\n }}</tedi-option-content-label>\n @if (item.iconRight()) {\n <tedi-icon\n [name]=\"item.iconRight()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n }\n </tedi-option-content>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n}\n", styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}.tedi-button-group{display:flex}.tedi-button-group--stretch .tedi-button{flex:1}.tedi-button-group .tedi-button:focus-visible{z-index:2}.tedi-button-group .tedi-button[aria-pressed=true]{z-index:1}.tedi-button-group .tedi-button[aria-pressed=true]:not(:disabled){color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group>.tedi-button:not(:first-child){margin-left:calc(var(--tedi-borders-01) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group>.tedi-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tedi-button-group tedi-tooltip:not(:first-child) tedi-tooltip-trigger{margin-left:calc(var(--tedi-borders-01) * -1)}.tedi-button-group tedi-tooltip:not(:first-child) .tedi-button{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group tedi-tooltip:not(:last-child) .tedi-button{border-top-right-radius:0;border-bottom-right-radius:0}@media(max-width:47.98rem){.tedi-button-group .tedi-button{flex:1}}.tedi-button-group--dropdown-mode>.tedi-button,.tedi-button-group--dropdown-mode>tedi-tooltip{display:none}.tedi-button-group__dropdown{display:flex;flex:1 1 auto}.tedi-button-group__dropdown-trigger{flex:1}.tedi-button-group__dropdown-trigger[aria-expanded=true]{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger{border-radius:var(--button-radius-sm)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary{padding:calc(var(--_btn-padding-y) - var(--tedi-borders-02)) calc(var(--_btn-padding-x) - var(--tedi-borders-02));border-width:var(--tedi-borders-02)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary:not([aria-expanded=true]){border-color:var(--button-group-secondary-selected-border)}.tedi-button.tedi-button-group-button{gap:0}.tedi-button-group-button__label{padding-inline:var(--_btn-inner-spacing)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3727
3727
|
}
|
|
3728
3728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
3729
3729
|
type: Component,
|
|
@@ -3734,13 +3734,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
3734
3734
|
DropdownTriggerDirective,
|
|
3735
3735
|
DropdownContentComponent,
|
|
3736
3736
|
DropdownItemComponent,
|
|
3737
|
-
|
|
3738
|
-
|
|
3737
|
+
OptionContentComponent,
|
|
3738
|
+
OptionContentLabelComponent,
|
|
3739
3739
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3740
3740
|
"[class]": "hostClasses()",
|
|
3741
3741
|
"[attr.role]": "isDropdownMode() ? null : 'group'",
|
|
3742
3742
|
"[attr.aria-label]": "ariaLabel() || null",
|
|
3743
|
-
}, template: "<ng-content />\n\n@if (isDropdownMode()) {\n <tedi-dropdown\n class=\"tedi-button-group__dropdown\"\n appendTo=\"body\"\n [offset]=\"0\"\n >\n <button\n tedi-dropdown-trigger\n tedi-button\n type=\"button\"\n [variant]=\"triggerVariant()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n class=\"tedi-button-group__dropdown-trigger\"\n >\n <tedi-icon [name]=\"triggerIcon()\" color=\"inherit\" [size]=\"18\" />\n {{ triggerLabel() }}\n </button>\n\n <tedi-dropdown-content>\n @for (item of items(); track item.value()) {\n <li\n tedi-dropdown-item\n [value]=\"item.value()\"\n [disabled]=\"item.disabled()\"\n [class.tedi-dropdown-item--selected]=\"item.selected()\"\n (itemSelect)=\"onDropdownItemSelect(item)\"\n >\n <tedi-dropdown-item-value>\n @if (item.iconLeft()) {\n <tedi-icon\n [name]=\"item.iconLeft()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n } @else if (item.icon()) {\n <tedi-icon [name]=\"item.icon()!\" color=\"inherit\" [size]=\"18\" />\n }\n <tedi-dropdown-item-value-label>{{\n item.label()\n }}</tedi-dropdown-item-value-label>\n @if (item.iconRight()) {\n <tedi-icon\n [name]=\"item.iconRight()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n }\n </tedi-dropdown-item-value>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n}\n", styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}.tedi-button-group{display:flex}.tedi-button-group--stretch .tedi-button{flex:1}.tedi-button-group .tedi-button:focus-visible{z-index:2}.tedi-button-group .tedi-button[aria-pressed=true]{z-index:1}.tedi-button-group .tedi-button[aria-pressed=true]:not(:disabled){color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group>.tedi-button:not(:first-child){margin-left:calc(var(--tedi-borders-01) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group>.tedi-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tedi-button-group tedi-tooltip:not(:first-child) tedi-tooltip-trigger{margin-left:calc(var(--tedi-borders-01) * -1)}.tedi-button-group tedi-tooltip:not(:first-child) .tedi-button{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group tedi-tooltip:not(:last-child) .tedi-button{border-top-right-radius:0;border-bottom-right-radius:0}@media(max-width:47.98rem){.tedi-button-group .tedi-button{flex:1}}.tedi-button-group--dropdown-mode>.tedi-button,.tedi-button-group--dropdown-mode>tedi-tooltip{display:none}.tedi-button-group__dropdown{display:flex;flex:1 1 auto}.tedi-button-group__dropdown-trigger{flex:1}.tedi-button-group__dropdown-trigger[aria-expanded=true]{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger{border-radius:var(--button-radius-sm)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary{padding:calc(var(--_btn-padding-y) - var(--tedi-borders-02)) calc(var(--_btn-padding-x) - var(--tedi-borders-02));border-width:var(--tedi-borders-02)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary:not([aria-expanded=true]){border-color:var(--button-group-secondary-selected-border)}.tedi-button.tedi-button-group-button{gap:0}.tedi-button-group-button__label{padding-inline:var(--_btn-inner-spacing)}\n"] }]
|
|
3743
|
+
}, template: "<ng-content />\n\n@if (isDropdownMode()) {\n <tedi-dropdown\n class=\"tedi-button-group__dropdown\"\n appendTo=\"body\"\n [offset]=\"0\"\n >\n <button\n tedi-dropdown-trigger\n tedi-button\n type=\"button\"\n [variant]=\"triggerVariant()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n class=\"tedi-button-group__dropdown-trigger\"\n >\n <tedi-icon [name]=\"triggerIcon()\" color=\"inherit\" [size]=\"18\" />\n {{ triggerLabel() }}\n </button>\n\n <tedi-dropdown-content>\n @for (item of items(); track item.value()) {\n <li\n tedi-dropdown-item\n [value]=\"item.value()\"\n [disabled]=\"item.disabled()\"\n [class.tedi-dropdown-item--selected]=\"item.selected()\"\n (itemSelect)=\"onDropdownItemSelect(item)\"\n >\n <tedi-option-content>\n @if (item.iconLeft()) {\n <tedi-icon\n [name]=\"item.iconLeft()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n } @else if (item.icon()) {\n <tedi-icon [name]=\"item.icon()!\" color=\"inherit\" [size]=\"18\" />\n }\n <tedi-option-content-label>{{\n item.label()\n }}</tedi-option-content-label>\n @if (item.iconRight()) {\n <tedi-icon\n [name]=\"item.iconRight()!\"\n color=\"inherit\"\n [size]=\"18\"\n />\n }\n </tedi-option-content>\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n}\n", styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}.tedi-button-group{display:flex}.tedi-button-group--stretch .tedi-button{flex:1}.tedi-button-group .tedi-button:focus-visible{z-index:2}.tedi-button-group .tedi-button[aria-pressed=true]{z-index:1}.tedi-button-group .tedi-button[aria-pressed=true]:not(:disabled){color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group>.tedi-button:not(:first-child){margin-left:calc(var(--tedi-borders-01) * -1);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group>.tedi-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tedi-button-group tedi-tooltip:not(:first-child) tedi-tooltip-trigger{margin-left:calc(var(--tedi-borders-01) * -1)}.tedi-button-group tedi-tooltip:not(:first-child) .tedi-button{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-button-group tedi-tooltip:not(:last-child) .tedi-button{border-top-right-radius:0;border-bottom-right-radius:0}@media(max-width:47.98rem){.tedi-button-group .tedi-button{flex:1}}.tedi-button-group--dropdown-mode>.tedi-button,.tedi-button-group--dropdown-mode>tedi-tooltip{display:none}.tedi-button-group__dropdown{display:flex;flex:1 1 auto}.tedi-button-group__dropdown-trigger{flex:1}.tedi-button-group__dropdown-trigger[aria-expanded=true]{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger{border-radius:var(--button-radius-sm)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary{padding:calc(var(--_btn-padding-y) - var(--tedi-borders-02)) calc(var(--_btn-padding-x) - var(--tedi-borders-02));border-width:var(--tedi-borders-02)}.tedi-button-group--segmented .tedi-button-group__dropdown-trigger.tedi-button--secondary:not([aria-expanded=true]){border-color:var(--button-group-secondary-selected-border)}.tedi-button.tedi-button-group-button{gap:0}.tedi-button-group-button__label{padding-inline:var(--_btn-inner-spacing)}\n"] }]
|
|
3744
3744
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], enableMobileDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobileDropdown", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], dropdownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownLabel", required: false }] }], dropdownLabelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownLabelMode", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => ButtonGroupButtonDirective), { isSignal: true }] }] } });
|
|
3745
3745
|
|
|
3746
3746
|
/**
|
|
@@ -10368,7 +10368,7 @@ class SelectComponent {
|
|
|
10368
10368
|
useExisting: forwardRef(() => SelectComponent),
|
|
10369
10369
|
multi: true,
|
|
10370
10370
|
},
|
|
10371
|
-
], 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() && 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-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\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-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\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-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-dropdown-item-value-label>{{\n group.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"\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-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n }\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}.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: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-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 });
|
|
10371
|
+
], 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() && 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}.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 });
|
|
10372
10372
|
}
|
|
10373
10373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
|
|
10374
10374
|
type: Component,
|
|
@@ -10386,8 +10386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10386
10386
|
TextComponent,
|
|
10387
10387
|
TagComponent,
|
|
10388
10388
|
TediTranslationPipe,
|
|
10389
|
-
|
|
10390
|
-
|
|
10389
|
+
OptionContentComponent,
|
|
10390
|
+
OptionContentLabelComponent,
|
|
10391
10391
|
EllipsisComponent,
|
|
10392
10392
|
], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10393
10393
|
class: "tedi-select",
|
|
@@ -10399,7 +10399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10399
10399
|
useExisting: forwardRef(() => SelectComponent),
|
|
10400
10400
|
multi: true,
|
|
10401
10401
|
},
|
|
10402
|
-
], 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() && 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-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\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-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\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-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allOptionsSelected()\"\n [indeterminate]=\"someOptionsSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n \"select.select-all\" | tediTranslate\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isGroupSelected(group.label)\"\n [indeterminate]=\"isGroupIndeterminate(group.label)\"\n >\n <tedi-dropdown-item-value-label>{{\n group.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"\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-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n }\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}.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"] }]
|
|
10402
|
+
], 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() && 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}.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"] }]
|
|
10403
10403
|
}], 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: [{
|
|
10404
10404
|
type: HostListener,
|
|
10405
10405
|
args: ["window:resize"]
|
|
@@ -14949,7 +14949,7 @@ class TediTableColumnsMenuComponent {
|
|
|
14949
14949
|
column.toggleVisibility();
|
|
14950
14950
|
}
|
|
14951
14951
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableColumnsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14952
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableColumnsMenuComponent, isStandalone: true, selector: "tedi-table-columns-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-name": "tedi-table-columns-menu" }, classAttribute: "tedi-table-columns-menu" }, ngImport: i0, template: "<tedi-dropdown position=\"bottom-end\">\n <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n {{ triggerLabel() ?? defaultLabel() }}\n </button>\n <tedi-dropdown-content>\n @for (column of hideableColumns(); track column.id) {\n @let isVisible = column.getIsVisible();\n @let isLastVisible = isVisible && visibleCount() === 1;\n <li\n tedi-dropdown-item\n [value]=\"column.id\"\n [disabled]=\"isLastVisible\"\n [closeOnSelect]=\"false\"\n (itemSelect)=\"handleToggle(column)\"\n >\n <tedi-
|
|
14952
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableColumnsMenuComponent, isStandalone: true, selector: "tedi-table-columns-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-name": "tedi-table-columns-menu" }, classAttribute: "tedi-table-columns-menu" }, ngImport: i0, template: "<tedi-dropdown position=\"bottom-end\">\n <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n {{ triggerLabel() ?? defaultLabel() }}\n </button>\n <tedi-dropdown-content>\n @for (column of hideableColumns(); track column.id) {\n @let isVisible = column.getIsVisible();\n @let isLastVisible = isVisible && visibleCount() === 1;\n <li\n tedi-dropdown-item\n [value]=\"column.id\"\n [disabled]=\"isLastVisible\"\n [closeOnSelect]=\"false\"\n (itemSelect)=\"handleToggle(column)\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"isVisible\"\n [disabled]=\"isLastVisible\"\n >\n <tedi-option-content-label>\n {{ resolveHeader(column) }}\n </tedi-option-content-label>\n </tedi-option-content>\n </li>\n }\n </tedi-dropdown-content>\n</tedi-dropdown>\n", styles: [".tedi-table-columns-menu{display:inline-flex}.tedi-table-columns-menu__option{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14953
14953
|
}
|
|
14954
14954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableColumnsMenuComponent, decorators: [{
|
|
14955
14955
|
type: Component,
|
|
@@ -14960,12 +14960,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
14960
14960
|
DropdownContentComponent,
|
|
14961
14961
|
DropdownItemComponent,
|
|
14962
14962
|
DropdownTriggerDirective,
|
|
14963
|
-
|
|
14964
|
-
|
|
14963
|
+
OptionContentComponent,
|
|
14964
|
+
OptionContentLabelComponent,
|
|
14965
14965
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14966
14966
|
class: "tedi-table-columns-menu",
|
|
14967
14967
|
"data-name": "tedi-table-columns-menu",
|
|
14968
|
-
}, template: "<tedi-dropdown position=\"bottom-end\">\n <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n {{ triggerLabel() ?? defaultLabel() }}\n </button>\n <tedi-dropdown-content>\n @for (column of hideableColumns(); track column.id) {\n @let isVisible = column.getIsVisible();\n @let isLastVisible = isVisible && visibleCount() === 1;\n <li\n tedi-dropdown-item\n [value]=\"column.id\"\n [disabled]=\"isLastVisible\"\n [closeOnSelect]=\"false\"\n (itemSelect)=\"handleToggle(column)\"\n >\n <tedi-
|
|
14968
|
+
}, template: "<tedi-dropdown position=\"bottom-end\">\n <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n {{ triggerLabel() ?? defaultLabel() }}\n </button>\n <tedi-dropdown-content>\n @for (column of hideableColumns(); track column.id) {\n @let isVisible = column.getIsVisible();\n @let isLastVisible = isVisible && visibleCount() === 1;\n <li\n tedi-dropdown-item\n [value]=\"column.id\"\n [disabled]=\"isLastVisible\"\n [closeOnSelect]=\"false\"\n (itemSelect)=\"handleToggle(column)\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"isVisible\"\n [disabled]=\"isLastVisible\"\n >\n <tedi-option-content-label>\n {{ resolveHeader(column) }}\n </tedi-option-content-label>\n </tedi-option-content>\n </li>\n }\n </tedi-dropdown-content>\n</tedi-dropdown>\n", styles: [".tedi-table-columns-menu{display:inline-flex}.tedi-table-columns-menu__option{display:flex;width:100%}\n"] }]
|
|
14969
14969
|
}], propDecorators: { triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }] } });
|
|
14970
14970
|
|
|
14971
14971
|
class LinkComponent {
|
|
@@ -15740,7 +15740,7 @@ class FilterComponent {
|
|
|
15740
15740
|
useExisting: forwardRef(() => FilterComponent),
|
|
15741
15741
|
multi: true,
|
|
15742
15742
|
},
|
|
15743
|
-
], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n resolvedSelectAllLabel()\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);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)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15743
|
+
], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-option-content\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 </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-option-content-label>{{\n resolvedSelectAllLabel()\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-option-content\n type=\"checkbox\"\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 </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);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)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-option-content__label,.tedi-filter-dropdown__item--selected .tedi-option-content__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { 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: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15744
15744
|
}
|
|
15745
15745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterComponent, decorators: [{
|
|
15746
15746
|
type: Component,
|
|
@@ -15753,8 +15753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
15753
15753
|
DropdownComponent,
|
|
15754
15754
|
DropdownTriggerDirective,
|
|
15755
15755
|
DropdownContentComponent,
|
|
15756
|
-
|
|
15757
|
-
|
|
15756
|
+
OptionContentComponent,
|
|
15757
|
+
OptionContentLabelComponent,
|
|
15758
15758
|
FormFieldComponent,
|
|
15759
15759
|
TextFieldComponent,
|
|
15760
15760
|
FilterContentDirective,
|
|
@@ -15771,7 +15771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
15771
15771
|
"[class.tedi-filter--large]": "size() === 'large'",
|
|
15772
15772
|
"[class.tedi-filter--selected]": "isSelected()",
|
|
15773
15773
|
"[class.tedi-filter--disabled]": "isDisabled()",
|
|
15774
|
-
}, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n resolvedSelectAllLabel()\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);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)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
|
|
15774
|
+
}, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-option-content\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 </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-option-content\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-option-content-label>{{\n resolvedSelectAllLabel()\n }}</tedi-option-content-label>\n </tedi-option-content>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-option-content\n type=\"checkbox\"\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 </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);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)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-option-content__label,.tedi-filter-dropdown__item--selected .tedi-option-content__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
|
|
15775
15775
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], preserveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.ViewChild, args: ["dropdown", { isSignal: true }] }], dropdownPanel: [{ type: i0.ViewChild, args: ["dropdownPanel", { isSignal: true }] }], optionsList: [{ type: i0.ViewChild, args: ["optionsList", { isSignal: true }] }], triggerBtn: [{ type: i0.ViewChild, args: ["triggerBtn", { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterContentDirective), { isSignal: true }] }], filterPrepend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterPrependDirective), { isSignal: true }] }] } });
|
|
15776
15776
|
|
|
15777
15777
|
class CheckboxCardComponent {
|
|
@@ -20993,6 +20993,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
20993
20993
|
}, template: "<ng-content></ng-content>\n", styles: [".tedi-row{display:grid}.tedi-row--cols-auto{--_grid-col-size-calc: calc( (100% - var(--_grid-gap) * (12 - 1)) / 12 );--_grid-col-min-size-calc: min( 100%, max(var(--_grid-col-width), var(--_grid-col-size-calc)) );grid-template-columns:repeat(auto-fit,minmax(var(--_grid-col-min-size-calc),1fr))}.tedi-row--cols-1{grid-template-columns:repeat(1,1fr)}.tedi-row--cols-2{grid-template-columns:repeat(2,1fr)}.tedi-row--cols-3{grid-template-columns:repeat(3,1fr)}.tedi-row--cols-4{grid-template-columns:repeat(4,1fr)}.tedi-row--cols-5{grid-template-columns:repeat(5,1fr)}.tedi-row--cols-6{grid-template-columns:repeat(6,1fr)}.tedi-row--cols-7{grid-template-columns:repeat(7,1fr)}.tedi-row--cols-8{grid-template-columns:repeat(8,1fr)}.tedi-row--cols-9{grid-template-columns:repeat(9,1fr)}.tedi-row--cols-10{grid-template-columns:repeat(10,1fr)}.tedi-row--cols-11{grid-template-columns:repeat(11,1fr)}.tedi-row--cols-12{grid-template-columns:repeat(12,1fr)}.tedi-row--justify-items-start{justify-items:start}.tedi-row--justify-items-end{justify-items:end}.tedi-row--justify-items-center{justify-items:center}.tedi-row--justify-items-stretch{justify-items:stretch}.tedi-row--align-items-start{align-items:start}.tedi-row--align-items-end{align-items:end}.tedi-row--align-items-center{align-items:center}.tedi-row--align-items-stretch{align-items:stretch}.g-0{gap:0}.gx-0{column-gap:0}.gy-0{row-gap:0}.g-1{gap:.25rem}.gx-1{column-gap:.25rem}.gy-1{row-gap:.25rem}.g-2{gap:.5rem}.gx-2{column-gap:.5rem}.gy-2{row-gap:.5rem}.g-3{gap:1rem}.gx-3{column-gap:1rem}.gy-3{row-gap:1rem}.g-4{gap:1.5rem}.gx-4{column-gap:1.5rem}.gy-4{row-gap:1.5rem}.g-5{gap:3rem}.gx-5{column-gap:3rem}.gy-5{row-gap:3rem}\n"] }]
|
|
20994
20994
|
}], propDecorators: { cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], minColWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColWidth", required: false }] }], justifyItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyItems", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], gapX: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapX", required: false }] }], gapY: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapY", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
20995
20995
|
|
|
20996
|
+
class OptionContentMetaComponent {
|
|
20997
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OptionContentMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: OptionContentMetaComponent, isStandalone: true, selector: "tedi-option-content-meta", host: { classAttribute: "tedi-option-content__meta" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20999
|
+
}
|
|
21000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OptionContentMetaComponent, decorators: [{
|
|
21001
|
+
type: Component,
|
|
21002
|
+
args: [{
|
|
21003
|
+
selector: "tedi-option-content-meta",
|
|
21004
|
+
template: `<ng-content />`,
|
|
21005
|
+
standalone: true,
|
|
21006
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
21007
|
+
encapsulation: ViewEncapsulation.None,
|
|
21008
|
+
host: {
|
|
21009
|
+
class: "tedi-option-content__meta",
|
|
21010
|
+
},
|
|
21011
|
+
}]
|
|
21012
|
+
}] });
|
|
21013
|
+
|
|
20996
21014
|
class ScrollFadeComponent {
|
|
20997
21015
|
/** Size of the fade gradient in percentages. */
|
|
20998
21016
|
fadeSize = input(20, ...(ngDevMode ? [{ debugName: "fadeSize" }] : []));
|
|
@@ -24121,24 +24139,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
24121
24139
|
}, template: "@if (isActive()) {\n <ng-content />\n}\n", styles: [".tedi-tabs-content{background:var(--tab-item-selected-background)}.tedi-tabs-content:not([hidden]){display:block}\n"] }]
|
|
24122
24140
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
24123
24141
|
|
|
24124
|
-
class DropdownItemValueMetaComponent {
|
|
24125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemValueMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: DropdownItemValueMetaComponent, isStandalone: true, selector: "tedi-dropdown-item-value-meta", host: { classAttribute: "tedi-dropdown-item-value__meta" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24127
|
-
}
|
|
24128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemValueMetaComponent, decorators: [{
|
|
24129
|
-
type: Component,
|
|
24130
|
-
args: [{
|
|
24131
|
-
selector: "tedi-dropdown-item-value-meta",
|
|
24132
|
-
template: `<ng-content />`,
|
|
24133
|
-
standalone: true,
|
|
24134
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
24135
|
-
encapsulation: ViewEncapsulation.None,
|
|
24136
|
-
host: {
|
|
24137
|
-
class: "tedi-dropdown-item-value__meta",
|
|
24138
|
-
},
|
|
24139
|
-
}]
|
|
24140
|
-
}] });
|
|
24141
|
-
|
|
24142
24142
|
/**
|
|
24143
24143
|
* Applies the print helper classes from `@tedi-design-system/core` to the host element.
|
|
24144
24144
|
*/
|
|
@@ -24279,5 +24279,5 @@ function provideTedi(config = {}) {
|
|
|
24279
24279
|
* Generated bundle index. Do not edit.
|
|
24280
24280
|
*/
|
|
24281
24281
|
|
|
24282
|
-
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent,
|
|
24282
|
+
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FloatingButtonComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, OptionContentComponent, OptionContentLabelComponent, OptionContentMetaComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, PrintDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SearchFooterActionsComponent, SearchFooterTemplateDirective, SearchSuggestionComponent, SearchSuggestionTemplateDirective, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TableOfContentsCollapsibleComponent, TableOfContentsComponent, TableOfContentsItemComponent, TableOfContentsItemSuffixDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, highlightParts, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination, warnDeprecated };
|
|
24283
24283
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|