otimus-library 0.2.71 → 0.2.73

package/esm2022/lib/components/oc-message/oc-message.component.mjs

@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class OcMessageComponent {
+    constructor() {
+        this.isOpen = false;
+        this.ocColor = 'default';
+        this.ocClosable = false;
+        this.ocIcon = '';
+        this._ocTitle = '';
+        this.ocOnClose = new EventEmitter();
+        this.ocOnOpen = new EventEmitter();
+    }
+    set ocTitle(value) {
+        this._ocTitle = value.trim();
+    }
+    get ocTitle() {
+        return this._ocTitle;
+    }
+    open() {
+        this.isOpen = true;
+        this.ocOnOpen.emit(this.isOpen);
+    }
+    close() {
+        this.isOpen = false;
+        this.ocOnClose.emit(this.isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcMessageComponent, isStandalone: true, selector: "oc-message", inputs: { isOpen: "isOpen", ocColor: "ocColor", ocClosable: "ocClosable", ocIcon: "ocIcon", ocTitle: "ocTitle" }, outputs: { ocOnClose: "ocOnClose", ocOnOpen: "ocOnOpen" }, ngImport: i0, template: "@if (!ocClosable || isOpen) {\r\n<div class=\"oc-message-bg\" [ngClass]=\"'oc-' + ocColor\">\r\n  <div class=\"oc-icon\" [ngClass]=\"'oc-' + ocColor\">\r\n    @if (ocIcon) {\r\n    <span class=\"material-symbols-outlined\">{{ ocIcon }}</span>\r\n    } @else {\r\n    <span>\r\n      <ng-content select=\"[ocIcon]\"></ng-content>\r\n    </span>\r\n    }\r\n  </div>\r\n  <div class=\"oc-main-content\">\r\n    <div class=\"oc-message-header\">\r\n      @if (ocTitle) {\r\n      <h3>{{ ocTitle }}</h3>\r\n      } @else {\r\n      <ng-content select=\"[ocHeader]\"></ng-content>\r\n      }\r\n      @if (ocClosable) {\r\n      <button (click)=\"close()\" class=\"oc-close-btn\">\r\n        <span class=\"material-symbols-outlined md-18\" ocTooltip content=\"Fechar\" ocSide=\"bottom\">\r\n          close\r\n        </span>\r\n      </button>\r\n      }\r\n    </div>\r\n    <div class=\"oc-message-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".oc-message-bg{padding:1rem;border-radius:1rem;display:flex;gap:.7rem}.oc-message-bg .oc-message-header{display:flex;justify-content:space-between;margin:0 0 1rem}.oc-message-bg .oc-message-header h3{margin:0}.oc-message-bg .oc-icon{border:none}.oc-message-bg .oc-icon .material-symbols-outlined{font-size:2rem}.oc-message-bg .oc-icon ::ng-deep [ocIcon]{font-size:2rem}.oc-icon.oc-default{color:#353535}.oc-default{background-color:#f7f7f7;border:2px solid #d1d5db;color:#8f9596}.oc-red{background-color:#ffcaca;border:2px solid #ed3a3a;color:#ed3a3a}.oc-red .oc-close-btn span{color:#8f9596}.oc-green{background-color:#ccfbe6;border:2px solid #00dda3;color:#00dda3}.oc-close-btn{margin:0;margin-right:.5rem;padding:0;border:none;-webkit-user-select:none;user-select:none;background-color:transparent;color:#d1d5db;width:15px;height:15px;border-radius:50%;transition:.15s ease;cursor:pointer}.oc-close-btn span{transition:.15s ease}.oc-close-btn:hover span{color:#8f9596}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-message', standalone: true, imports: [
+                        CommonModule
+                    ], template: "@if (!ocClosable || isOpen) {\r\n<div class=\"oc-message-bg\" [ngClass]=\"'oc-' + ocColor\">\r\n  <div class=\"oc-icon\" [ngClass]=\"'oc-' + ocColor\">\r\n    @if (ocIcon) {\r\n    <span class=\"material-symbols-outlined\">{{ ocIcon }}</span>\r\n    } @else {\r\n    <span>\r\n      <ng-content select=\"[ocIcon]\"></ng-content>\r\n    </span>\r\n    }\r\n  </div>\r\n  <div class=\"oc-main-content\">\r\n    <div class=\"oc-message-header\">\r\n      @if (ocTitle) {\r\n      <h3>{{ ocTitle }}</h3>\r\n      } @else {\r\n      <ng-content select=\"[ocHeader]\"></ng-content>\r\n      }\r\n      @if (ocClosable) {\r\n      <button (click)=\"close()\" class=\"oc-close-btn\">\r\n        <span class=\"material-symbols-outlined md-18\" ocTooltip content=\"Fechar\" ocSide=\"bottom\">\r\n          close\r\n        </span>\r\n      </button>\r\n      }\r\n    </div>\r\n    <div class=\"oc-message-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".oc-message-bg{padding:1rem;border-radius:1rem;display:flex;gap:.7rem}.oc-message-bg .oc-message-header{display:flex;justify-content:space-between;margin:0 0 1rem}.oc-message-bg .oc-message-header h3{margin:0}.oc-message-bg .oc-icon{border:none}.oc-message-bg .oc-icon .material-symbols-outlined{font-size:2rem}.oc-message-bg .oc-icon ::ng-deep [ocIcon]{font-size:2rem}.oc-icon.oc-default{color:#353535}.oc-default{background-color:#f7f7f7;border:2px solid #d1d5db;color:#8f9596}.oc-red{background-color:#ffcaca;border:2px solid #ed3a3a;color:#ed3a3a}.oc-red .oc-close-btn span{color:#8f9596}.oc-green{background-color:#ccfbe6;border:2px solid #00dda3;color:#00dda3}.oc-close-btn{margin:0;margin-right:.5rem;padding:0;border:none;-webkit-user-select:none;user-select:none;background-color:transparent;color:#d1d5db;width:15px;height:15px;border-radius:50%;transition:.15s ease;cursor:pointer}.oc-close-btn span{transition:.15s ease}.oc-close-btn:hover span{color:#8f9596}\n"] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], ocColor: [{
+                type: Input
+            }], ocClosable: [{
+                type: Input
+            }], ocIcon: [{
+                type: Input
+            }], ocTitle: [{
+                type: Input
+            }], ocOnClose: [{
+                type: Output
+            }], ocOnOpen: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2MtbWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vdGltdXMtbGlicmFyeS9zcmMvbGliL2NvbXBvbmVudHMvb2MtbWVzc2FnZS9vYy1tZXNzYWdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50cy9vYy1tZXNzYWdlL29jLW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVd2RSxNQUFNLE9BQU8sa0JBQWtCO0lBVC9CO1FBVVcsV0FBTSxHQUFZLEtBQUssQ0FBQTtRQUN2QixZQUFPLEdBQWdDLFNBQVMsQ0FBQTtRQUNoRCxlQUFVLEdBQVksS0FBSyxDQUFBO1FBQzNCLFdBQU0sR0FBVyxFQUFFLENBQUE7UUFFcEIsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQVNwQixjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtRQUNuQyxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtLQVc3QztJQXBCQyxJQUNJLE9BQU8sQ0FBQyxLQUFhO1FBQ3ZCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFDRCxJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdkIsQ0FBQztJQUtELElBQUk7UUFDRixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQTtRQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDakMsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQTtRQUNuQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDbEMsQ0FBQzsrR0ExQlUsa0JBQWtCO21HQUFsQixrQkFBa0IsbVBDWi9CLHc5QkErQkMsc2dDRHhCRyxZQUFZOzs0RkFLSCxrQkFBa0I7a0JBVDlCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUDt3QkFDUCxZQUFZO3FCQUNiOzhCQUtRLE1BQU07c0JBQWQsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBSUYsT0FBTztzQkFEVixLQUFLO2dCQVFJLFNBQVM7c0JBQWxCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ29jLW1lc3NhZ2UnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlXHJcbiAgXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vb2MtbWVzc2FnZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL29jLW1lc3NhZ2UuY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBPY01lc3NhZ2VDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlXHJcbiAgQElucHV0KCkgb2NDb2xvcjogJ2RlZmF1bHQnIHwgJ2dyZWVuJyB8ICdyZWQnID0gJ2RlZmF1bHQnXHJcbiAgQElucHV0KCkgb2NDbG9zYWJsZTogYm9vbGVhbiA9IGZhbHNlXHJcbiAgQElucHV0KCkgb2NJY29uOiBzdHJpbmcgPSAnJyBcclxuXHJcbiAgcHJpdmF0ZSBfb2NUaXRsZTogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KClcclxuICBzZXQgb2NUaXRsZSh2YWx1ZTogc3RyaW5nKSB7XHJcbiAgICB0aGlzLl9vY1RpdGxlID0gdmFsdWUudHJpbSgpO1xyXG4gIH1cclxuICBnZXQgb2NUaXRsZSgpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHRoaXMuX29jVGl0bGU7XHJcbiAgfVxyXG5cclxuICBAT3V0cHV0KCkgb2NPbkNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KClcclxuICBAT3V0cHV0KCkgb2NPbk9wZW4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKVxyXG5cclxuICBvcGVuKCkge1xyXG4gICAgdGhpcy5pc09wZW4gPSB0cnVlXHJcbiAgICB0aGlzLm9jT25PcGVuLmVtaXQodGhpcy5pc09wZW4pXHJcbiAgfVxyXG5cclxuICBjbG9zZSgpIHtcclxuICAgIHRoaXMuaXNPcGVuID0gZmFsc2VcclxuICAgIHRoaXMub2NPbkNsb3NlLmVtaXQodGhpcy5pc09wZW4pXHJcbiAgfVxyXG59XHJcbiIsIkBpZiAoIW9jQ2xvc2FibGUgfHwgaXNPcGVuKSB7XHJcbjxkaXYgY2xhc3M9XCJvYy1tZXNzYWdlLWJnXCIgW25nQ2xhc3NdPVwiJ29jLScgKyBvY0NvbG9yXCI+XHJcbiAgPGRpdiBjbGFzcz1cIm9jLWljb25cIiBbbmdDbGFzc109XCInb2MtJyArIG9jQ29sb3JcIj5cclxuICAgIEBpZiAob2NJY29uKSB7XHJcbiAgICA8c3BhbiBjbGFzcz1cIm1hdGVyaWFsLXN5bWJvbHMtb3V0bGluZWRcIj57eyBvY0ljb24gfX08L3NwYW4+XHJcbiAgICB9IEBlbHNlIHtcclxuICAgIDxzcGFuPlxyXG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbb2NJY29uXVwiPjwvbmctY29udGVudD5cclxuICAgIDwvc3Bhbj5cclxuICAgIH1cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwib2MtbWFpbi1jb250ZW50XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwib2MtbWVzc2FnZS1oZWFkZXJcIj5cclxuICAgICAgQGlmIChvY1RpdGxlKSB7XHJcbiAgICAgIDxoMz57eyBvY1RpdGxlIH19PC9oMz5cclxuICAgICAgfSBAZWxzZSB7XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltvY0hlYWRlcl1cIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgIH1cclxuICAgICAgQGlmIChvY0Nsb3NhYmxlKSB7XHJcbiAgICAgIDxidXR0b24gKGNsaWNrKT1cImNsb3NlKClcIiBjbGFzcz1cIm9jLWNsb3NlLWJ0blwiPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwibWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZCBtZC0xOFwiIG9jVG9vbHRpcCBjb250ZW50PVwiRmVjaGFyXCIgb2NTaWRlPVwiYm90dG9tXCI+XHJcbiAgICAgICAgICBjbG9zZVxyXG4gICAgICAgIDwvc3Bhbj5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICAgIH1cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cIm9jLW1lc3NhZ2UtY29udGVudFwiPlxyXG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbn0iXX0=