@seniorsistemas/angular-components 16.11.2 → 16.12.0

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

@@ -288,17 +288,16 @@
         AccordionPanelComponent = __decorate([
             core.Component({
                 selector: "s-accordion-panel",
-                template: "<div\n    class=\"accordion-panel\"\n    [ngClass]=\"{\n        'accordion-panel--open': isOpen,\n        'accordion-panel--disabled': disabled\n    }\">\n    <div class=\"header\" (click)=\"onTabClick()\">\n        <div class=\"header__title\">\n            <span class=\"icon\" [ngClass]=\"isOpen ? 'fas fa-minus' : 'fas fa-plus'\"></span>\n            <span\n                *ngIf=\"validationMessage\"\n                class=\"exclamation-icon fas fa-exclamation-circle\"\n                [sTooltip]=\"validationMessage\">\n            </span>\n            <span class=\"title\">{{ header }}</span>\n        </div>\n        <div class=\"header__controls\">\n            <button\n                *ngFor=\"let button of buttons\"\n                class=\"icon-button\"\n                [ngClass]=\"button.icon\"\n                (click)=\"onIconButtonsClick($event, button.onClick)\">\n            </button>\n            <p-inputSwitch\n                *ngIf=\"switch\"\n                class=\"switch\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"switchState\"\n                (click)=\"$event.stopPropagation()\"\n                (onChange)=\"switch.onChange($event)\">\n            </p-inputSwitch>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cache; then thenBlock else elseBlock\"></ng-container>\n</div>\n\n<ng-template #thenBlock>\n    <div\n        class=\"content\"\n        [hidden]=\"!isOpen\"\n        @contentAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@contentAnimation.start)=\"onContentAnimationStart()\"\n        (@contentAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #elseBlock>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content\"\n        @contentAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"        \n        (@contentAnimation.start)=\"onContentAnimationStart()\"\n        (@contentAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>",
+                template: "<div\n    class=\"accordion-panel\"\n    [ngClass]=\"{\n        'accordion-panel--open': isOpen,\n        'accordion-panel--disabled': disabled\n    }\">\n    <div class=\"header\" (click)=\"onTabClick()\">\n        <div class=\"header__title\">\n            <span class=\"icon\" [ngClass]=\"isOpen ? 'fas fa-minus' : 'fas fa-plus'\"></span>\n            <span\n                *ngIf=\"validationMessage\"\n                class=\"exclamation-icon fas fa-exclamation-circle\"\n                [sTooltip]=\"validationMessage\">\n            </span>\n            <span class=\"title\">{{ header }}</span>\n        </div>\n        <div class=\"header__controls\">\n            <button\n                *ngFor=\"let button of buttons\"\n                class=\"icon-button\"\n                [ngClass]=\"button.icon\"\n                (click)=\"onIconButtonsClick($event, button.onClick)\">\n            </button>\n            <p-inputSwitch\n                *ngIf=\"switch\"\n                class=\"switch\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"switchState\"\n                (click)=\"$event.stopPropagation()\"\n                (onChange)=\"switch.onChange($event)\">\n            </p-inputSwitch>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n</div>\n\n<ng-template #cacheTemplate>\n    <div\n        class=\"content\"\n        [@cacheAnimation]=\"isOpen\"\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cacheAnimation.start)=\"onContentAnimationStart()\"\n        (@cacheAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content\"\n        @cachelessAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n        (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #panelContent>\n    <ng-content></ng-content>\n</ng-template>",
                 animations: [
-                    animations.trigger("contentAnimation", [
-                        animations.transition(":enter", [
-                            animations.style({ height: "0" }),
-                            animations.animate("200ms linear", animations.style({ height: "*" })),
-                        ]),
-                        animations.transition(":leave", [
-                            animations.style({ height: "*" }),
-                            animations.animate("200ms linear", animations.style({ height: "0" })),
-                        ]),
+                    animations.trigger("cachelessAnimation", [
+                        animations.transition(":enter", [animations.style({ height: "0" }), animations.animate("200ms linear", animations.style({ height: "*" }))]),
+                        animations.transition(":leave", [animations.style({ height: "*" }), animations.animate("200ms linear", animations.style({ height: "0" }))]),
+                    ]),
+                    animations.trigger("cacheAnimation", [
+                        animations.state("true", animations.style({ height: "*" })),
+                        animations.state("false", animations.style({ height: '0px' })),
+                        animations.transition("* => *", animations.animate("200ms")),
                     ]),
                 ],
                 styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{-ms-flex-align:center;align-items:center;background-color:#fff;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.accordion-panel .header .header__title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{color:#c13018;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .title{font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:700;line-height:150%;text-transform:uppercase}.accordion-panel .header .header__controls{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin-left:16px}.accordion-panel .header .header__controls .icon-button{color:#212533;cursor:pointer;font-size:1rem;margin-left:16px;border:none;background:0 0}.accordion-panel .header .header__controls .switch{padding-left:16px}.accordion-panel .content{background-color:#fff;overflow:hidden}.accordion-panel .content .content-container{margin:20px}.accordion-panel--open .header{background-color:#eeebf2;border-bottom:1px solid #c1c1cc}.accordion-panel--disabled .header{cursor:auto}.accordion-panel--disabled .header .header__title .icon,.accordion-panel--disabled .header .header__title .title{color:#c1c1cc}.accordion-panel--disabled .header .header__controls .icon-button{color:#c1c1cc;cursor:auto}"]
@@ -1810,9 +1809,10 @@
         ControlErrorsComponent_1 = ControlErrorsComponent;
         ControlErrorsComponent.prototype.getErrorMessagesList = function () {
             var _this = this;
-            if (!this.control || !this.control.dirty)
+            if (!this.control || !this.control.dirty) {
                 return [];
-            return Object.keys(this.control.errors || {}).map(function (error) { return _this.errorMessages[error]; });
+            }
+            return Object.keys(this.control.errors || {}).map(function (error) { var _a; return (_a = _this.errorMessages) === null || _a === void 0 ? void 0 : _a[error]; });
         };
         var ControlErrorsComponent_1;
         ControlErrorsComponent.nextId = 0;
@@ -9688,6 +9688,125 @@
         return SidebarModule;
     }());
 
+    var SMALL_DEVICE_BREAKPOINT = 420;
+    var SlideBarComponent = /** @class */ (function () {
+        function SlideBarComponent() {
+            this.openIcon = "fas fa-chevron-right";
+            this.closeIcon = "fas fa-chevron-left";
+            this.cache = false;
+            this.barOpened = new core.EventEmitter();
+            this.barClosed = new core.EventEmitter();
+            this.slideHeight = 0;
+            this.isOpen = false;
+            this.isSlideOver = false;
+            this.isAnimating = false;
+            this.isContentAnimationDisabled = true;
+        }
+        SlideBarComponent.prototype.onResize = function () {
+            this._checkOverBehavior();
+        };
+        SlideBarComponent.prototype.ngOnInit = function () {
+            this._checkOverBehavior();
+        };
+        SlideBarComponent.prototype.ngAfterViewChecked = function () {
+            var _this = this;
+            // to executed at a safe time prior to control returning to the browser's event loop
+            queueMicrotask(function () {
+                _this._calculateSlideHeight();
+                _this.isContentAnimationDisabled = false;
+            });
+        };
+        SlideBarComponent.prototype.onClickButton = function () {
+            if (this.isAnimating) {
+                return;
+            }
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.barOpened.emit();
+            }
+            else {
+                this.barClosed.emit();
+            }
+        };
+        SlideBarComponent.prototype.onContentAnimationStart = function () {
+            this.isAnimating = true;
+        };
+        SlideBarComponent.prototype.onContentAnimationDone = function () {
+            this.isAnimating = false;
+        };
+        SlideBarComponent.prototype._checkOverBehavior = function () {
+            this.isSlideOver = window.innerWidth <= SMALL_DEVICE_BREAKPOINT;
+        };
+        SlideBarComponent.prototype._calculateSlideHeight = function () {
+            this.slideHeight = this.sideContent.nativeElement.clientHeight;
+        };
+        __decorate([
+            core.Input()
+        ], SlideBarComponent.prototype, "openIcon", void 0);
+        __decorate([
+            core.Input()
+        ], SlideBarComponent.prototype, "closeIcon", void 0);
+        __decorate([
+            core.Input()
+        ], SlideBarComponent.prototype, "cache", void 0);
+        __decorate([
+            core.Output()
+        ], SlideBarComponent.prototype, "barOpened", void 0);
+        __decorate([
+            core.Output()
+        ], SlideBarComponent.prototype, "barClosed", void 0);
+        __decorate([
+            core.ViewChild("mainContainer")
+        ], SlideBarComponent.prototype, "mainContainer", void 0);
+        __decorate([
+            core.ViewChild("sideContent")
+        ], SlideBarComponent.prototype, "sideContent", void 0);
+        __decorate([
+            core.HostListener("window:resize")
+        ], SlideBarComponent.prototype, "onResize", null);
+        SlideBarComponent = __decorate([
+            core.Component({
+                selector: "s-slide-bar",
+                template: "<div class=\"slide-bar\">\n    <div\n        class=\"slide-content\"\n        [ngClass]=\"{\n            'slide-content--closed': !isOpen,\n            'slide-content--over': isSlideOver\n        }\">\n        <div\n            #mainContainer\n            class=\"main-container\"\n            [style.maxHeight]=\"slideHeight + 'px'\">\n            <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n        </div>\n        <button\n            class=\"button\"\n            [ngClass]=\"isOpen ? closeIcon : openIcon\"\n            (click)=\"onClickButton()\">\n        </button>\n    </div>\n    <div #sideContent class=\"side-content\">\n        <ng-content select=\"[side-content]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #cacheTemplate>\n    <div\n        class=\"content-container\"\n        [@cacheAnimation]=\"isOpen\"\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cacheAnimation.start)=\"onContentAnimationStart()\"\n        (@cacheAnimation.done)=\"onContentAnimationDone()\">\n        <ng-container [ngTemplateOutlet]=\"slideContent\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content-container\"\n        @cachelessAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n        (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n        <ng-container [ngTemplateOutlet]=\"slideContent\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #slideContent>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>",
+                animations: [
+                    animations.trigger("cachelessAnimation", [
+                        animations.transition(":enter", [
+                            animations.style({ width: "0" }),
+                            animations.animate("200ms linear", animations.style({ width: "*" })),
+                        ]),
+                        animations.transition(":leave", [
+                            animations.style({ width: "*" }),
+                            animations.animate("200ms linear", animations.style({ width: "0" })),
+                        ]),
+                    ]),
+                    animations.trigger("cacheAnimation", [
+                        animations.state("true", animations.style({ width: "*", padding: '0 16px' })),
+                        animations.state("false", animations.style({ width: '0px', padding: '0' })),
+                        animations.transition("* => *", animations.animate("200ms")),
+                    ]),
+                ],
+                styles: [".slide-bar{display:-ms-flexbox;display:flex}.slide-bar .slide-content{display:-ms-flexbox;display:flex;position:relative}.slide-bar .slide-content .main-container{background-color:#eeebf2;display:-ms-flexbox;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-bar .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-bar .slide-content .button{-ms-flex-align:center;align-items:center;background-color:#eeebf2;border:1px solid #ccc;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:-ms-flexbox;display:flex;font-size:16px;height:32px;-ms-flex-pack:center;justify-content:center;position:absolute;right:-32px;top:16px;width:32px}.slide-bar .slide-content--closed .main-container{border:none}.slide-bar .slide-content--over{position:absolute}.slide-bar .side-content{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;height:-webkit-max-content;height:max-content}"]
+            })
+        ], SlideBarComponent);
+        return SlideBarComponent;
+    }());
+
+    var SlideBarModule = /** @class */ (function () {
+        function SlideBarModule() {
+        }
+        SlideBarModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    animations$1.BrowserAnimationsModule,
+                ],
+                declarations: [SlideBarComponent],
+                exports: [SlideBarComponent],
+            })
+        ], SlideBarModule);
+        return SlideBarModule;
+    }());
+
     var StatsCardComponent = /** @class */ (function () {
         function StatsCardComponent() {
             this.id = "s-stats-card-" + StatsCardComponent_1.nextId++;
@@ -12901,6 +13020,8 @@
     exports.SelectOption = SelectOption;
     exports.SidebarComponent = SidebarComponent;
     exports.SidebarModule = SidebarModule;
+    exports.SlideBarComponent = SlideBarComponent;
+    exports.SlideBarModule = SlideBarModule;
     exports.SplitButtonComponent = SplitButtonComponent;
     exports.SplitButtonModule = SplitButtonModule;
     exports.StatsCardComponent = StatsCardComponent;