@seniorsistemas/angular-components 16.8.0 → 16.9.1

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

@@ -4790,7 +4790,7 @@
             core.Component({
                 selector: "s-loading-state",
                 template: "<div\n    [id]=\"id\"\n    class=\"s-loading-state-container\"\n    [ngClass]=\"{'loading': loading, 'blocking': blocking, 'fullscreen': blockWindow}\">\n    <div\n        [id]=\"id + '-loader'\"\n        class=\"loader\">\n        <div\n            [id]=\"id + '-spinner'\"\n            class=\"spinner\">\n            <div class=\"bounce bounce-1\"></div>\n            <div class=\"bounce bounce-2\"></div>\n            <div class=\"bounce bounce-3\"></div>\n        </div>\n        <div\n            [id]=\"id + '-overlay'\"\n            class=\"overlay\">\n        </div>\n    </div>\n    <div\n        [id]=\"id + '-contents'\"\n        class=\"contents\">\n        <ng-container *ngTemplateOutlet=\"contents || originalContent\"></ng-container>\n        <ng-template #originalContent>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n</div>",
-                styles: [".s-loading-state-container{position:relative}.s-loading-state-container>.loader{height:100%;opacity:0;position:absolute;transition:opacity .2s ease-out,display .2s ease-out;visibility:hidden;width:100%}.s-loading-state-container>.loader>.overlay{background-color:#fff;height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}.s-loading-state-container>.loader>.spinner{display:table;left:50%;position:absolute;text-align:center;top:calc(50% - 9px);transform:translate(-50%);vertical-align:middle;z-index:2}.s-loading-state-container.blocking>.loader,.s-loading-state-container.loading>.loader{visibility:visible}.s-loading-state-container.blocking>.loader,.s-loading-state-container.blocking>.loader>.overlay,.s-loading-state-container.loading>.loader,.s-loading-state-container.loading>.loader>.overlay{cursor:wait;z-index:1}.s-loading-state-container.blocking>.contents,.s-loading-state-container.loading>.contents{z-index:0!important}.s-loading-state-container.loading>.loader>.spinner>.bounce{animation:1.2s ease-out infinite bounce;background-color:#333;border-radius:100%;display:inline-block;height:10px;width:10px}.s-loading-state-container.loading>.loader>.spinner>.bounce+.bounce{margin-left:15px}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-1{animation-delay:0s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-2{animation-delay:.1s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-3{animation-delay:.2s}.s-loading-state-container.blocking.loading>.loader{opacity:1}.s-loading-state-container.fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}@keyframes bounce{100%,80%{transform:scale(1)}90%{transform:scale(1.8)}}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.contents{z-index:0!important}"]
+                styles: [".s-loading-state-container{position:relative}.s-loading-state-container>.loader{opacity:0;position:absolute;transition:opacity .2s ease-out,display .2s ease-out;visibility:hidden;inset:1px}.s-loading-state-container>.loader>.overlay{background-color:#fff;height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}.s-loading-state-container>.loader>.spinner{display:table;left:50%;position:absolute;text-align:center;top:calc(50% - 9px);transform:translate(-50%);vertical-align:middle;z-index:2}.s-loading-state-container.blocking>.loader,.s-loading-state-container.loading>.loader{visibility:visible}.s-loading-state-container.blocking>.loader,.s-loading-state-container.blocking>.loader>.overlay,.s-loading-state-container.loading>.loader,.s-loading-state-container.loading>.loader>.overlay{cursor:wait;z-index:1}.s-loading-state-container.blocking>.contents,.s-loading-state-container.loading>.contents{z-index:0!important}.s-loading-state-container.loading>.loader>.spinner>.bounce{animation:1.2s ease-out infinite bounce;background-color:#333;border-radius:100%;display:inline-block;height:10px;width:10px}.s-loading-state-container.loading>.loader>.spinner>.bounce+.bounce{margin-left:15px}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-1{animation-delay:0s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-2{animation-delay:.1s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-3{animation-delay:.2s}.s-loading-state-container.blocking.loading>.loader{opacity:1}.s-loading-state-container.fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}@keyframes bounce{100%,80%{transform:scale(1)}90%{transform:scale(1.8)}}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.contents{z-index:0!important}"]
             })
         ], LoadingStateComponent);
         return LoadingStateComponent;
