@tedi-design-system/angular 7.0.0-rc.2 → 7.0.0-rc.3
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.
|
@@ -3327,6 +3327,13 @@ class AlertComponent {
|
|
|
3327
3327
|
* For example, 'global' for full-width alerts or 'noSideBorders' for alerts without side borders.
|
|
3328
3328
|
*/
|
|
3329
3329
|
variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3330
|
+
/**
|
|
3331
|
+
* Alert size variant.
|
|
3332
|
+
* - 'default': standard padding and body text size.
|
|
3333
|
+
* - 'small': reduced padding and smaller body text.
|
|
3334
|
+
* @default default
|
|
3335
|
+
*/
|
|
3336
|
+
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3330
3337
|
/**
|
|
3331
3338
|
* The HTML tag to be used for the alert title.
|
|
3332
3339
|
* @default h2
|
|
@@ -3366,6 +3373,7 @@ class AlertComponent {
|
|
|
3366
3373
|
return {
|
|
3367
3374
|
"tedi-alert": true,
|
|
3368
3375
|
[`tedi-alert--${this.type()}`]: !!this.type(),
|
|
3376
|
+
[`tedi-alert--size-${this.size()}`]: !!this.size(),
|
|
3369
3377
|
"tedi-alert--global": this.variant() === "global",
|
|
3370
3378
|
"tedi-alert--no-side-borders": this.variant() === "noSideBorders",
|
|
3371
3379
|
};
|
|
@@ -3381,7 +3389,7 @@ class AlertComponent {
|
|
|
3381
3389
|
}
|
|
3382
3390
|
}
|
|
3383
3391
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3384
|
-
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(--
|
|
3392
|
+
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 }, size: { classPropertyName: "size", publicName: "size", 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;--_padding-y: var(--alert-default-padding-y);--_padding-x: var(--alert-default-padding-x);position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--_padding-y) var(--_padding-x);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(--_padding-x))}.tedi-alert__close{position:absolute;top:var(--_padding-y);right:var(--_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__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;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--size-default{font-size:var(--body-regular-size)}.tedi-alert--size-small{--_padding-y: var(--alert-default-padding-y-sm);--_padding-x: var(--alert-default-padding-x-sm);gap:var(--layout-grid-gutters-02);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height)}.tedi-alert--size-small .tedi-alert__content{gap:var(--layout-grid-gutters-04)}.tedi-alert--size-small .tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-small-regular-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 });
|
|
3385
3393
|
}
|
|
3386
3394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
|
|
3387
3395
|
type: Component,
|
|
@@ -3391,8 +3399,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
3391
3399
|
"[attr.aria-label]": "getAriaLabel()",
|
|
3392
3400
|
"[class]": "classes()",
|
|
3393
3401
|
"[attr.role]": "role() === 'none' ? null : role()",
|
|
3394
|
-
}, 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(--
|
|
3395
|
-
}], 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"] }] } });
|
|
3402
|
+
}, 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;--_padding-y: var(--alert-default-padding-y);--_padding-x: var(--alert-default-padding-x);position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--_padding-y) var(--_padding-x);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(--_padding-x))}.tedi-alert__close{position:absolute;top:var(--_padding-y);right:var(--_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__close{display:none}@media(max-width:35.98rem){.tedi-alert:has(.tedi-alert__action>*){flex-direction:column;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--size-default{font-size:var(--body-regular-size)}.tedi-alert--size-small{--_padding-y: var(--alert-default-padding-y-sm);--_padding-x: var(--alert-default-padding-x-sm);gap:var(--layout-grid-gutters-02);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height)}.tedi-alert--size-small .tedi-alert__content{gap:var(--layout-grid-gutters-04)}.tedi-alert--size-small .tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-small-regular-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"] }]
|
|
3403
|
+
}], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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"] }] } });
|
|
3396
3404
|
|
|
3397
3405
|
const TOAST_DEFAULT_DURATION = 6000;
|
|
3398
3406
|
class ToastComponent {
|
|
@@ -3448,7 +3456,7 @@ class ToastComponent {
|
|
|
3448
3456
|
this.mouseLeave.emit();
|
|
3449
3457
|
}
|
|
3450
3458
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3451
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "tedi-toast", 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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave" }, ngImport: i0, template: "<div\n class=\"tedi-toast__wrapper\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <tedi-alert\n [title]=\"title()\"\n [type]=\"type()\"\n [icon]=\"icon()\"\n [showClose]=\"true\"\n [closeDelay]=\"300\"\n [role]=\"role()\"\n (closeClick)=\"handleClose()\"\n >\n <ng-content></ng-content>\n </tedi-alert>\n @if (showProgressBar() && duration() > 0) {\n <div\n class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n [class.tedi-toast__progress--paused]=\"paused()\"\n [style.animation-duration.ms]=\"duration()\"\n ></div>\n }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast, 1050);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--tedi-dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media(max-width:35.98rem){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "tedi-alert", inputs: ["title", "type", "icon", "showClose", "role", "variant", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "tedi-toast", 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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave" }, ngImport: i0, template: "<div\n class=\"tedi-toast__wrapper\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <tedi-alert\n [title]=\"title()\"\n [type]=\"type()\"\n [icon]=\"icon()\"\n [showClose]=\"true\"\n [closeDelay]=\"300\"\n [role]=\"role()\"\n (closeClick)=\"handleClose()\"\n >\n <ng-content></ng-content>\n </tedi-alert>\n @if (showProgressBar() && duration() > 0) {\n <div\n class=\"tedi-toast__progress tedi-toast__progress--{{ type() }}\"\n [class.tedi-toast__progress--paused]=\"paused()\"\n [style.animation-duration.ms]=\"duration()\"\n ></div>\n }\n</div>\n", styles: ["tedi-toast{display:block;width:var(--toast-width);max-width:100%}.tedi-toast__wrapper{position:relative;padding:var(--toast-outer-spacing, 4px)}.tedi-toast__wrapper tedi-alert{box-shadow:0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, .14))}.tedi-toast__progress{position:absolute;bottom:var(--toast-outer-spacing);left:var(--toast-outer-spacing);width:calc(100% - var(--toast-outer-spacing) * 2);height:4px;background:var(--toast-progress-color);border-radius:0 var(--alert-radius) 0 var(--alert-radius);transform-origin:left;animation:toast-progress linear forwards}.tedi-toast__progress--success{--toast-progress-color: var(--alert-default-border-success)}.tedi-toast__progress--info{--toast-progress-color: var(--alert-default-border-info)}.tedi-toast__progress--danger{--toast-progress-color: var(--alert-default-border-danger)}.tedi-toast__progress--warning{--toast-progress-color: var(--alert-default-border-warning)}.tedi-toast__progress--paused{animation-play-state:paused}.tedi-toast-container{position:fixed;inset:0;z-index:var(--z-index-toast, 1050);pointer-events:none}.tedi-toast-container__position{position:absolute;display:flex;flex-direction:column;gap:var(--tedi-dimensions-05);max-height:calc(100vh - var(--toast-margin-bottom) * 2);overflow:visible}.tedi-toast-container__position>*{pointer-events:auto}.tedi-toast-container__position--top-left{top:var(--toast-margin-bottom);left:var(--toast-margin-right);align-items:flex-start}.tedi-toast-container__position--top-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--top-right{top:var(--toast-margin-bottom);right:var(--toast-margin-right);align-items:flex-end}.tedi-toast-container__position--top-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}.tedi-toast-container__position--bottom-left{bottom:var(--toast-margin-bottom);left:var(--toast-margin-right);flex-direction:column-reverse;align-items:flex-start}.tedi-toast-container__position--bottom-left tedi-toast{animation:toast-slide-in-left .3s ease-out forwards}.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting{animation:toast-slide-out-left .3s ease-out forwards}.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);bottom:var(--toast-margin-bottom);flex-direction:column-reverse;align-items:flex-end}.tedi-toast-container__position--bottom-right tedi-toast{animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}@media(max-width:35.98rem){.tedi-toast-container__position--top-left,.tedi-toast-container__position--top-right,.tedi-toast-container__position--bottom-left,.tedi-toast-container__position--bottom-right{right:var(--toast-margin-right);left:var(--toast-margin-left);align-items:stretch;transform:none}.tedi-toast-container__position--top-left tedi-toast,.tedi-toast-container__position--top-right tedi-toast,.tedi-toast-container__position--bottom-left tedi-toast,.tedi-toast-container__position--bottom-right tedi-toast{width:100%;animation:toast-slide-in-right .3s ease-out forwards}.tedi-toast-container__position--top-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--top-right tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-left tedi-toast.tedi-toast--exiting,.tedi-toast-container__position--bottom-right tedi-toast.tedi-toast--exiting{animation:toast-slide-out-right .3s ease-out forwards}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toast-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toast-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes toast-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes toast-slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes toast-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toast-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes toast-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "tedi-alert", inputs: ["title", "type", "icon", "showClose", "role", "variant", "size", "titleElement", "open", "closeDelay"], outputs: ["openChange", "closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3452
3460
|
}
|
|
3453
3461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3454
3462
|
type: Component,
|