@seniorsistemas/angular-components 17.12.3 → 17.13.0

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

@@ -17550,7 +17550,7 @@
             core.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;
@@ -17582,6 +17582,87 @@
         return ObjectCardModule;
     }());
 
+    var PanelComponent = /** @class */ (function () {
+        function PanelComponent() {
+            this.collapsable = false;
+            this.collapsed = false;
+            this.severity = exports.EnumSeverity.Default;
+            this.EnumSeverity = exports.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([
+            core.ContentChildren(TemplateDirective)
+        ], PanelComponent.prototype, "templates", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "header", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "collapsable", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "collapsed", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "severity", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "borderButtonOptions", void 0);
+        PanelComponent = __decorate([
+            core.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: [
+                    animations.trigger("BorderButtonAnimation", [
+                        animations.transition(":enter", [
+                            animations.style({ transform: "scaleY(0)", opacity: 0 }),
+                            animations.animate("300ms ease", animations.style({ transform: "scaleY(1)", opacity: 1 })),
+                        ]),
+                        animations.transition(":leave", [
+                            animations.style({ transform: "scaleY(1)", opacity: 1 }),
+                            animations.animate("300ms ease", animations.style({ 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([
+            core.NgModule({
+                imports: [common.CommonModule, BorderButtonModule],
+                declarations: [PanelComponent],
+                exports: [PanelComponent, TemplateModule],
+            })
+        ], PanelModule);
+        return PanelModule;
+    }());
+
     var ProductHeaderComponent = /** @class */ (function () {
         function ProductHeaderComponent() {
             this.id = "s-product-header-" + ProductHeaderComponent_1.nextId++;
@@ -17805,71 +17886,6 @@
         return ProgressBarModule;
     }());
 
-    var PanelComponent = /** @class */ (function () {
-        function PanelComponent() {
-            this.toggleable = true;
-            this.collapsed = false;
-            this.severity = exports.EnumSeverity.Default;
-            this.collapsedChange = new core.EventEmitter();
-            this.EnumSeverity = exports.EnumSeverity;
-        }
-        PanelComponent.prototype.onCollapsedChange = function (collapsed) {
-            this.collapsed = collapsed;
-            this.collapsedChange.emit(this.collapsed);
-        };
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "header", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "toggleable", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "collapsed", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "severity", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "borderButtonOptions", void 0);
-        __decorate([
-            core.Output()
-        ], PanelComponent.prototype, "collapsedChange", void 0);
-        PanelComponent = __decorate([
-            core.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: [
-                    animations.trigger("BorderButtonAnimation", [
-                        animations.transition(":enter", [
-                            animations.style({ transform: "scaleY(0)", opacity: 0 }),
-                            animations.animate("300ms ease", animations.style({ transform: "scaleY(1)", opacity: 1 })),
-                        ]),
-                        animations.transition(":leave", [
-                            animations.style({ transform: "scaleY(1)", opacity: 1 }),
-                            animations.animate("300ms ease", animations.style({ 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([
-            core.NgModule({
-                imports: [common.CommonModule, panel.PanelModule, BorderButtonModule],
-                declarations: [PanelComponent],
-                exports: [PanelComponent],
-            })
-        ], PanelModule);
-        return PanelModule;
-    }());
-
     var RatingScaleComponent = /** @class */ (function () {
         function RatingScaleComponent() {
             this.disabled = false;