@tedi-design-system/angular 6.2.0 → 6.3.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/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts +4 -2
- package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map +1 -1
- package/community/components/cards/accordion/accordion-item-content/accordion-item-content.component.d.ts +1 -0
- package/community/components/cards/accordion/accordion-item-content/accordion-item-content.component.d.ts.map +1 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts +9 -1
- package/community/components/cards/accordion/accordion-item-header/accordion-item-header.component.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +29 -13
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +2 -2
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/components/base/icon/icon.component.d.ts +1 -1
- package/tedi/components/base/icon/icon.component.d.ts.map +1 -1
|
@@ -3,18 +3,20 @@ export declare class AccordionItemComponent {
|
|
|
3
3
|
/**
|
|
4
4
|
* Accordion item id
|
|
5
5
|
*/
|
|
6
|
-
id: import("@angular/core").InputSignal<string>;
|
|
6
|
+
id: import("@angular/core").InputSignal<string | undefined>;
|
|
7
7
|
/**
|
|
8
8
|
* Whether accordion item is selected
|
|
9
9
|
*/
|
|
10
10
|
selected: import("@angular/core").InputSignal<boolean>;
|
|
11
11
|
opened: import("@angular/core").ModelSignal<boolean>;
|
|
12
|
+
private idGenerator;
|
|
13
|
+
private itemId;
|
|
12
14
|
headerId: import("@angular/core").Signal<string>;
|
|
13
15
|
contentId: import("@angular/core").Signal<string>;
|
|
14
16
|
open(): void;
|
|
15
17
|
close(): void;
|
|
16
18
|
toggle(): void;
|
|
17
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
|
|
18
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "tedi-accordion-item", never, { "id": { "alias": "id"; "required":
|
|
20
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "tedi-accordion-item", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; }, never, ["*"], true, never>;
|
|
19
21
|
}
|
|
20
22
|
//# sourceMappingURL=accordion-item.component.d.ts.map
|
package/community/components/cards/accordion/accordion-item/accordion-item.component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/cards/accordion/accordion-item/accordion-item.component.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"accordion-item.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/cards/accordion/accordion-item/accordion-item.component.ts"],"names":[],"mappings":";AAYA,qBAYa,sBAAsB;IACjC;;OAEG;IACH,EAAE,0DAAmB;IACrB;;OAEG;IACH,QAAQ,+CAAyB;IAEjC,MAAM,+CAAyB;IAE/B,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,MAAM,CAEZ;IAEF,QAAQ,yCAEL;IACH,SAAS,yCAEN;IAEH,IAAI;IAIJ,KAAK;IAIL,MAAM;yCAjCK,sBAAsB;2CAAtB,sBAAsB;CAoClC"}
|
|
@@ -6,6 +6,7 @@ export declare class AccordionItemContentComponent {
|
|
|
6
6
|
accordionItem: AccordionItemComponent;
|
|
7
7
|
headerId: import("@angular/core").Signal<string>;
|
|
8
8
|
contentId: import("@angular/core").Signal<string>;
|
|
9
|
+
opened: import("@angular/core").ModelSignal<boolean>;
|
|
9
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemContentComponent, never>;
|
|
10
11
|
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemContentComponent, "tedi-accordion-item-content", never, { "background": { "alias": "background"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
11
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item-content.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/cards/accordion/accordion-item-content/accordion-item-content.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;;AAEpF,qBAYa,6BAA6B;IACxC,UAAU,8DAAuB;IAEjC,aAAa,yBAAkC;IAC/C,QAAQ,yCAA+B;IACvC,SAAS,yCAAgC;
|
|
1
|
+
{"version":3,"file":"accordion-item-content.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/cards/accordion/accordion-item-content/accordion-item-content.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;;AAEpF,qBAYa,6BAA6B;IACxC,UAAU,8DAAuB;IAEjC,aAAa,yBAAkC;IAC/C,QAAQ,yCAA+B;IACvC,SAAS,yCAAgC;IACzC,MAAM,+CAA6B;yCANxB,6BAA6B;2CAA7B,6BAA6B;CAOzC"}
|
|
@@ -29,6 +29,14 @@ export declare class AccordionItemHeaderComponent {
|
|
|
29
29
|
* Color of the indicator arrow
|
|
30
30
|
*/
|
|
31
31
|
indicatorColor: import("@angular/core").InputSignal<IconColor | undefined>;
|
|
32
|
+
/**
|
|
33
|
+
* Whether indicator is displayed before or after the main content
|
|
34
|
+
*/
|
|
35
|
+
indicatorPosition: import("@angular/core").InputSignal<"start" | "end">;
|
|
36
|
+
/**
|
|
37
|
+
* Whether header is clickable
|
|
38
|
+
*/
|
|
39
|
+
clickable: import("@angular/core").InputSignal<boolean>;
|
|
32
40
|
accordionItem: AccordionItemComponent;
|
|
33
41
|
opened: import("@angular/core").ModelSignal<boolean>;
|
|
34
42
|
headerId: import("@angular/core").Signal<string>;
|
|
@@ -37,6 +45,6 @@ export declare class AccordionItemHeaderComponent {
|
|
|
37
45
|
indicatorIconColor: import("@angular/core").Signal<IconColor>;
|
|
38
46
|
toggle(): void;
|
|
39
47
|
static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemHeaderComponent, never>;
|
|
40
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemHeaderComponent, "tedi-accordion-item-header", never, { "indicator": { "alias": "indicator"; "required": false; "isSignal": true; }; "openText": { "alias": "openText"; "required": false; "isSignal": true; }; "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tedi-accordion-header-end]"], true, never>;
|
|
48
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemHeaderComponent, "tedi-accordion-item-header", never, { "indicator": { "alias": "indicator"; "required": false; "isSignal": true; }; "openText": { "alias": "openText"; "required": false; "isSignal": true; }; "closeText": { "alias": "closeText"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; "indicatorPosition": { "alias": "indicatorPosition"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[tedi-accordion-header-end]"], true, never>;
|
|
41
49
|
}
|
|
42
50
|
//# sourceMappingURL=accordion-item-header.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item-header.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/cards/accordion/accordion-item-header/accordion-item-header.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAEL,iBAAiB,EAClB,MAAM,8CAA8C,CAAC;AACtD,OAAO,
|
|
1
|
+
{"version":3,"file":"accordion-item-header.component.d.ts","sourceRoot":"","sources":["../../../../../../community/components/cards/accordion/accordion-item-header/accordion-item-header.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAEL,iBAAiB,EAClB,MAAM,8CAA8C,CAAC;AACtD,OAAO,EACL,SAAS,EAGV,MAAM,kCAAkC,CAAC;;AAK1C,qBAiBa,4BAA4B;IACvC;;;OAGG;IACH,SAAS,+CAAyB;IAClC;;OAEG;IACH,QAAQ,0DAAmB;IAC3B;;OAEG;IACH,SAAS,0DAAmB;IAC5B;;OAEG;IACH,OAAO,qEAA8B;IACrC;;OAEG;IACH,UAAU,8DAAuB;IACjC;;OAEG;IACH,cAAc,6DAAsB;IACpC;;OAEG;IACH,iBAAiB,uDAAiC;IAClD;;OAEG;IACH,SAAS,+CAAe;IAExB,aAAa,yBAAkC;IAC/C,MAAM,+CAA6B;IACnC,QAAQ,yCAA+B;IACvC,SAAS,yCAAgC;IAEzC,gBAAgB,qDAKb;IAEH,kBAAkB,4CAOf;IAEH,MAAM;yCAxDK,4BAA4B;2CAA5B,4BAA4B;CA2DxC"}
|
|
@@ -2,17 +2,17 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, model, contentChildren, effect, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef, Self, EventEmitter } from '@angular/core';
|
|
3
3
|
import * as i1 from '@tedi-design-system/angular/tedi';
|
|
4
4
|
import { BaseButtonDirective, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, InfoButtonComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
|
|
5
|
+
import { _IdGenerator, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
6
|
+
import * as i1$1 from '@angular/common';
|
|
7
|
+
import { NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
|
|
5
8
|
import * as i1$2 from '@angular/forms';
|
|
6
9
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
10
|
import * as i2 from '@angular/cdk/overlay';
|
|
8
11
|
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
|
|
9
12
|
import * as i3 from '@angular/cdk/listbox';
|
|
10
13
|
import { CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
|
|
11
|
-
import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
12
14
|
import { DialogRef, DIALOG_DATA, DialogModule, Dialog } from '@angular/cdk/dialog';
|
|
13
15
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
14
|
-
import * as i1$1 from '@angular/common';
|
|
15
|
-
import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
16
16
|
import * as i2$1 from '@angular/cdk/menu';
|
|
17
17
|
import { CdkMenu, CdkMenuModule } from '@angular/cdk/menu';
|
|
18
18
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
@@ -181,17 +181,19 @@ class AccordionItemComponent {
|
|
|
181
181
|
/**
|
|
182
182
|
* Accordion item id
|
|
183
183
|
*/
|
|
184
|
-
id = input
|
|
184
|
+
id = input();
|
|
185
185
|
/**
|
|
186
186
|
* Whether accordion item is selected
|
|
187
187
|
*/
|
|
188
188
|
selected = input(false);
|
|
189
189
|
opened = model(false);
|
|
190
|
+
idGenerator = inject(_IdGenerator);
|
|
191
|
+
itemId = computed(() => this.id() || this.idGenerator.getId("accordion"));
|
|
190
192
|
headerId = computed(() => {
|
|
191
|
-
return `tedi-accordion-header-${this.
|
|
193
|
+
return `tedi-accordion-header-${this.itemId()}`;
|
|
192
194
|
});
|
|
193
195
|
contentId = computed(() => {
|
|
194
|
-
return `tedi-accordion-content-${this.
|
|
196
|
+
return `tedi-accordion-content-${this.itemId()}`;
|
|
195
197
|
});
|
|
196
198
|
open() {
|
|
197
199
|
this.opened.set(true);
|
|
@@ -203,13 +205,13 @@ class AccordionItemComponent {
|
|
|
203
205
|
this.opened.update((wasOpened) => !wasOpened);
|
|
204
206
|
}
|
|
205
207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
206
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired:
|
|
208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.tedi-accordion-item": "true" } }, ngImport: i0, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
207
209
|
}
|
|
208
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
209
211
|
type: Component,
|
|
210
212
|
args: [{ selector: "tedi-accordion-item", standalone: true, imports: [CardComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
211
213
|
"[class.tedi-accordion-item]": "true",
|
|
212
|
-
}, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 8px}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
|
|
214
|
+
}, template: "<tedi-card\n [selected]=\"selected()\"\n class=\"tedi-accordion-item__card\"\n [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
|
|
213
215
|
}] });
|
|
214
216
|
|
|
215
217
|
/**
|
|
@@ -333,14 +335,15 @@ class AccordionItemContentComponent {
|
|
|
333
335
|
accordionItem = inject(AccordionItemComponent);
|
|
334
336
|
headerId = this.accordionItem.headerId;
|
|
335
337
|
contentId = this.accordionItem.contentId;
|
|
338
|
+
opened = this.accordionItem.opened;
|
|
336
339
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
340
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
338
341
|
}
|
|
339
342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
|
|
340
343
|
type: Component,
|
|
341
344
|
args: [{ selector: "tedi-accordion-item-content", standalone: true, imports: [CardContentComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
342
345
|
"[class.tedi-accordion-item-content]": "true",
|
|
343
|
-
}, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
|
|
346
|
+
}, template: "<tedi-card-content\n [background]=\"background()\"\n [id]=\"contentId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!opened()\"\n [attr.inert]=\"!opened() ? '' : null\"\n>\n <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
|
|
344
347
|
}] });
|
|
345
348
|
|
|
346
349
|
class CardHeaderComponent {
|
|
@@ -398,6 +401,14 @@ class AccordionItemHeaderComponent {
|
|
|
398
401
|
* Color of the indicator arrow
|
|
399
402
|
*/
|
|
400
403
|
indicatorColor = input();
|
|
404
|
+
/**
|
|
405
|
+
* Whether indicator is displayed before or after the main content
|
|
406
|
+
*/
|
|
407
|
+
indicatorPosition = input("end");
|
|
408
|
+
/**
|
|
409
|
+
* Whether header is clickable
|
|
410
|
+
*/
|
|
411
|
+
clickable = input(true);
|
|
401
412
|
accordionItem = inject(AccordionItemComponent);
|
|
402
413
|
opened = this.accordionItem.opened;
|
|
403
414
|
headerId = this.accordionItem.headerId;
|
|
@@ -420,13 +431,18 @@ class AccordionItemHeaderComponent {
|
|
|
420
431
|
this.accordionItem.toggle();
|
|
421
432
|
}
|
|
422
433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
423
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n>\n <
|
|
434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"], dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "tedi-card-header, [tedi-card-header]", inputs: ["variant"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
424
435
|
}
|
|
425
436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemHeaderComponent, decorators: [{
|
|
426
437
|
type: Component,
|
|
427
|
-
args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
|
|
438
|
+
args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
|
|
439
|
+
CardHeaderComponent,
|
|
440
|
+
IconComponent,
|
|
441
|
+
ButtonComponent,
|
|
442
|
+
NgTemplateOutlet,
|
|
443
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
428
444
|
"[class.tedi-accordion-item-header-host]": "true",
|
|
429
|
-
}, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n>\n <
|
|
445
|
+
}, template: "<button\n [id]=\"headerId()\"\n tedi-card-header\n [variant]=\"variant()\"\n [background]=\"background()\"\n class=\"tedi-accordion-item-header\"\n [class.tedi-accordion-item-header--opened]=\"opened()\"\n [attr.aria-expanded]=\"opened()\"\n [attr.aria-controls]=\"contentId()\"\n (click)=\"toggle()\"\n [disabled]=\"!clickable()\"\n>\n <div class=\"tedi-accordion-item-header__title\">\n @if (indicator() && indicatorPosition() === \"start\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n <ng-content></ng-content>\n </div>\n @if (indicator() && indicatorPosition() === \"end\") {\n <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n }\n @if (toggleButtonText()) {\n <span\n tedi-button\n variant=\"neutral\"\n class=\"tedi-accordion-item-header__toggle\"\n >\n {{ toggleButtonText() }}\n <tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n color=\"brand\"\n />\n </span>\n }\n <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n ><tedi-icon\n name=\"keyboard_arrow_down\"\n class=\"tedi-accordion-item-header__indicator\"\n [size]=\"24\"\n [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"] }]
|
|
430
446
|
}] });
|
|
431
447
|
|
|
432
448
|
class CardRowComponent {
|