@@ -7768,11 +7768,11 @@
                 this.value = value;
             }
         };
-        CustomFieldsComponent.prototype.setDisabledState = function (state) {
-            if (state)
-                this.formGroup.disable();
+        CustomFieldsComponent.prototype.setDisabledState = function (isDisabled) {
+            if (isDisabled)
+                this.formGroup.disable({ emitEvent: false });
             else
-                this.formGroup.enable();
+                this.formGroup.enable({ emitEvent: false });
         };
         CustomFieldsComponent.prototype.getCustomFields = function () {
             if (this.entityObject && this.entityObject.entity_) {
@@ -8945,6 +8945,15 @@
         return ObjectCardMainComponent;
     }());
 
+
+    (function (EnumSeverity) {
+        EnumSeverity["Default"] = "Default";
+        EnumSeverity["Info"] = "Info";
+        EnumSeverity["Warn"] = "Warn";
+        EnumSeverity["Error"] = "Error";
+        EnumSeverity["Success"] = "Success";
+    })(exports.EnumSeverity || (exports.EnumSeverity = {}));
+
     var elementResizeDetectorMaker = elementResizeDetectorMaker_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
     var ObjectCardComponent = /** @class */ (function () {
         function ObjectCardComponent(cdr, elementRef) {
@@ -8957,6 +8966,8 @@
             this.fieldsMinWidth = 200;
             this.expandedChange = new core.EventEmitter();
             this.maxVisibleFields = 0;
+            this.severity = exports.EnumSeverity.Default;
+            this.EnumSeverity = exports.EnumSeverity;
         }
         ObjectCardComponent_1 = ObjectCardComponent;
         ObjectCardComponent.prototype.ngAfterViewInit = function () {
@@ -9058,10 +9069,16 @@
         __decorate([
             core.ContentChildren(ObjectCardFieldComponent, { descendants: true })
         ], ObjectCardComponent.prototype, "fields", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardComponent.prototype, "severity", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
         ObjectCardComponent = ObjectCardComponent_1 = __decorate([
             core.Component({
                 selector: "s-object-card",
-                template: "<div [id]=\"id\" class=\"container\">\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        [ngClass]=\"{\n            'with-hidden-fields': fields.length > maxVisibleFields,\n            'with-visible-fields': fields.length && maxVisibleFields\n        }\"\n    >\n        <div class=\"object-content\">\n            <div class=\"s-object-card-main\"><ng-content select=\"s-object-card-main\"></ng-content></div>\n\n            <div class=\"divider\" *ngIf=\"maxVisibleFields && fields.length\"></div>\n\n            <div *ngFor=\"let field of (fields.toArray() | slice: 0:maxVisibleFields)\" class=\"s-object-card-field\">\n                <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n            </div>\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            (click)=\"toggle()\"\n            [pTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n        >\n            <span [id]=\"id + '-expand-icon'\" class=\"expand-icon fa\" [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"></span>\n        </div>\n    </div>\n\n    <div [id]=\"id + '-expandable-container'\" [@expandableContent]=\"expanded\" class=\"expandable-container\">\n        <div class=\"ui-g ui-g-12\">\n            <ng-container *ngFor=\"let field of (fields.toArray() | slice: maxVisibleFields:fields.length)\">\n                <div class=\"ui-g-{{getExpandedFieldWidth()}}\">\n                    <div class=\"s-object-card-field\"><ng-container *ngTemplateOutlet=\"field.content\"></ng-container></div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n",
+                template: "<div [id]=\"id\" class=\"container\">\n    <s-border-button\n        *ngIf=\"\n            borderButtonOptions?.visible\n                ? borderButtonOptions?.visible(severity)\n                : false\n        \"\n        [severity]=\"severity\"\n        [options]=\"borderButtonOptions\"\n        class=\"object-card__border-button\"\n        [@BorderButtonAnimation]\n    ></s-border-button>\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        [ngClass]=\"{\n            'with-hidden-fields': fields.length > maxVisibleFields,\n            'with-visible-fields': fields.length && maxVisibleFields,\n            'main-container--severity-default': severity === EnumSeverity.Default,\n            'main-container--severity-info': severity === EnumSeverity.Info,\n            'main-container--severity-warn': severity === EnumSeverity.Warn,\n            'main-container--severity-error': severity === EnumSeverity.Error,\n            'main-container--severity-success': severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"object-content\">\n            <div class=\"s-object-card-main\"><ng-content select=\"s-object-card-main\"></ng-content></div>\n\n            <div class=\"divider\" *ngIf=\"maxVisibleFields && fields.length\"></div>\n\n            <div *ngFor=\"let field of (fields.toArray() | slice: 0:maxVisibleFields)\" class=\"s-object-card-field\">\n                <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n            </div>\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            (click)=\"toggle()\"\n            [pTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n        >\n            <span [id]=\"id + '-expand-icon'\" class=\"expand-icon fa\" [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default':\n                severity === EnumSeverity.Default,\n            'expandable-container--severity-info': severity === EnumSeverity.Info,\n            'expandable-container--severity-warn': severity === EnumSeverity.Warn,\n            'expandable-container--severity-error': severity === EnumSeverity.Error,\n            'expandable-container--severity-success':\n                severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"ui-g ui-g-12\">\n            <ng-container\n                *ngFor=\"\n                    let field of fields.toArray()\n                        | slice : maxVisibleFields : fields.length\n                \"\n            >\n                <div class=\"ui-g-{{ getExpandedFieldWidth() }}\">\n                    <div class=\"s-object-card-field\">\n                        <ng-container\n                            *ngTemplateOutlet=\"field.content\"\n                        ></ng-container>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n",
                 animations: [
                     animations.trigger("expandableContent", [
                         animations.state("*", animations.style({
@@ -9076,19 +9093,64 @@
                         animations.transition("* => true", animations.animate("200ms ease-out")),
                         animations.transition("false <=> true", animations.animate("200ms ease-out")),
                     ]),
+                    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}.container{margin-bottom:20px}.main-container{display:-ms-flexbox;display:flex}.expandable-container,.main-container{background-color:#fff;border:1px solid #ccc;position:relative;overflow:hidden;width:100%}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:none;text-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;width:25px;position:absolute;right:15px;height:25px;top:calc(50% - 12px)}.expand-icon{-ms-flex:1;flex:1}.object-content{display:-ms-flexbox;display:flex;width:100%}.s-object-card-main{-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;-ms-flex-negative:0;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:-ms-flexbox;display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width:767px){.s-object-card-main{max-width:calc(100% - 50px)}}"]
+                styles: [":host{display:block}.container{margin-bottom:20px;position:relative}.main-container{display:-ms-flexbox;display:flex}.expandable-container,.main-container{background-color:#fff;border:1px solid #ccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s;border-color:#c13018}.main-container--severity-success{transition:border-color .5s;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:none;text-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;width:25px;position:absolute;right:15px;height:25px;top:calc(50% - 12px)}.expand-icon{-ms-flex:1;flex:1}.object-content{display:-ms-flexbox;display:flex;width:100%}.s-object-card-main{-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;-ms-flex-negative:0;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:-ms-flexbox;display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width:767px){.s-object-card-main{max-width:calc(100% - 50px)}}"]
             })
         ], ObjectCardComponent);
         return ObjectCardComponent;
     }());
 
+    var BorderButtonComponent = /** @class */ (function () {
+        function BorderButtonComponent() {
+            this.severity = exports.EnumSeverity.Default;
+            this.EnumSeverity = exports.EnumSeverity;
+            this.TooltipPosition = exports.TooltipPosition;
+        }
+        __decorate([
+            core.Input()
+        ], BorderButtonComponent.prototype, "severity", void 0);
+        __decorate([
+            core.Input()
+        ], BorderButtonComponent.prototype, "options", void 0);
+        BorderButtonComponent = __decorate([
+            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}"]
+            })
+        ], BorderButtonComponent);
+        return BorderButtonComponent;
+    }());
+
+    var BorderButtonModule = /** @class */ (function () {
+        function BorderButtonModule() {
+        }
+        BorderButtonModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, TooltipModule],
+                declarations: [BorderButtonComponent],
+                exports: [BorderButtonComponent]
+            })
+        ], BorderButtonModule);
+        return BorderButtonModule;
+    }());
+
     var ObjectCardModule = /** @class */ (function () {
         function ObjectCardModule() {
         }
         ObjectCardModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule, tooltip.TooltipModule, ThumbnailModule, ButtonModule],
+                imports: [common.CommonModule, tooltip.TooltipModule, ThumbnailModule, ButtonModule, BorderButtonModule],
                 declarations: [ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
                 exports: [ThumbnailModule, ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
             })
@@ -11936,6 +11998,71 @@
         ProgressBarColors["Yellow"] = "yellow";
     })(exports.ProgressBarColors || (exports.ProgressBarColors = {}));
 
