@tedi-design-system/angular 6.5.0-rc.12 → 6.5.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.
|
@@ -1773,6 +1773,9 @@ class AlertComponent {
|
|
|
1773
1773
|
icon = input("", ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
1774
1774
|
/**
|
|
1775
1775
|
* If true, a close button will be displayed.
|
|
1776
|
+
*
|
|
1777
|
+
* Ignored when a `[tedi-alert-action]` element is projected — the action
|
|
1778
|
+
* slot wins, and is responsible for any close affordance it wants to expose.
|
|
1776
1779
|
* @default false
|
|
1777
1780
|
*/
|
|
1778
1781
|
showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
|
|
@@ -1844,7 +1847,7 @@ class AlertComponent {
|
|
|
1844
1847
|
}
|
|
1845
1848
|
}
|
|
1846
1849
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1847
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "@if (title()) {\n
|
|
1850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "<div class=\"tedi-alert__body\">\n @if (title()) {\n <div class=\"tedi-alert__head\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n }\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n } @else {\n <div class=\"tedi-alert__content\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" class=\"tedi-alert__content-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</div>\n\n<div class=\"tedi-alert__action\">\n <ng-content select=\"[tedi-alert-action]\"></ng-content>\n</div>\n\n@if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-alert__close\"\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose()\"\n ></button>\n}\n\n<ng-template #heading>\n @if (titleElement() === \"h1\") {\n <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n } @else if (titleElement() === \"h2\") {\n <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n } @else if (titleElement() === \"h3\") {\n <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n } @else if (titleElement() === \"h4\") {\n <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n } @else if (titleElement() === \"h5\") {\n <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n } @else if (titleElement() === \"h6\") {\n <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n } @else {\n <div class=\"tedi-alert__title\">{{ title() }}</div>\n }\n</ng-template>\n\n<ng-template #content>\n <div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--alert-default-padding-y) var(--alert-default-padding-x);font-size:var(--body-regular-size);border:1px solid;border-radius:var(--alert-radius);color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__body{display:contents}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close):not(:has(.tedi-alert__action>*)){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x))}.tedi-alert__close{position:absolute;top:var(--alert-default-padding-y);right:var(--alert-default-padding-x)}.tedi-alert__action{display:none}.tedi-alert__action:has(>*){display:flex;flex-shrink:0;align-items:center}.tedi-alert:has(.tedi-alert__action>*){flex-direction:row;gap:var(--layout-grid-gutters-12);align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__body{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-04)}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__content{align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;align-items:flex-start}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__content{align-items:flex-start}}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--info{color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--general-text-primary);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--general-text-primary);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--general-text-primary);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1848
1851
|
}
|
|
1849
1852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
|
|
1850
1853
|
type: Component,
|
|
@@ -1854,7 +1857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
1854
1857
|
"[attr.aria-label]": "getAriaLabel()",
|
|
1855
1858
|
"[class]": "classes()",
|
|
1856
1859
|
"[attr.role]": "role() === 'none' ? null : role()",
|
|
1857
|
-
}, template: "@if (title()) {\n
|
|
1860
|
+
}, template: "<div class=\"tedi-alert__body\">\n @if (title()) {\n <div class=\"tedi-alert__head\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n }\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n } @else {\n <div class=\"tedi-alert__content\">\n @if (icon()) {\n <tedi-icon [name]=\"icon()\" [size]=\"18\" class=\"tedi-alert__content-icon\" />\n }\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n</div>\n\n<div class=\"tedi-alert__action\">\n <ng-content select=\"[tedi-alert-action]\"></ng-content>\n</div>\n\n@if (showClose()) {\n <button\n tedi-closing-button\n class=\"tedi-alert__close\"\n size=\"small\"\n [iconSize]=\"18\"\n (click)=\"handleClose()\"\n ></button>\n}\n\n<ng-template #heading>\n @if (titleElement() === \"h1\") {\n <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n } @else if (titleElement() === \"h2\") {\n <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n } @else if (titleElement() === \"h3\") {\n <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n } @else if (titleElement() === \"h4\") {\n <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n } @else if (titleElement() === \"h5\") {\n <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n } @else if (titleElement() === \"h6\") {\n <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n } @else {\n <div class=\"tedi-alert__title\">{{ title() }}</div>\n }\n</ng-template>\n\n<ng-template #content>\n <div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--alert-default-padding-y) var(--alert-default-padding-x);font-size:var(--body-regular-size);border:1px solid;border-radius:var(--alert-radius);color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__body{display:contents}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close):not(:has(.tedi-alert__action>*)){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x))}.tedi-alert__close{position:absolute;top:var(--alert-default-padding-y);right:var(--alert-default-padding-x)}.tedi-alert__action{display:none}.tedi-alert__action:has(>*){display:flex;flex-shrink:0;align-items:center}.tedi-alert:has(.tedi-alert__action>*){flex-direction:row;gap:var(--layout-grid-gutters-12);align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__body{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-04)}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__content{align-items:center}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;align-items:flex-start}.tedi-alert:has(.tedi-alert__action>*) .tedi-alert__content{align-items:flex-start}}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--info{color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--general-text-primary);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--general-text-primary);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--general-text-primary);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"] }]
|
|
1858
1861
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], titleElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleElement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }] } });
|
|
1859
1862
|
|
|
1860
1863
|
const TOAST_DEFAULT_DURATION = 6000;
|