@tedi-design-system/angular 6.3.0-rc.12 → 6.3.0-rc.13
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.
|
@@ -2128,11 +2128,11 @@ class CollapseComponent {
|
|
|
2128
2128
|
}
|
|
2129
2129
|
}
|
|
2130
2130
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background
|
|
2131
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:transparent;border:none}.tedi-collapse__button:disabled{cursor:default}.tedi-collapse__button--text{text-decoration:underline}.tedi-collapse__button:focus-visible{outline:2px solid var(--button-main-neutral-text-default);outline-offset:var(--global-outline-offset)}.tedi-collapse__icon{color:var(--button-main-neutral-text-default);transition:transform .3s ease}.tedi-collapse__icon--wrapper{display:flex;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);border:var(--tedi-borders-01) solid var(--button-main-secondary-border-default);border-radius:100%}.tedi-collapse--open>.tedi-collapse__button .tedi-collapse__icon{transform:rotate(180deg)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2132
2132
|
}
|
|
2133
2133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseComponent, decorators: [{
|
|
2134
2134
|
type: Component,
|
|
2135
|
-
args: [{ standalone: true, selector: "tedi-collapse", imports: [IconComponent, TextComponent, TediTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background
|
|
2135
|
+
args: [{ standalone: true, selector: "tedi-collapse", imports: [IconComponent, TextComponent, TediTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tedi-collapse\" [class.tedi-collapse--open]=\"isOpen() === true\">\n <button\n class=\"tedi-collapse__button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"isOpen() ? true : false\"\n [attr.aria-controls]=\"collapseContentId\"\n >\n @if (hideCollapseText() === false) {\n <p tedi-text color=\"brand\" class=\"tedi-collapse__button--text\">\n {{\n isOpen()\n ? (closeText() ?? (\"close\" | tediTranslate))\n : (openText() ?? (\"open\" | tediTranslate))\n }}\n </p>\n }\n @if (arrowType() === \"default\") {\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n } @else if (arrowType() === \"secondary\") {\n <div class=\"tedi-collapse__icon--wrapper\">\n <tedi-icon class=\"tedi-collapse__icon\" name=\"expand_more\" color=\"brand\" />\n </div>\n }\n </button>\n <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n <div class=\"tedi-collapse__extender\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse__button{display:flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:transparent;border:none}.tedi-collapse__button:disabled{cursor:default}.tedi-collapse__button--text{text-decoration:underline}.tedi-collapse__button:focus-visible{outline:2px solid var(--button-main-neutral-text-default);outline-offset:var(--global-outline-offset)}.tedi-collapse__icon{color:var(--button-main-neutral-text-default);transition:transform .3s ease}.tedi-collapse__icon--wrapper{display:flex;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);border:var(--tedi-borders-01) solid var(--button-main-secondary-border-default);border-radius:100%}.tedi-collapse--open>.tedi-collapse__button .tedi-collapse__icon{transform:rotate(180deg)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"] }]
|
|
2136
2136
|
}] });
|
|
2137
2137
|
|
|
2138
2138
|
class ListComponent {
|
|
@@ -6478,7 +6478,7 @@ class FooterSectionComponent {
|
|
|
6478
6478
|
}
|
|
6479
6479
|
}
|
|
6480
6480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FooterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FooterSectionComponent, isStandalone: true, selector: "tedi-footer-section", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "collapse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-footer-section--collapse": "applyCollapse()" }, classAttribute: "tedi-footer-section" }, ngImport: i0, template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background
|
|
6481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FooterSectionComponent, isStandalone: true, selector: "tedi-footer-section", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "collapse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-footer-section--collapse": "applyCollapse()" }, classAttribute: "tedi-footer-section" }, ngImport: i0, template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:transparent;border:none}.tedi-footer-section__button:disabled{cursor:default}.tedi-footer-section__button{font-weight:700;color:var(--general-text-white)}.tedi-footer-section__button:focus-visible{color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], animations: [
|
|
6482
6482
|
trigger("collapseContent", [
|
|
6483
6483
|
state("collapsed", style({
|
|
6484
6484
|
height: "0",
|
|
@@ -6513,7 +6513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6513
6513
|
})),
|
|
6514
6514
|
transition("collapsed <=> expanded", [animate("300ms ease")]),
|
|
6515
6515
|
]),
|
|
6516
|
-
], template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background
|
|
6516
|
+
], template: "@if (icon() && !hideIcon()) {\n <tedi-icon class=\"tedi-footer-section__icon\" [name]=\"icon()!\" color=\"white\" />\n}\n\n<div\n class=\"tedi-footer-section__container\"\n [class.tedi-footer-section__container--mobile]=\"mobileLayout()\"\n>\n @if (applyCollapse()) {\n <button class=\"tedi-footer-section__button\" (click)=\"toggleCollapse()\">\n {{ heading() }}\n <tedi-icon\n class=\"collapse__icon\"\n color=\"white\"\n [name]=\"collapseOpen() ? 'expand_less' : 'expand_more'\"\n />\n </button>\n } @else {\n <strong tedi-text class=\"tedi-footer-section__heading\" color=\"white\">\n {{ heading() }}\n </strong>\n }\n <div\n [class.tedi-footer-section__content-hidden]=\"\n applyCollapse() && !collapseOpen()\n \"\n [@collapseContent]=\"\n applyCollapse() ? (collapseOpen() ? 'expanded' : 'collapsed') : 'expanded'\n \"\n class=\"tedi-footer-section__content\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tedi-footer-section{display:flex;gap:var(--layout-footer-col-padding-x);align-items:flex-start}.tedi-footer-section--collapse{width:100%;border-bottom:1px solid var(--tedi-alpha-white-10)}.tedi-footer-section__icon{gap:var(--layout-footer-item-vertical-spacing);padding:var(--icon-background-padding-lg);background:var(--footer-icon-background);border-radius:var(--icon-background-radius)}.tedi-footer-section__container{padding-bottom:.75rem;display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content{display:flex;flex-direction:column;gap:var(--layout-footer-item-vertical-spacing);align-items:flex-start}.tedi-footer-section__content-hidden{display:none}.tedi-footer-section__button{padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:transparent;border:none}.tedi-footer-section__button:disabled{cursor:default}.tedi-footer-section__button{font-weight:700;color:var(--general-text-white)}.tedi-footer-section__button:focus-visible{color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}\n"] }]
|
|
6517
6517
|
}] });
|
|
6518
6518
|
|
|
6519
6519
|
class FooterSideComponent {
|