@tedi-design-system/angular 7.2.0-rc.5 → 8.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tedi-design-system-angular-community.mjs +13 -13
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +433 -226
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/index.d.ts +240 -100
- package/tedi/index.d.ts.map +1 -1
|
@@ -556,7 +556,7 @@ class CheckboxGroupComponent {
|
|
|
556
556
|
}, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
|
|
557
557
|
groupDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "groupDisabled" }] : []));
|
|
558
558
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxGroupComponent, isStandalone: true, selector: "tedi-checkbox-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-checkbox-group": "true", "attr.role": "'group'", "attr.aria-labelledby": "labelId()" } }, ngImport: i0, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
559
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxGroupComponent, isStandalone: true, selector: "tedi-checkbox-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-checkbox-group": "true", "attr.role": "'group'", "attr.aria-labelledby": "labelId()" } }, ngImport: i0, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
560
560
|
}
|
|
561
561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
562
562
|
type: Component,
|
|
@@ -630,7 +630,7 @@ class CheckboxCardGroupComponent extends CheckboxGroupComponent {
|
|
|
630
630
|
provide: CheckboxGroupComponent,
|
|
631
631
|
useExisting: CheckboxCardGroupComponent,
|
|
632
632
|
},
|
|
633
|
-
], queries: [{ propertyName: "checkboxes", predicate: i0.forwardRef(() => CheckboxComponent), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ChoiceGroupDirective, inputs: ["variant", "variant", "hasIndicator", "hasIndicator", "spacing", "spacing"] }], ngImport: i0, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n", ".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
633
|
+
], queries: [{ propertyName: "checkboxes", predicate: i0.forwardRef(() => CheckboxComponent), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ChoiceGroupDirective, inputs: ["variant", "variant", "hasIndicator", "hasIndicator", "spacing", "spacing"] }], ngImport: i0, template: "@if (label()) {\n <span tedi-label [id]=\"labelId()\">\n {{ label() }}\n </span>\n}\n<div\n class=\"tedi-checkbox-group__checkboxes\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n", ".tedi-checkbox-group{display:block}.tedi-checkbox-group__checkboxes{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
634
634
|
}
|
|
635
635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxCardGroupComponent, decorators: [{
|
|
636
636
|
type: Component,
|
|
@@ -755,7 +755,7 @@ class CheckboxComponent {
|
|
|
755
755
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
756
756
|
multi: true,
|
|
757
757
|
},
|
|
758
|
-
], viewQueries: [{ propertyName: "_inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-checkbox__input-area\">\n <input\n class=\"tedi-checkbox__input\"\n type=\"checkbox\"\n #input\n [id]=\"inputId()\"\n [checked]=\"checked()\"\n [disabled]=\"checkboxDisabled()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n (blur)=\"_onTouched()\"\n />\n <div class=\"tedi-checkbox__indicator\">\n @if (indicatorIcon(); as iconName) {\n <tedi-icon [name]=\"iconName\" color=\"white\" [size]=\"iconSize()\" />\n }\n </div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-checkbox__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-checkbox{--_checkbox-bg: var(--form-checkbox-radio-default-background-default);--_checkbox-border: var(--form-checkbox-radio-default-border-default);--_checkbox-label-color: var(--general-text-primary);--_checkbox-check-color: var(--_checkbox-border);--_checkbox-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_checkbox-size: var(--form-checkbox-radio-size-responsive);--_checkbox-radius: var(--form-checkbox-radio-indicator-radius-checkbox);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-checkbox tedi-icon{-webkit-user-select:none;user-select:none}.tedi-checkbox__input-area{position:relative;grid-area:input-area}.tedi-checkbox__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-checkbox__indicator{position:relative;width:var(--_checkbox-size);height:var(--_checkbox-size);border-radius:var(--_checkbox-radius);border:1px solid var(--_checkbox-border);background:var(--_checkbox-bg);margin-right:var(--_checkbox-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-checkbox__label{color:var(--_checkbox-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-checkbox:has(input:checked,input:indeterminate){--_checkbox-bg: var(--form-checkbox-radio-default-background-selected);--_checkbox-border: var(--form-checkbox-radio-default-border-selected)}.tedi-checkbox:has(input:hover,input:focus-visible) .tedi-checkbox__indicator{outline:1px solid var(--_checkbox-border)}.tedi-checkbox:has(input:hover,input:focus-visible){--_checkbox-border: var(--form-checkbox-radio-default-border-hover)}.tedi-checkbox:has(input:active){--_checkbox-border: var(--form-checkbox-radio-default-border-active);--_checkbox-bg: var(--form-checkbox-radio-default-background-active)}.tedi-checkbox:has(input:disabled){pointer-events:none;--_checkbox-label-color: var(--general-text-disabled);--_checkbox-bg: var(--form-input-background-disabled);--_checkbox-border: var(--form-input-border-disabled)}.tedi-checkbox:has(input:disabled:checked){--_checkbox-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-checkbox--error{--_checkbox-bg: var(--form-checkbox-radio-default-background-error);--_checkbox-border: var(--form-general-feedback-error-border)}.tedi-checkbox--large{--_checkbox-size: var(--form-checkbox-radio-size-large)}.tedi-checkbox .tedi-feedback-text{grid-area:feedback}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
758
|
+
], viewQueries: [{ propertyName: "_inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-checkbox__input-area\">\n <input\n class=\"tedi-checkbox__input\"\n type=\"checkbox\"\n #input\n [id]=\"inputId()\"\n [checked]=\"checked()\"\n [disabled]=\"checkboxDisabled()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n (blur)=\"_onTouched()\"\n />\n <div class=\"tedi-checkbox__indicator\">\n @if (indicatorIcon(); as iconName) {\n <tedi-icon [name]=\"iconName\" color=\"white\" [size]=\"iconSize()\" />\n }\n </div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-checkbox__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-checkbox{--_checkbox-bg: var(--form-checkbox-radio-default-background-default);--_checkbox-border: var(--form-checkbox-radio-default-border-default);--_checkbox-label-color: var(--general-text-primary);--_checkbox-check-color: var(--_checkbox-border);--_checkbox-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_checkbox-size: var(--form-checkbox-radio-size-responsive);--_checkbox-radius: var(--form-checkbox-radio-indicator-radius-checkbox);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-checkbox tedi-icon{-webkit-user-select:none;user-select:none}.tedi-checkbox__input-area{position:relative;grid-area:input-area}.tedi-checkbox__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-checkbox__indicator{position:relative;width:var(--_checkbox-size);height:var(--_checkbox-size);border-radius:var(--_checkbox-radius);border:1px solid var(--_checkbox-border);background:var(--_checkbox-bg);margin-right:var(--_checkbox-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-checkbox__label{color:var(--_checkbox-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-checkbox:has(input:checked,input:indeterminate){--_checkbox-bg: var(--form-checkbox-radio-default-background-selected);--_checkbox-border: var(--form-checkbox-radio-default-border-selected)}.tedi-checkbox:has(input:hover,input:focus-visible) .tedi-checkbox__indicator{outline:1px solid var(--_checkbox-border)}.tedi-checkbox:has(input:hover,input:focus-visible){--_checkbox-border: var(--form-checkbox-radio-default-border-hover)}.tedi-checkbox:has(input:active){--_checkbox-border: var(--form-checkbox-radio-default-border-active);--_checkbox-bg: var(--form-checkbox-radio-default-background-active)}.tedi-checkbox:has(input:disabled){pointer-events:none;--_checkbox-label-color: var(--general-text-disabled);--_checkbox-bg: var(--form-input-background-disabled);--_checkbox-border: var(--form-input-border-disabled)}.tedi-checkbox:has(input:disabled:checked){--_checkbox-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-checkbox--error{--_checkbox-bg: var(--form-checkbox-radio-default-background-error);--_checkbox-border: var(--form-general-feedback-error-border)}.tedi-checkbox--large{--_checkbox-size: var(--form-checkbox-radio-size-large)}.tedi-checkbox .tedi-feedback-text{grid-area:feedback}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
759
759
|
}
|
|
760
760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
761
761
|
type: Component,
|
|
@@ -849,7 +849,7 @@ class InputGroupComponent {
|
|
|
849
849
|
*/
|
|
850
850
|
feedback = input(...(ngDevMode ? [undefined, { debugName: "feedback" }] : []));
|
|
851
851
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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(--tedi-radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--tedi-dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--tedi-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(--tedi-neutral-350);--_input-group-disabled-background-color: var(--tedi-neutral-300);--_input-group-text-disabled-color: var(--tedi-neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;--_input-group-padding-x: var(--form-field-padding-x-md-default);--_input-group-padding-y: var(--form-field-padding-y-md-default);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.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: "[tedi-label]", inputs: ["size", "required", "color"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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(--tedi-radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--tedi-dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--tedi-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(--tedi-neutral-350);--_input-group-disabled-background-color: var(--tedi-neutral-300);--_input-group-text-disabled-color: var(--tedi-neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;--_input-group-padding-x: var(--form-field-padding-x-md-default);--_input-group-padding-y: var(--form-field-padding-y-md-default);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.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: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
853
853
|
}
|
|
854
854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InputGroupComponent, decorators: [{
|
|
855
855
|
type: Component,
|
|
@@ -933,7 +933,7 @@ class RadioGroupComponent {
|
|
|
933
933
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
934
934
|
multi: true,
|
|
935
935
|
},
|
|
936
|
-
], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
936
|
+
], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
937
937
|
}
|
|
938
938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
939
939
|
type: Component,
|
|
@@ -1007,7 +1007,7 @@ class RadioComponent {
|
|
|
1007
1007
|
}
|
|
1008
1008
|
}
|
|
1009
1009
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1010
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: RadioComponent, isStandalone: true, selector: "tedi-radio", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.tedi-radio": "true", "class.tedi-radio--error": "hasError() || radioGroup?.hasError()", "class.tedi-radio--large": "radioGroup?.size() === 'large'" } }, viewQueries: [{ propertyName: "_inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-radio__input-area\">\n <input\n class=\"tedi-radio__input\"\n type=\"radio\"\n #input\n [id]=\"inputId()\"\n [checked]=\"inputChecked()\"\n [disabled]=\"inputDisabled()\"\n [attr.name]=\"inputName()\"\n [attr.value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n (change)=\"onInputChange($event)\"\n />\n <div class=\"tedi-radio__indicator\"></div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-radio__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio{--_radio-bg: var(--form-checkbox-radio-default-background-default);--_radio-border: var(--form-checkbox-radio-default-border-default);--_radio-label-color: var(--general-text-primary);--_radio-dot-bg: var(--_radio-border);--_radio-dot-size: 12px;--_radio-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_radio-size: var(--form-checkbox-radio-size-responsive);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-radio__input-area{position:relative;grid-area:input-area}.tedi-radio__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-radio__indicator{position:relative;width:var(--_radio-size);height:var(--_radio-size);border-radius:50%;border:1px solid var(--_radio-border);background:var(--_radio-bg);margin-right:var(--_radio-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-radio__indicator:after{content:\"\";border-radius:50%;display:none;background:var(--_radio-dot-bg);height:var(--_radio-dot-size);width:var(--_radio-dot-size)}.tedi-radio__label{color:var(--_radio-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-radio:has(input:checked) .tedi-radio__indicator:after{display:block}.tedi-radio:has(input:checked){--_radio-border: var(--form-checkbox-radio-default-border-selected)}.tedi-radio:has(input:hover,input:focus-visible) .tedi-radio__indicator{outline:1px solid var(--_radio-border)}.tedi-radio:has(input:hover,input:focus-visible){--_radio-border: var(--form-checkbox-radio-default-border-hover)}.tedi-radio:has(input:active){--_radio-border: var(--form-checkbox-radio-default-border-active)}.tedi-radio:has(input:disabled){pointer-events:none;--_radio-label-color: var(--general-text-disabled);--_radio-bg: var(--form-input-background-disabled);--_radio-border: var(--form-input-border-disabled)}.tedi-radio:has(input:disabled:checked){--_radio-dot-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_radio-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-radio--error{--_radio-bg: var(--form-checkbox-radio-default-background-error);--_radio-border: var(--form-general-feedback-error-border)}.tedi-radio--large{--_radio-dot-size: 16px;--_radio-size: var(--form-checkbox-radio-size-large)}.tedi-radio .tedi-feedback-text{grid-area:feedback}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1010
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: RadioComponent, isStandalone: true, selector: "tedi-radio", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.tedi-radio": "true", "class.tedi-radio--error": "hasError() || radioGroup?.hasError()", "class.tedi-radio--large": "radioGroup?.size() === 'large'" } }, viewQueries: [{ propertyName: "_inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-radio__input-area\">\n <input\n class=\"tedi-radio__input\"\n type=\"radio\"\n #input\n [id]=\"inputId()\"\n [checked]=\"inputChecked()\"\n [disabled]=\"inputDisabled()\"\n [attr.name]=\"inputName()\"\n [attr.value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n (change)=\"onInputChange($event)\"\n />\n <div class=\"tedi-radio__indicator\"></div>\n</div>\n<label [for]=\"inputId()\" class=\"tedi-radio__label\">\n <ng-content></ng-content>\n</label>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-radio{--_radio-bg: var(--form-checkbox-radio-default-background-default);--_radio-border: var(--form-checkbox-radio-default-border-default);--_radio-label-color: var(--general-text-primary);--_radio-dot-bg: var(--_radio-border);--_radio-dot-size: 12px;--_radio-inner-spacing: var(--form-checkbox-radio-inner-spacing);--_radio-size: var(--form-checkbox-radio-size-responsive);--_label-size: var(--body-regular-size);display:grid;grid-template-areas:\"input-area label\" \". feedback\";grid-template-columns:auto 1fr;align-items:center}.tedi-radio__input-area{position:relative;grid-area:input-area}.tedi-radio__input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;padding:0;opacity:0;z-index:1}.tedi-radio__indicator{position:relative;width:var(--_radio-size);height:var(--_radio-size);border-radius:50%;border:1px solid var(--_radio-border);background:var(--_radio-bg);margin-right:var(--_radio-inner-spacing);display:flex;align-items:center;justify-content:center}.tedi-radio__indicator:after{content:\"\";border-radius:50%;display:none;background:var(--_radio-dot-bg);height:var(--_radio-dot-size);width:var(--_radio-dot-size)}.tedi-radio__label{color:var(--_radio-label-color);font-size:var(--_label-size);grid-area:label;font-family:var(--family-default)}.tedi-radio:has(input:checked) .tedi-radio__indicator:after{display:block}.tedi-radio:has(input:checked){--_radio-border: var(--form-checkbox-radio-default-border-selected)}.tedi-radio:has(input:hover,input:focus-visible) .tedi-radio__indicator{outline:1px solid var(--_radio-border)}.tedi-radio:has(input:hover,input:focus-visible){--_radio-border: var(--form-checkbox-radio-default-border-hover)}.tedi-radio:has(input:active){--_radio-border: var(--form-checkbox-radio-default-border-active)}.tedi-radio:has(input:disabled){pointer-events:none;--_radio-label-color: var(--general-text-disabled);--_radio-bg: var(--form-input-background-disabled);--_radio-border: var(--form-input-border-disabled)}.tedi-radio:has(input:disabled:checked){--_radio-dot-bg: var( --form-checkbox-radio-default-background-selected-disabled );--_radio-border: var( --form-checkbox-radio-default-border-selected-disabled )}.tedi-radio--error{--_radio-bg: var(--form-checkbox-radio-default-background-error);--_radio-border: var(--form-general-feedback-error-border)}.tedi-radio--large{--_radio-dot-size: 16px;--_radio-size: var(--form-checkbox-radio-size-large)}.tedi-radio .tedi-feedback-text{grid-area:feedback}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1011
1011
|
}
|
|
1012
1012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1013
1013
|
type: Component,
|
|
@@ -1038,7 +1038,7 @@ class RadioCardGroupComponent extends RadioGroupComponent {
|
|
|
1038
1038
|
provide: RadioGroupComponent,
|
|
1039
1039
|
useExisting: RadioCardGroupComponent,
|
|
1040
1040
|
},
|
|
1041
|
-
], usesInheritance: true, hostDirectives: [{ directive: ChoiceGroupDirective, inputs: ["variant", "variant", "hasIndicator", "hasIndicator", "spacing", "spacing"] }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n", ".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1041
|
+
], usesInheritance: true, hostDirectives: [{ directive: ChoiceGroupDirective, inputs: ["variant", "variant", "hasIndicator", "hasIndicator", "spacing", "spacing"] }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"id()\">\n {{ label() }}\n </label>\n}\n<div\n class=\"tedi-radio-group__radios\"\n [style.flex-direction]=\"direction()\"\n [style.gap]=\"spacing() + 'px'\"\n>\n <ng-content />\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", styles: [".tedi-radio-group{display:block}.tedi-radio-group__radios{display:flex;flex-wrap:wrap}\n", ".tedi-choicegroup .tedi-radio,.tedi-choicegroup .tedi-checkbox{position:relative;background-color:var(--_choicegroup-card-bg);border:1px solid var(--_choicegroup-card-border);border-radius:var(--_choicegroup-card-radius);padding:var(--_choicegroup-card-padding);--_choicegroup-card-padding-top: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-bottom: var(--_choicegroup-card-padding-vertical);--_choicegroup-card-padding-left: var(--_choicegroup-card-padding-horizontal);--_choicegroup-card-padding-right: var( --_choicegroup-card-padding-horizontal );--_choicegroup-card-padding: var(--_choicegroup-card-padding-top) var(--_choicegroup-card-padding-right) var(--_choicegroup-card-padding-bottom) var(--_choicegroup-card-padding-left);--_choicegroup-card-radius: var(--form-checkbox-radio-card-radius);--_choicegroup-card-padding-horizontal: var( --form-checkbox-radio-card-checkbox-padding-x );--_choicegroup-card-padding-vertical: var( --form-checkbox-radio-card-checkbox-padding-y )}.tedi-choicegroup .tedi-radio__input-area,.tedi-choicegroup .tedi-checkbox__input-area{position:static}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-default-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-selected-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-hover-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-primary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-primary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-primary-disabled-text )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-separate )}.tedi-choicegroup--primary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--primary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_radio-bg: transparent;--_checkbox-bg: transparent;--_radio-border: var( --form-checkbox-radio-default-border-selected-inverted );--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary .tedi-checkbox:has(input:active){--_checkbox-border: var( --form-checkbox-radio-default-border-selected-inverted )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-default-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-selected-border-group )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-hover-border )}.tedi-choicegroup--primary.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-primary-disabled-border-group )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-default-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-default-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-default-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-selected-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-selected-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-selected-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-hover-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-hover-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-hover-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-bg: var( --form-checkbox-radio-card-secondary-disabled-background );--_radio-label-color: var( --form-checkbox-radio-card-secondary-disabled-text );--_checkbox-label-color: var( --form-checkbox-radio-card-secondary-disabled-text )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-default-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-selected-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:hover){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-hover-border )}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:disabled){--_choicegroup-card-border: var( --form-checkbox-radio-card-secondary-disabled-border )}.tedi-choicegroup--secondary :is(.tedi-radio--error,.tedi-checkbox--error){--_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);--_choicegroup-card-border: var(--form-general-feedback-error-border)}.tedi-choicegroup--secondary :is(.tedi-radio,.tedi-checkbox):has(input:checked){outline:1px solid var(--_choicegroup-card-border);outline-offset:-2px}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-radio__indicator,.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible) .tedi-checkbox__indicator{outline:none}.tedi-choicegroup :is(.tedi-radio,.tedi-checkbox):has(input:focus-visible){outline:2px solid var(--form-input-border-active);outline-offset:1px}.tedi-choicegroup--plain .tedi-radio__indicator,.tedi-choicegroup--plain .tedi-checkbox__indicator{display:none}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tedi-choicegroup--stacked :is(.tedi-radio,.tedi-checkbox):has(input:checked){z-index:1}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1042
1042
|
}
|
|
1043
1043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RadioCardGroupComponent, decorators: [{
|
|
1044
1044
|
type: Component,
|
|
@@ -1336,7 +1336,7 @@ class ModalHeaderComponent {
|
|
|
1336
1336
|
}
|
|
1337
1337
|
}
|
|
1338
1338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1339
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", feedback: "feedbackChange", closeButton: "closeButtonChange" }, ngImport: i0, template: "<div class=\"tedi-modal-header\">\n <div class=\"tedi-modal-header__title\">\n <ng-content>\n <h1 tedi-text modifiers=\"h3\">\n {{ title() }}\n </h1>\n </ng-content>\n\n <ng-content select=\"[header-exit-button]\">\n @if (closeButton()) {\n <button\n tedi-closing-button\n variant=\"neutral\"\n (click)=\"closeModal()\"\n ></button>\n }\n </ng-content>\n </div>\n\n @if (feedback()) {\n <tedi-feedback-text\n [text]=\"feedback()!.text\"\n [type]=\"feedback()!.type\"\n [position]=\"feedback()!.position\"\n />\n }\n</div>\n", styles: [".tedi-modal-header{border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x)}.tedi-modal-header__title{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
|
|
1339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", feedback: "feedbackChange", closeButton: "closeButtonChange" }, ngImport: i0, template: "<div class=\"tedi-modal-header\">\n <div class=\"tedi-modal-header__title\">\n <ng-content>\n <h1 tedi-text modifiers=\"h3\">\n {{ title() }}\n </h1>\n </ng-content>\n\n <ng-content select=\"[header-exit-button]\">\n @if (closeButton()) {\n <button\n tedi-closing-button\n variant=\"neutral\"\n (click)=\"closeModal()\"\n ></button>\n }\n </ng-content>\n </div>\n\n @if (feedback()) {\n <tedi-feedback-text\n [text]=\"feedback()!.text\"\n [type]=\"feedback()!.type\"\n [position]=\"feedback()!.position\"\n />\n }\n</div>\n", styles: [".tedi-modal-header{border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x)}.tedi-modal-header__title{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
|
|
1340
1340
|
}
|
|
1341
1341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
1342
1342
|
type: Component,
|
|
@@ -1489,7 +1489,7 @@ class SelectComponent {
|
|
|
1489
1489
|
useExisting: forwardRef(() => SelectComponent),
|
|
1490
1490
|
multi: true,
|
|
1491
1491
|
},
|
|
1492
|
-
], 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__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;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.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;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{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$1.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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { 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 });
|
|
1492
|
+
], 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__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;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.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;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{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$1.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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "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 });
|
|
1493
1493
|
}
|
|
1494
1494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1495
1495
|
type: Component,
|
|
@@ -1912,7 +1912,7 @@ class MultiselectComponent {
|
|
|
1912
1912
|
useExisting: forwardRef(() => MultiselectComponent),
|
|
1913
1913
|
multi: true,
|
|
1914
1914
|
},
|
|
1915
|
-
], 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__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;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.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;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{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$1.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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { 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", "indeterminateChange", "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 });
|
|
1915
|
+
], 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__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;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.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;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{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$1.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", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "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", "indeterminateChange", "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 });
|
|
1916
1916
|
}
|
|
1917
1917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
1918
1918
|
type: Component,
|
|
@@ -2210,7 +2210,7 @@ class SearchComponent {
|
|
|
2210
2210
|
useExisting: forwardRef(() => SearchComponent),
|
|
2211
2211
|
multi: true,
|
|
2212
2212
|
},
|
|
2213
|
-
], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\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]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { 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: "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", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2213
|
+
], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n}\n\n<div class=\"tedi-search__container\">\n <input\n cdkOverlayOrigin\n [id]=\"inputId()\"\n class=\"tedi-search__input\"\n type=\"text\"\n [(ngModel)]=\"_inputValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"_disabled()\"\n (focus)=\"focusInput()\"\n (keydown.enter)=\"focusDropdown($event)\"\n (keydown.arrowDown)=\"focusDropdown($event)\"\n (ngModelChange)=\"inputChanged($event)\"\n (blur)=\"onTouched()\"\n #trigger=\"cdkOverlayOrigin\"\n />\n\n <div class=\"tedi-search__suffix\">\n @if (clearable() && _inputValue()) {\n <button\n type=\"reset\"\n tedi-closing-button\n [size]=\"size() === 'large' ? 'default' : 'small'\"\n [iconSize]=\"size() === 'large' ? 24 : 18\"\n (click)=\"$event.stopPropagation(); clearResult()\"\n ></button>\n @if (!withButton()) {\n <div class=\"tedi-search__suffix-separator\"></div>\n }\n }\n @if (!withButton()) {\n @if (!loading()) {\n <tedi-icon\n class=\"tedi-search__search-icon\"\n name=\"search\"\n color=\"secondary\"\n [size]=\"iconSize()\"\n />\n } @else {\n <tedi-spinner />\n }\n }\n </div>\n\n @if (withButton()) {\n @if (loading()) {\n <tedi-spinner />\n }\n <button\n tedi-button\n class=\"tedi-search__trigger\"\n [size]=\"buttonSize()\"\n (click)=\"searchButtonClick()\"\n [disabled]=\"_disabled()\"\n >\n <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n {{ buttonText() }}\n </button>\n }\n</div>\n\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]=\"_isVisible()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closeOverlay(false)\"\n (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n #searchPanel\n>\n <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n @if (loading()) {\n <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n <tedi-spinner />\n </tedi-card-content>\n } @else if (_foundOptions().length) {\n <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n @for (option of _foundOptions(); track option.value) {\n <button\n cdkMenuItem\n tedi-dropdown-item\n [value]=\"option.value\"\n [selected]=\"option.value === _selectedOption()?.value\"\n (click)=\"selectResult(option)\"\n #autocompleteOption\n >\n @if (option.description) {\n <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n } @else {\n {{ option.label }}\n }\n </button>\n }\n </tedi-card-content>\n } @else {\n <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n {{ noResultText() }}\n </tedi-card-content>\n }\n\n <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n <ng-content></ng-content>\n </tedi-card-content>\n </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { 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: "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", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2214
2214
|
}
|
|
2215
2215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
|
|
2216
2216
|
type: Component,
|
|
@@ -2739,7 +2739,7 @@ class FileDropzoneComponent {
|
|
|
2739
2739
|
this.disabled.set(isDisabled);
|
|
2740
2740
|
}
|
|
2741
2741
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], 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<ng-content select=\"[file-list]\">\n @for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-attachment\n [name]=\"file.label ?? file.name\"\n [fileSize]=\"formatBytes(file.size)\"\n [invalid]=\"file.fileStatus === 'invalid'\"\n [error]=\"\n validateIndividually() && file.fileStatus === 'invalid'\n ? file.helper?.text\n : undefined\n \"\n >\n <tedi-attachment-actions>\n <tedi-tooltip>\n <tedi-tooltip-trigger>\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n [attr.aria-label]=\"\n ('remove' | tediTranslate) + ' ' + (file.label ?? file.name)\n \"\n [disabled]=\"file.disabled\"\n (click)=\"removeFile(file)\"\n >\n <tedi-icon name=\"delete\" [size]=\"18\" />\n </button>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>\n {{ (\"remove\" | tediTranslate) + \" \" + (file.label ?? file.name) }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n </tedi-attachment-actions>\n </tedi-attachment>\n </div>\n }\n</ng-content>\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;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.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);font-size:var(--body-regular-size)}.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;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}\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: AttachmentComponent, selector: "tedi-attachment", inputs: ["name", "fileSize", "icon", "error", "invalid", "direction", "verticalBelow"] }, { kind: "component", type: AttachmentActionsComponent, selector: "tedi-attachment-actions", inputs: ["padded"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
|
|
2742
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], 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<ng-content select=\"[file-list]\">\n @for (file of files(); track file.name) {\n <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n <tedi-attachment\n [name]=\"file.label ?? file.name\"\n [fileSize]=\"formatBytes(file.size)\"\n [invalid]=\"file.fileStatus === 'invalid'\"\n [error]=\"\n validateIndividually() && file.fileStatus === 'invalid'\n ? file.helper?.text\n : undefined\n \"\n >\n <tedi-attachment-actions>\n <tedi-tooltip>\n <tedi-tooltip-trigger>\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n [attr.aria-label]=\"\n ('remove' | tediTranslate) + ' ' + (file.label ?? file.name)\n \"\n [disabled]=\"file.disabled\"\n (click)=\"removeFile(file)\"\n >\n <tedi-icon name=\"delete\" [size]=\"18\" />\n </button>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>\n {{ (\"remove\" | tediTranslate) + \" \" + (file.label ?? file.name) }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n </tedi-attachment-actions>\n </tedi-attachment>\n </div>\n }\n</ng-content>\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;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.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);font-size:var(--body-regular-size)}.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;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}\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: ["id", "text", "type", "position"] }, { kind: "component", type: AttachmentComponent, selector: "tedi-attachment", inputs: ["name", "fileSize", "icon", "error", "invalid", "direction", "verticalBelow"] }, { kind: "component", type: AttachmentActionsComponent, selector: "tedi-attachment-actions", inputs: ["padded"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
|
|
2743
2743
|
}
|
|
2744
2744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileDropzoneComponent, decorators: [{
|
|
2745
2745
|
type: Component,
|
|
@@ -3405,7 +3405,7 @@ class ProgressBarComponent {
|
|
|
3405
3405
|
return;
|
|
3406
3406
|
}, ...(ngDevMode ? [{ debugName: "feedbackTextId" }] : []));
|
|
3407
3407
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3408
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress": "true", "class.tedi-progress--small": "small()", "class.tedi-progress--horizontal": "direction() === 'horizontal'" } }, ngImport: i0, template: "<progress\n class=\"tedi-progress__bar\"\n [id]=\"progressId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n></progress>\n\n<span tedi-label size=\"small\" class=\"tedi-progress__indicator\"\n >{{ value() }}%</span\n>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-progress{--_bar-height: var(--progress-bar-height, 8px);--_bar-radius: var(--progress-bar-radius, 4px);--_bar-background: var(--progress-bar-background-passive, #f9f9f9);--_bar-border: var(--progress-bar-border-default, #838494);--_progress-background: var(--progress-bar-background-active, #005aa3);display:grid;grid-template-areas:\"bar bar\" \". indicator\";grid-template-rows:24px;grid-template-columns:1fr auto;column-gap:var(--layout-grid-gutters-08, 8px)}.tedi-progress__bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-area:bar;height:var(--_bar-height);border-radius:var(--_bar-radius);border:1px solid var(--_bar-border);width:100%;align-self:center}.tedi-progress__bar::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__indicator{grid-area:indicator}.tedi-progress--small{--_bar-height: var(--progress-bar-height-sm, 4px)}@media(min-width:36rem){.tedi-progress--horizontal{grid-template-areas:\"bar indicator\"}}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3408
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-progress": "true", "class.tedi-progress--small": "small()", "class.tedi-progress--horizontal": "direction() === 'horizontal'" } }, ngImport: i0, template: "<progress\n class=\"tedi-progress__bar\"\n [id]=\"progressId()\"\n [max]=\"100\"\n [value]=\"value()\"\n [attr.aria-describedby]=\"feedbackTextId()\"\n></progress>\n\n<span tedi-label size=\"small\" class=\"tedi-progress__indicator\"\n >{{ value() }}%</span\n>\n\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackTextId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n", styles: [".tedi-progress{--_bar-height: var(--progress-bar-height, 8px);--_bar-radius: var(--progress-bar-radius, 4px);--_bar-background: var(--progress-bar-background-passive, #f9f9f9);--_bar-border: var(--progress-bar-border-default, #838494);--_progress-background: var(--progress-bar-background-active, #005aa3);display:grid;grid-template-areas:\"bar bar\" \". indicator\";grid-template-rows:24px;grid-template-columns:1fr auto;column-gap:var(--layout-grid-gutters-08, 8px)}.tedi-progress__bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-area:bar;height:var(--_bar-height);border-radius:var(--_bar-radius);border:1px solid var(--_bar-border);width:100%;align-self:center}.tedi-progress__bar::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__bar::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius)}.tedi-progress__indicator{grid-area:indicator}.tedi-progress--small{--_bar-height: var(--progress-bar-height-sm, 4px)}@media(min-width:36rem){.tedi-progress--horizontal{grid-template-areas:\"bar indicator\"}}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3409
3409
|
}
|
|
3410
3410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
3411
3411
|
type: Component,
|