@seniorsistemas/angular-components 17.12.3 → 17.13.0

package/fesm5/seniorsistemas-angular-components.js

@@ -17405,7 +17405,7 @@ var BorderButtonComponent = /** @class */ (function () {
         Component({
             selector: "s-border-button",
             template: "<button\n    class=\"border-button\"\n    [ngClass]=\"{\n        'border-button--severity-default': severity === EnumSeverity.Default,\n        'border-button--severity-info': severity === EnumSeverity.Info,\n        'border-button--severity-warn': severity === EnumSeverity.Warn,\n        'border-button--severity-error': severity === EnumSeverity.Error,\n        'border-button--severity-success': severity == EnumSeverity.Success,\n        'border-button--disabled': options?.disabled\n            ? options?.disabled(severity)\n            : false\n    }\"\n    (click)=\"options?.onClick ? options?.onClick(severity) : null\"\n    [sTooltip]=\"options?.tooltip ? options?.tooltip(severity) : null\"\n    [tooltipPosition]=\"TooltipPosition.Left\"\n    [disabled]=\"options?.disabled ? options?.disabled(severity) : false\"\n>\n    <span class=\"border-button__label\">\n        {{ options?.label ? options?.label(severity) : null }}\n    </span>\n    <span\n        *ngIf=\"options?.icon ? options?.icon(severity) : false\"\n        class=\"border-button__icon {{ options?.icon(severity) }}\"\n    ></span>\n</button>",
-            styles: [".border-button{padding:0 8px;border:1px solid;border-radius:12px;height:23px;max-width:320px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.border-button__label{font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;width:100%;display:block;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-button__icon{font-size:12px;color:#333;margin-left:8px}.border-button--severity-default{border-color:#ccc;background-color:#fff}.border-button--severity-info{border-color:#428bca;background-color:#d5e8ec;transition:background-color .5s,border-color .5s}.border-button--severity-info:enabled:hover{background-color:#9ecad4;cursor:pointer}.border-button--severity-info:enabled:active{transition:none;background-color:#67acbc;border-color:#67acbc}.border-button--severity-warn{border-color:#f8931f;background-color:#fce3ba;transition:background-color .5s,border-color .5s}.border-button--severity-warn:enabled:hover{background-color:#f8bf5e;cursor:pointer}.border-button--severity-warn:enabled:active{transition:none;background-color:#f5a319;border-color:#f5a319}.border-button--severity-error{border-color:#c13018;background-color:#fcd2d2;transition:background-color .5s,border-color .5s}.border-button--severity-error:enabled:hover{background-color:#f89696;cursor:pointer}.border-button--severity-error:enabled:active{transition:none;background-color:#f45b5b;border-color:#f45b5b}.border-button--severity-success{border-color:#0c9348;background-color:#e6ffb3;transition:background-color .5s,border-color .5s}.border-button--severity-success:enabled:hover{background-color:#c8ff5c;cursor:pointer}.border-button--severity-success:enabled:active{transition:none;background-color:#ade500;border-color:#ade500}.border-button--disabled:disabled:hover{cursor:default}"]
+            styles: [".border-button{padding:0 8px;border:1px solid;border-radius:12px;height:23px;max-width:320px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.border-button__label{font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;width:100%;display:block;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-button__icon{font-size:12px;color:#333;margin-left:8px}.border-button--severity-default{border-color:#ccc;background-color:#fff}.border-button--severity-info{border-color:#428bca;background-color:#d5e8ec;transition:background-color .5s,border-color .5s}.border-button--severity-info:enabled:hover{background-color:#9ecad4;cursor:pointer}.border-button--severity-info:enabled:active{transition:none;background-color:#67acbc;border-color:#67acbc}.border-button--severity-warn{border-color:#f8931f;background-color:#fce3ba;transition:background-color .5s,border-color .5s}.border-button--severity-warn:enabled:hover{background-color:#f8bf5e;cursor:pointer}.border-button--severity-warn:enabled:active{transition:none;background-color:#f5a319;border-color:#f5a319}.border-button--severity-error{border-color:#c13018;background-color:#fcd2d2;transition:background-color .5s,border-color .5s}.border-button--severity-error:enabled:hover{background-color:#f89696;cursor:pointer}.border-button--severity-error:enabled:active{transition:none;background-color:#f45b5b;border-color:#f45b5b}.border-button--severity-success{border-color:#0c9348;background-color:#e6ffb3;transition:background-color .5s,border-color .5s}.border-button--severity-success:enabled:hover{background-color:#c8ff5c;cursor:pointer}.border-button--severity-success:enabled:active{transition:none;background-color:#ade500;border-color:#ade500}.border-button--disabled:disabled:hover{cursor:default}"]
         })
     ], BorderButtonComponent);
     return BorderButtonComponent;
