@tedi-design-system/angular 3.0.0-rc.3 → 3.0.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/community/components/form/file-dropzone/index.d.ts +3 -0
- package/community/components/form/file-dropzone/index.d.ts.map +1 -1
- package/community/components/form/select/multiselect.component.d.ts +9 -2
- package/community/components/form/select/multiselect.component.d.ts.map +1 -1
- package/community/components/form/select/select.component.d.ts +9 -2
- package/community/components/form/select/select.component.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +42 -16
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +163 -237
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts +2 -2
- package/tedi/components/layout/sidenav/sidenav-dropdown-item/sidenav-dropdown-item.component.d.ts.map +1 -1
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts +2 -2
- package/tedi/components/layout/sidenav/sidenav-item/sidenav-item.component.d.ts.map +1 -1
- package/tedi/components/overlay/popover/popover.component.d.ts +4 -3
- package/tedi/components/overlay/popover/popover.component.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/index.d.ts +2 -2
- package/tedi/components/overlay/tooltip/index.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts +16 -0
- package/tedi/components/overlay/tooltip/tooltip-content/tooltip-content.component.d.ts.map +1 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts +16 -0
- package/tedi/components/overlay/tooltip/tooltip-trigger/tooltip-trigger.component.d.ts.map +1 -0
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts +34 -41
- package/tedi/components/overlay/tooltip/tooltip.component.d.ts.map +1 -1
- package/tedi/components/overlay/tooltip/tooltip-content.component.d.ts +0 -21
- package/tedi/components/overlay/tooltip/tooltip-content.component.d.ts.map +0 -1
- package/tedi/components/overlay/tooltip/tooltip-trigger.component.d.ts +0 -11
- package/tedi/components/overlay/tooltip/tooltip-trigger.component.d.ts.map +0 -1
|
@@ -260,7 +260,7 @@ class CardContentComponent {
|
|
|
260
260
|
*/
|
|
261
261
|
timeline = input(false, { transform: booleanAttribute });
|
|
262
262
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { hasSeparator: { classPropertyName: "hasSeparator", publicName: "hasSeparator", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-content": "true", "class.tedi-card-content--has-separator": "hasSeparator() || timeline()", "class.tedi-card-content--auto-width": "autoWidth()", "class.tedi-card-content--timeline": "timeline()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{
|
|
263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { hasSeparator: { classPropertyName: "hasSeparator", publicName: "hasSeparator", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-content": "true", "class.tedi-card-content--has-separator": "hasSeparator() || timeline()", "class.tedi-card-content--auto-width": "autoWidth()", "class.tedi-card-content--timeline": "timeline()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
264
264
|
}
|
|
265
265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
266
266
|
type: Component,
|
|
@@ -278,7 +278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
278
278
|
directive: CardPaddingDirective,
|
|
279
279
|
inputs: ["padding"],
|
|
280
280
|
},
|
|
281
|
-
], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{
|
|
281
|
+
], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"] }]
|
|
282
282
|
}] });
|
|
283
283
|
|
|
284
284
|
class AccordionItemContentComponent {
|
|
@@ -751,11 +751,11 @@ class InputGroupComponent {
|
|
|
751
751
|
*/
|
|
752
752
|
feedback = input();
|
|
753
753
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
754
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputGroupComponent, isStandalone: true, selector: "tedi-input-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelID: { classPropertyName: "labelID", publicName: "labelID", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-input-group\">\n @if (label()) {\n <label tedi-label [for]=\"labelID()\">\n <div class=\"tedi-input-group__label\">{{ label() }}</div>\n </label>\n }\n\n <div\n [class]=\"{\n 'tedi-input-group__container': true,\n 'tedi-input-group__container--disabled': disabled(),\n }\"\n >\n <div class=\"tedi-input-group__prefix\">\n <ng-content select=\"[prefix-slot]\" />\n </div>\n <div class=\"tedi-input-group__center\">\n <ng-content />\n </div>\n <div class=\"tedi-input-group__suffix\">\n <ng-content select=\"[suffix-slot]\" />\n </div>\n </div>\n @if (feedback(); as feedbackResult) {\n <tedi-feedback-text\n [text]=\"feedbackResult.text\"\n [type]=\"feedbackResult.type\"\n [position]=\"feedbackResult.position\"\n />\n }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
754
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputGroupComponent, isStandalone: true, selector: "tedi-input-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelID: { classPropertyName: "labelID", publicName: "labelID", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-input-group\">\n @if (label()) {\n <label tedi-label [for]=\"labelID()\">\n <div class=\"tedi-input-group__label\">{{ label() }}</div>\n </label>\n }\n\n <div\n [class]=\"{\n 'tedi-input-group__container': true,\n 'tedi-input-group__container--disabled': disabled(),\n }\"\n >\n <div class=\"tedi-input-group__prefix\">\n <ng-content select=\"[prefix-slot]\" />\n </div>\n <div class=\"tedi-input-group__center\">\n <ng-content />\n </div>\n <div class=\"tedi-input-group__suffix\">\n <ng-content select=\"[suffix-slot]\" />\n </div>\n </div>\n @if (feedback(); as feedbackResult) {\n <tedi-feedback-text\n [text]=\"feedbackResult.text\"\n [type]=\"feedbackResult.type\"\n [position]=\"feedbackResult.position\"\n />\n }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix .tedi-select__arrow,.tedi-input-group__suffix .tedi-select__arrow{margin:0;padding:0}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
755
755
|
}
|
|
756
756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputGroupComponent, decorators: [{
|
|
757
757
|
type: Component,
|
|
758
|
-
args: [{ selector: "tedi-input-group", standalone: true, encapsulation: ViewEncapsulation.None, imports: [FeedbackTextComponent, LabelComponent], template: "<div class=\"tedi-input-group\">\n @if (label()) {\n <label tedi-label [for]=\"labelID()\">\n <div class=\"tedi-input-group__label\">{{ label() }}</div>\n </label>\n }\n\n <div\n [class]=\"{\n 'tedi-input-group__container': true,\n 'tedi-input-group__container--disabled': disabled(),\n }\"\n >\n <div class=\"tedi-input-group__prefix\">\n <ng-content select=\"[prefix-slot]\" />\n </div>\n <div class=\"tedi-input-group__center\">\n <ng-content />\n </div>\n <div class=\"tedi-input-group__suffix\">\n <ng-content select=\"[suffix-slot]\" />\n </div>\n </div>\n @if (feedback(); as feedbackResult) {\n <tedi-feedback-text\n [text]=\"feedbackResult.text\"\n [type]=\"feedbackResult.type\"\n [position]=\"feedbackResult.position\"\n />\n }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"] }]
|
|
758
|
+
args: [{ selector: "tedi-input-group", standalone: true, encapsulation: ViewEncapsulation.None, imports: [FeedbackTextComponent, LabelComponent], template: "<div class=\"tedi-input-group\">\n @if (label()) {\n <label tedi-label [for]=\"labelID()\">\n <div class=\"tedi-input-group__label\">{{ label() }}</div>\n </label>\n }\n\n <div\n [class]=\"{\n 'tedi-input-group__container': true,\n 'tedi-input-group__container--disabled': disabled(),\n }\"\n >\n <div class=\"tedi-input-group__prefix\">\n <ng-content select=\"[prefix-slot]\" />\n </div>\n <div class=\"tedi-input-group__center\">\n <ng-content />\n </div>\n <div class=\"tedi-input-group__suffix\">\n <ng-content select=\"[suffix-slot]\" />\n </div>\n </div>\n @if (feedback(); as feedbackResult) {\n <tedi-feedback-text\n [text]=\"feedbackResult.text\"\n [type]=\"feedbackResult.type\"\n [position]=\"feedbackResult.position\"\n />\n }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix .tedi-select__arrow,.tedi-input-group__suffix .tedi-select__arrow{margin:0;padding:0}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"] }]
|
|
759
759
|
}] });
|
|
760
760
|
|
|
761
761
|
class RadioGroupComponent {
|
|
@@ -1273,6 +1273,13 @@ class SelectComponent {
|
|
|
1273
1273
|
* @default false
|
|
1274
1274
|
*/
|
|
1275
1275
|
clearable = input(true);
|
|
1276
|
+
/**
|
|
1277
|
+
* Optional element reference to calculate dropdown width from.
|
|
1278
|
+
* If provided but null, dropdown will use auto width.
|
|
1279
|
+
* If not provided, defaults to the host element width.
|
|
1280
|
+
* @default undefined
|
|
1281
|
+
*/
|
|
1282
|
+
dropdownWidthRef = input();
|
|
1276
1283
|
feedbackText = input();
|
|
1277
1284
|
isOpen = signal(false);
|
|
1278
1285
|
selectedOptions = signal([]);
|
|
@@ -1280,7 +1287,7 @@ class SelectComponent {
|
|
|
1280
1287
|
triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
|
|
1281
1288
|
hostRef = inject(ElementRef);
|
|
1282
1289
|
options = contentChildren(SelectOptionComponent);
|
|
1283
|
-
dropdownWidth = signal(
|
|
1290
|
+
dropdownWidth = signal(null);
|
|
1284
1291
|
disabled = signal(false);
|
|
1285
1292
|
optionGroups = computed(() => {
|
|
1286
1293
|
const groups = [];
|
|
@@ -1342,7 +1349,13 @@ class SelectComponent {
|
|
|
1342
1349
|
.map((option) => option.label());
|
|
1343
1350
|
});
|
|
1344
1351
|
setDropdownWidth() {
|
|
1345
|
-
const
|
|
1352
|
+
const widthRef = this.dropdownWidthRef();
|
|
1353
|
+
if (widthRef === null) {
|
|
1354
|
+
this.dropdownWidth.set(null);
|
|
1355
|
+
return;
|
|
1356
|
+
}
|
|
1357
|
+
const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement;
|
|
1358
|
+
const computedWidth = element?.getBoundingClientRect()?.width ?? 0;
|
|
1346
1359
|
this.dropdownWidth.set(computedWidth);
|
|
1347
1360
|
}
|
|
1348
1361
|
// ControlValueAccessor implementation
|
|
@@ -1361,13 +1374,13 @@ class SelectComponent {
|
|
|
1361
1374
|
this.disabled.set(isDisabled);
|
|
1362
1375
|
}
|
|
1363
1376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1364
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select" }, providers: [
|
|
1377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select" }, providers: [
|
|
1365
1378
|
{
|
|
1366
1379
|
provide: NG_VALUE_ACCESSOR,
|
|
1367
1380
|
useExisting: forwardRef(() => SelectComponent),
|
|
1368
1381
|
multi: true,
|
|
1369
1382
|
},
|
|
1370
|
-
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width.px]=\"dropdownWidth()\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxUseActiveDescendant\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\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 @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1383
|
+
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\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 @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1371
1384
|
}
|
|
1372
1385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1373
1386
|
type: Component,
|
|
@@ -1393,7 +1406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1393
1406
|
useExisting: forwardRef(() => SelectComponent),
|
|
1394
1407
|
multi: true,
|
|
1395
1408
|
},
|
|
1396
|
-
], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width
|
|
1409
|
+
], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedLabels().length) {\n {{ selectedLabels() }}\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n >\n @if (options().length) {\n @for (group of optionGroups(); track $index) {\n @if (group.label.length > 0) {\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 @for (option of group.options; track option.value()) {\n <li\n tedi-dropdown-item\n [selected]=\"isOptionSelected(option.value())\"\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n @if (option.templateRef(); as optionNgContent) {\n <div class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n </div>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n }\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"] }]
|
|
1397
1410
|
}], propDecorators: { onWindowResize: [{
|
|
1398
1411
|
type: HostListener,
|
|
1399
1412
|
args: ["window:resize"]
|
|
@@ -1611,6 +1624,13 @@ class MultiselectComponent {
|
|
|
1611
1624
|
* @default true
|
|
1612
1625
|
*/
|
|
1613
1626
|
clearable = input(true);
|
|
1627
|
+
/**
|
|
1628
|
+
* Optional element reference to calculate dropdown width from.
|
|
1629
|
+
* If provided but null, dropdown will use auto width.
|
|
1630
|
+
* If not provided, defaults to the host element width.
|
|
1631
|
+
* @default undefined
|
|
1632
|
+
*/
|
|
1633
|
+
dropdownWidthRef = input();
|
|
1614
1634
|
feedbackText = input();
|
|
1615
1635
|
specialOptionControls = specialOptionControls;
|
|
1616
1636
|
isOpen = signal(false);
|
|
@@ -1686,7 +1706,13 @@ class MultiselectComponent {
|
|
|
1686
1706
|
return this.selectedOptions().includes(option);
|
|
1687
1707
|
}
|
|
1688
1708
|
setDropdownWidth() {
|
|
1689
|
-
const
|
|
1709
|
+
const widthRef = this.dropdownWidthRef();
|
|
1710
|
+
if (widthRef === null) {
|
|
1711
|
+
this.dropdownWidth.set(null);
|
|
1712
|
+
return;
|
|
1713
|
+
}
|
|
1714
|
+
const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement;
|
|
1715
|
+
const computedWidth = element?.getBoundingClientRect()?.width ?? 0;
|
|
1690
1716
|
this.dropdownWidth.set(computedWidth);
|
|
1691
1717
|
}
|
|
1692
1718
|
allOptions = computed(() => {
|
|
@@ -1765,13 +1791,13 @@ class MultiselectComponent {
|
|
|
1765
1791
|
this.setDropdownWidth();
|
|
1766
1792
|
}
|
|
1767
1793
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1768
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tedi-multiselect", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, clearableTags: { classPropertyName: "clearableTags", publicName: "clearableTags", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select tedi-select--multiselect" }, providers: [
|
|
1794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tedi-multiselect", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, clearableTags: { classPropertyName: "clearableTags", publicName: "clearableTags", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select tedi-select--multiselect" }, providers: [
|
|
1769
1795
|
{
|
|
1770
1796
|
provide: NG_VALUE_ACCESSOR,
|
|
1771
1797
|
useExisting: forwardRef(() => MultiselectComponent),
|
|
1772
1798
|
multi: true,
|
|
1773
1799
|
},
|
|
1774
|
-
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width.px]=\"dropdownWidth()\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\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()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1800
|
+
], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\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()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1775
1801
|
}
|
|
1776
1802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
1777
1803
|
type: Component,
|
|
@@ -1799,7 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1799
1825
|
useExisting: forwardRef(() => MultiselectComponent),
|
|
1800
1826
|
multi: true,
|
|
1801
1827
|
},
|
|
1802
|
-
], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width.px]=\"dropdownWidth()\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\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()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"] }]
|
|
1828
|
+
], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n <label\n [id]=\"labelId\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n >\n {{ label() }}\n </label>\n}\n<div\n [id]=\"inputId()\"\n class=\"tedi-select__trigger\"\n [class.tedi-input--disabled]=\"disabled()\"\n tedi-input\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-labelledby]=\"labelId\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [state]=\"state()\"\n [size]=\"size()\"\n (click)=\"toggleIsOpen()\"\n (keydown.enter)=\"toggleIsOpen()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n <span class=\"tedi-select__label\">\n @if (selectedOptions().length) {\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n >\n @for (value of selectedOptions(); track value) {\n <tedi-tag\n [closable]=\"clearableTags()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n </div>\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n\n @if (clearable() && selectedOptions().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n title=\"Clear\"\n (click)=\"clear($event)\"\n ></button>\n }\n\n <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"toggleIsOpen(false)\"\n (detach)=\"toggleIsOpen(false)\"\n>\n <tedi-card\n class=\"tedi-select__dropdown\"\n spacing=\"none\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n >\n <tedi-card-content>\n <ul\n [id]=\"listboxId\"\n class=\"tedi-select__options\"\n cdkListbox\n cdkListboxMultiple\n [cdkListboxValue]=\"selectedOptions()\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n #listbox=\"cdkListbox\"\n >\n @if (options().length) {\n @if (selectAll()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"inputId() + '-select-all'\"\n [checked]=\"allOptionsSelected()\"\n >\n {{ \"select.select-all\" | tediTranslate }}\n </tedi-checkbox>\n </li>\n }\n\n @for (group of optionGroups(); track $index) {\n @if (group.label.length) {\n @if (selectableGroups()) {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n >\n <div class=\"tedi-select__group-checkbox\">\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'group-' + group.label\"\n [checked]=\"isGroupSelected(group.label)\"\n >\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </tedi-checkbox>\n </div>\n </li>\n } @else {\n <li\n tedi-dropdown-item\n class=\"tedi-select__group-name\"\n role=\"presentation\"\n >\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()) {\n <li\n tedi-dropdown-item\n [cdkOption]=\"option.value()\"\n [cdkOptionDisabled]=\"option.disabled()\"\n [disabled]=\"option.disabled()\"\n >\n <tedi-checkbox\n class=\"tedi-select__multiselect-checkbox\"\n [inputId]=\"'option-' + option.value()\"\n [checked]=\"isOptionSelected(option.value())\"\n >\n @if (option.templateRef(); as optionTemplate) {\n <span class=\"tedi-select__dropdown-item--custom-content\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n </span>\n <span class=\"tedi-select__dropdown-item--label\">\n {{ option.label() }}\n </span>\n } @else {\n {{ option.label() }}\n }\n </tedi-checkbox>\n </li>\n }\n }\n } @else {\n <li tedi-dropdown-item class=\"tedi-select__no-options\">\n {{ \"select.no-options\" | tediTranslate }}\n </li>\n }\n </ul>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.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;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.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-checkbox{pointer-events:none}\n"] }]
|
|
1803
1829
|
}], propDecorators: { onWindowResize: [{
|
|
1804
1830
|
type: HostListener,
|
|
1805
1831
|
args: ["window:resize"]
|
|
@@ -2595,7 +2621,7 @@ class FileDropzoneComponent {
|
|
|
2595
2621
|
useExisting: forwardRef(() => FileDropzoneComponent),
|
|
2596
2622
|
multi: true,
|
|
2597
2623
|
},
|
|
2598
|
-
], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n@for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-card\n [className]=\"fileClasses(file)\"\n padding=\"none\"\n [background]=\"\n file.fileStatus && file.fileStatus == 'invalid'\n ? 'danger-primary'\n : 'tertiary'\n \"\n >\n <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n <div class=\"tedi-file-dropzone__file-name\">\n {{ file.label ?? file.name }}\n\n @if (file && validateIndividually() && file.helper; as helper) {\n <tedi-tooltip
|
|
2624
|
+
], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n@for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-card\n [className]=\"fileClasses(file)\"\n padding=\"none\"\n [background]=\"\n file.fileStatus && file.fileStatus == 'invalid'\n ? 'danger-primary'\n : 'tertiary'\n \"\n >\n <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n <div class=\"tedi-file-dropzone__file-name\">\n {{ file.label ?? file.name }}\n\n @if (file && validateIndividually() && file.helper; as helper) {\n <tedi-tooltip\n [className]=\"tooltipClasses(file)\"\n [position]=\"helper?.position || 'top'\"\n >\n <tedi-tooltip-trigger>\n <button tedi-info-button [disabled]=\"file.disabled\"></button>\n </tedi-tooltip-trigger>\n\n <tedi-tooltip-content>\n {{ helper.text }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n }\n </div>\n <button\n tedi-closing-button\n [title]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n (click)=\"removeFile(file)\"\n size=\"small\"\n ></button>\n </tedi-card-content>\n </tedi-card>\n </div>\n}\n\n<ng-content select=\"[error-text]\">\n @if (this.uploadError(); as message) {\n <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.tedi-file-dropzone{border-radius:var(--form-field-radius-mobile)}@media (min-width: 576px){.tedi-file-dropzone{border-radius:var(--form-field-radius-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{border-radius:var(--form-field-radius-desktop)}}.tedi-file-dropzone{padding-left:var(--file-dropzone-padding-x-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-left:var(--file-dropzone-padding-x-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-left:var(--file-dropzone-padding-x-desktop)}}.tedi-file-dropzone{padding-right:var(--file-dropzone-padding-x-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-right:var(--file-dropzone-padding-x-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-right:var(--file-dropzone-padding-x-desktop)}}.tedi-file-dropzone{padding-top:var(--file-dropzone-padding-y-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-top:var(--file-dropzone-padding-y-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-top:var(--file-dropzone-padding-y-desktop)}}.tedi-file-dropzone{padding-bottom:var(--file-dropzone-padding-y-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-bottom:var(--file-dropzone-padding-y-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-bottom:var(--file-dropzone-padding-y-desktop)}}.tedi-file-dropzone{margin-bottom:var(--layout-grid-gutters-04-mobile)}@media (min-width: 576px){.tedi-file-dropzone{margin-bottom:var(--layout-grid-gutters-04-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{margin-bottom:var(--layout-grid-gutters-04-desktop)}}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none}.tedi-file-dropzone__file-list{margin-top:var(--layout-grid-gutters-04-mobile)}@media (min-width: 576px){.tedi-file-dropzone__file-list{margin-top:var(--layout-grid-gutters-04-tablet)}}@media (min-width: 992px){.tedi-file-dropzone__file-list{margin-top:var(--layout-grid-gutters-04-desktop)}}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}.tedi-file-dropzone__card{display:flex;justify-content:space-between;align-items:center;--_card-border: transparent}.tedi-file-dropzone__tooltip--error .tedi-info-button{--button-main-neutral-text-default: var(--red-700)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
|
|
2599
2625
|
}
|
|
2600
2626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileDropzoneComponent, decorators: [{
|
|
2601
2627
|
type: Component,
|
|
@@ -2619,7 +2645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2619
2645
|
useExisting: forwardRef(() => FileDropzoneComponent),
|
|
2620
2646
|
multi: true,
|
|
2621
2647
|
},
|
|
2622
|
-
], template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n@for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-card\n [className]=\"fileClasses(file)\"\n padding=\"none\"\n [background]=\"\n file.fileStatus && file.fileStatus == 'invalid'\n ? 'danger-primary'\n : 'tertiary'\n \"\n >\n <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n <div class=\"tedi-file-dropzone__file-name\">\n {{ file.label ?? file.name }}\n\n @if (file && validateIndividually() && file.helper; as helper) {\n <tedi-tooltip
|
|
2648
|
+
], template: "<input\n #fileInput\n class=\"tedi-file-dropzone__input\"\n type=\"file\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [id]=\"inputId()\"\n [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n [accept]=\"accept()\"\n (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n <div class=\"tedi-file-dropzone__label-wrapper\">\n <tedi-icon\n [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n />\n <label tedi-label class=\"tedi-file-dropzone__label\">{{\n (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n }}</label>\n </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n @if (helperText(); as message) {\n <tedi-feedback-text\n [text]=\"message.text\"\n [type]=\"message.type || 'hint'\"\n [position]=\"message.position || 'left'\"\n />\n }\n</ng-content>\n\n@for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-card\n [className]=\"fileClasses(file)\"\n padding=\"none\"\n [background]=\"\n file.fileStatus && file.fileStatus == 'invalid'\n ? 'danger-primary'\n : 'tertiary'\n \"\n >\n <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n <div class=\"tedi-file-dropzone__file-name\">\n {{ file.label ?? file.name }}\n\n @if (file && validateIndividually() && file.helper; as helper) {\n <tedi-tooltip\n [className]=\"tooltipClasses(file)\"\n [position]=\"helper?.position || 'top'\"\n >\n <tedi-tooltip-trigger>\n <button tedi-info-button [disabled]=\"file.disabled\"></button>\n </tedi-tooltip-trigger>\n\n <tedi-tooltip-content>\n {{ helper.text }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n }\n </div>\n <button\n tedi-closing-button\n [title]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n (click)=\"removeFile(file)\"\n size=\"small\"\n ></button>\n </tedi-card-content>\n </tedi-card>\n </div>\n}\n\n<ng-content select=\"[error-text]\">\n @if (this.uploadError(); as message) {\n <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.tedi-file-dropzone{border-radius:var(--form-field-radius-mobile)}@media (min-width: 576px){.tedi-file-dropzone{border-radius:var(--form-field-radius-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{border-radius:var(--form-field-radius-desktop)}}.tedi-file-dropzone{padding-left:var(--file-dropzone-padding-x-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-left:var(--file-dropzone-padding-x-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-left:var(--file-dropzone-padding-x-desktop)}}.tedi-file-dropzone{padding-right:var(--file-dropzone-padding-x-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-right:var(--file-dropzone-padding-x-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-right:var(--file-dropzone-padding-x-desktop)}}.tedi-file-dropzone{padding-top:var(--file-dropzone-padding-y-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-top:var(--file-dropzone-padding-y-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-top:var(--file-dropzone-padding-y-desktop)}}.tedi-file-dropzone{padding-bottom:var(--file-dropzone-padding-y-mobile)}@media (min-width: 576px){.tedi-file-dropzone{padding-bottom:var(--file-dropzone-padding-y-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{padding-bottom:var(--file-dropzone-padding-y-desktop)}}.tedi-file-dropzone{margin-bottom:var(--layout-grid-gutters-04-mobile)}@media (min-width: 576px){.tedi-file-dropzone{margin-bottom:var(--layout-grid-gutters-04-tablet)}}@media (min-width: 992px){.tedi-file-dropzone{margin-bottom:var(--layout-grid-gutters-04-desktop)}}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none}.tedi-file-dropzone__file-list{margin-top:var(--layout-grid-gutters-04-mobile)}@media (min-width: 576px){.tedi-file-dropzone__file-list{margin-top:var(--layout-grid-gutters-04-tablet)}}@media (min-width: 992px){.tedi-file-dropzone__file-list{margin-top:var(--layout-grid-gutters-04-desktop)}}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}.tedi-file-dropzone__card{display:flex;justify-content:space-between;align-items:center;--_card-border: transparent}.tedi-file-dropzone__tooltip--error .tedi-info-button{--button-main-neutral-text-default: var(--red-700)}\n"] }]
|
|
2623
2649
|
}], propDecorators: { onBlur: [{
|
|
2624
2650
|
type: HostListener,
|
|
2625
2651
|
args: ["blur"]
|
|
@@ -2902,5 +2928,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2902
2928
|
* Generated bundle index. Do not edit.
|
|
2903
2929
|
*/
|
|
2904
2930
|
|
|
2905
|
-
export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzoneComponent, FormFieldComponent, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, modalBreakpoints, specialOptionControls };
|
|
2931
|
+
export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzone, FileDropzoneComponent, FileSizeStandards, FormFieldComponent, IECFileSize, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SIFileSize, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, formatBytes, getDefaultHelpers, modalBreakpoints, roundNumber, specialOptionControls, validateFileSize, validateFileType };
|
|
2906
2932
|
//# sourceMappingURL=tedi-design-system-angular-community.mjs.map
|