+    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 fallback = {
         "platform.angular_components.country_name_br": "Brasil",
         "platform.angular_components.country_name_us": "Estados Unidos",
@@ -12253,6 +12380,8 @@
     exports.ObjectCardMainComponent = ObjectCardMainComponent;
     exports.ObjectCardModule = ObjectCardModule;
     exports.Option = Option;
+    exports.PanelComponent = PanelComponent;
+    exports.PanelModule = PanelModule;
     exports.PasswordField = PasswordField;
     exports.PasswordStrengthComponent = PasswordStrengthComponent;
     exports.PasswordStrengthDirective = PasswordStrengthDirective;
@@ -12309,23 +12438,25 @@
     exports.ɵbj = FooterComponent;
     exports.ɵbk = NumberLocaleOptions;
     exports.ɵbl = ThumbnailService;
-    exports.ɵbm = TimelineItemModule;
-    exports.ɵbn = TimelineIconItemComponent;
-    exports.ɵbo = HorizontalTimelineModule;
-    exports.ɵbp = HorizontalTimelineComponent;
-    exports.ɵbq = VerticalTimelineModule;
-    exports.ɵbr = VerticalTimelineComponent;
-    exports.ɵbs = RangeLineComponent;
-    exports.ɵbt = CollapseOptionComponent;
-    exports.ɵbu = CollapsedItemsComponent;
-    exports.ɵbv = VerticalItemsComponent;
-    exports.ɵbw = InfiniteScrollModule;
-    exports.ɵbx = InfiniteScrollDirective;
-    exports.ɵby = CustomTranslationsModule;
-    exports.ɵbz = CodeEditorComponent;
+    exports.ɵbm = BorderButtonModule;
+    exports.ɵbn = BorderButtonComponent;
+    exports.ɵbo = TimelineItemModule;
+    exports.ɵbp = TimelineIconItemComponent;
+    exports.ɵbq = HorizontalTimelineModule;
+    exports.ɵbr = HorizontalTimelineComponent;
+    exports.ɵbs = VerticalTimelineModule;
+    exports.ɵbt = VerticalTimelineComponent;
+    exports.ɵbu = RangeLineComponent;
+    exports.ɵbv = CollapseOptionComponent;
+    exports.ɵbw = CollapsedItemsComponent;
+    exports.ɵbx = VerticalItemsComponent;
+    exports.ɵby = InfiniteScrollModule;
+    exports.ɵbz = InfiniteScrollDirective;
     exports.ɵc = LocalizedBignumberPipe;
-    exports.ɵca = CoreFacade;
-    exports.ɵcb = CodeMirror6Core;
+    exports.ɵca = CustomTranslationsModule;
+    exports.ɵcb = CodeEditorComponent;
+    exports.ɵcc = CoreFacade;
+    exports.ɵcd = CodeMirror6Core;
     exports.ɵd = LocalizedBignumberImpurePipe;
     exports.ɵe = TooltipComponent;
     exports.ɵf = TooltipDirective;