@seniorsistemas/angular-components 17.7.11 → 17.8.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -928,6 +928,68 @@
         return AccordionModule;
     }());
 
+    var AlertComponent = /** @class */ (function () {
+        function AlertComponent() {
+            this.severity = "info";
+            this.closable = true;
+            this.close = new core.EventEmitter();
+            this._isOpen = true;
+        }
+        Object.defineProperty(AlertComponent.prototype, "isOpen", {
+            get: function () {
+                return this._isOpen;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AlertComponent.prototype.closeAlert = function () {
+            this._isOpen = false;
+        };
+        AlertComponent.prototype.showAlert = function () {
+            this._isOpen = true;
+        };
+        AlertComponent.prototype.onClose = function () {
+            this.close.emit();
+            this.closeAlert();
+        };
+        __decorate([
+            core.Input()
+        ], AlertComponent.prototype, "severity", void 0);
+        __decorate([
+            core.Input()
+        ], AlertComponent.prototype, "summary", void 0);
+        __decorate([
+            core.Input()
+        ], AlertComponent.prototype, "detail", void 0);
+        __decorate([
+            core.Input()
+        ], AlertComponent.prototype, "closable", void 0);
+        __decorate([
+            core.Output()
+        ], AlertComponent.prototype, "close", void 0);
+        AlertComponent = __decorate([
+            core.Component({
+                selector: "s-alert",
+                template: "<div class=\"alert\" [ngClass]=\"{\n    'alert--info': severity === 'info',\n    'alert--success': severity === 'success',\n    'alert--warning': severity === 'warning',\n    'alert--error': severity === 'error'\n}\">\n    <div class=\"content\">\n        <div class=\"icon-container\">\n            <i class=\"fas fa-info\" [ngClass]=\"{\n                'fa-info': severity === 'info',\n                'fa-check': severity === 'success',\n                'fa-exclamation-triangle': severity === 'warning',\n                'fa-times': severity === 'error'\n            }\"></i>\n        </div>\n        <div class=\"text-container\">\n            <div class=\"text\">\n                <span *ngIf=\"summary\" class=\"summary\">{{ summary }}</span>\n                <span *ngIf=\"detail\" class=\"detail\">{{ detail }}</span>\n            </div>\n        </div>\n    </div>\n    <button *ngIf=\"closable\" class=\"close-option\" (click)=\"onClose()\">\n        <i class=\"fas fa-times\"></i>\n    </button>\n</div>",
+                styles: [".alert{-ms-flex-align:center;align-items:center;background-color:#f1f7f8;border-left:4px solid #428bca;border-radius:4px;box-shadow:1px 1px 2px rgba(0,0,0,.2);display:-ms-flexbox;display:flex;gap:16px;-ms-flex-pack:justify;justify-content:space-between;margin:8px;padding:12px 16px}.alert .content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:16px}.alert .content .icon-container{-ms-flex-align:center;align-items:center;background-color:#428bca;border-radius:50%;color:#fff;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-ms-flex-pack:center;justify-content:center;width:40px}.alert .content .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:16px}.alert .content .text-container .text{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}.alert .content .text-container .text .detail,.alert .content .text-container .text .summary{color:#212533;font-family:\"Open Sans\",sans-serif;font-size:14px}.alert .content .text-container .text .summary{font-weight:700}.alert .close-option{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:16px;padding:4px}.alert--info{background-color:#f1f7f8;border-color:#428bca}.alert--info .content .icon-container{background-color:#428bca;color:#fff}.alert--success{background-color:#e0f0f0;border-color:#0c9348}.alert--success .content .icon-container{background-color:#0c9348;color:#fff}.alert--warning{background-color:#fef4e3;border-color:#fcbf10}.alert--warning .content .icon-container{background-color:#fcbf10;color:#212533}.alert--error{background-color:#fef0f0;border-color:#c13018}.alert--error .content .icon-container{background-color:#c13018;color:#fff}"]
+            })
+        ], AlertComponent);
+        return AlertComponent;
+    }());
+
+    var AlertModule = /** @class */ (function () {
+        function AlertModule() {
+        }
+        AlertModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule],
+                declarations: [AlertComponent],
+                exports: [AlertComponent],
+            })
+        ], AlertModule);
+        return AlertModule;
+    }());
+
     // Lembrar que toda vez que for adicionada uma cor nova, ser criada a referência no `EnumBadgeColors`
     // do s-table-columns.
 
@@ -17930,6 +17992,8 @@
     exports.AccordionComponent = AccordionComponent;
     exports.AccordionModule = AccordionModule;
     exports.AccordionPanelComponent = AccordionPanelComponent;
+    exports.AlertComponent = AlertComponent;
+    exports.AlertModule = AlertModule;
     exports.AngularComponentsModule = AngularComponentsModule;
     exports.AutocompleteField = AutocompleteField;
     exports.BadgeComponent = BadgeComponent;