@@ -17437,6 +17437,87 @@ var ObjectCardModule = /** @class */ (function () {
     return ObjectCardModule;
 }());
 
+var PanelComponent = /** @class */ (function () {
+    function PanelComponent() {
+        this.collapsable = false;
+        this.collapsed = false;
+        this.severity = EnumSeverity.Default;
+        this.EnumSeverity = EnumSeverity;
+    }
+    PanelComponent.prototype.ngAfterContentInit = function () {
+        this._getTemplates();
+    };
+    PanelComponent.prototype._getCustomTemplate = function (type) {
+        var _a;
+        return (_a = this.templates.find(function (template) { return template.type === type; })) === null || _a === void 0 ? void 0 : _a.template;
+    };
+    PanelComponent.prototype.getHeaderTemplate = function () {
+        return this._getCustomTemplate("header");
+    };
+    PanelComponent.prototype.getBodyTemplate = function () {
+        return this._getCustomTemplate("body");
+    };
+    PanelComponent.prototype.getFooterTemplate = function () {
+        return this._getCustomTemplate("footer");
+    };
+    PanelComponent.prototype._getTemplates = function () {
+        this.headerTemplate = this.getHeaderTemplate();
+        this.bodyTemplate = this.getBodyTemplate();
+        this.footerTemplate = this.getFooterTemplate();
+    };
+    __decorate([
+        ContentChildren(TemplateDirective)
+    ], PanelComponent.prototype, "templates", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "header", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "collapsable", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "collapsed", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "severity", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "borderButtonOptions", void 0);
+    PanelComponent = __decorate([
+        Component({
+            selector: "s-panel",
+            template: "<div\n    class=\"panel\"\n    [ngClass]=\"{\n        'panel--success': severity === EnumSeverity.Success,\n        'panel--info': severity === EnumSeverity.Info,\n        'panel--warn': severity === EnumSeverity.Warn,\n        'panel--error': severity === EnumSeverity.Error,\n        'panel--collapsed': collapsed\n    }\">\n    <s-border-button\n        *ngIf=\"\n            borderButtonOptions?.visible\n                ? borderButtonOptions?.visible(severity)\n                : false\n        \"\n        [severity]=\"severity\"\n        [options]=\"borderButtonOptions\"\n        class=\"border-button\"\n        [@BorderButtonAnimation]\n    ></s-border-button>\n\n    <div class=\"header\">\n        <ng-container *ngIf=\"headerTemplate; then customHeaderTemplate; else simpleHeaderTemplate\"></ng-container>\n        <ng-template #customHeaderTemplate>\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        </ng-template>\n        <ng-template #simpleHeaderTemplate>\n            <span>{{ header }}</span>\n        </ng-template>\n\n        <button\n            *ngIf=\"collapsable\"\n            class=\"collapse-button fas\"\n            [ngClass]=\"{\n                'fa-plus': collapsed,\n                'fa-minus': !collapsed\n            }\"\n            (click)=\"collapsed = !collapsed\">\n        </button>\n    </div>\n    <div *ngIf=\"!collapsable || !collapsed\" class=\"panel-content\">\n        <div class=\"body\">\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n        </div>\n        <div *ngIf=\"footerTemplate\" class=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n    </div>\n</div>",
+            animations: [
+                trigger("BorderButtonAnimation", [
+                    transition(":enter", [
+                        style$7({ transform: "scaleY(0)", opacity: 0 }),
+                        animate("300ms ease", style$7({ transform: "scaleY(1)", opacity: 1 })),
+                    ]),
+                    transition(":leave", [
+                        style$7({ transform: "scaleY(1)", opacity: 1 }),
+                        animate("300ms ease", style$7({ transform: "scaleY(0)", opacity: 0 })),
+                    ]),
+                ]),
+            ],
+            styles: [".panel{background-color:#fff;border:1px solid #dedce5;padding:20px;position:relative;transition:border-color .5s}.panel .border-button{position:absolute;right:15px;top:-12px}.panel .header{border-bottom:1px solid #dedce5;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:12px;text-transform:uppercase}.panel .header .collapse-button{background-color:transparent;border:none;color:#212533;cursor:pointer;height:24px;width:24px}.panel .panel-content .body{padding:20px 0}.panel .panel-content .footer{border-top:1px solid #dedce5;padding-top:12px}.panel--success{border-color:#0c9348}.panel--info{border-color:#428bca}.panel--warn{border-color:#f8931f}.panel--error{border-color:#c13018}.panel--collapsed .header{border:none;padding:0}"]
+        })
+    ], PanelComponent);
+    return PanelComponent;
+}());
+
+var PanelModule = /** @class */ (function () {
+    function PanelModule() {
+    }
+    PanelModule = __decorate([
+        NgModule({
+            imports: [CommonModule, BorderButtonModule],
+            declarations: [PanelComponent],
+            exports: [PanelComponent, TemplateModule],
+        })
+    ], PanelModule);
+    return PanelModule;
+}());
+
 var ProductHeaderComponent = /** @class */ (function () {
     function ProductHeaderComponent() {
         this.id = "s-product-header-" + ProductHeaderComponent_1.nextId++;
@@ -17660,71 +17741,6 @@ var ProgressBarModule = /** @class */ (function () {
     return ProgressBarModule;
 }());
 
-var PanelComponent = /** @class */ (function () {
-    function PanelComponent() {
-        this.toggleable = true;
-        this.collapsed = false;
-        this.severity = EnumSeverity.Default;
-        this.collapsedChange = new EventEmitter();
-        this.EnumSeverity = EnumSeverity;
-    }
-    PanelComponent.prototype.onCollapsedChange = function (collapsed) {
-        this.collapsed = collapsed;
-        this.collapsedChange.emit(this.collapsed);
-    };
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "header", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "toggleable", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "collapsed", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "severity", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "borderButtonOptions", void 0);
-    __decorate([
-        Output()
-    ], PanelComponent.prototype, "collapsedChange", void 0);
-    PanelComponent = __decorate([
-        Component({
-            selector: "s-panel",
-            template: "<p-panel\n    [toggleable]=\"toggleable\"\n    [collapsed]=\"collapsed\"\n    [ngClass]=\"{\n        'panel--severity-default': severity === EnumSeverity.Default,\n        'panel--severity-info': severity === EnumSeverity.Info,\n        'panel--severity-warn': severity === EnumSeverity.Warn,\n        'panel--severity-error': severity === EnumSeverity.Error,\n        'panel--severity-success': severity == EnumSeverity.Success\n    }\"\n    (collapsedChange)=\"onCollapsedChange($event)\"\n>\n    <p-header>\n        <s-border-button\n            *ngIf=\"\n                borderButtonOptions?.visible\n                    ? borderButtonOptions?.visible(severity)\n                    : false\n            \"\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"panel__border-button\"\n            [@BorderButtonAnimation]\n        ></s-border-button>\n        <span>\n            {{ header }}\n        </span>\n    </p-header>\n\n    <ng-content></ng-content>\n</p-panel>",
-            animations: [
-                trigger("BorderButtonAnimation", [
-                    transition(":enter", [
-                        style$7({ transform: "scaleY(0)", opacity: 0 }),
-                        animate("300ms ease", style$7({ transform: "scaleY(1)", opacity: 1 })),
-                    ]),
-                    transition(":leave", [
-                        style$7({ transform: "scaleY(1)", opacity: 1 }),
-                        animate("300ms ease", style$7({ transform: "scaleY(0)", opacity: 0 })),
-                    ]),
-                ]),
-            ],
-            styles: [":host{display:block}:host ::ng-deep .ui-panel{position:relative}:host ::ng-deep .panel--severity-default .ui-panel{border-color:#ccc}:host ::ng-deep .panel--severity-info .ui-panel{border-color:#428bca;transition:border-color .5s}:host ::ng-deep .panel--severity-warn .ui-panel{border-color:#f8931f;transition:border-color .5s}:host ::ng-deep .panel--severity-error .ui-panel{border-color:#c13018;transition:border-color .5s}:host ::ng-deep .panel--severity-success .ui-panel{border-color:#0c9348;transition:border-color .5s}.panel__border-button{position:absolute;top:-13px;right:15px;z-index:1}"]
-        })
-    ], PanelComponent);
-    return PanelComponent;
-}());
-
-var PanelModule = /** @class */ (function () {
-    function PanelModule() {
-    }
-    PanelModule = __decorate([
-        NgModule({
-            imports: [CommonModule, PanelModule$1, BorderButtonModule],
-            declarations: [PanelComponent],
-            exports: [PanelComponent],
-        })
-    ], PanelModule);
-    return PanelModule;
-}());
-
 var RatingScaleComponent = /** @class */ (function () {
     function RatingScaleComponent() {
         this.disabled = false;