asksuite-citrus 3.16.21 → 3.16.23-beta.0

package/esm2022/lib/components/notification-tooltip/notification-tooltip.component.mjs

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@ngx-translate/core";
+export class NotificationTooltipComponent {
+    constructor() {
+        this.title = '';
+        this.message = '';
+        this.direction = 'horizontal';
+        this.positionArrowHorizontal = 'center';
+        this.positionArrowVertical = 'center';
+        this.sideArrow = 'bottom';
+        this.buttonTitle = "'ACTIONS.CLOSE' | translate'";
+        this.onClick = new EventEmitter();
+        this.visible = true;
+        this.class = '';
+    }
+    ngOnInit() {
+        this.class = `tooltip-arrow-${this.direction} -side-${this.sideArrow} -${this.direction === 'horizontal'
+            ? this.positionArrowHorizontal : this.positionArrowVertical}`;
+    }
+    closeTooltip() {
+        this.visible = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NotificationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: NotificationTooltipComponent, selector: "app-tooltip", inputs: { title: "title", message: "message", direction: "direction", positionArrowHorizontal: "positionArrowHorizontal", positionArrowVertical: "positionArrowVertical", sideArrow: "sideArrow", buttonTitle: "buttonTitle" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "\n  <div class=\"tooltip-container\">\n    <div [ngClass]=\"class\"></div>\n    <div class=\"tooltip-content\">\n        @if(title !==''){\n          <p class=\"title\">{{ title | translate }}</p>\n        }\n        <p class=\"message\">{{ message | translate }}</p>\n      <button class=\"button\" (click)=\"onClick.emit($event)\">{{buttonTitle | translate}}</button>\n    </div>\n  </div>\n\n", styles: [".tooltip-container{display:flex;padding:12px 16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;flex:1 0 0;z-index:1000;position:absolute}.tooltip-arrow-horizontal{position:absolute;transform:translate(-50%);width:0;height:0;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);z-index:1001}.tooltip-arrow-horizontal.-side-top{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--color-background-alpha-bolder-default);top:4%}.tooltip-arrow-horizontal.-side-bottom{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--color-background-alpha-bolder-default);top:90%}.tooltip-arrow-horizontal.-left{left:7%}.tooltip-arrow-horizontal.-center{left:50%}.tooltip-arrow-horizontal.-right{left:93%}.tooltip-arrow-vertical{position:absolute;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--color-background-alpha-bolder-default);z-index:1001}.tooltip-arrow-vertical.-side-left{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid;left:4%}.tooltip-arrow-vertical.-side-right{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid;left:96%}.tooltip-arrow-vertical.-top{top:18%}.tooltip-arrow-vertical.-center{top:45%}.tooltip-arrow-vertical.-bottom{top:73%}.tooltip-content{display:flex;padding:12px 16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;flex:1 0 0;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);width:214px;border-radius:8px;background:var(--color-background-alpha-bolder-default);align-self:stretch}.button{display:flex;height:32px;width:168px;padding:6px 12px;justify-content:center;align-items:center;gap:8px;border-radius:8px;background-color:var(--color-background-inverse-default);color:var(--color-texticon-contrast)}.title{color:var(--color-texticon-inverse-default);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;align-self:stretch}.message{color:var(--color-texticon-inverse-default, #FFF);font-family:Inter;font-size:13px;font-style:normal;font-weight:400;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NotificationTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tooltip', template: "\n  <div class=\"tooltip-container\">\n    <div [ngClass]=\"class\"></div>\n    <div class=\"tooltip-content\">\n        @if(title !==''){\n          <p class=\"title\">{{ title | translate }}</p>\n        }\n        <p class=\"message\">{{ message | translate }}</p>\n      <button class=\"button\" (click)=\"onClick.emit($event)\">{{buttonTitle | translate}}</button>\n    </div>\n  </div>\n\n", styles: [".tooltip-container{display:flex;padding:12px 16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;flex:1 0 0;z-index:1000;position:absolute}.tooltip-arrow-horizontal{position:absolute;transform:translate(-50%);width:0;height:0;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);z-index:1001}.tooltip-arrow-horizontal.-side-top{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--color-background-alpha-bolder-default);top:4%}.tooltip-arrow-horizontal.-side-bottom{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--color-background-alpha-bolder-default);top:90%}.tooltip-arrow-horizontal.-left{left:7%}.tooltip-arrow-horizontal.-center{left:50%}.tooltip-arrow-horizontal.-right{left:93%}.tooltip-arrow-vertical{position:absolute;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--color-background-alpha-bolder-default);z-index:1001}.tooltip-arrow-vertical.-side-left{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid;left:4%}.tooltip-arrow-vertical.-side-right{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid;left:96%}.tooltip-arrow-vertical.-top{top:18%}.tooltip-arrow-vertical.-center{top:45%}.tooltip-arrow-vertical.-bottom{top:73%}.tooltip-content{display:flex;padding:12px 16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;flex:1 0 0;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);width:214px;border-radius:8px;background:var(--color-background-alpha-bolder-default);align-self:stretch}.button{display:flex;height:32px;width:168px;padding:6px 12px;justify-content:center;align-items:center;gap:8px;border-radius:8px;background-color:var(--color-background-inverse-default);color:var(--color-texticon-contrast)}.title{color:var(--color-texticon-inverse-default);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;align-self:stretch}.message{color:var(--color-texticon-inverse-default, #FFF);font-family:Inter;font-size:13px;font-style:normal;font-weight:400;line-height:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], positionArrowHorizontal: [{
+                type: Input
+            }], positionArrowVertical: [{
+                type: Input
+            }], sideArrow: [{
+                type: Input
+            }], buttonTitle: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLXRvb2x0aXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXNrc3VpdGUtY2l0cnVzL3NyYy9saWIvY29tcG9uZW50cy9ub3RpZmljYXRpb24tdG9vbHRpcC9ub3RpZmljYXRpb24tdG9vbHRpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL25vdGlmaWNhdGlvbi10b29sdGlwL25vdGlmaWNhdGlvbi10b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFTLE1BQU0sZUFBZSxDQUFDOzs7O0FBUWpHLE1BQU0sT0FBTyw0QkFBNEI7SUFhdkM7UUFaUyxVQUFLLEdBQVcsRUFBRSxDQUFBO1FBQ2xCLFlBQU8sR0FBVyxFQUFFLENBQUM7UUFDckIsY0FBUyxHQUE4QixZQUFZLENBQUE7UUFDbkQsNEJBQXVCLEdBQStCLFFBQVEsQ0FBQztRQUMvRCwwQkFBcUIsR0FBZ0MsUUFBUSxDQUFDO1FBQzlELGNBQVMsR0FBd0MsUUFBUSxDQUFDO1FBQzFELGdCQUFXLEdBQUcsOEJBQThCLENBQUM7UUFDNUMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFbkQsWUFBTyxHQUFZLElBQUksQ0FBQztRQUN4QixVQUFLLEdBQUUsRUFBRSxDQUFBO0lBRUssQ0FBQztJQUdmLFFBQVE7UUFDTixJQUFJLENBQUMsS0FBSyxHQUFHLGlCQUFpQixJQUFJLENBQUMsU0FBUyxVQUFVLElBQUksQ0FBQyxTQUFTLEtBQUssSUFBSSxDQUFDLFNBQVMsS0FBSyxZQUFZO1lBQ3RHLENBQUMsQ0FBQyxJQUFJLENBQUMsdUJBQXVCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO0lBQ2xFLENBQUM7SUFDRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQzs4R0F0QlUsNEJBQTRCO2tHQUE1Qiw0QkFBNEIsb1RDUnpDLDZZQVlBOzsyRkRKYSw0QkFBNEI7a0JBTHhDLFNBQVM7K0JBQ0UsYUFBYTt3REFLZCxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csdUJBQXVCO3NCQUEvQixLQUFLO2dCQUNHLHFCQUFxQjtzQkFBN0IsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtdG9vbHRpcCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9ub3RpZmljYXRpb24tdG9vbHRpcC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25vdGlmaWNhdGlvbi10b29sdGlwLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTm90aWZpY2F0aW9uVG9vbHRpcENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCAge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJydcbiAgQElucHV0KCkgbWVzc2FnZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGRpcmVjdGlvbjogJ3ZlcnRpY2FsJyB8ICdob3Jpem9udGFsJyA9ICdob3Jpem9udGFsJ1xuICBASW5wdXQoKSBwb3NpdGlvbkFycm93SG9yaXpvbnRhbDogJ2xlZnQnIHwgJ3JpZ2h0JyB8ICdjZW50ZXInPSAnY2VudGVyJztcbiAgQElucHV0KCkgcG9zaXRpb25BcnJvd1ZlcnRpY2FsOiAndG9wJyB8ICdib3R0b20nIHwgJ2NlbnRlcicgPSAnY2VudGVyJztcbiAgQElucHV0KCkgc2lkZUFycm93OiAndG9wJyB8ICdib3R0b20nIHwgJ3JpZ2h0JyB8ICdsZWZ0JyA9ICdib3R0b20nO1xuICBASW5wdXQoKSBidXR0b25UaXRsZSA9IFwiJ0FDVElPTlMuQ0xPU0UnIHwgdHJhbnNsYXRlJ1wiO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcblxuICB2aXNpYmxlOiBib29sZWFuID0gdHJ1ZTtcbiAgY2xhc3MgPScnXG5cbiAgY29uc3RydWN0b3IoKXt9XG5cbiAgXG4gIG5nT25Jbml0KCl7XG4gICAgdGhpcy5jbGFzcyA9IGB0b29sdGlwLWFycm93LSR7dGhpcy5kaXJlY3Rpb259IC1zaWRlLSR7dGhpcy5zaWRlQXJyb3d9IC0ke3RoaXMuZGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcgXG4gICAgICA/IHRoaXMucG9zaXRpb25BcnJvd0hvcml6b250YWwgOiB0aGlzLnBvc2l0aW9uQXJyb3dWZXJ0aWNhbH1gO1xuICB9IFxuICBjbG9zZVRvb2x0aXAoKSB7XG4gICAgdGhpcy52aXNpYmxlID0gZmFsc2U7XG4gIH1cbn1cbiIsIlxuICA8ZGl2IGNsYXNzPVwidG9vbHRpcC1jb250YWluZXJcIj5cbiAgICA8ZGl2IFtuZ0NsYXNzXT1cImNsYXNzXCI+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInRvb2x0aXAtY29udGVudFwiPlxuICAgICAgICBAaWYodGl0bGUgIT09Jycpe1xuICAgICAgICAgIDxwIGNsYXNzPVwidGl0bGVcIj57eyB0aXRsZSB8IHRyYW5zbGF0ZSB9fTwvcD5cbiAgICAgICAgfVxuICAgICAgICA8cCBjbGFzcz1cIm1lc3NhZ2VcIj57eyBtZXNzYWdlIHwgdHJhbnNsYXRlIH19PC9wPlxuICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ1dHRvblwiIChjbGljayk9XCJvbkNsaWNrLmVtaXQoJGV2ZW50KVwiPnt7YnV0dG9uVGl0bGUgfCB0cmFuc2xhdGV9fTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuIl19