@seniorsistemas/angular-components 17.7.1 → 17.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/seniorsistemas-angular-components.umd.js +39 -5
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +2 -2
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/workspace-switch/workspace-switch.component.d.ts +10 -3
- package/esm2015/components/workspace-switch/workspace-switch.component.js +37 -7
- package/esm5/components/workspace-switch/workspace-switch.component.js +41 -7
- package/fesm2015/seniorsistemas-angular-components.js +36 -6
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +40 -6
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -17310,18 +17310,34 @@
|
|
|
17310
17310
|
}());
|
|
17311
17311
|
|
|
17312
17312
|
var WorkspaceSwitchComponent = /** @class */ (function () {
|
|
17313
|
-
function WorkspaceSwitchComponent(eRef) {
|
|
17313
|
+
function WorkspaceSwitchComponent(eRef, changeDetectorRef) {
|
|
17314
17314
|
this.eRef = eRef;
|
|
17315
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
17315
17316
|
this.footerButtonLabel = "Adicionar";
|
|
17316
17317
|
this.showFooterButton = true;
|
|
17317
17318
|
this.disabled = false;
|
|
17318
17319
|
this.footerButtonClicked = new core.EventEmitter();
|
|
17319
17320
|
this.selected = new core.EventEmitter();
|
|
17320
|
-
this.
|
|
17321
|
+
this.height = 0;
|
|
17321
17322
|
this.selectedItemIndex = 0;
|
|
17322
17323
|
this.currentItemIndex = 0;
|
|
17324
|
+
this._open = false;
|
|
17323
17325
|
this.tabindex = 0;
|
|
17324
17326
|
}
|
|
17327
|
+
Object.defineProperty(WorkspaceSwitchComponent.prototype, "open", {
|
|
17328
|
+
get: function () {
|
|
17329
|
+
return this._open;
|
|
17330
|
+
},
|
|
17331
|
+
set: function (open) {
|
|
17332
|
+
this._open = open;
|
|
17333
|
+
this.changeDetectorRef.detectChanges();
|
|
17334
|
+
if (open) {
|
|
17335
|
+
this._calculateListMaxHeight();
|
|
17336
|
+
}
|
|
17337
|
+
},
|
|
17338
|
+
enumerable: true,
|
|
17339
|
+
configurable: true
|
|
17340
|
+
});
|
|
17325
17341
|
WorkspaceSwitchComponent.prototype.onClickout = function (event) {
|
|
17326
17342
|
if (!this.eRef.nativeElement.contains(event.target)) {
|
|
17327
17343
|
this.open = false;
|
|
@@ -17345,11 +17361,13 @@
|
|
|
17345
17361
|
else if (event.key === "ArrowDown") {
|
|
17346
17362
|
if (this.currentItemIndex < this.workspaces.length - 1) {
|
|
17347
17363
|
this.currentItemIndex++;
|
|
17364
|
+
this._scrollToCurrentItem();
|
|
17348
17365
|
}
|
|
17349
17366
|
}
|
|
17350
17367
|
else if (event.key === "ArrowUp") {
|
|
17351
17368
|
if (this.currentItemIndex > 0) {
|
|
17352
17369
|
this.currentItemIndex--;
|
|
17370
|
+
this._scrollToCurrentItem();
|
|
17353
17371
|
}
|
|
17354
17372
|
}
|
|
17355
17373
|
};
|
|
@@ -17380,8 +17398,21 @@
|
|
|
17380
17398
|
this.open = false;
|
|
17381
17399
|
this.footerButtonClicked.emit();
|
|
17382
17400
|
};
|
|
17401
|
+
WorkspaceSwitchComponent.prototype._calculateListMaxHeight = function () {
|
|
17402
|
+
var workspaceListRef = this.eRef.nativeElement.querySelector("#workspace-list");
|
|
17403
|
+
var top = workspaceListRef.getBoundingClientRect().top;
|
|
17404
|
+
this.height = window.innerHeight - top - 20 - (this.showFooterButton ? 64 : 0);
|
|
17405
|
+
this.changeDetectorRef.detectChanges();
|
|
17406
|
+
};
|
|
17407
|
+
WorkspaceSwitchComponent.prototype._scrollToCurrentItem = function () {
|
|
17408
|
+
var currentItem = this.listItems.toArray()[this.currentItemIndex];
|
|
17409
|
+
if (currentItem) {
|
|
17410
|
+
currentItem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
17411
|
+
}
|
|
17412
|
+
};
|
|
17383
17413
|
WorkspaceSwitchComponent.ctorParameters = function () { return [
|
|
17384
|
-
{ type: core.ElementRef }
|
|
17414
|
+
{ type: core.ElementRef },
|
|
17415
|
+
{ type: core.ChangeDetectorRef }
|
|
17385
17416
|
]; };
|
|
17386
17417
|
__decorate([
|
|
17387
17418
|
core.Input()
|
|
@@ -17401,6 +17432,9 @@
|
|
|
17401
17432
|
__decorate([
|
|
17402
17433
|
core.Output()
|
|
17403
17434
|
], WorkspaceSwitchComponent.prototype, "selected", void 0);
|
|
17435
|
+
__decorate([
|
|
17436
|
+
core.ViewChildren('listItem')
|
|
17437
|
+
], WorkspaceSwitchComponent.prototype, "listItems", void 0);
|
|
17404
17438
|
__decorate([
|
|
17405
17439
|
core.HostBinding("attr.tabindex")
|
|
17406
17440
|
], WorkspaceSwitchComponent.prototype, "tabindex", void 0);
|
|
@@ -17413,8 +17447,8 @@
|
|
|
17413
17447
|
WorkspaceSwitchComponent = __decorate([
|
|
17414
17448
|
core.Component({
|
|
17415
17449
|
selector: "s-workspace-switch",
|
|
17416
|
-
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=\"
|
|
17417
|
-
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 .
|
|
17450
|
+
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>",
|
|
17451
|
+
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}"]
|
|
17418
17452
|
})
|
|
17419
17453
|
], WorkspaceSwitchComponent);
|
|
17420
17454
|
return WorkspaceSwitchComponent;
|