@naniteninja/dashboard-components-lib 2.1.62 → 2.1.63
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.
|
@@ -1755,7 +1755,6 @@ class AlertPopupComponent {
|
|
|
1755
1755
|
// Default and minimum life of the toaster. If need, more than 3s life can be passed in configuration.
|
|
1756
1756
|
this.toasterLife = 2000;
|
|
1757
1757
|
this.show = false;
|
|
1758
|
-
this.toasterIcon = '';
|
|
1759
1758
|
this.timeout = null;
|
|
1760
1759
|
this.checkbox = false;
|
|
1761
1760
|
this.destroy$ = new Subject();
|
|
@@ -1840,7 +1839,6 @@ class AlertPopupComponent {
|
|
|
1840
1839
|
_initToaster() {
|
|
1841
1840
|
this.show = true;
|
|
1842
1841
|
this.checkbox = false;
|
|
1843
|
-
this.toasterIcon = this.config.severity + '.svg';
|
|
1844
1842
|
// Initialize description properties
|
|
1845
1843
|
this._updateDescriptionProperties();
|
|
1846
1844
|
if (this.config.life && this.config.life > this.toasterLife) {
|
|
@@ -1912,11 +1910,11 @@ class AlertPopupComponent {
|
|
|
1912
1910
|
this.changeDetectorRef.detectChanges();
|
|
1913
1911
|
}
|
|
1914
1912
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlertPopupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: LibToastrService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1915
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AlertPopupComponent, isStandalone: true, selector: "lib-alert-popup", inputs: { config: "config", title: "title", description: "description", timeState: "timeState", number: "number" }, outputs: { closeClick: "closeClick", closed: "closed", checkboxChange: "checkboxChange" }, providers: [LibToastrService], usesOnChanges: true, ngImport: i0, template: "@if (show) {\n <div\n (mouseover)=\"mouseOver(true)\"\n (mouseleave)=\"mouseOver(false)\"\n class=\"alert-popup-box alert-popup-border alert-popup-{{ config.severity }} alert-popup-{{ config.position || 'right-top' }} {{\n toastrExiting ? 'alert-popup-pos-' + (config.position || 'right-top') + '--exit' : 'alert-popup-pos-' + (config.position || 'right-top') + '--enter'\n }}\"\n [ngStyle]=\"{ 'animation-duration.ms': animationDuration }\"\n >\n <div class=\"alert-popup-wrapper alert-popup-content-wrapper\">\n <img class=\"alert-popup-icon\" [src]=\"'./../../../assets/icons/' + toasterIcon\" alt=\"Toster icon\" />\n <div class=\"alert-popup-content\">\n <h2 class=\"m-0 f-calistoga\">{{ config.title | translate }}</h2>\n @if (config.description.type === 'string') {\n <p class=\"m-0 f-gilroy-medium\">{{ (descriptionContent | translate) || '' }}</p>\n } @else if (config.description.type === 'template') {\n <ng-container *ngTemplateOutlet=\"descriptionTemplate\"></ng-container>\n } @else if (config.description.type === 'button') {\n <p class=\"m-0 f-gilroy-medium alert-popup-content__button-wrapper\">\n <span>{{ (descriptionContent | translate) || '' }}</span>\n <span class=\"alert-popup-content__button-wrapper__button\" (click)=\"config.button?.onClick()\"> {{ config.button?.name || '' }} </span>\n </p>\n } @else {\n <!-- No Description Content -->\n }\n @if (config.loading && !config.clickToClose) {\n <lib-loading-bar [toasterLife]=\"toasterLife\"></lib-loading-bar>\n }\n </div>\n <div class=\"alert-popup-action-button\">\n @if (!config.hideClose) {\n <span class=\"alert-popup-close-button absolute top\" (click)=\"onCloseIconClick($event)\" libTooltip=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 7 7\" fill=\"none\">\n <path\n d=\"M0.854234 5.69017L5.69106 0.853344M5.78208 5.78237L0.763872 0.764163\"\n stroke=\"#EBEBF5\"\n stroke-opacity=\"0.6\"\n stroke-width=\"1.2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n @if (config.markCheck) {\n @if (!checkbox) {\n <span (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\" class=\"alert-popup-checkbox\"></span>\n } @else {\n <span class=\"absolute bottom\">\n <img (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\" src=\"assets/icons/check.svg\" class=\"alert-popup-check-icon\" alt=\"Toster icon\" />\n </span>\n }\n }\n </div>\n </div>\n </div>\n}\n", styles: [":host{--tertiary-color: rgba(255, 255, 255, .6);--secondary-color: rgba(255, 255, 255, .85);--checkbox-border: rgba(254, 60, 114, .4);--accent-pink: #fe3c72;--dark-bg: rgba(26, 23, 30, .85);--alert-popup-glow-layer: radial-gradient(circle at 10% 50%, rgba(254, 60, 114, .3), transparent 70%);--alert-popup-transparent-layer: rgba(26, 23, 30, .4);--alert-popup-error-background: linear-gradient(90deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-error-border: linear-gradient(160.44deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-success-background: linear-gradient(90deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-success-border: linear-gradient(160.44deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-warning-background: linear-gradient(90deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%);--alert-popup-warning-border: linear-gradient(160.44deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%)}.alert-popup-box{position:relative;z-index:1000;display:block;pointer-events:auto;border-radius:12px;box-sizing:border-box}.alert-popup-box.alert-popup-border{max-width:320px;width:calc(100vw - 32px);margin:0 auto;padding:1px 0 0;box-shadow:0 10px 30px #00000080;overflow:hidden}.alert-popup-box.alert-popup-border:before{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-glow-layer);z-index:-1}.alert-popup-box.alert-popup-border:after{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-transparent-layer);z-index:-1;pointer-events:none}.alert-popup-box.alert-popup-border.alert-popup-success{background-image:var(--alert-popup-success-border)}.alert-popup-box.alert-popup-border.alert-popup-warning{background-image:var(--alert-popup-warning-border)}.alert-popup-box.alert-popup-border.alert-popup-error,.alert-popup-box.alert-popup-border.alert-popup-info{background-image:var(--alert-popup-error-border)}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--enter{opacity:0;animation:alert-popup-move-ltr-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--exit{opacity:1;animation:alert-popup-move-rtl-exit-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--enter{opacity:0;animation:alert-popup-move-rtl-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--exit{opacity:1;animation:alert-popup-move-ltr-exit-anime forwards}.alert-popup-wrapper.alert-popup-content-wrapper{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:11px;overflow:hidden;height:100%;box-sizing:border-box;background:#fff}.alert-popup-wrapper.alert-popup-content-wrapper:before{content:\"\";position:absolute;inset:0;z-index:0;opacity:.9}.alert-popup-wrapper.alert-popup-content-wrapper:after{content:\"\";position:absolute;inset:1px 0 0;background:#ffffff03;background-blend-mode:overlay;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:0;pointer-events:none}.alert-popup-icon{width:20px;height:20px;flex-shrink:0;position:relative;z-index:1}.alert-popup-info .alert-popup-icon,.alert-popup-error .alert-popup-icon{filter:drop-shadow(0 0 1px #ce769e) brightness(1.1)}.alert-popup-success .alert-popup-icon{filter:drop-shadow(0 0 1px #3cfe4f) brightness(1.2)}.alert-popup-warning .alert-popup-icon{filter:drop-shadow(0 0 1px #fafe3c) brightness(1.2)}.alert-popup-content{flex-grow:1;position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}.alert-popup-content h2{color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}.alert-popup-content p{color:var(--secondary-color);font-size:11px;line-height:1.4}.alert-popup-success .alert-popup-content-wrapper:before{background-image:var(--alert-popup-success-background)}.alert-popup-warning .alert-popup-content-wrapper:before{background-image:var(--alert-popup-warning-background)}.alert-popup-error .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-info .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-success .alert-popup-content-wrapper:before,.alert-popup-warning .alert-popup-content-wrapper:before,.alert-popup-error .alert-popup-content-wrapper:before,.alert-popup-info .alert-popup-content-wrapper:before{filter:blur(2px);-webkit-filter:blur(2px)}.alert-popup-action-button{display:flex;flex-direction:column;justify-content:space-between;min-height:50px;position:relative;z-index:1}.alert-popup-action-button .alert-popup-check-icon{position:absolute;bottom:0;width:14px;height:14px}.alert-popup-action-button img{cursor:pointer}.alert-popup-checkbox{border:2px solid var(--checkbox-border);display:inline-block;width:9px;height:9px;border-radius:2px;cursor:pointer;position:absolute!important;bottom:0}.absolute{position:absolute!important}.bottom{bottom:0}.bottom-auto{bottom:auto!important}.top{top:0}.alert-popup-close-button{cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:1000;top:-3px!important;right:-3px!important;transition:opacity .2s ease;opacity:.5}.alert-popup-close-button:hover{opacity:.8}.alert-popup-close-button svg{pointer-events:none}@keyframes alert-popup-move-ltr-enter-anime{0%{transform:translate(-100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-rtl-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(-100%) scale(.75);opacity:0}}@keyframes alert-popup-move-rtl-enter-anime{0%{transform:translate(100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-ltr-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(100%) scale(.75);opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibLoadingBarComponent, selector: "lib-loading-bar", inputs: ["toasterLife"] }, { kind: "ngmodule", type: DirectiveModule }, { kind: "directive", type: i1.LazyImageDirective, selector: "img" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1913
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AlertPopupComponent, isStandalone: true, selector: "lib-alert-popup", inputs: { config: "config", title: "title", description: "description", timeState: "timeState", number: "number" }, outputs: { closeClick: "closeClick", closed: "closed", checkboxChange: "checkboxChange" }, providers: [LibToastrService], usesOnChanges: true, ngImport: i0, template: "@if (show) {\n <div\n (mouseover)=\"mouseOver(true)\"\n (mouseleave)=\"mouseOver(false)\"\n class=\"alert-popup-box alert-popup-border alert-popup-{{ config.severity }} alert-popup-{{ config.position || 'right-top' }} {{\n toastrExiting ? 'alert-popup-pos-' + (config.position || 'right-top') + '--exit' : 'alert-popup-pos-' + (config.position || 'right-top') + '--enter'\n }}\"\n [ngStyle]=\"{ 'animation-duration.ms': animationDuration }\"\n >\n <div class=\"alert-popup-wrapper alert-popup-content-wrapper\">\n <div class=\"alert-popup-icon\">\n @switch (config.severity) {\n @case ('success') {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9ZM9 1.54286C4.88147 1.54286 1.54286 4.88147 1.54286 9C1.54286 13.1185 4.88147 16.4571 9 16.4571C13.1185 16.4571 16.4571 13.1185 16.4571 9C16.4571 4.88147 13.1185 1.54286 9 1.54286Z\" fill=\"url(#success_gradient_1)\"/>\n <path d=\"M3.45049 8.21625L4.15409 7.43728L7.24494 10.2266L13.6276 5.07516L14.482 6.03004L7.19469 13.1666L3.45049 8.21625Z\" fill=\"url(#success_gradient_2)\" fill-opacity=\"0.6\" stroke=\"url(#success_gradient_3)\" stroke-opacity=\"0.6\" stroke-linejoin=\"round\"/>\n <defs>\n <linearGradient id=\"success_gradient_1\" x1=\"9\" y1=\"0\" x2=\"9\" y2=\"18\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#3CFE4F\"/>\n <stop offset=\"1\" stop-color=\"#A9FFFF\"/>\n </linearGradient>\n <linearGradient id=\"success_gradient_2\" x1=\"8.96625\" y1=\"5.07516\" x2=\"8.96625\" y2=\"13.1666\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#3CFE4F\"/>\n <stop offset=\"1\" stop-color=\"#A9FFFF\"/>\n </linearGradient>\n <linearGradient id=\"success_gradient_3\" x1=\"8.96625\" y1=\"5.07516\" x2=\"8.96625\" y2=\"13.1666\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#3CFE4F\"/>\n <stop offset=\"1\" stop-color=\"#A9FFFF\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n @case ('error') {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1622 1.43596C19.5528 1.82648 19.5528 2.45965 19.1622 2.85017L2.66223 19.3502C2.27171 19.7407 1.63854 19.7407 1.24802 19.3502C0.857493 18.9596 0.857493 18.3265 1.24802 17.936L17.748 1.43596C18.1385 1.04544 18.7717 1.04544 19.1622 1.43596Z\" fill=\"url(#error_gradient_1)\" fill-opacity=\"0.6\" stroke=\"url(#error_gradient_2)\" stroke-opacity=\"0.6\" stroke-linecap=\"round\"/>\n <circle cx=\"9.95512\" cy=\"10.1431\" r=\"8\" stroke=\"url(#error_gradient_3)\" stroke-opacity=\"0.6\" stroke-width=\"2\"/>\n <defs>\n <linearGradient id=\"error_gradient_1\" x1=\"10.2051\" y1=\"1.14307\" x2=\"10.2051\" y2=\"19.6431\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FE3C72\"/>\n <stop offset=\"1\" stop-color=\"#FFB5E9\"/>\n </linearGradient>\n <linearGradient id=\"error_gradient_2\" x1=\"10.2051\" y1=\"1.14307\" x2=\"10.2051\" y2=\"19.6431\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FE3C72\"/>\n <stop offset=\"1\" stop-color=\"#FFB5E9\"/>\n </linearGradient>\n <linearGradient id=\"error_gradient_3\" x1=\"9.95512\" y1=\"1.14307\" x2=\"9.95512\" y2=\"19.1431\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FE3C72\"/>\n <stop offset=\"1\" stop-color=\"#FFB5E9\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n @case ('warning') {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.0446 12.3748C11.315 12.3748 11.5743 12.2719 11.7655 12.0888C11.9567 11.9057 12.0641 11.6574 12.0641 11.3984V6.87699C12.0641 6.61804 11.9567 6.36969 11.7655 6.18658C11.5743 6.00347 11.315 5.9006 11.0446 5.9006C10.7742 5.9006 10.5149 6.00347 10.3237 6.18658C10.1325 6.36969 10.0251 6.61804 10.0251 6.87699V11.3834C10.023 11.5129 10.0478 11.6415 10.0981 11.7617C10.1484 11.8819 10.2232 11.9913 10.3181 12.0835C10.413 12.1758 10.5261 12.2491 10.6508 12.2991C10.7755 12.3491 10.9094 12.3748 11.0446 12.3748Z\" fill=\"url(#warning_gradient_1)\" fill-opacity=\"0.6\" stroke=\"url(#warning_gradient_2)\" stroke-opacity=\"0.6\"/>\n <path d=\"M11.0055 15.7165C11.6552 15.7165 12.1819 15.2121 12.1819 14.5899C12.1819 13.9677 11.6552 13.4633 11.0055 13.4633C10.3558 13.4633 9.82914 13.9677 9.82914 14.5899C9.82914 15.2121 10.3558 15.7165 11.0055 15.7165Z\" fill=\"url(#warning_gradient_3)\" fill-opacity=\"0.6\" stroke=\"url(#warning_gradient_4)\" stroke-opacity=\"0.6\"/>\n <path d=\"M20.7155 15.5443L13.0769 2.07013C12.8747 1.71429 12.576 1.41724 12.2123 1.21028C11.8487 1.00331 11.4334 0.894073 11.0104 0.894073C10.5874 0.894073 10.1721 1.00331 9.80848 1.21028C9.44481 1.41724 9.14613 1.71429 8.9439 2.07013L1.29744 15.5443C1.09731 15.8883 0.994821 16.2766 1.0002 16.6704C1.00558 17.0641 1.11864 17.4497 1.32811 17.7886C1.53758 18.1275 1.83614 18.4079 2.19403 18.6019C2.55193 18.7958 2.95665 18.8966 3.36787 18.894H18.6451C19.0529 18.8944 19.4539 18.7932 19.8086 18.6004C20.1633 18.4076 20.4595 18.1298 20.6683 17.7943C20.8771 17.4588 20.9912 17.077 20.9995 16.6865C21.0078 16.296 20.9099 15.9102 20.7155 15.5668V15.5443ZM19.3195 17.0013C19.2501 17.1135 19.1515 17.2063 19.0332 17.2709C18.9149 17.3354 18.7812 17.3693 18.6451 17.3694H3.36787C3.23155 17.3697 3.09748 17.336 2.9789 17.2716C2.86031 17.2072 2.7613 17.1144 2.69163 17.0021C2.62196 16.8899 2.58404 16.7623 2.5816 16.6317C2.57916 16.5012 2.61229 16.3723 2.67773 16.2578L10.3163 2.78365C10.3835 2.66441 10.4832 2.56481 10.6047 2.49539C10.7262 2.42597 10.865 2.38932 11.0065 2.38932C11.148 2.38932 11.2868 2.42597 11.4083 2.49539C11.5298 2.56481 11.6294 2.66441 11.6966 2.78365L19.3352 16.2578C19.4002 16.3724 19.433 16.5012 19.4302 16.6315C19.4275 16.7619 19.3893 16.8894 19.3195 17.0013Z\" fill=\"url(#warning_gradient_5)\" fill-opacity=\"0.6\"/>\n <defs>\n <linearGradient id=\"warning_gradient_1\" x1=\"11.0445\" y1=\"5.9006\" x2=\"11.0445\" y2=\"12.3748\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_2\" x1=\"11.0445\" y1=\"5.9006\" x2=\"11.0445\" y2=\"12.3748\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_3\" x1=\"11.0055\" y1=\"13.4633\" x2=\"11.0055\" y2=\"15.7165\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_4\" x1=\"11.0055\" y1=\"13.4633\" x2=\"11.0055\" y2=\"15.7165\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_5\" x1=\"11\" y1=\"0.894073\" x2=\"11\" y2=\"18.8941\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n @default {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.75 9.21428C11.2589 9.21428 11.6715 9.62683 11.6715 10.1357V16.2786C11.6715 16.7874 11.2589 17.2 10.75 17.2C10.2412 17.2 9.82861 16.7874 9.82861 16.2786V10.1357C9.82861 9.62683 10.2412 9.21428 10.75 9.21428Z\" fill=\"url(#info_gradient_1)\"/>\n <path d=\"M10.7501 7.06429C11.4286 7.06429 11.9786 6.51423 11.9786 5.83572C11.9786 5.1572 11.4286 4.60715 10.7501 4.60715C10.0715 4.60715 9.52148 5.1572 9.52148 5.83572C9.52148 6.51423 10.0715 7.06429 10.7501 7.06429Z\" fill=\"url(#info_gradient_1)\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 10.75C0 4.81294 4.81294 0 10.75 0C16.6871 0 21.5 4.81294 21.5 10.75C21.5 16.6871 16.6871 21.5 10.75 21.5C4.81294 21.5 0 16.6871 0 10.75ZM10.75 1.84286C5.83073 1.84286 1.84286 5.83073 1.84286 10.75C1.84286 15.6693 5.83073 19.6571 10.75 19.6571C15.6693 19.6571 19.6571 15.6693 19.6571 10.75C19.6571 5.83073 15.6693 1.84286 10.75 1.84286Z\" fill=\"url(#info_gradient_1)\"/>\n <defs>\n <linearGradient id=\"info_gradient_1\" x1=\"10.75\" y1=\"0\" x2=\"10.75\" y2=\"21.5\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#ce769e\"/>\n <stop offset=\"1\" stop-color=\"#ffffff\" stop-opacity=\"0.6\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n }\n </div>\n <div class=\"alert-popup-content\">\n <h2 class=\"m-0 f-calistoga\">{{ config.title | translate }}</h2>\n @if (config.description.type === 'string') {\n <p class=\"m-0 f-gilroy-medium\">{{ (descriptionContent | translate) || '' }}</p>\n } @else if (config.description.type === 'template') {\n <ng-container *ngTemplateOutlet=\"descriptionTemplate\"></ng-container>\n } @else if (config.description.type === 'button') {\n <p class=\"m-0 f-gilroy-medium alert-popup-content__button-wrapper\">\n <span>{{ (descriptionContent | translate) || '' }}</span>\n <span class=\"alert-popup-content__button-wrapper__button\" (click)=\"config.button?.onClick()\"> {{ config.button?.name || '' }} </span>\n </p>\n } @else {\n <!-- No Description Content -->\n }\n @if (config.loading && !config.clickToClose) {\n <lib-loading-bar [toasterLife]=\"toasterLife\"></lib-loading-bar>\n }\n </div>\n <div class=\"alert-popup-action-button\">\n @if (!config.hideClose) {\n <span class=\"alert-popup-close-button absolute top\" (click)=\"onCloseIconClick($event)\" libTooltip=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 7 7\" fill=\"none\">\n <path\n d=\"M0.854234 5.69017L5.69106 0.853344M5.78208 5.78237L0.763872 0.764163\"\n stroke=\"#EBEBF5\"\n stroke-opacity=\"0.6\"\n stroke-width=\"1.2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n @if (config.markCheck) {\n @if (!checkbox) {\n <span (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\" class=\"alert-popup-checkbox\"></span>\n } @else {\n <span class=\"absolute bottom\">\n <div class=\"alert-popup-check-icon\" (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 27.4 L25 30.9632l7.3 -7\" stroke=\"#3CFE4F\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </span>\n }\n }\n </div>\n </div>\n </div>\n}\n", styles: [":host{--tertiary-color: rgba(255, 255, 255, .6);--secondary-color: rgba(255, 255, 255, .85);--checkbox-border: rgba(254, 60, 114, .4);--accent-pink: #fe3c72;--dark-bg: rgba(26, 23, 30, .85);--alert-popup-glow-layer: radial-gradient(circle at 10% 50%, rgba(254, 60, 114, .3), transparent 70%);--alert-popup-transparent-layer: rgba(26, 23, 30, .4);--alert-popup-error-background: linear-gradient(90deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-error-border: linear-gradient(160.44deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-success-background: linear-gradient(90deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-success-border: linear-gradient(160.44deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-warning-background: linear-gradient(90deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%);--alert-popup-warning-border: linear-gradient(160.44deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%)}.alert-popup-box{position:relative;z-index:1000;display:block;pointer-events:auto;border-radius:12px;box-sizing:border-box}.alert-popup-box.alert-popup-border{max-width:320px;width:calc(100vw - 32px);margin:0 auto;padding:1px 0 0;box-shadow:0 10px 30px #00000080;overflow:hidden}.alert-popup-box.alert-popup-border:before{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-glow-layer);z-index:-1}.alert-popup-box.alert-popup-border:after{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-transparent-layer);z-index:-1;pointer-events:none}.alert-popup-box.alert-popup-border.alert-popup-success{background-image:var(--alert-popup-success-border)}.alert-popup-box.alert-popup-border.alert-popup-warning{background-image:var(--alert-popup-warning-border)}.alert-popup-box.alert-popup-border.alert-popup-error,.alert-popup-box.alert-popup-border.alert-popup-info{background-image:var(--alert-popup-error-border)}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--enter{opacity:0;animation:alert-popup-move-ltr-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--exit{opacity:1;animation:alert-popup-move-rtl-exit-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--enter{opacity:0;animation:alert-popup-move-rtl-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--exit{opacity:1;animation:alert-popup-move-ltr-exit-anime forwards}.alert-popup-wrapper.alert-popup-content-wrapper{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:11px;overflow:hidden;height:100%;box-sizing:border-box;background:#fff}.alert-popup-wrapper.alert-popup-content-wrapper:before{content:\"\";position:absolute;inset:0;z-index:0;opacity:.9}.alert-popup-wrapper.alert-popup-content-wrapper:after{content:\"\";position:absolute;inset:1px 0 0;background:#ffffff03;background-blend-mode:overlay;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:0;pointer-events:none}.alert-popup-icon{width:20px;height:20px;flex-shrink:0;position:relative;z-index:1}.alert-popup-info .alert-popup-icon,.alert-popup-error .alert-popup-icon{filter:drop-shadow(0 0 1px #ce769e) brightness(1.1)}.alert-popup-success .alert-popup-icon{filter:drop-shadow(0 0 1px #3cfe4f) brightness(1.2)}.alert-popup-warning .alert-popup-icon{filter:drop-shadow(0 0 1px #fafe3c) brightness(1.2)}.alert-popup-content{flex-grow:1;position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}.alert-popup-content h2{color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}.alert-popup-content p{color:var(--secondary-color);font-size:11px;line-height:1.4}.alert-popup-success .alert-popup-content-wrapper:before{background-image:var(--alert-popup-success-background)}.alert-popup-warning .alert-popup-content-wrapper:before{background-image:var(--alert-popup-warning-background)}.alert-popup-error .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-info .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-success .alert-popup-content-wrapper:before,.alert-popup-warning .alert-popup-content-wrapper:before,.alert-popup-error .alert-popup-content-wrapper:before,.alert-popup-info .alert-popup-content-wrapper:before{filter:blur(2px);-webkit-filter:blur(2px)}.alert-popup-action-button{display:flex;flex-direction:column;justify-content:space-between;min-height:50px;position:relative;z-index:1}.alert-popup-action-button .alert-popup-check-icon{position:absolute;bottom:0;width:14px;height:14px}.alert-popup-action-button img{cursor:pointer}.alert-popup-checkbox{border:2px solid var(--checkbox-border);display:inline-block;width:9px;height:9px;border-radius:2px;cursor:pointer;position:absolute!important;bottom:0}.absolute{position:absolute!important}.bottom{bottom:0}.bottom-auto{bottom:auto!important}.top{top:0}.alert-popup-close-button{cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:1000;top:-3px!important;right:-3px!important;transition:opacity .2s ease;opacity:.5}.alert-popup-close-button:hover{opacity:.8}.alert-popup-close-button svg{pointer-events:none}@keyframes alert-popup-move-ltr-enter-anime{0%{transform:translate(-100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-rtl-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(-100%) scale(.75);opacity:0}}@keyframes alert-popup-move-rtl-enter-anime{0%{transform:translate(100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-ltr-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(100%) scale(.75);opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibLoadingBarComponent, selector: "lib-loading-bar", inputs: ["toasterLife"] }, { kind: "ngmodule", type: DirectiveModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1916
1914
|
}
|
|
1917
1915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlertPopupComponent, decorators: [{
|
|
1918
1916
|
type: Component,
|
|
1919
|
-
args: [{ selector: 'lib-alert-popup', providers: [LibToastrService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, LibLoadingBarComponent, DirectiveModule], template: "@if (show) {\n <div\n (mouseover)=\"mouseOver(true)\"\n (mouseleave)=\"mouseOver(false)\"\n class=\"alert-popup-box alert-popup-border alert-popup-{{ config.severity }} alert-popup-{{ config.position || 'right-top' }} {{\n toastrExiting ? 'alert-popup-pos-' + (config.position || 'right-top') + '--exit' : 'alert-popup-pos-' + (config.position || 'right-top') + '--enter'\n }}\"\n [ngStyle]=\"{ 'animation-duration.ms': animationDuration }\"\n >\n <div class=\"alert-popup-wrapper alert-popup-content-wrapper\">\n <img class=\"alert-popup-icon\" [src]=\"'./../../../assets/icons/' + toasterIcon\" alt=\"Toster icon\" />\n <div class=\"alert-popup-content\">\n <h2 class=\"m-0 f-calistoga\">{{ config.title | translate }}</h2>\n @if (config.description.type === 'string') {\n <p class=\"m-0 f-gilroy-medium\">{{ (descriptionContent | translate) || '' }}</p>\n } @else if (config.description.type === 'template') {\n <ng-container *ngTemplateOutlet=\"descriptionTemplate\"></ng-container>\n } @else if (config.description.type === 'button') {\n <p class=\"m-0 f-gilroy-medium alert-popup-content__button-wrapper\">\n <span>{{ (descriptionContent | translate) || '' }}</span>\n <span class=\"alert-popup-content__button-wrapper__button\" (click)=\"config.button?.onClick()\"> {{ config.button?.name || '' }} </span>\n </p>\n } @else {\n <!-- No Description Content -->\n }\n @if (config.loading && !config.clickToClose) {\n <lib-loading-bar [toasterLife]=\"toasterLife\"></lib-loading-bar>\n }\n </div>\n <div class=\"alert-popup-action-button\">\n @if (!config.hideClose) {\n <span class=\"alert-popup-close-button absolute top\" (click)=\"onCloseIconClick($event)\" libTooltip=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 7 7\" fill=\"none\">\n <path\n d=\"M0.854234 5.69017L5.69106 0.853344M5.78208 5.78237L0.763872 0.764163\"\n stroke=\"#EBEBF5\"\n stroke-opacity=\"0.6\"\n stroke-width=\"1.2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n @if (config.markCheck) {\n @if (!checkbox) {\n <span (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\" class=\"alert-popup-checkbox\"></span>\n } @else {\n <span class=\"absolute bottom\">\n <img (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\" src=\"assets/icons/check.svg\" class=\"alert-popup-check-icon\" alt=\"Toster icon\" />\n </span>\n }\n }\n </div>\n </div>\n </div>\n}\n", styles: [":host{--tertiary-color: rgba(255, 255, 255, .6);--secondary-color: rgba(255, 255, 255, .85);--checkbox-border: rgba(254, 60, 114, .4);--accent-pink: #fe3c72;--dark-bg: rgba(26, 23, 30, .85);--alert-popup-glow-layer: radial-gradient(circle at 10% 50%, rgba(254, 60, 114, .3), transparent 70%);--alert-popup-transparent-layer: rgba(26, 23, 30, .4);--alert-popup-error-background: linear-gradient(90deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-error-border: linear-gradient(160.44deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-success-background: linear-gradient(90deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-success-border: linear-gradient(160.44deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-warning-background: linear-gradient(90deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%);--alert-popup-warning-border: linear-gradient(160.44deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%)}.alert-popup-box{position:relative;z-index:1000;display:block;pointer-events:auto;border-radius:12px;box-sizing:border-box}.alert-popup-box.alert-popup-border{max-width:320px;width:calc(100vw - 32px);margin:0 auto;padding:1px 0 0;box-shadow:0 10px 30px #00000080;overflow:hidden}.alert-popup-box.alert-popup-border:before{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-glow-layer);z-index:-1}.alert-popup-box.alert-popup-border:after{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-transparent-layer);z-index:-1;pointer-events:none}.alert-popup-box.alert-popup-border.alert-popup-success{background-image:var(--alert-popup-success-border)}.alert-popup-box.alert-popup-border.alert-popup-warning{background-image:var(--alert-popup-warning-border)}.alert-popup-box.alert-popup-border.alert-popup-error,.alert-popup-box.alert-popup-border.alert-popup-info{background-image:var(--alert-popup-error-border)}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--enter{opacity:0;animation:alert-popup-move-ltr-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--exit{opacity:1;animation:alert-popup-move-rtl-exit-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--enter{opacity:0;animation:alert-popup-move-rtl-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--exit{opacity:1;animation:alert-popup-move-ltr-exit-anime forwards}.alert-popup-wrapper.alert-popup-content-wrapper{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:11px;overflow:hidden;height:100%;box-sizing:border-box;background:#fff}.alert-popup-wrapper.alert-popup-content-wrapper:before{content:\"\";position:absolute;inset:0;z-index:0;opacity:.9}.alert-popup-wrapper.alert-popup-content-wrapper:after{content:\"\";position:absolute;inset:1px 0 0;background:#ffffff03;background-blend-mode:overlay;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:0;pointer-events:none}.alert-popup-icon{width:20px;height:20px;flex-shrink:0;position:relative;z-index:1}.alert-popup-info .alert-popup-icon,.alert-popup-error .alert-popup-icon{filter:drop-shadow(0 0 1px #ce769e) brightness(1.1)}.alert-popup-success .alert-popup-icon{filter:drop-shadow(0 0 1px #3cfe4f) brightness(1.2)}.alert-popup-warning .alert-popup-icon{filter:drop-shadow(0 0 1px #fafe3c) brightness(1.2)}.alert-popup-content{flex-grow:1;position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}.alert-popup-content h2{color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}.alert-popup-content p{color:var(--secondary-color);font-size:11px;line-height:1.4}.alert-popup-success .alert-popup-content-wrapper:before{background-image:var(--alert-popup-success-background)}.alert-popup-warning .alert-popup-content-wrapper:before{background-image:var(--alert-popup-warning-background)}.alert-popup-error .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-info .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-success .alert-popup-content-wrapper:before,.alert-popup-warning .alert-popup-content-wrapper:before,.alert-popup-error .alert-popup-content-wrapper:before,.alert-popup-info .alert-popup-content-wrapper:before{filter:blur(2px);-webkit-filter:blur(2px)}.alert-popup-action-button{display:flex;flex-direction:column;justify-content:space-between;min-height:50px;position:relative;z-index:1}.alert-popup-action-button .alert-popup-check-icon{position:absolute;bottom:0;width:14px;height:14px}.alert-popup-action-button img{cursor:pointer}.alert-popup-checkbox{border:2px solid var(--checkbox-border);display:inline-block;width:9px;height:9px;border-radius:2px;cursor:pointer;position:absolute!important;bottom:0}.absolute{position:absolute!important}.bottom{bottom:0}.bottom-auto{bottom:auto!important}.top{top:0}.alert-popup-close-button{cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:1000;top:-3px!important;right:-3px!important;transition:opacity .2s ease;opacity:.5}.alert-popup-close-button:hover{opacity:.8}.alert-popup-close-button svg{pointer-events:none}@keyframes alert-popup-move-ltr-enter-anime{0%{transform:translate(-100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-rtl-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(-100%) scale(.75);opacity:0}}@keyframes alert-popup-move-rtl-enter-anime{0%{transform:translate(100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-ltr-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(100%) scale(.75);opacity:0}}\n"] }]
|
|
1917
|
+
args: [{ selector: 'lib-alert-popup', providers: [LibToastrService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, LibLoadingBarComponent, DirectiveModule], template: "@if (show) {\n <div\n (mouseover)=\"mouseOver(true)\"\n (mouseleave)=\"mouseOver(false)\"\n class=\"alert-popup-box alert-popup-border alert-popup-{{ config.severity }} alert-popup-{{ config.position || 'right-top' }} {{\n toastrExiting ? 'alert-popup-pos-' + (config.position || 'right-top') + '--exit' : 'alert-popup-pos-' + (config.position || 'right-top') + '--enter'\n }}\"\n [ngStyle]=\"{ 'animation-duration.ms': animationDuration }\"\n >\n <div class=\"alert-popup-wrapper alert-popup-content-wrapper\">\n <div class=\"alert-popup-icon\">\n @switch (config.severity) {\n @case ('success') {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9ZM9 1.54286C4.88147 1.54286 1.54286 4.88147 1.54286 9C1.54286 13.1185 4.88147 16.4571 9 16.4571C13.1185 16.4571 16.4571 13.1185 16.4571 9C16.4571 4.88147 13.1185 1.54286 9 1.54286Z\" fill=\"url(#success_gradient_1)\"/>\n <path d=\"M3.45049 8.21625L4.15409 7.43728L7.24494 10.2266L13.6276 5.07516L14.482 6.03004L7.19469 13.1666L3.45049 8.21625Z\" fill=\"url(#success_gradient_2)\" fill-opacity=\"0.6\" stroke=\"url(#success_gradient_3)\" stroke-opacity=\"0.6\" stroke-linejoin=\"round\"/>\n <defs>\n <linearGradient id=\"success_gradient_1\" x1=\"9\" y1=\"0\" x2=\"9\" y2=\"18\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#3CFE4F\"/>\n <stop offset=\"1\" stop-color=\"#A9FFFF\"/>\n </linearGradient>\n <linearGradient id=\"success_gradient_2\" x1=\"8.96625\" y1=\"5.07516\" x2=\"8.96625\" y2=\"13.1666\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#3CFE4F\"/>\n <stop offset=\"1\" stop-color=\"#A9FFFF\"/>\n </linearGradient>\n <linearGradient id=\"success_gradient_3\" x1=\"8.96625\" y1=\"5.07516\" x2=\"8.96625\" y2=\"13.1666\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#3CFE4F\"/>\n <stop offset=\"1\" stop-color=\"#A9FFFF\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n @case ('error') {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1622 1.43596C19.5528 1.82648 19.5528 2.45965 19.1622 2.85017L2.66223 19.3502C2.27171 19.7407 1.63854 19.7407 1.24802 19.3502C0.857493 18.9596 0.857493 18.3265 1.24802 17.936L17.748 1.43596C18.1385 1.04544 18.7717 1.04544 19.1622 1.43596Z\" fill=\"url(#error_gradient_1)\" fill-opacity=\"0.6\" stroke=\"url(#error_gradient_2)\" stroke-opacity=\"0.6\" stroke-linecap=\"round\"/>\n <circle cx=\"9.95512\" cy=\"10.1431\" r=\"8\" stroke=\"url(#error_gradient_3)\" stroke-opacity=\"0.6\" stroke-width=\"2\"/>\n <defs>\n <linearGradient id=\"error_gradient_1\" x1=\"10.2051\" y1=\"1.14307\" x2=\"10.2051\" y2=\"19.6431\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FE3C72\"/>\n <stop offset=\"1\" stop-color=\"#FFB5E9\"/>\n </linearGradient>\n <linearGradient id=\"error_gradient_2\" x1=\"10.2051\" y1=\"1.14307\" x2=\"10.2051\" y2=\"19.6431\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FE3C72\"/>\n <stop offset=\"1\" stop-color=\"#FFB5E9\"/>\n </linearGradient>\n <linearGradient id=\"error_gradient_3\" x1=\"9.95512\" y1=\"1.14307\" x2=\"9.95512\" y2=\"19.1431\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FE3C72\"/>\n <stop offset=\"1\" stop-color=\"#FFB5E9\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n @case ('warning') {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.0446 12.3748C11.315 12.3748 11.5743 12.2719 11.7655 12.0888C11.9567 11.9057 12.0641 11.6574 12.0641 11.3984V6.87699C12.0641 6.61804 11.9567 6.36969 11.7655 6.18658C11.5743 6.00347 11.315 5.9006 11.0446 5.9006C10.7742 5.9006 10.5149 6.00347 10.3237 6.18658C10.1325 6.36969 10.0251 6.61804 10.0251 6.87699V11.3834C10.023 11.5129 10.0478 11.6415 10.0981 11.7617C10.1484 11.8819 10.2232 11.9913 10.3181 12.0835C10.413 12.1758 10.5261 12.2491 10.6508 12.2991C10.7755 12.3491 10.9094 12.3748 11.0446 12.3748Z\" fill=\"url(#warning_gradient_1)\" fill-opacity=\"0.6\" stroke=\"url(#warning_gradient_2)\" stroke-opacity=\"0.6\"/>\n <path d=\"M11.0055 15.7165C11.6552 15.7165 12.1819 15.2121 12.1819 14.5899C12.1819 13.9677 11.6552 13.4633 11.0055 13.4633C10.3558 13.4633 9.82914 13.9677 9.82914 14.5899C9.82914 15.2121 10.3558 15.7165 11.0055 15.7165Z\" fill=\"url(#warning_gradient_3)\" fill-opacity=\"0.6\" stroke=\"url(#warning_gradient_4)\" stroke-opacity=\"0.6\"/>\n <path d=\"M20.7155 15.5443L13.0769 2.07013C12.8747 1.71429 12.576 1.41724 12.2123 1.21028C11.8487 1.00331 11.4334 0.894073 11.0104 0.894073C10.5874 0.894073 10.1721 1.00331 9.80848 1.21028C9.44481 1.41724 9.14613 1.71429 8.9439 2.07013L1.29744 15.5443C1.09731 15.8883 0.994821 16.2766 1.0002 16.6704C1.00558 17.0641 1.11864 17.4497 1.32811 17.7886C1.53758 18.1275 1.83614 18.4079 2.19403 18.6019C2.55193 18.7958 2.95665 18.8966 3.36787 18.894H18.6451C19.0529 18.8944 19.4539 18.7932 19.8086 18.6004C20.1633 18.4076 20.4595 18.1298 20.6683 17.7943C20.8771 17.4588 20.9912 17.077 20.9995 16.6865C21.0078 16.296 20.9099 15.9102 20.7155 15.5668V15.5443ZM19.3195 17.0013C19.2501 17.1135 19.1515 17.2063 19.0332 17.2709C18.9149 17.3354 18.7812 17.3693 18.6451 17.3694H3.36787C3.23155 17.3697 3.09748 17.336 2.9789 17.2716C2.86031 17.2072 2.7613 17.1144 2.69163 17.0021C2.62196 16.8899 2.58404 16.7623 2.5816 16.6317C2.57916 16.5012 2.61229 16.3723 2.67773 16.2578L10.3163 2.78365C10.3835 2.66441 10.4832 2.56481 10.6047 2.49539C10.7262 2.42597 10.865 2.38932 11.0065 2.38932C11.148 2.38932 11.2868 2.42597 11.4083 2.49539C11.5298 2.56481 11.6294 2.66441 11.6966 2.78365L19.3352 16.2578C19.4002 16.3724 19.433 16.5012 19.4302 16.6315C19.4275 16.7619 19.3893 16.8894 19.3195 17.0013Z\" fill=\"url(#warning_gradient_5)\" fill-opacity=\"0.6\"/>\n <defs>\n <linearGradient id=\"warning_gradient_1\" x1=\"11.0445\" y1=\"5.9006\" x2=\"11.0445\" y2=\"12.3748\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_2\" x1=\"11.0445\" y1=\"5.9006\" x2=\"11.0445\" y2=\"12.3748\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_3\" x1=\"11.0055\" y1=\"13.4633\" x2=\"11.0055\" y2=\"15.7165\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_4\" x1=\"11.0055\" y1=\"13.4633\" x2=\"11.0055\" y2=\"15.7165\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n <linearGradient id=\"warning_gradient_5\" x1=\"11\" y1=\"0.894073\" x2=\"11\" y2=\"18.8941\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.574653\" stop-color=\"#FAFE3C\"/>\n <stop offset=\"1\" stop-color=\"#BAFFA9\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n @default {\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.75 9.21428C11.2589 9.21428 11.6715 9.62683 11.6715 10.1357V16.2786C11.6715 16.7874 11.2589 17.2 10.75 17.2C10.2412 17.2 9.82861 16.7874 9.82861 16.2786V10.1357C9.82861 9.62683 10.2412 9.21428 10.75 9.21428Z\" fill=\"url(#info_gradient_1)\"/>\n <path d=\"M10.7501 7.06429C11.4286 7.06429 11.9786 6.51423 11.9786 5.83572C11.9786 5.1572 11.4286 4.60715 10.7501 4.60715C10.0715 4.60715 9.52148 5.1572 9.52148 5.83572C9.52148 6.51423 10.0715 7.06429 10.7501 7.06429Z\" fill=\"url(#info_gradient_1)\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 10.75C0 4.81294 4.81294 0 10.75 0C16.6871 0 21.5 4.81294 21.5 10.75C21.5 16.6871 16.6871 21.5 10.75 21.5C4.81294 21.5 0 16.6871 0 10.75ZM10.75 1.84286C5.83073 1.84286 1.84286 5.83073 1.84286 10.75C1.84286 15.6693 5.83073 19.6571 10.75 19.6571C15.6693 19.6571 19.6571 15.6693 19.6571 10.75C19.6571 5.83073 15.6693 1.84286 10.75 1.84286Z\" fill=\"url(#info_gradient_1)\"/>\n <defs>\n <linearGradient id=\"info_gradient_1\" x1=\"10.75\" y1=\"0\" x2=\"10.75\" y2=\"21.5\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#ce769e\"/>\n <stop offset=\"1\" stop-color=\"#ffffff\" stop-opacity=\"0.6\"/>\n </linearGradient>\n </defs>\n </svg>\n }\n }\n </div>\n <div class=\"alert-popup-content\">\n <h2 class=\"m-0 f-calistoga\">{{ config.title | translate }}</h2>\n @if (config.description.type === 'string') {\n <p class=\"m-0 f-gilroy-medium\">{{ (descriptionContent | translate) || '' }}</p>\n } @else if (config.description.type === 'template') {\n <ng-container *ngTemplateOutlet=\"descriptionTemplate\"></ng-container>\n } @else if (config.description.type === 'button') {\n <p class=\"m-0 f-gilroy-medium alert-popup-content__button-wrapper\">\n <span>{{ (descriptionContent | translate) || '' }}</span>\n <span class=\"alert-popup-content__button-wrapper__button\" (click)=\"config.button?.onClick()\"> {{ config.button?.name || '' }} </span>\n </p>\n } @else {\n <!-- No Description Content -->\n }\n @if (config.loading && !config.clickToClose) {\n <lib-loading-bar [toasterLife]=\"toasterLife\"></lib-loading-bar>\n }\n </div>\n <div class=\"alert-popup-action-button\">\n @if (!config.hideClose) {\n <span class=\"alert-popup-close-button absolute top\" (click)=\"onCloseIconClick($event)\" libTooltip=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 7 7\" fill=\"none\">\n <path\n d=\"M0.854234 5.69017L5.69106 0.853344M5.78208 5.78237L0.763872 0.764163\"\n stroke=\"#EBEBF5\"\n stroke-opacity=\"0.6\"\n stroke-width=\"1.2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n @if (config.markCheck) {\n @if (!checkbox) {\n <span (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\" class=\"alert-popup-checkbox\"></span>\n } @else {\n <span class=\"absolute bottom\">\n <div class=\"alert-popup-check-icon\" (click)=\"onCheckboxChange()\" libTooltip=\"Checkbox\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 27.4 L25 30.9632l7.3 -7\" stroke=\"#3CFE4F\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </span>\n }\n }\n </div>\n </div>\n </div>\n}\n", styles: [":host{--tertiary-color: rgba(255, 255, 255, .6);--secondary-color: rgba(255, 255, 255, .85);--checkbox-border: rgba(254, 60, 114, .4);--accent-pink: #fe3c72;--dark-bg: rgba(26, 23, 30, .85);--alert-popup-glow-layer: radial-gradient(circle at 10% 50%, rgba(254, 60, 114, .3), transparent 70%);--alert-popup-transparent-layer: rgba(26, 23, 30, .4);--alert-popup-error-background: linear-gradient(90deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-error-border: linear-gradient(160.44deg, #8a335a 1%, #332e39 20%, #6d3c51 60%, #332e39 80%);--alert-popup-success-background: linear-gradient(90deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-success-border: linear-gradient(160.44deg, #478857 1%, #332e39 20%, #80d59d 60%, #332e39 80%);--alert-popup-warning-background: linear-gradient(90deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%);--alert-popup-warning-border: linear-gradient(160.44deg, #898d4f 1%, #332e39 20%, #ddde8c 60%, #332e39 80%)}.alert-popup-box{position:relative;z-index:1000;display:block;pointer-events:auto;border-radius:12px;box-sizing:border-box}.alert-popup-box.alert-popup-border{max-width:320px;width:calc(100vw - 32px);margin:0 auto;padding:1px 0 0;box-shadow:0 10px 30px #00000080;overflow:hidden}.alert-popup-box.alert-popup-border:before{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-glow-layer);z-index:-1}.alert-popup-box.alert-popup-border:after{content:\"\";position:absolute;inset:0;background-image:var(--alert-popup-transparent-layer);z-index:-1;pointer-events:none}.alert-popup-box.alert-popup-border.alert-popup-success{background-image:var(--alert-popup-success-border)}.alert-popup-box.alert-popup-border.alert-popup-warning{background-image:var(--alert-popup-warning-border)}.alert-popup-box.alert-popup-border.alert-popup-error,.alert-popup-box.alert-popup-border.alert-popup-info{background-image:var(--alert-popup-error-border)}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--enter{opacity:0;animation:alert-popup-move-ltr-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-left-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-left-bottom--exit{opacity:1;animation:alert-popup-move-rtl-exit-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--enter,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--enter{opacity:0;animation:alert-popup-move-rtl-enter-anime forwards}.alert-popup-box.alert-popup-border.alert-popup-pos-right-top--exit,.alert-popup-box.alert-popup-border.alert-popup-pos-right-bottom--exit{opacity:1;animation:alert-popup-move-ltr-exit-anime forwards}.alert-popup-wrapper.alert-popup-content-wrapper{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:11px;overflow:hidden;height:100%;box-sizing:border-box;background:#fff}.alert-popup-wrapper.alert-popup-content-wrapper:before{content:\"\";position:absolute;inset:0;z-index:0;opacity:.9}.alert-popup-wrapper.alert-popup-content-wrapper:after{content:\"\";position:absolute;inset:1px 0 0;background:#ffffff03;background-blend-mode:overlay;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:0;pointer-events:none}.alert-popup-icon{width:20px;height:20px;flex-shrink:0;position:relative;z-index:1}.alert-popup-info .alert-popup-icon,.alert-popup-error .alert-popup-icon{filter:drop-shadow(0 0 1px #ce769e) brightness(1.1)}.alert-popup-success .alert-popup-icon{filter:drop-shadow(0 0 1px #3cfe4f) brightness(1.2)}.alert-popup-warning .alert-popup-icon{filter:drop-shadow(0 0 1px #fafe3c) brightness(1.2)}.alert-popup-content{flex-grow:1;position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}.alert-popup-content h2{color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}.alert-popup-content p{color:var(--secondary-color);font-size:11px;line-height:1.4}.alert-popup-success .alert-popup-content-wrapper:before{background-image:var(--alert-popup-success-background)}.alert-popup-warning .alert-popup-content-wrapper:before{background-image:var(--alert-popup-warning-background)}.alert-popup-error .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-info .alert-popup-content-wrapper:before{background-image:var(--alert-popup-error-background)}.alert-popup-success .alert-popup-content-wrapper:before,.alert-popup-warning .alert-popup-content-wrapper:before,.alert-popup-error .alert-popup-content-wrapper:before,.alert-popup-info .alert-popup-content-wrapper:before{filter:blur(2px);-webkit-filter:blur(2px)}.alert-popup-action-button{display:flex;flex-direction:column;justify-content:space-between;min-height:50px;position:relative;z-index:1}.alert-popup-action-button .alert-popup-check-icon{position:absolute;bottom:0;width:14px;height:14px}.alert-popup-action-button img{cursor:pointer}.alert-popup-checkbox{border:2px solid var(--checkbox-border);display:inline-block;width:9px;height:9px;border-radius:2px;cursor:pointer;position:absolute!important;bottom:0}.absolute{position:absolute!important}.bottom{bottom:0}.bottom-auto{bottom:auto!important}.top{top:0}.alert-popup-close-button{cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:1000;top:-3px!important;right:-3px!important;transition:opacity .2s ease;opacity:.5}.alert-popup-close-button:hover{opacity:.8}.alert-popup-close-button svg{pointer-events:none}@keyframes alert-popup-move-ltr-enter-anime{0%{transform:translate(-100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-rtl-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(-100%) scale(.75);opacity:0}}@keyframes alert-popup-move-rtl-enter-anime{0%{transform:translate(100%) scale(.75);opacity:0}30%{opacity:.5;transform:scale(.75)}to{transform:translate(0) scale(1);opacity:1}}@keyframes alert-popup-move-ltr-exit-anime{0%{transform:translate(0) scale(1);opacity:1}30%{transform:scale(.75);opacity:.5}to{transform:translate(100%) scale(.75);opacity:0}}\n"] }]
|
|
1920
1918
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: LibToastrService }], propDecorators: { config: [{
|
|
1921
1919
|
type: Input
|
|
1922
1920
|
}], title: [{
|