@seniorsistemas/angular-components 17.7.1 → 17.7.2

package/fesm5/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __assign, __extends, __spread, __awaiter, __generator, __param, __values, __rest, __read } from 'tslib';
-import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, KeyValueDiffers, HostBinding, Renderer2, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, Optional, ContentChild } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, KeyValueDiffers, HostBinding, Renderer2, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, Optional, ContentChild, ViewChildren } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, forkJoin } from 'rxjs';
 import { takeUntil, tap, map, switchMap, catchError, first, filter, take, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
@@ -17164,18 +17164,34 @@ var TimelineItem = /** @class */ (function () {
 }());
 
 var WorkspaceSwitchComponent = /** @class */ (function () {
-    function WorkspaceSwitchComponent(eRef) {
+    function WorkspaceSwitchComponent(eRef, changeDetectorRef) {
         this.eRef = eRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.footerButtonLabel = "Adicionar";
         this.showFooterButton = true;
         this.disabled = false;
         this.footerButtonClicked = new EventEmitter();
         this.selected = new EventEmitter();
-        this.open = false;
+        this.height = 0;
         this.selectedItemIndex = 0;
         this.currentItemIndex = 0;
+        this._open = false;
         this.tabindex = 0;
     }
+    Object.defineProperty(WorkspaceSwitchComponent.prototype, "open", {
+        get: function () {
+            return this._open;
+        },
+        set: function (open) {
+            this._open = open;
+            this.changeDetectorRef.detectChanges();
+            if (open) {
+                this._calculateListMaxHeight();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     WorkspaceSwitchComponent.prototype.onClickout = function (event) {
         if (!this.eRef.nativeElement.contains(event.target)) {
             this.open = false;
@@ -17199,11 +17215,13 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
         else if (event.key === "ArrowDown") {
             if (this.currentItemIndex < this.workspaces.length - 1) {
                 this.currentItemIndex++;
+                this._scrollToCurrentItem();
             }
         }
         else if (event.key === "ArrowUp") {
             if (this.currentItemIndex > 0) {
                 this.currentItemIndex--;
+                this._scrollToCurrentItem();
             }
         }
     };
@@ -17234,8 +17252,21 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
         this.open = false;
         this.footerButtonClicked.emit();
     };
+    WorkspaceSwitchComponent.prototype._calculateListMaxHeight = function () {
+        var workspaceListRef = this.eRef.nativeElement.querySelector("#workspace-list");
+        var top = workspaceListRef.getBoundingClientRect().top;
+        this.height = window.innerHeight - top - 20 - (this.showFooterButton ? 64 : 0);
+        this.changeDetectorRef.detectChanges();
+    };
+    WorkspaceSwitchComponent.prototype._scrollToCurrentItem = function () {
+        var currentItem = this.listItems.toArray()[this.currentItemIndex];
+        if (currentItem) {
+            currentItem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
     WorkspaceSwitchComponent.ctorParameters = function () { return [
-        { type: ElementRef }
+        { type: ElementRef },
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
@@ -17255,6 +17286,9 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], WorkspaceSwitchComponent.prototype, "selected", void 0);
+    __decorate([
+        ViewChildren('listItem')
+    ], WorkspaceSwitchComponent.prototype, "listItems", void 0);
     __decorate([
         HostBinding("attr.tabindex")
     ], WorkspaceSwitchComponent.prototype, "tabindex", void 0);
@@ -17267,8 +17301,8 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
     WorkspaceSwitchComponent = __decorate([
         Component({
             selector: "s-workspace-switch",
-            template: "<div\n   class=\"workspace-switch\"\n   [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n   (blur)=\"buttonOnBlur()\">\n   <div class=\"button\" (click)=\"open = !open\">\n      <div class=\"item\">\n         <span class=\"title\">{{ workspaces[selectedItemIndex].title }}</span>\n         <span class=\"subtitle\">{{ workspaces[selectedItemIndex].subtitle }}</span>\n      </div>\n      <div class=\"icons\">\n         <span class=\"fas fa-chevron-up\"></span>\n         <span class=\"fas fa-chevron-down\"></span>\n      </div>\n   </div>\n   <div *ngIf=\"!disabled && open\" class=\"select\">\n      <div\n         *ngFor=\"let workspace of workspaces; let i = index\"\n         class=\"workspace\"\n         [ngClass]=\"{\n            'workspace--focused': i == currentItemIndex && !workspace.disabled,\n            'workspace--disabled': workspace.disabled\n         }\"\n         (click)=\"onSelectItem(workspace)\">\n         <div class=\"item\">\n            <span class=\"title\">{{ workspace.title }}</span>\n            <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n         </div>\n         <span *ngIf=\"i === selectedItemIndex\" class=\"active-icon fas fa-check\"></span>\n      </div>\n      <div *ngIf=\"showFooterButton\" class=\"footer\">\n         <div class=\"footer__button\" (click)=\"onFooterButtonClick()\">\n            <span class=\"footer__button__icon fas fa-plus\"></span>\n            <span class=\"footer__button__title\">{{ footerButtonLabel }}</span>\n         </div>\n      </div>\n   </div>\n</div>",
-            styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{-ms-flex-align:center;align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;margin:0 12px}.workspace-switch .select{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;margin:20px 0;padding-top:4px;position:absolute;width:324px}.workspace-switch .select .workspace{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none}.workspace-switch .select .workspace .active-icon{color:#7892a1;font-size:12px;margin:0 12px}.workspace-switch .select .workspace--focused{background-color:#f1f7f8}.workspace-switch .select .workspace--disabled .item .subtitle,.workspace-switch .select .workspace--disabled .item .title{color:#c1c1cc}.workspace-switch .select .workspace:hover:not(.workspace--disabled){background-color:#f1f7f8}.workspace-switch .select .footer{border-top:1px solid #ccc;padding:12px}.workspace-switch .select .footer .footer__button{-ms-flex-align:center;align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.workspace-switch .select .footer .footer__button .footer__button__icon{color:#333;margin-right:8px}.workspace-switch .select .footer .footer__button:active{border:1px solid #428bca}.workspace-switch .item{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding:12px}.workspace-switch .item .title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;text-transform:uppercase}.workspace-switch .item .subtitle{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.workspace-switch:focus{border:1px solid #428bca}.workspace-switch--disabled .button{cursor:default}.workspace-switch--disabled .button .icons,.workspace-switch--disabled .item .subtitle,.workspace-switch--disabled .item .title{color:#ccc}"]
+            template: "<div\n   class=\"workspace-switch\"\n   [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n   (blur)=\"buttonOnBlur()\">\n   <div class=\"button\" (click)=\"open = !open\">\n      <div class=\"item\">\n         <span class=\"title\">{{ workspaces[selectedItemIndex].title }}</span>\n         <span class=\"subtitle\">{{ workspaces[selectedItemIndex].subtitle }}</span>\n      </div>\n      <div class=\"icons\">\n         <span class=\"fas fa-chevron-up\"></span>\n         <span class=\"fas fa-chevron-down\"></span>\n      </div>\n   </div>\n   <div *ngIf=\"!disabled && open\" class=\"drop-panel\">\n      <ul\n         id=\"workspace-list\"\n         class=\"workspace-list\"\n         [ngStyle]=\"{ 'max-height': height + 'px' }\">\n         <li\n            #listItem\n            *ngFor=\"let workspace of workspaces; let i = index\"\n            class=\"workspace\"\n            [ngClass]=\"{\n               'workspace--focused': i == currentItemIndex && !workspace.disabled,\n               'workspace--disabled': workspace.disabled\n            }\"\n            (click)=\"onSelectItem(workspace)\">\n            <div class=\"item\">\n               <span class=\"title\">{{ workspace.title }}</span>\n               <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n            </div>\n            <span *ngIf=\"i === selectedItemIndex\" class=\"active-icon fas fa-check\"></span>\n         </li>\n      </ul>\n      <div *ngIf=\"showFooterButton\" class=\"footer\">\n         <div class=\"footer__button\" (click)=\"onFooterButtonClick()\">\n            <span class=\"footer__button__icon fas fa-plus\"></span>\n            <span class=\"footer__button__title\">{{ footerButtonLabel }}</span>\n         </div>\n      </div>\n   </div>\n</div>",
+            styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{-ms-flex-align:center;align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;margin:0 12px}.workspace-switch .drop-panel{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;margin:20px 0;padding-top:4px;position:absolute;width:324px}.workspace-switch .drop-panel .workspace-list{list-style:none;overflow:auto;padding:0}.workspace-switch .drop-panel .workspace-list .workspace{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none}.workspace-switch .drop-panel .workspace-list .workspace .active-icon{color:#7892a1;font-size:12px;margin:0 12px}.workspace-switch .drop-panel .workspace-list .workspace--focused{background-color:#f1f7f8}.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .subtitle,.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .title{color:#c1c1cc}.workspace-switch .drop-panel .workspace-list .workspace:hover:not(.workspace--disabled){background-color:#f1f7f8}.workspace-switch .drop-panel .footer{border-top:1px solid #ccc;padding:12px}.workspace-switch .drop-panel .footer .footer__button{-ms-flex-align:center;align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.workspace-switch .drop-panel .footer .footer__button .footer__button__icon{color:#333;margin-right:8px}.workspace-switch .drop-panel .footer .footer__button:active{border:1px solid #428bca}.workspace-switch .item{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding:12px}.workspace-switch .item .title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;text-transform:uppercase}.workspace-switch .item .subtitle{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.workspace-switch:focus{border:1px solid #428bca}.workspace-switch--disabled .button{cursor:default}.workspace-switch--disabled .button .icons,.workspace-switch--disabled .item .subtitle,.workspace-switch--disabled .item .title{color:#ccc}"]
         })
     ], WorkspaceSwitchComponent);
     return WorkspaceSwitchComponent;