ang-alert-bar
Version:
Angular Message component with different severity types and predefined styles
330 lines (318 loc) • 33.5 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, Component, input, booleanAttribute, output, linkedSignal, signal, computed, TemplateRef } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
var AlertMessageTypes;
(function (AlertMessageTypes) {
AlertMessageTypes["Success"] = "Success";
AlertMessageTypes["Info"] = "Info";
AlertMessageTypes["Warning"] = "Warning";
AlertMessageTypes["Error"] = "Error";
})(AlertMessageTypes || (AlertMessageTypes = {}));
var AlertMessageVariants;
(function (AlertMessageVariants) {
AlertMessageVariants["Text"] = "Text";
AlertMessageVariants["Outlined"] = "Outlined";
AlertMessageVariants["Filled"] = "Filled";
})(AlertMessageVariants || (AlertMessageVariants = {}));
const OF_TRANSLATIONS = {
af: "van", // Afrikaans
am: "የ", // Amharic
ar: "من", // Arabic
az: "dən", // Azerbaijani
bg: "на", // Bulgarian
bn: "এর", // Bengali
ca: "de", // Catalan
cs: "z", // Czech
cy: "o", // Welsh
da: "af", // Danish
de: "von", // German
el: "του", // Greek
en: "of", // English
es: "de", // Spanish
et: "le", // Estonian
eu: "of", // Basque (uses English 'of' often)
fa: "از", // Persian
fi: "of", // Finnish
fr: "de", // French
ga: "de", // Irish
gl: "de", // Galician
gu: "નુ", // Gujarati
he: "של", // Hebrew
hi: "का", // Hindi
hr: "od", // Croatian
hu: "-ból", // Hungarian (suffix)
id: "dari", // Indonesian
is: "af", // Icelandic
it: "di", // Italian
ja: "の", // Japanese
ka: "დან", // Georgian
kk: "нің", // Kazakh
km: "នៃ", // Khmer
ko: "의", // Korean
lo: "ຂອງ", // Lao
lt: "iš", // Lithuanian
lv: "no", // Latvian
mk: "на", // Macedonian
ml: "അവയോട്", // Malayalam
mr: "च्या", // Marathi
ms: "daripada", // Malay
nl: "van", // Dutch
no: "av", // Norwegian
pl: "z", // Polish
pt: "de", // Portuguese
ro: "din", // Romanian
ru: "из", // Russian
sk: "z", // Slovak
sl: "od", // Slovenian
sq: "i", // Albanian
sr: "од", // Serbian
sv: "av", // Swedish
ta: "இன்", // Tamil
te: "కు", // Telugu
th: "ของ", // Thai
tr: "den", // Turkish
uk: "з", // Ukrainian
ur: "کا", // Urdu
vi: "của", // Vietnamese
zh: "的", // Chinese
};
class SuccessIconComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SuccessIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SuccessIconComponent, isStandalone: true, selector: "lib-success-icon, success-icon", ngImport: i0, template: `
<svg
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="success__svg"
>
<path
d="M512 877.714c-241.371 0-438.857-197.486-438.857-438.857s197.486-438.857 438.857-438.857 438.857 197.486 438.857 438.857-197.486 438.857-438.857 438.857zM789.943 544.914l-296.229-296.229c-29.257-29.257-73.143-29.257-102.4 0l-153.6 153.6c-21.943 21.943-21.943 54.857 0 76.8 10.971 10.971 25.6 14.629 40.229 14.629s29.257-3.657 40.229-14.629l124.343-128 270.629 270.629c18.286 21.943 54.857 21.943 76.8 0s21.943-54.857 0-76.8z"
fill="currentColor"
></path>
</svg>
`, isInline: true, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .success__svg{color:#4f9e70}:host-context(.filled) .success__svg{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SuccessIconComponent, decorators: [{
type: Component,
args: [{ selector: "lib-success-icon, success-icon", standalone: true, template: `
<svg
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="success__svg"
>
<path
d="M512 877.714c-241.371 0-438.857-197.486-438.857-438.857s197.486-438.857 438.857-438.857 438.857 197.486 438.857 438.857-197.486 438.857-438.857 438.857zM789.943 544.914l-296.229-296.229c-29.257-29.257-73.143-29.257-102.4 0l-153.6 153.6c-21.943 21.943-21.943 54.857 0 76.8 10.971 10.971 25.6 14.629 40.229 14.629s29.257-3.657 40.229-14.629l124.343-128 270.629 270.629c18.286 21.943 54.857 21.943 76.8 0s21.943-54.857 0-76.8z"
fill="currentColor"
></path>
</svg>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .success__svg{color:#4f9e70}:host-context(.filled) .success__svg{color:#fff}\n"] }]
}] });
class ErrorIconComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ErrorIconComponent, isStandalone: true, selector: "lib-error-icon, error-icon", ngImport: i0, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="error__svg"
>
<path
d="M512 877.714c-241.371 0-438.857-197.486-438.857-438.857s197.486-438.857 438.857-438.857 438.857 197.486 438.857 438.857-197.486 438.857-438.857 438.857zM512 73.143c-201.143 0-365.714 164.571-365.714 365.714s164.571 365.714 365.714 365.714 365.714-164.571 365.714-365.714-164.571-365.714-365.714-365.714zM563.2 438.857l128 128c7.314 7.314 10.971 18.286 10.971 25.6 0 10.971-3.657 18.286-10.971 25.6-14.629 14.629-36.571 14.629-51.2 0l-128-128-128 131.657c-7.314 3.657-18.286 7.314-25.6 7.314-10.971 0-21.943-3.657-29.257-7.314-14.629-14.629-14.629-36.571 0-51.2l128-128-128-131.657c-7.314-7.314-10.971-18.286-10.971-25.6 0-10.971 3.657-18.286 10.971-25.6 14.629-14.629 36.571-14.629 51.2 0l128 128 128-128c7.314-7.314 18.286-10.971 25.6-10.971 10.971 0 18.286 3.657 25.6 10.971 14.629 14.629 14.629 36.571 0 51.2l-124.343 128z"
fill="currentColor"
></path>
</svg>
`, isInline: true, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .error__svg{color:#bd432d}:host-context(.filled) .error__svg{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorIconComponent, decorators: [{
type: Component,
args: [{ selector: "lib-error-icon, error-icon", standalone: true, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="error__svg"
>
<path
d="M512 877.714c-241.371 0-438.857-197.486-438.857-438.857s197.486-438.857 438.857-438.857 438.857 197.486 438.857 438.857-197.486 438.857-438.857 438.857zM512 73.143c-201.143 0-365.714 164.571-365.714 365.714s164.571 365.714 365.714 365.714 365.714-164.571 365.714-365.714-164.571-365.714-365.714-365.714zM563.2 438.857l128 128c7.314 7.314 10.971 18.286 10.971 25.6 0 10.971-3.657 18.286-10.971 25.6-14.629 14.629-36.571 14.629-51.2 0l-128-128-128 131.657c-7.314 3.657-18.286 7.314-25.6 7.314-10.971 0-21.943-3.657-29.257-7.314-14.629-14.629-14.629-36.571 0-51.2l128-128-128-131.657c-7.314-7.314-10.971-18.286-10.971-25.6 0-10.971 3.657-18.286 10.971-25.6 14.629-14.629 36.571-14.629 51.2 0l128 128 128-128c7.314-7.314 18.286-10.971 25.6-10.971 10.971 0 18.286 3.657 25.6 10.971 14.629 14.629 14.629 36.571 0 51.2l-124.343 128z"
fill="currentColor"
></path>
</svg>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .error__svg{color:#bd432d}:host-context(.filled) .error__svg{color:#fff}\n"] }]
}] });
class WarningIconComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WarningIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WarningIconComponent, isStandalone: true, selector: "lib-warning-icon, warning-icon", ngImport: i0, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="warning__svg"
>
<path
d="M943.543 106.057l-365.714 731.429c-25.6 54.857-102.4 54.857-131.657 0l-365.714-731.429c-25.6-47.543 10.971-106.057 65.829-106.057h731.429c54.857 0 91.429 58.514 65.829 106.057zM512 621.714c25.6 0 43.886-25.6 43.886-58.514l-18.286-241.371c0-18.286-10.971-29.257-25.6-29.257s-25.6 10.971-25.6 29.257l-18.286 241.371c0 32.914 18.286 58.514 43.886 58.514zM512 146.286c-29.257 0-54.857 25.6-54.857 54.857s25.6 54.857 54.857 54.857 54.857-25.6 54.857-54.857-25.6-54.857-54.857-54.857z"
fill="currentColor"
></path>
</svg>
`, isInline: true, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .warning__svg{color:#cf8a23}:host-context(.filled) .warning__svg{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WarningIconComponent, decorators: [{
type: Component,
args: [{ selector: "lib-warning-icon, warning-icon", standalone: true, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="warning__svg"
>
<path
d="M943.543 106.057l-365.714 731.429c-25.6 54.857-102.4 54.857-131.657 0l-365.714-731.429c-25.6-47.543 10.971-106.057 65.829-106.057h731.429c54.857 0 91.429 58.514 65.829 106.057zM512 621.714c25.6 0 43.886-25.6 43.886-58.514l-18.286-241.371c0-18.286-10.971-29.257-25.6-29.257s-25.6 10.971-25.6 29.257l-18.286 241.371c0 32.914 18.286 58.514 43.886 58.514zM512 146.286c-29.257 0-54.857 25.6-54.857 54.857s25.6 54.857 54.857 54.857 54.857-25.6 54.857-54.857-25.6-54.857-54.857-54.857z"
fill="currentColor"
></path>
</svg>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .warning__svg{color:#cf8a23}:host-context(.filled) .warning__svg{color:#fff}\n"] }]
}] });
class InfoIconComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InfoIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InfoIconComponent, isStandalone: true, selector: "lib-info-icon, info-icon, i.alert-bar-icon", ngImport: i0, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="info__svg"
>
<path
d="M510.647 566.747v0c-29.477 0-53.358 23.881-53.358 53.358s23.881 53.358 53.358 53.358c29.477 0 53.358-23.881 53.358-53.358s-23.881-53.358-53.358-53.358zM512 241.371c-24.137 0-43.886 19.749-43.886 43.886v175.543c0 24.137 19.749 43.886 43.886 43.886s43.886-19.749 43.886-43.886v-175.543c0-24.137-19.749-43.886-43.886-43.886zM512 899.657c-242.249 0-438.857-196.608-438.857-438.857s196.608-438.857 438.857-438.857 438.857 196.608 438.857 438.857c0 242.249-196.608 438.857-438.857 438.857z"
fill="currentColor"
></path>
</svg>
`, isInline: true, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .info__svg{color:#3884ff}:host-context(.filled) .info__svg{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InfoIconComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-info-icon, info-icon, i.alert-bar-icon', standalone: true, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
class="info__svg"
>
<path
d="M510.647 566.747v0c-29.477 0-53.358 23.881-53.358 53.358s23.881 53.358 53.358 53.358c29.477 0 53.358-23.881 53.358-53.358s-23.881-53.358-53.358-53.358zM512 241.371c-24.137 0-43.886 19.749-43.886 43.886v175.543c0 24.137 19.749 43.886 43.886 43.886s43.886-19.749 43.886-43.886v-175.543c0-24.137-19.749-43.886-43.886-43.886zM512 899.657c-242.249 0-438.857-196.608-438.857-438.857s196.608-438.857 438.857-438.857 438.857 196.608 438.857 438.857c0 242.249-196.608 438.857-438.857 438.857z"
fill="currentColor"
></path>
</svg>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host .info__svg{color:#3884ff}:host-context(.filled) .info__svg{color:#fff}\n"] }]
}] });
class CloseIconComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CloseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CloseIconComponent, isStandalone: true, selector: "lib-close-icon, close-icon", ngImport: i0, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M822.857 179.2c14.629-14.629 14.629-36.571 0-51.2s-36.571-14.629-51.2 0l-259.657 259.657-259.657-259.657c-14.629-14.629-36.571-14.629-51.2 0s-14.629 36.571 0 51.2l259.657 259.657-259.657 259.657c-14.629 14.629-14.629 36.571 0 51.2s36.571 14.629 51.2 0l259.657-259.657 259.657 259.657c14.629 14.629 36.571 14.629 51.2 0s14.629-36.571 0-51.2l-259.657-259.657 259.657-259.657z"
fill="currentColor"
></path>
</svg>
`, isInline: true, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host-context(.filled) svg{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CloseIconComponent, decorators: [{
type: Component,
args: [{ selector: "lib-close-icon, close-icon", standalone: true, template: `
<svg
focusable="false"
viewBox="0 -64 1024 960"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M822.857 179.2c14.629-14.629 14.629-36.571 0-51.2s-36.571-14.629-51.2 0l-259.657 259.657-259.657-259.657c-14.629-14.629-36.571-14.629-51.2 0s-14.629 36.571 0 51.2l259.657 259.657-259.657 259.657c-14.629 14.629-14.629 36.571 0 51.2s36.571 14.629 51.2 0l259.657-259.657 259.657 259.657c14.629 14.629 36.571 14.629 51.2 0s14.629-36.571 0-51.2l-259.657-259.657 259.657-259.657z"
fill="currentColor"
></path>
</svg>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host svg{display:inline-flex;height:20px;width:20px;transform:scaleY(-1)}:host-context(.filled) svg{color:#fff}\n"] }]
}] });
class AngAlertBarComponent {
constructor() {
this.AlertMessageTypes = AlertMessageTypes;
this.AlertMessageVariants = AlertMessageVariants;
/* Input Signals */
this.messages = input.required();
this.variant = input(AlertMessageVariants.Text);
this.truncateTextOverflow = input(true, { transform: booleanAttribute });
this.severityIcon = input(true, { transform: booleanAttribute });
this.closeIcon = input(false, { transform: booleanAttribute });
this.paginated = input(false, { transform: booleanAttribute });
this.closeEvent = output();
/* Linked Signals */
this.message = linkedSignal(() => this.messages()[0]);
/* Writable Signals */
this.currentIndex = signal(0);
/* Computed Signals */
this.messageLength = computed(() => this.messages().length);
this.messageClass = computed(() => this.getMessageClass(this.message().alertType));
this.disableLeftArrow = computed(() => this.currentIndex() === 0);
this.disableRightArrow = computed(() => this.currentIndex() === this.messageLength() - 1);
this.pagination = computed(() => this.messageLength() > 1);
}
showPrev() {
if (this.messageLength() > 1 && this.currentIndex() > 0) {
this.currentIndex.update((n) => n - 1);
this.updateMessage();
}
}
showNext() {
if (this.messageLength() > 1 &&
this.currentIndex() < this.messageLength() - 1) {
this.currentIndex.update((n) => n + 1);
this.updateMessage();
}
}
updateMessage() {
this.message.set(this.messages()[this.currentIndex()]);
}
getMessageClass(alertType) {
switch (alertType) {
case AlertMessageTypes.Success:
return "alert-bar-success";
case AlertMessageTypes.Warning:
return "alert-bar-warning";
case AlertMessageTypes.Error:
return "alert-bar-error";
case AlertMessageTypes.Info:
return "alert-bar-info";
default:
// eslint-disable-next-line no-case-declarations
const _exhaustiveCheck = alertType;
return _exhaustiveCheck;
}
}
getMessageType(message) {
return message instanceof TemplateRef;
}
getMessageTemplateRef(message) {
return message.alertMessage;
}
getOfText() {
const lang = navigator.language?.split("-")[0] || "en";
return OF_TRANSLATIONS[lang] || OF_TRANSLATIONS["en"];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngAlertBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AngAlertBarComponent, isStandalone: true, selector: "lib-ang-alert-bar, ang-alert-bar, alert-bar", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, truncateTextOverflow: { classPropertyName: "truncateTextOverflow", publicName: "truncateTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, severityIcon: { classPropertyName: "severityIcon", publicName: "severityIcon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if(paginated()) {\n<div class=\"alert-bar {{ messageClass() }} \" [class.maximized]=\"!truncateTextOverflow()\"\n [class.outlined]=\"variant() === AlertMessageVariants.Outlined\"\n [class.filled]=\"variant() === AlertMessageVariants.Filled\">\n <div class=\"alert-message-wrap\">\n @if(severityIcon()) {\n <ng-container>\n @switch (message().alertType) { @case (AlertMessageTypes.Success) {\n <success-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Error) {\n <error-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Warning) {\n <warning-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Info) {\n <info-icon class=\"alert-bar-icon\" />\n } }\n </ng-container>\n }\n\n <div class=\"alert-bar-message\">\n @let messageType = getMessageType(message().alertMessage);\n @if (messageType) {\n <ng-container [ngTemplateOutlet]=\"getMessageTemplateRef(message())\"\n [ngTemplateOutletContext]=\"{ $implicit: message() }\" />\n } @else {\n <span>{{ message().alertMessage }}</span>\n }\n </div>\n </div>\n\n <div class=\"alert-pagination\">\n <div class=\"arrow\" #leftArrow [class.arrow-disabled]=\"disableLeftArrow()\" (click)=\"showPrev()\">\n <svg focusable=\"false\" viewBox=\"0 -64 1024 960\" xmlns=\"http://www.w3.org/2000/svg\" class=\"left__svg\">\n <path\n d=\"M464.457 705.829c14.629-14.629 14.629-36.571 0-51.2l-157.257-157.257h497.371c18.286 0 36.571-18.286 36.571-36.571s-18.286-36.571-36.571-36.571h-497.371l157.257-157.257c14.629-14.629 14.629-36.571 0-51.2-7.314-7.314-18.286-10.971-25.6-10.971-10.971 0-18.286 3.657-25.6 10.971l-219.429 219.429c-14.629 14.629-14.629 36.571 0 51.2l219.429 219.429c14.629 14.629 36.571 14.629 51.2 0z\"\n fill=\"currentColor\"></path>\n </svg>\n </div>\n <div class=\"count\">\n <span class=\"current\">{{ currentIndex() + 1 }}</span>\n <span class=\"preposition\"> {{ getOfText() }} </span>\n <span class=\"total\">{{ messages().length }}</span>\n </div>\n <div class=\"arrow right\" #rightArrow [class.arrow-disabled]=\"disableRightArrow()\" (click)=\"showNext()\">\n <svg focusable=\"false\" viewBox=\"0 -64 1024 960\" xmlns=\"http://www.w3.org/2000/svg\" class=\"left__svg\">\n <path\n d=\"M464.457 705.829c14.629-14.629 14.629-36.571 0-51.2l-157.257-157.257h497.371c18.286 0 36.571-18.286 36.571-36.571s-18.286-36.571-36.571-36.571h-497.371l157.257-157.257c14.629-14.629 14.629-36.571 0-51.2-7.314-7.314-18.286-10.971-25.6-10.971-10.971 0-18.286 3.657-25.6 10.971l-219.429 219.429c-14.629 14.629-14.629 36.571 0 51.2l219.429 219.429c14.629 14.629 36.571 14.629 51.2 0z\"\n fill=\"currentColor\"></path>\n </svg>\n </div>\n </div>\n</div>\n} @else { @for(message of messages(); track message.alertType) {\n<div class=\"alert-bar {{ getMessageClass(message.alertType) }} \" [class.maximized]=\"!truncateTextOverflow()\"\n [class.outlined]=\"variant() === AlertMessageVariants.Outlined\"\n [class.filled]=\"variant() === AlertMessageVariants.Filled\" style=\"margin-bottom: 10px\">\n <div class=\"alert-message-wrap\">\n @if(severityIcon()) {\n <ng-container>\n @switch (message.alertType) { @case (AlertMessageTypes.Success) {\n <success-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Error) {\n <error-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Warning) {\n <warning-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Info) {\n <i class=\"alert-bar-icon\"></i>\n } }\n </ng-container>\n }\n\n <div class=\"alert-bar-message\">\n @let messageType = getMessageType(message.alertMessage);\n @if (messageType) {\n <ng-container [ngTemplateOutlet]=\"getMessageTemplateRef(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: message }\" />\n } @else {\n <span>{{ message.alertMessage }}</span>\n }\n </div>\n </div>\n @if(closeIcon()) {\n <div class=\"alert-pagination close\" (click)=\"closeEvent.emit(message)\">\n <close-icon class=\"arrow right\" />\n </div>\n }\n</div>\n} }", styles: [":host .alert-pagination,:host .alert-message-wrap,:host .alert-bar{display:flex;flex-direction:row}:host .alert-bar{flex:1 1 100%;height:2rem;align-items:center;padding:.375rem .875rem .375rem 1.5rem;justify-content:space-between;min-width:2.5rem;border:.0625rem solid;border-radius:.25rem}:host .alert-bar.alert-bar-success{border-color:#198754;background-color:#e2fbf0}:host .alert-bar.alert-bar-info{border-color:#0d6efd;background-color:#e9f1ff}:host .alert-bar.alert-bar-warning{border-color:#ffc107;background-color:#feeed5}:host .alert-bar.alert-bar-error{border-color:#dc3545;background-color:#fcece8}:host .alert-bar.outlined{background-color:unset}:host .alert-message-wrap{min-width:0}:host .alert-pagination{align-items:center;flex:0 0 auto}:host .arrow{display:flex;cursor:pointer;margin:0 .3125rem;align-items:center}:host .arrow.right{transform:scaleX(-1)}:host .arrow.arrow-disabled{pointer-events:none;opacity:.5}:host .arrow .left__svg{display:inline-flex;height:1.25rem;width:1.25rem;transform:scaleY(-1)}:host .alert-bar-icon{display:flex;flex:0 0 auto;margin-right:.625rem;align-items:flex-end}:host .alert-bar-message{display:flex;flex:content;min-width:0;color:#092442}:host .alert-bar-message span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}:host .maximized{height:auto;min-height:2rem}:host .maximized .alert-message-wrap{height:100%}:host .maximized .alert-message-wrap .alert-bar-message{text-overflow:ellipsis;overflow-y:auto}:host .maximized .alert-message-wrap .alert-bar-message span{white-space:normal;overflow:visible;text-overflow:unset}:host .filled.alert-bar-success{border-color:#0e700e;background-color:#0e700e}:host .filled.alert-bar-info{border-color:#0099bc;background-color:#0099bc}:host .filled.alert-bar-warning{border-color:#da3b01;background-color:#da3b01}:host .filled.alert-bar-error{border-color:#c50f1f;background-color:#c50f1f}:host .filled span{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuccessIconComponent, selector: "lib-success-icon, success-icon" }, { kind: "component", type: ErrorIconComponent, selector: "lib-error-icon, error-icon" }, { kind: "component", type: WarningIconComponent, selector: "lib-warning-icon, warning-icon" }, { kind: "component", type: InfoIconComponent, selector: "lib-info-icon, info-icon, i.alert-bar-icon" }, { kind: "component", type: CloseIconComponent, selector: "lib-close-icon, close-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngAlertBarComponent, decorators: [{
type: Component,
args: [{ selector: "lib-ang-alert-bar, ang-alert-bar, alert-bar", imports: [
NgTemplateOutlet,
SuccessIconComponent,
ErrorIconComponent,
WarningIconComponent,
InfoIconComponent,
CloseIconComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(paginated()) {\n<div class=\"alert-bar {{ messageClass() }} \" [class.maximized]=\"!truncateTextOverflow()\"\n [class.outlined]=\"variant() === AlertMessageVariants.Outlined\"\n [class.filled]=\"variant() === AlertMessageVariants.Filled\">\n <div class=\"alert-message-wrap\">\n @if(severityIcon()) {\n <ng-container>\n @switch (message().alertType) { @case (AlertMessageTypes.Success) {\n <success-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Error) {\n <error-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Warning) {\n <warning-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Info) {\n <info-icon class=\"alert-bar-icon\" />\n } }\n </ng-container>\n }\n\n <div class=\"alert-bar-message\">\n @let messageType = getMessageType(message().alertMessage);\n @if (messageType) {\n <ng-container [ngTemplateOutlet]=\"getMessageTemplateRef(message())\"\n [ngTemplateOutletContext]=\"{ $implicit: message() }\" />\n } @else {\n <span>{{ message().alertMessage }}</span>\n }\n </div>\n </div>\n\n <div class=\"alert-pagination\">\n <div class=\"arrow\" #leftArrow [class.arrow-disabled]=\"disableLeftArrow()\" (click)=\"showPrev()\">\n <svg focusable=\"false\" viewBox=\"0 -64 1024 960\" xmlns=\"http://www.w3.org/2000/svg\" class=\"left__svg\">\n <path\n d=\"M464.457 705.829c14.629-14.629 14.629-36.571 0-51.2l-157.257-157.257h497.371c18.286 0 36.571-18.286 36.571-36.571s-18.286-36.571-36.571-36.571h-497.371l157.257-157.257c14.629-14.629 14.629-36.571 0-51.2-7.314-7.314-18.286-10.971-25.6-10.971-10.971 0-18.286 3.657-25.6 10.971l-219.429 219.429c-14.629 14.629-14.629 36.571 0 51.2l219.429 219.429c14.629 14.629 36.571 14.629 51.2 0z\"\n fill=\"currentColor\"></path>\n </svg>\n </div>\n <div class=\"count\">\n <span class=\"current\">{{ currentIndex() + 1 }}</span>\n <span class=\"preposition\"> {{ getOfText() }} </span>\n <span class=\"total\">{{ messages().length }}</span>\n </div>\n <div class=\"arrow right\" #rightArrow [class.arrow-disabled]=\"disableRightArrow()\" (click)=\"showNext()\">\n <svg focusable=\"false\" viewBox=\"0 -64 1024 960\" xmlns=\"http://www.w3.org/2000/svg\" class=\"left__svg\">\n <path\n d=\"M464.457 705.829c14.629-14.629 14.629-36.571 0-51.2l-157.257-157.257h497.371c18.286 0 36.571-18.286 36.571-36.571s-18.286-36.571-36.571-36.571h-497.371l157.257-157.257c14.629-14.629 14.629-36.571 0-51.2-7.314-7.314-18.286-10.971-25.6-10.971-10.971 0-18.286 3.657-25.6 10.971l-219.429 219.429c-14.629 14.629-14.629 36.571 0 51.2l219.429 219.429c14.629 14.629 36.571 14.629 51.2 0z\"\n fill=\"currentColor\"></path>\n </svg>\n </div>\n </div>\n</div>\n} @else { @for(message of messages(); track message.alertType) {\n<div class=\"alert-bar {{ getMessageClass(message.alertType) }} \" [class.maximized]=\"!truncateTextOverflow()\"\n [class.outlined]=\"variant() === AlertMessageVariants.Outlined\"\n [class.filled]=\"variant() === AlertMessageVariants.Filled\" style=\"margin-bottom: 10px\">\n <div class=\"alert-message-wrap\">\n @if(severityIcon()) {\n <ng-container>\n @switch (message.alertType) { @case (AlertMessageTypes.Success) {\n <success-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Error) {\n <error-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Warning) {\n <warning-icon class=\"alert-bar-icon\" />\n } @case (AlertMessageTypes.Info) {\n <i class=\"alert-bar-icon\"></i>\n } }\n </ng-container>\n }\n\n <div class=\"alert-bar-message\">\n @let messageType = getMessageType(message.alertMessage);\n @if (messageType) {\n <ng-container [ngTemplateOutlet]=\"getMessageTemplateRef(message)\"\n [ngTemplateOutletContext]=\"{ $implicit: message }\" />\n } @else {\n <span>{{ message.alertMessage }}</span>\n }\n </div>\n </div>\n @if(closeIcon()) {\n <div class=\"alert-pagination close\" (click)=\"closeEvent.emit(message)\">\n <close-icon class=\"arrow right\" />\n </div>\n }\n</div>\n} }", styles: [":host .alert-pagination,:host .alert-message-wrap,:host .alert-bar{display:flex;flex-direction:row}:host .alert-bar{flex:1 1 100%;height:2rem;align-items:center;padding:.375rem .875rem .375rem 1.5rem;justify-content:space-between;min-width:2.5rem;border:.0625rem solid;border-radius:.25rem}:host .alert-bar.alert-bar-success{border-color:#198754;background-color:#e2fbf0}:host .alert-bar.alert-bar-info{border-color:#0d6efd;background-color:#e9f1ff}:host .alert-bar.alert-bar-warning{border-color:#ffc107;background-color:#feeed5}:host .alert-bar.alert-bar-error{border-color:#dc3545;background-color:#fcece8}:host .alert-bar.outlined{background-color:unset}:host .alert-message-wrap{min-width:0}:host .alert-pagination{align-items:center;flex:0 0 auto}:host .arrow{display:flex;cursor:pointer;margin:0 .3125rem;align-items:center}:host .arrow.right{transform:scaleX(-1)}:host .arrow.arrow-disabled{pointer-events:none;opacity:.5}:host .arrow .left__svg{display:inline-flex;height:1.25rem;width:1.25rem;transform:scaleY(-1)}:host .alert-bar-icon{display:flex;flex:0 0 auto;margin-right:.625rem;align-items:flex-end}:host .alert-bar-message{display:flex;flex:content;min-width:0;color:#092442}:host .alert-bar-message span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}:host .maximized{height:auto;min-height:2rem}:host .maximized .alert-message-wrap{height:100%}:host .maximized .alert-message-wrap .alert-bar-message{text-overflow:ellipsis;overflow-y:auto}:host .maximized .alert-message-wrap .alert-bar-message span{white-space:normal;overflow:visible;text-overflow:unset}:host .filled.alert-bar-success{border-color:#0e700e;background-color:#0e700e}:host .filled.alert-bar-info{border-color:#0099bc;background-color:#0099bc}:host .filled.alert-bar-warning{border-color:#da3b01;background-color:#da3b01}:host .filled.alert-bar-error{border-color:#c50f1f;background-color:#c50f1f}:host .filled span{color:#fff}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AlertMessageTypes, AlertMessageVariants, AngAlertBarComponent };
//# sourceMappingURL=ang-alert-bar.mjs.map