@seniorsistemas/angular-components 17.14.1 → 17.14.3

package/fesm5/seniorsistemas-angular-components.js

@@ -18303,6 +18303,7 @@ var SlidePanelComponent = /** @class */ (function () {
         this.closeIcon = "fas fa-chevron-left";
         this.cache = false;
         this.createOpen = false;
+        this.noOverlap = false;
         this.panelOpened = new EventEmitter();
         this.panelClosed = new EventEmitter();
         this.isOpen = false;
@@ -18310,7 +18311,6 @@ var SlidePanelComponent = /** @class */ (function () {
         this.isAnimating = false;
         this.isContentAnimationDisabled = true;
         this.slideHeight = 0;
-        this.sideContentWidth = 0;
         this._unsubscribe$ = new Subject();
     }
     SlidePanelComponent_1 = SlidePanelComponent;
@@ -18339,7 +18339,6 @@ var SlidePanelComponent = /** @class */ (function () {
         // to executed at a safe time prior to control returning to the browser's event loop
         queueMicrotask(function () {
             _this._calculateSlideHeight();
-            _this._calculateSideContentWidth();
             _this.isContentAnimationDisabled = false;
         });
     };
@@ -18364,7 +18363,6 @@ var SlidePanelComponent = /** @class */ (function () {
     };
     SlidePanelComponent.prototype.onContentAnimationDone = function () {
         this.isAnimating = false;
-        this._calculateSideContentWidth();
     };
     SlidePanelComponent.prototype._checkOverBehavior = function () {
         this.isSlideOver = window.innerWidth <= SMALL_DEVICE_BREAKPOINT;
@@ -18372,11 +18370,6 @@ var SlidePanelComponent = /** @class */ (function () {
     SlidePanelComponent.prototype._calculateSlideHeight = function () {
         this.slideHeight = this._sideContentRef.nativeElement.clientHeight;
     };
-    SlidePanelComponent.prototype._calculateSideContentWidth = function () {
-        var slidePanelWidth = this._slidePanelRef.nativeElement.getBoundingClientRect().width;
-        var slideContentWidth = this._slideContentRef.nativeElement.getBoundingClientRect().width;
-        this.sideContentWidth = slidePanelWidth - slideContentWidth;
-    };
     var SlidePanelComponent_1;
     SlidePanelComponent.nextId = 0;
     SlidePanelComponent.ctorParameters = function () { return [
@@ -18397,18 +18390,15 @@ var SlidePanelComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], SlidePanelComponent.prototype, "createOpen", void 0);
+    __decorate([
+        Input()
+    ], SlidePanelComponent.prototype, "noOverlap", void 0);
     __decorate([
         Output()
     ], SlidePanelComponent.prototype, "panelOpened", void 0);
     __decorate([
         Output()
     ], SlidePanelComponent.prototype, "panelClosed", void 0);
-    __decorate([
-        ViewChild("slidePanel")
-    ], SlidePanelComponent.prototype, "_slidePanelRef", void 0);
-    __decorate([
-        ViewChild("slideContent")
-    ], SlidePanelComponent.prototype, "_slideContentRef", void 0);
     __decorate([
         ViewChild("sideContent")
     ], SlidePanelComponent.prototype, "_sideContentRef", void 0);
@@ -18418,7 +18408,7 @@ var SlidePanelComponent = /** @class */ (function () {
     SlidePanelComponent = SlidePanelComponent_1 = __decorate([
         Component({
             selector: "s-slide-panel",
-            template: "<div #slidePanel class=\"slide-panel\">\n    <div\n        #slideContent\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    \n        #sideContent\n        class=\"side-content\"\n        [ngStyle]=\"{ 'width.px': sideContentWidth }\">\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]=\"slideContentTemplate\"></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]=\"slideContentTemplate\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #slideContentTemplate>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>",
+            template: "<div class=\"slide-panel\">\n    <div\n        class=\"slide-content\"\n        [ngClass]=\"{\n            'slide-content--closed': !isOpen,\n            'slide-content--over': isSlideOver,\n            'slide-content--no-overlap': noOverlap\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    \n        #sideContent\n        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]=\"slideContentTemplate\"></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]=\"slideContentTemplate\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #slideContentTemplate>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>",
             animations: [
                 trigger("cachelessAnimation", [
                     transition(":enter", [
@@ -18436,7 +18426,7 @@ var SlidePanelComponent = /** @class */ (function () {
                     transition("* => *", animate("200ms")),
                 ]),
             ],
-            styles: [".slide-panel{display:-ms-flexbox;display:flex;width:100%}.slide-panel .slide-content{display:-ms-flexbox;display:flex;position:relative}.slide-panel .slide-content .main-container{background-color:#eeebf2;display:-ms-flexbox;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-panel .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-panel .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-family:\"Font Awesome 5 Pro\";font-size:16px;height:32px;-ms-flex-pack:center;justify-content:center;position:absolute;right:-32px;top:16px;width:32px;z-index:99}.slide-panel .slide-content--closed .main-container{border:none}.slide-panel .slide-content--over{position:absolute}.slide-panel .side-content{display:-ms-flexbox;display:flex;height:-webkit-max-content;height:max-content;overflow:auto;transition:width .1s linear}"]
+            styles: [".slide-panel{display:-ms-flexbox;display:flex;width:100%}.slide-panel .slide-content{display:-ms-flexbox;display:flex;position:relative}.slide-panel .slide-content .main-container{background-color:#eeebf2;display:-ms-flexbox;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-panel .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-panel .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-family:\"Font Awesome 5 Pro\";font-size:16px;height:32px;-ms-flex-pack:center;justify-content:center;position:absolute;right:-32px;top:16px;width:32px;z-index:99}.slide-panel .slide-content--closed .main-container{border:none}.slide-panel .slide-content--over{position:absolute}.slide-panel .slide-content--no-overlap{margin-right:32px}.slide-panel .side-content{display:-ms-flexbox;display:flex;height:-webkit-max-content;height:max-content;overflow:auto;transition:width .1s linear}"]
         })
     ], SlidePanelComponent);
     return SlidePanelComponent;